@zidsa/zidmui 2.5.15 → 2.5.16

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.
@@ -5,18 +5,42 @@ const material = require("@mui/material");
5
5
  const AppIconBox = ({
6
6
  children,
7
7
  background = "default",
8
+ size = "large",
8
9
  ...props
9
10
  }) => {
10
- return /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { "data-background-color": background, ...props, children });
11
+ return /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { "data-background-color": background, "data-size": size, ...props, children });
11
12
  };
12
13
  const IconWrapper = material.styled(material.Box)(({ theme }) => ({
13
14
  display: "flex",
14
15
  alignItems: "center",
15
16
  justifyContent: "center",
16
- padding: theme.spacing(1.5),
17
17
  borderRadius: theme.spacing(1.5),
18
18
  backgroundColor: theme.palette.action.selected,
19
19
  flexShrink: 0,
20
+ // Size variants
21
+ "&[data-size='large']": {
22
+ width: 48,
23
+ height: 48
24
+ },
25
+ "&[data-size='medium']": {
26
+ width: 40,
27
+ height: 40,
28
+ "& svg": {
29
+ fontSize: 20,
30
+ width: 20,
31
+ height: 20
32
+ }
33
+ },
34
+ "&[data-size='small']": {
35
+ width: 24,
36
+ height: 24,
37
+ borderRadius: theme.spacing(0.5),
38
+ "& svg": {
39
+ fontSize: 16,
40
+ width: 16,
41
+ height: 16
42
+ }
43
+ },
20
44
  "&[data-background-color='default']": {
21
45
  backgroundColor: theme.palette.action.hover
22
46
  },
@@ -1 +1 @@
1
- {"version":3,"file":"app-icon-box.js","sources":["../../../../src/components/app-icon-box.tsx"],"sourcesContent":["import { Box, BoxProps, alpha, styled } from '@mui/material';\n\n//\n//\n\nexport type AppIconBoxbackgroundColor =\n | 'default'\n | 'primary'\n | 'blue'\n | 'red'\n | 'green'\n | 'yellow'\n | 'orange'\n | 'secondary';\n\nexport type AppIconBoxProps = Omit<BoxProps, 'color'> & {\n children: React.ReactNode;\n background?: AppIconBoxbackgroundColor;\n};\n\nexport const AppIconBox: React.FC<AppIconBoxProps> = ({\n children,\n background = 'default',\n ...props\n}) => {\n return (\n <IconWrapper data-background-color={background} {...props}>\n {children}\n </IconWrapper>\n );\n};\n\n//\n\nconst IconWrapper = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n padding: theme.spacing(1.5),\n borderRadius: theme.spacing(1.5),\n backgroundColor: theme.palette.action.selected,\n flexShrink: 0,\n\n \"&[data-background-color='default']\": {\n backgroundColor: theme.palette.action.hover,\n },\n \"&[data-background-color='primary']\": {\n backgroundColor: theme.palette.colors.primary[100],\n },\n \"&[data-background-color='blue']\": {\n backgroundColor: theme.palette.colors.blue[100],\n },\n \"&[data-background-color='red']\": {\n backgroundColor: theme.palette.colors.red[100],\n },\n \"&[data-background-color='green']\": {\n backgroundColor: theme.palette.colors.green[100],\n },\n \"&[data-background-color='yellow']\": {\n backgroundColor: theme.palette.colors.yellow[100],\n },\n \"&[data-background-color='orange']\": {\n backgroundColor: theme.palette.colors.orange[100],\n },\n \"&[data-background-color='secondary']\": {\n backgroundColor: alpha(theme.palette.secondary.main, 0.08),\n },\n\n ...theme.applyStyles('dark', {\n \"&[data-background-color='default']\": {\n backgroundColor: theme.palette.action.hover,\n },\n \"&[data-background-color='primary']\": {\n backgroundColor: alpha(theme.palette.colors.primary[900], 0.3),\n },\n \"&[data-background-color='blue']\": {\n backgroundColor: alpha(theme.palette.colors.blue[900], 0.3),\n },\n \"&[data-background-color='red']\": {\n backgroundColor: alpha(theme.palette.colors.red[900], 0.3),\n },\n \"&[data-background-color='green']\": {\n backgroundColor: alpha(theme.palette.colors.green[900], 0.3),\n },\n \"&[data-background-color='yellow']\": {\n backgroundColor: alpha(theme.palette.colors.yellow[900], 0.3),\n },\n \"&[data-background-color='orange']\": {\n backgroundColor: alpha(theme.palette.colors.orange[900], 0.3),\n },\n \"&[data-background-color='secondary']\": {\n backgroundColor: alpha(theme.palette.secondary.main, 0.15),\n },\n }),\n}));\n"],"names":["styled","Box","alpha"],"mappings":";;;;AAoBO,MAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,wCACG,aAAA,EAAY,yBAAuB,YAAa,GAAG,OACjD,UACH;AAEJ;AAIA,MAAM,cAAcA,SAAAA,OAAOC,SAAAA,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EAC9C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,SAAS,MAAM,QAAQ,GAAG;AAAA,EAC1B,cAAc,MAAM,QAAQ,GAAG;AAAA,EAC/B,iBAAiB,MAAM,QAAQ,OAAO;AAAA,EACtC,YAAY;AAAA,EAEZ,sCAAsC;AAAA,IACpC,iBAAiB,MAAM,QAAQ,OAAO;AAAA,EAAA;AAAA,EAExC,sCAAsC;AAAA,IACpC,iBAAiB,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,EAAA;AAAA,EAEnD,mCAAmC;AAAA,IACjC,iBAAiB,MAAM,QAAQ,OAAO,KAAK,GAAG;AAAA,EAAA;AAAA,EAEhD,kCAAkC;AAAA,IAChC,iBAAiB,MAAM,QAAQ,OAAO,IAAI,GAAG;AAAA,EAAA;AAAA,EAE/C,oCAAoC;AAAA,IAClC,iBAAiB,MAAM,QAAQ,OAAO,MAAM,GAAG;AAAA,EAAA;AAAA,EAEjD,qCAAqC;AAAA,IACnC,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElD,qCAAqC;AAAA,IACnC,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElD,wCAAwC;AAAA,IACtC,iBAAiBC,SAAAA,MAAM,MAAM,QAAQ,UAAU,MAAM,IAAI;AAAA,EAAA;AAAA,EAG3D,GAAG,MAAM,YAAY,QAAQ;AAAA,IAC3B,sCAAsC;AAAA,MACpC,iBAAiB,MAAM,QAAQ,OAAO;AAAA,IAAA;AAAA,IAExC,sCAAsC;AAAA,MACpC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,QAAQ,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE/D,mCAAmC;AAAA,MACjC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,KAAK,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE5D,kCAAkC;AAAA,MAChC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,IAAI,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE3D,oCAAoC;AAAA,MAClC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,MAAM,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE7D,qCAAqC;AAAA,MACnC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE9D,qCAAqC;AAAA,MACnC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE9D,wCAAwC;AAAA,MACtC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,UAAU,MAAM,IAAI;AAAA,IAAA;AAAA,EAC3D,CACD;AACH,EAAE;;"}
1
+ {"version":3,"file":"app-icon-box.js","sources":["../../../../src/components/app-icon-box.tsx"],"sourcesContent":["import { Box, BoxProps, alpha, styled } from '@mui/material';\n\n//\n//\n\nexport type AppIconBoxbackgroundColor =\n | 'default'\n | 'primary'\n | 'blue'\n | 'red'\n | 'green'\n | 'yellow'\n | 'orange'\n | 'secondary';\n\nexport type AppIconBoxSize = 'small' | 'medium' | 'large';\n\nexport type AppIconBoxProps = Omit<BoxProps, 'color'> & {\n children: React.ReactNode;\n background?: AppIconBoxbackgroundColor;\n size?: AppIconBoxSize;\n};\n\nexport const AppIconBox: React.FC<AppIconBoxProps> = ({\n children,\n background = 'default',\n size = 'large',\n ...props\n}) => {\n return (\n <IconWrapper data-background-color={background} data-size={size} {...props}>\n {children}\n </IconWrapper>\n );\n};\n\n//\n\nconst IconWrapper = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: theme.spacing(1.5),\n backgroundColor: theme.palette.action.selected,\n flexShrink: 0,\n\n // Size variants\n \"&[data-size='large']\": {\n width: 48,\n height: 48,\n },\n \"&[data-size='medium']\": {\n width: 40,\n height: 40,\n '& svg': {\n fontSize: 20,\n width: 20,\n height: 20,\n },\n },\n \"&[data-size='small']\": {\n width: 24,\n height: 24,\n borderRadius: theme.spacing(0.5),\n '& svg': {\n fontSize: 16,\n width: 16,\n height: 16,\n },\n },\n\n \"&[data-background-color='default']\": {\n backgroundColor: theme.palette.action.hover,\n },\n \"&[data-background-color='primary']\": {\n backgroundColor: theme.palette.colors.primary[100],\n },\n \"&[data-background-color='blue']\": {\n backgroundColor: theme.palette.colors.blue[100],\n },\n \"&[data-background-color='red']\": {\n backgroundColor: theme.palette.colors.red[100],\n },\n \"&[data-background-color='green']\": {\n backgroundColor: theme.palette.colors.green[100],\n },\n \"&[data-background-color='yellow']\": {\n backgroundColor: theme.palette.colors.yellow[100],\n },\n \"&[data-background-color='orange']\": {\n backgroundColor: theme.palette.colors.orange[100],\n },\n \"&[data-background-color='secondary']\": {\n backgroundColor: alpha(theme.palette.secondary.main, 0.08),\n },\n\n ...theme.applyStyles('dark', {\n \"&[data-background-color='default']\": {\n backgroundColor: theme.palette.action.hover,\n },\n \"&[data-background-color='primary']\": {\n backgroundColor: alpha(theme.palette.colors.primary[900], 0.3),\n },\n \"&[data-background-color='blue']\": {\n backgroundColor: alpha(theme.palette.colors.blue[900], 0.3),\n },\n \"&[data-background-color='red']\": {\n backgroundColor: alpha(theme.palette.colors.red[900], 0.3),\n },\n \"&[data-background-color='green']\": {\n backgroundColor: alpha(theme.palette.colors.green[900], 0.3),\n },\n \"&[data-background-color='yellow']\": {\n backgroundColor: alpha(theme.palette.colors.yellow[900], 0.3),\n },\n \"&[data-background-color='orange']\": {\n backgroundColor: alpha(theme.palette.colors.orange[900], 0.3),\n },\n \"&[data-background-color='secondary']\": {\n backgroundColor: alpha(theme.palette.secondary.main, 0.15),\n },\n }),\n}));\n"],"names":["jsx","styled","Box","alpha"],"mappings":"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"}
@@ -6,7 +6,15 @@ const MuiSvgIcon = {
6
6
  transition: theme.transitions.create("color", {
7
7
  easing: theme.transitions.easing.easeInOut,
8
8
  duration: theme.transitions.duration.standard
9
- })
9
+ }),
10
+ variants: [
11
+ {
12
+ props: { fontSize: "extraSmall" },
13
+ style: {
14
+ fontSize: theme.spacing(2)
15
+ }
16
+ }
17
+ ]
10
18
  })
11
19
  }
12
20
  };
@@ -1 +1 @@
1
- {"version":3,"file":"svg-icon.js","sources":["../../../../../src/theme/components/svg-icon.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiSvgIcon: Components<\n Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiSvgIcon'] = {\n styleOverrides: {\n root: ({ theme }) => ({\n transition: theme.transitions.create('color', {\n easing: theme.transitions.easing.easeInOut,\n duration: theme.transitions.duration.standard,\n }),\n }),\n },\n};\n"],"names":[],"mappings":";;AAKO,MAAM,aAEK;AAAA,EAChB,gBAAgB;AAAA,IACd,MAAM,CAAC,EAAE,aAAa;AAAA,MACpB,YAAY,MAAM,YAAY,OAAO,SAAS;AAAA,QAC5C,QAAQ,MAAM,YAAY,OAAO;AAAA,QACjC,UAAU,MAAM,YAAY,SAAS;AAAA,MAAA,CACtC;AAAA,IAAA;AAAA,EACH;AAEJ;;"}
1
+ {"version":3,"file":"svg-icon.js","sources":["../../../../../src/theme/components/svg-icon.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiSvgIcon: Components<\n Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiSvgIcon'] = {\n styleOverrides: {\n root: ({ theme }) => ({\n transition: theme.transitions.create('color', {\n easing: theme.transitions.easing.easeInOut,\n duration: theme.transitions.duration.standard,\n }),\n variants: [\n {\n props: { fontSize: 'extraSmall' },\n style: {\n fontSize: theme.spacing(2),\n },\n },\n ],\n }),\n },\n};\n"],"names":[],"mappings":";;AAKO,MAAM,aAEK;AAAA,EAChB,gBAAgB;AAAA,IACd,MAAM,CAAC,EAAE,aAAa;AAAA,MACpB,YAAY,MAAM,YAAY,OAAO,SAAS;AAAA,QAC5C,QAAQ,MAAM,YAAY,OAAO;AAAA,QACjC,UAAU,MAAM,YAAY,SAAS;AAAA,MAAA,CACtC;AAAA,MACD,UAAU;AAAA,QACR;AAAA,UACE,OAAO,EAAE,UAAU,aAAA;AAAA,UACnB,OAAO;AAAA,YACL,UAAU,MAAM,QAAQ,CAAC;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEJ;;"}
@@ -3,18 +3,42 @@ import { styled, Box, alpha } from "@mui/material";
3
3
  const AppIconBox = ({
4
4
  children,
5
5
  background = "default",
6
+ size = "large",
6
7
  ...props
7
8
  }) => {
8
- return /* @__PURE__ */ jsx(IconWrapper, { "data-background-color": background, ...props, children });
9
+ return /* @__PURE__ */ jsx(IconWrapper, { "data-background-color": background, "data-size": size, ...props, children });
9
10
  };
10
11
  const IconWrapper = styled(Box)(({ theme }) => ({
11
12
  display: "flex",
12
13
  alignItems: "center",
13
14
  justifyContent: "center",
14
- padding: theme.spacing(1.5),
15
15
  borderRadius: theme.spacing(1.5),
16
16
  backgroundColor: theme.palette.action.selected,
17
17
  flexShrink: 0,
18
+ // Size variants
19
+ "&[data-size='large']": {
20
+ width: 48,
21
+ height: 48
22
+ },
23
+ "&[data-size='medium']": {
24
+ width: 40,
25
+ height: 40,
26
+ "& svg": {
27
+ fontSize: 20,
28
+ width: 20,
29
+ height: 20
30
+ }
31
+ },
32
+ "&[data-size='small']": {
33
+ width: 24,
34
+ height: 24,
35
+ borderRadius: theme.spacing(0.5),
36
+ "& svg": {
37
+ fontSize: 16,
38
+ width: 16,
39
+ height: 16
40
+ }
41
+ },
18
42
  "&[data-background-color='default']": {
19
43
  backgroundColor: theme.palette.action.hover
20
44
  },
@@ -1 +1 @@
1
- {"version":3,"file":"app-icon-box.js","sources":["../../../../src/components/app-icon-box.tsx"],"sourcesContent":["import { Box, BoxProps, alpha, styled } from '@mui/material';\n\n//\n//\n\nexport type AppIconBoxbackgroundColor =\n | 'default'\n | 'primary'\n | 'blue'\n | 'red'\n | 'green'\n | 'yellow'\n | 'orange'\n | 'secondary';\n\nexport type AppIconBoxProps = Omit<BoxProps, 'color'> & {\n children: React.ReactNode;\n background?: AppIconBoxbackgroundColor;\n};\n\nexport const AppIconBox: React.FC<AppIconBoxProps> = ({\n children,\n background = 'default',\n ...props\n}) => {\n return (\n <IconWrapper data-background-color={background} {...props}>\n {children}\n </IconWrapper>\n );\n};\n\n//\n\nconst IconWrapper = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n padding: theme.spacing(1.5),\n borderRadius: theme.spacing(1.5),\n backgroundColor: theme.palette.action.selected,\n flexShrink: 0,\n\n \"&[data-background-color='default']\": {\n backgroundColor: theme.palette.action.hover,\n },\n \"&[data-background-color='primary']\": {\n backgroundColor: theme.palette.colors.primary[100],\n },\n \"&[data-background-color='blue']\": {\n backgroundColor: theme.palette.colors.blue[100],\n },\n \"&[data-background-color='red']\": {\n backgroundColor: theme.palette.colors.red[100],\n },\n \"&[data-background-color='green']\": {\n backgroundColor: theme.palette.colors.green[100],\n },\n \"&[data-background-color='yellow']\": {\n backgroundColor: theme.palette.colors.yellow[100],\n },\n \"&[data-background-color='orange']\": {\n backgroundColor: theme.palette.colors.orange[100],\n },\n \"&[data-background-color='secondary']\": {\n backgroundColor: alpha(theme.palette.secondary.main, 0.08),\n },\n\n ...theme.applyStyles('dark', {\n \"&[data-background-color='default']\": {\n backgroundColor: theme.palette.action.hover,\n },\n \"&[data-background-color='primary']\": {\n backgroundColor: alpha(theme.palette.colors.primary[900], 0.3),\n },\n \"&[data-background-color='blue']\": {\n backgroundColor: alpha(theme.palette.colors.blue[900], 0.3),\n },\n \"&[data-background-color='red']\": {\n backgroundColor: alpha(theme.palette.colors.red[900], 0.3),\n },\n \"&[data-background-color='green']\": {\n backgroundColor: alpha(theme.palette.colors.green[900], 0.3),\n },\n \"&[data-background-color='yellow']\": {\n backgroundColor: alpha(theme.palette.colors.yellow[900], 0.3),\n },\n \"&[data-background-color='orange']\": {\n backgroundColor: alpha(theme.palette.colors.orange[900], 0.3),\n },\n \"&[data-background-color='secondary']\": {\n backgroundColor: alpha(theme.palette.secondary.main, 0.15),\n },\n }),\n}));\n"],"names":[],"mappings":";;AAoBO,MAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,6BACG,aAAA,EAAY,yBAAuB,YAAa,GAAG,OACjD,UACH;AAEJ;AAIA,MAAM,cAAc,OAAO,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EAC9C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,SAAS,MAAM,QAAQ,GAAG;AAAA,EAC1B,cAAc,MAAM,QAAQ,GAAG;AAAA,EAC/B,iBAAiB,MAAM,QAAQ,OAAO;AAAA,EACtC,YAAY;AAAA,EAEZ,sCAAsC;AAAA,IACpC,iBAAiB,MAAM,QAAQ,OAAO;AAAA,EAAA;AAAA,EAExC,sCAAsC;AAAA,IACpC,iBAAiB,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,EAAA;AAAA,EAEnD,mCAAmC;AAAA,IACjC,iBAAiB,MAAM,QAAQ,OAAO,KAAK,GAAG;AAAA,EAAA;AAAA,EAEhD,kCAAkC;AAAA,IAChC,iBAAiB,MAAM,QAAQ,OAAO,IAAI,GAAG;AAAA,EAAA;AAAA,EAE/C,oCAAoC;AAAA,IAClC,iBAAiB,MAAM,QAAQ,OAAO,MAAM,GAAG;AAAA,EAAA;AAAA,EAEjD,qCAAqC;AAAA,IACnC,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElD,qCAAqC;AAAA,IACnC,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElD,wCAAwC;AAAA,IACtC,iBAAiB,MAAM,MAAM,QAAQ,UAAU,MAAM,IAAI;AAAA,EAAA;AAAA,EAG3D,GAAG,MAAM,YAAY,QAAQ;AAAA,IAC3B,sCAAsC;AAAA,MACpC,iBAAiB,MAAM,QAAQ,OAAO;AAAA,IAAA;AAAA,IAExC,sCAAsC;AAAA,MACpC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,QAAQ,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE/D,mCAAmC;AAAA,MACjC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,KAAK,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE5D,kCAAkC;AAAA,MAChC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,IAAI,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE3D,oCAAoC;AAAA,MAClC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,MAAM,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE7D,qCAAqC;AAAA,MACnC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE9D,qCAAqC;AAAA,MACnC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE9D,wCAAwC;AAAA,MACtC,iBAAiB,MAAM,MAAM,QAAQ,UAAU,MAAM,IAAI;AAAA,IAAA;AAAA,EAC3D,CACD;AACH,EAAE;"}
1
+ {"version":3,"file":"app-icon-box.js","sources":["../../../../src/components/app-icon-box.tsx"],"sourcesContent":["import { Box, BoxProps, alpha, styled } from '@mui/material';\n\n//\n//\n\nexport type AppIconBoxbackgroundColor =\n | 'default'\n | 'primary'\n | 'blue'\n | 'red'\n | 'green'\n | 'yellow'\n | 'orange'\n | 'secondary';\n\nexport type AppIconBoxSize = 'small' | 'medium' | 'large';\n\nexport type AppIconBoxProps = Omit<BoxProps, 'color'> & {\n children: React.ReactNode;\n background?: AppIconBoxbackgroundColor;\n size?: AppIconBoxSize;\n};\n\nexport const AppIconBox: React.FC<AppIconBoxProps> = ({\n children,\n background = 'default',\n size = 'large',\n ...props\n}) => {\n return (\n <IconWrapper data-background-color={background} data-size={size} {...props}>\n {children}\n </IconWrapper>\n );\n};\n\n//\n\nconst IconWrapper = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: theme.spacing(1.5),\n backgroundColor: theme.palette.action.selected,\n flexShrink: 0,\n\n // Size variants\n \"&[data-size='large']\": {\n width: 48,\n height: 48,\n },\n \"&[data-size='medium']\": {\n width: 40,\n height: 40,\n '& svg': {\n fontSize: 20,\n width: 20,\n height: 20,\n },\n },\n \"&[data-size='small']\": {\n width: 24,\n height: 24,\n borderRadius: theme.spacing(0.5),\n '& svg': {\n fontSize: 16,\n width: 16,\n height: 16,\n },\n },\n\n \"&[data-background-color='default']\": {\n backgroundColor: theme.palette.action.hover,\n },\n \"&[data-background-color='primary']\": {\n backgroundColor: theme.palette.colors.primary[100],\n },\n \"&[data-background-color='blue']\": {\n backgroundColor: theme.palette.colors.blue[100],\n },\n \"&[data-background-color='red']\": {\n backgroundColor: theme.palette.colors.red[100],\n },\n \"&[data-background-color='green']\": {\n backgroundColor: theme.palette.colors.green[100],\n },\n \"&[data-background-color='yellow']\": {\n backgroundColor: theme.palette.colors.yellow[100],\n },\n \"&[data-background-color='orange']\": {\n backgroundColor: theme.palette.colors.orange[100],\n },\n \"&[data-background-color='secondary']\": {\n backgroundColor: alpha(theme.palette.secondary.main, 0.08),\n },\n\n ...theme.applyStyles('dark', {\n \"&[data-background-color='default']\": {\n backgroundColor: theme.palette.action.hover,\n },\n \"&[data-background-color='primary']\": {\n backgroundColor: alpha(theme.palette.colors.primary[900], 0.3),\n },\n \"&[data-background-color='blue']\": {\n backgroundColor: alpha(theme.palette.colors.blue[900], 0.3),\n },\n \"&[data-background-color='red']\": {\n backgroundColor: alpha(theme.palette.colors.red[900], 0.3),\n },\n \"&[data-background-color='green']\": {\n backgroundColor: alpha(theme.palette.colors.green[900], 0.3),\n },\n \"&[data-background-color='yellow']\": {\n backgroundColor: alpha(theme.palette.colors.yellow[900], 0.3),\n },\n \"&[data-background-color='orange']\": {\n backgroundColor: alpha(theme.palette.colors.orange[900], 0.3),\n },\n \"&[data-background-color='secondary']\": {\n backgroundColor: alpha(theme.palette.secondary.main, 0.15),\n },\n }),\n}));\n"],"names":[],"mappings":";;AAuBO,MAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA,aAAa;AAAA,EACb,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACJ,SACE,oBAAC,eAAY,yBAAuB,YAAY,aAAW,MAAO,GAAG,OAClE,UACH;AAEJ;AAIA,MAAM,cAAc,OAAO,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EAC9C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,cAAc,MAAM,QAAQ,GAAG;AAAA,EAC/B,iBAAiB,MAAM,QAAQ,OAAO;AAAA,EACtC,YAAY;AAAA;AAAA,EAGZ,wBAAwB;AAAA,IACtB,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,yBAAyB;AAAA,IACvB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,wBAAwB;AAAA,IACtB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc,MAAM,QAAQ,GAAG;AAAA,IAC/B,SAAS;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAGF,sCAAsC;AAAA,IACpC,iBAAiB,MAAM,QAAQ,OAAO;AAAA,EAAA;AAAA,EAExC,sCAAsC;AAAA,IACpC,iBAAiB,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,EAAA;AAAA,EAEnD,mCAAmC;AAAA,IACjC,iBAAiB,MAAM,QAAQ,OAAO,KAAK,GAAG;AAAA,EAAA;AAAA,EAEhD,kCAAkC;AAAA,IAChC,iBAAiB,MAAM,QAAQ,OAAO,IAAI,GAAG;AAAA,EAAA;AAAA,EAE/C,oCAAoC;AAAA,IAClC,iBAAiB,MAAM,QAAQ,OAAO,MAAM,GAAG;AAAA,EAAA;AAAA,EAEjD,qCAAqC;AAAA,IACnC,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElD,qCAAqC;AAAA,IACnC,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElD,wCAAwC;AAAA,IACtC,iBAAiB,MAAM,MAAM,QAAQ,UAAU,MAAM,IAAI;AAAA,EAAA;AAAA,EAG3D,GAAG,MAAM,YAAY,QAAQ;AAAA,IAC3B,sCAAsC;AAAA,MACpC,iBAAiB,MAAM,QAAQ,OAAO;AAAA,IAAA;AAAA,IAExC,sCAAsC;AAAA,MACpC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,QAAQ,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE/D,mCAAmC;AAAA,MACjC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,KAAK,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE5D,kCAAkC;AAAA,MAChC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,IAAI,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE3D,oCAAoC;AAAA,MAClC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,MAAM,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE7D,qCAAqC;AAAA,MACnC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE9D,qCAAqC;AAAA,MACnC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE9D,wCAAwC;AAAA,MACtC,iBAAiB,MAAM,MAAM,QAAQ,UAAU,MAAM,IAAI;AAAA,IAAA;AAAA,EAC3D,CACD;AACH,EAAE;"}
@@ -4,7 +4,15 @@ const MuiSvgIcon = {
4
4
  transition: theme.transitions.create("color", {
5
5
  easing: theme.transitions.easing.easeInOut,
6
6
  duration: theme.transitions.duration.standard
7
- })
7
+ }),
8
+ variants: [
9
+ {
10
+ props: { fontSize: "extraSmall" },
11
+ style: {
12
+ fontSize: theme.spacing(2)
13
+ }
14
+ }
15
+ ]
8
16
  })
9
17
  }
10
18
  };
@@ -1 +1 @@
1
- {"version":3,"file":"svg-icon.js","sources":["../../../../../src/theme/components/svg-icon.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiSvgIcon: Components<\n Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiSvgIcon'] = {\n styleOverrides: {\n root: ({ theme }) => ({\n transition: theme.transitions.create('color', {\n easing: theme.transitions.easing.easeInOut,\n duration: theme.transitions.duration.standard,\n }),\n }),\n },\n};\n"],"names":[],"mappings":"AAKO,MAAM,aAEK;AAAA,EAChB,gBAAgB;AAAA,IACd,MAAM,CAAC,EAAE,aAAa;AAAA,MACpB,YAAY,MAAM,YAAY,OAAO,SAAS;AAAA,QAC5C,QAAQ,MAAM,YAAY,OAAO;AAAA,QACjC,UAAU,MAAM,YAAY,SAAS;AAAA,MAAA,CACtC;AAAA,IAAA;AAAA,EACH;AAEJ;"}
1
+ {"version":3,"file":"svg-icon.js","sources":["../../../../../src/theme/components/svg-icon.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiSvgIcon: Components<\n Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiSvgIcon'] = {\n styleOverrides: {\n root: ({ theme }) => ({\n transition: theme.transitions.create('color', {\n easing: theme.transitions.easing.easeInOut,\n duration: theme.transitions.duration.standard,\n }),\n variants: [\n {\n props: { fontSize: 'extraSmall' },\n style: {\n fontSize: theme.spacing(2),\n },\n },\n ],\n }),\n },\n};\n"],"names":[],"mappings":"AAKO,MAAM,aAEK;AAAA,EAChB,gBAAgB;AAAA,IACd,MAAM,CAAC,EAAE,aAAa;AAAA,MACpB,YAAY,MAAM,YAAY,OAAO,SAAS;AAAA,QAC5C,QAAQ,MAAM,YAAY,OAAO;AAAA,QACjC,UAAU,MAAM,YAAY,SAAS;AAAA,MAAA,CACtC;AAAA,MACD,UAAU;AAAA,QACR;AAAA,UACE,OAAO,EAAE,UAAU,aAAA;AAAA,UACnB,OAAO;AAAA,YACL,UAAU,MAAM,QAAQ,CAAC;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEJ;"}
@@ -1,7 +1,9 @@
1
1
  import { BoxProps } from '@mui/material';
2
2
  export type AppIconBoxbackgroundColor = 'default' | 'primary' | 'blue' | 'red' | 'green' | 'yellow' | 'orange' | 'secondary';
3
+ export type AppIconBoxSize = 'small' | 'medium' | 'large';
3
4
  export type AppIconBoxProps = Omit<BoxProps, 'color'> & {
4
5
  children: React.ReactNode;
5
6
  background?: AppIconBoxbackgroundColor;
7
+ size?: AppIconBoxSize;
6
8
  };
7
9
  export declare const AppIconBox: React.FC<AppIconBoxProps>;
@@ -24,6 +24,13 @@ declare module '@mui/material/IconButton' {
24
24
  extraSmall: true;
25
25
  }
26
26
  }
27
+
28
+ declare module '@mui/material/SvgIcon' {
29
+ interface SvgIconPropsSizeOverrides {
30
+ extraSmall: true;
31
+ }
32
+ }
33
+
27
34
  declare module '@mui/material/Radio' {
28
35
  interface RadioPropsSizeOverrides {
29
36
  small: true;