@zidsa/zidmui 3.1.0 → 3.1.2

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.
@@ -23,6 +23,7 @@ const AppCard = ({
23
23
  actions,
24
24
  actionsProps,
25
25
  loading,
26
+ cardContentProps,
26
27
  ...props
27
28
  }) => {
28
29
  const hasActions = Boolean(actions && React.Children.toArray(actions)?.length > 0);
@@ -49,7 +50,7 @@ const AppCard = ({
49
50
  ] }),
50
51
  titleAction && /* @__PURE__ */ jsxRuntime.jsx(stackRow.StackRow, { children: titleAction })
51
52
  ] }),
52
- /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { children: [
53
+ /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { ...cardContentProps, children: [
53
54
  children,
54
55
  hasActions && !loading && /* @__PURE__ */ jsxRuntime.jsx(stackRow.StackRow, { justifyContent: "end", ...actionsProps, children: actions })
55
56
  ] })
@@ -1 +1 @@
1
- {"version":3,"file":"app-card.js","sources":["../../../../src/components/app-card.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AppTypography, type AppTypographyProps } from './app-typography';\n\nimport { type Theme, SxProps, Card, CardContent, Divider } from '@mui/material';\nimport { StackRow, StackRowProps } from './stack-row';\nimport { StackColumn, StackColumnProps } from './stack-column';\nimport { styled } from '@mui/material/styles';\n\n//\n//\n\nexport type AppCardColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport type AppCardCorners = 'grouped' | 'all';\n\nexport type AppCardProps = {\n children?: React.ReactNode;\n color?: AppCardColor;\n roundedCorners?: AppCardCorners;\n title?: string | React.ReactNode;\n headerProps?: StackRowProps;\n titleContainerProps?: StackColumnProps;\n titleProps?: AppTypographyProps;\n titlePrefix?: React.ReactNode;\n titleSuffix?: React.ReactNode;\n titleAction?: React.ReactNode;\n titleDivider?: boolean;\n description?: React.ReactNode;\n descriptionProps?: AppTypographyProps;\n sx?: SxProps<Theme>;\n loading?: boolean;\n actions?: React.ReactElement | null | (React.ReactElement | null)[];\n actionsProps?: StackRowProps;\n};\n\nexport const AppCard: React.FC<AppCardProps> = ({\n color,\n title,\n description,\n descriptionProps,\n headerProps,\n titleContainerProps,\n titleProps,\n titleSuffix,\n titleAction,\n titleDivider,\n titlePrefix,\n children,\n actions,\n actionsProps,\n loading,\n ...props\n}) => {\n const hasActions = Boolean(actions && React.Children.toArray(actions)?.length > 0);\n\n return (\n <Card color={color} {...props}>\n <CardHead {...headerProps}>\n {titlePrefix}\n {(!!title || !!description) && (\n <StackColumn gap={0.25} width=\"100%\" {...titleContainerProps}>\n {typeof title === 'string' ? (\n <AppTypography variant=\"h6\" color=\"text.primary\" gap={1} {...titleProps}>\n {title} {titleSuffix ? titleSuffix : null}\n </AppTypography>\n ) : (\n title\n )}\n\n {titleDivider && <Divider />}\n\n {description && (\n <AppTypography\n variant=\"body2\"\n color=\"text.primary\"\n whiteSpace=\"pre-line\"\n {...descriptionProps}\n >\n {description}\n </AppTypography>\n )}\n </StackColumn>\n )}\n {titleAction && <StackRow>{titleAction}</StackRow>}\n </CardHead>\n\n <CardContent>\n {children}\n\n {hasActions && !loading && (\n <StackRow justifyContent=\"end\" {...actionsProps}>\n {actions}\n </StackRow>\n )}\n </CardContent>\n </Card>\n );\n};\n\nconst CardHead = styled(StackRow)(({ theme }) => {\n return {\n gap: theme.spacing(1),\n padding: theme.spacing(1.5),\n paddingBottom: 0,\n width: '100%',\n ':empty': {\n display: 'none',\n },\n };\n});\n"],"names":["jsxs","Card","StackColumn","AppTypography","Divider","jsx","StackRow","CardContent","styled"],"mappings":";;;;;;;;;AAoCO,MAAM,UAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,aAAa,QAAQ,WAAW,MAAM,SAAS,QAAQ,OAAO,GAAG,SAAS,CAAC;AAEjF,SACEA,2BAAAA,KAACC,SAAAA,MAAA,EAAK,OAAe,GAAG,OACtB,UAAA;AAAA,IAAAD,2BAAAA,KAAC,UAAA,EAAU,GAAG,aACX,UAAA;AAAA,MAAA;AAAA,OACC,CAAC,CAAC,SAAS,CAAC,CAAC,gBACbA,2BAAAA,KAACE,YAAAA,aAAA,EAAY,KAAK,MAAM,OAAM,QAAQ,GAAG,qBACtC,UAAA;AAAA,QAAA,OAAO,UAAU,WAChBF,2BAAAA,KAACG,cAAAA,eAAA,EAAc,SAAQ,MAAK,OAAM,gBAAe,KAAK,GAAI,GAAG,YAC1D,UAAA;AAAA,UAAA;AAAA,UAAM;AAAA,UAAE,cAAc,cAAc;AAAA,QAAA,EAAA,CACvC,IAEA;AAAA,QAGD,+CAAiBC,SAAAA,SAAA,EAAQ;AAAA,QAEzB,eACCC,2BAAAA;AAAAA,UAACF,cAAAA;AAAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,YAAW;AAAA,YACV,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,GAEJ;AAAA,MAED,eAAeE,2BAAAA,IAACC,SAAAA,UAAA,EAAU,UAAA,YAAA,CAAY;AAAA,IAAA,GACzC;AAAA,oCAECC,SAAAA,aAAA,EACE,UAAA;AAAA,MAAA;AAAA,MAEA,cAAc,CAAC,WACdF,2BAAAA,IAACC,qBAAS,gBAAe,OAAO,GAAG,cAChC,UAAA,QAAA,CACH;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;AAEA,MAAM,WAAWE,OAAAA,QAAOF,SAAAA,QAAQ,EAAE,CAAC,EAAE,YAAY;AAC/C,SAAO;AAAA,IACL,KAAK,MAAM,QAAQ,CAAC;AAAA,IACpB,SAAS,MAAM,QAAQ,GAAG;AAAA,IAC1B,eAAe;AAAA,IACf,OAAO;AAAA,IACP,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,CAAC;;"}
1
+ {"version":3,"file":"app-card.js","sources":["../../../../src/components/app-card.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AppTypography, type AppTypographyProps } from './app-typography';\n\nimport { type Theme, SxProps, Card, CardContent, Divider, CardContentProps } from '@mui/material';\nimport { StackRow, StackRowProps } from './stack-row';\nimport { StackColumn, StackColumnProps } from './stack-column';\nimport { styled } from '@mui/material/styles';\n\n//\n//\n\nexport type AppCardColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport type AppCardCorners = 'grouped' | 'all';\n\nexport type AppCardProps = {\n children?: React.ReactNode;\n color?: AppCardColor;\n roundedCorners?: AppCardCorners;\n title?: string | React.ReactNode;\n headerProps?: StackRowProps;\n titleContainerProps?: StackColumnProps;\n titleProps?: AppTypographyProps;\n titlePrefix?: React.ReactNode;\n titleSuffix?: React.ReactNode;\n titleAction?: React.ReactNode;\n titleDivider?: boolean;\n description?: React.ReactNode;\n descriptionProps?: AppTypographyProps;\n sx?: SxProps<Theme>;\n loading?: boolean;\n actions?: React.ReactElement | null | (React.ReactElement | null)[];\n actionsProps?: StackRowProps;\n cardContentProps?: CardContentProps;\n};\n\nexport const AppCard: React.FC<AppCardProps> = ({\n color,\n title,\n description,\n descriptionProps,\n headerProps,\n titleContainerProps,\n titleProps,\n titleSuffix,\n titleAction,\n titleDivider,\n titlePrefix,\n children,\n actions,\n actionsProps,\n loading,\n cardContentProps,\n ...props\n}) => {\n const hasActions = Boolean(actions && React.Children.toArray(actions)?.length > 0);\n\n return (\n <Card color={color} {...props}>\n <CardHead {...headerProps}>\n {titlePrefix}\n {(!!title || !!description) && (\n <StackColumn gap={0.25} width=\"100%\" {...titleContainerProps}>\n {typeof title === 'string' ? (\n <AppTypography variant=\"h6\" color=\"text.primary\" gap={1} {...titleProps}>\n {title} {titleSuffix ? titleSuffix : null}\n </AppTypography>\n ) : (\n title\n )}\n\n {titleDivider && <Divider />}\n\n {description && (\n <AppTypography\n variant=\"body2\"\n color=\"text.primary\"\n whiteSpace=\"pre-line\"\n {...descriptionProps}\n >\n {description}\n </AppTypography>\n )}\n </StackColumn>\n )}\n {titleAction && <StackRow>{titleAction}</StackRow>}\n </CardHead>\n\n <CardContent {...cardContentProps}>\n {children}\n\n {hasActions && !loading && (\n <StackRow justifyContent=\"end\" {...actionsProps}>\n {actions}\n </StackRow>\n )}\n </CardContent>\n </Card>\n );\n};\n\nconst CardHead = styled(StackRow)(({ theme }) => {\n return {\n gap: theme.spacing(1),\n padding: theme.spacing(1.5),\n paddingBottom: 0,\n width: '100%',\n ':empty': {\n display: 'none',\n },\n };\n});\n"],"names":["jsxs","Card","StackColumn","AppTypography","Divider","jsx","StackRow","CardContent","styled"],"mappings":";;;;;;;;;AAqCO,MAAM,UAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,aAAa,QAAQ,WAAW,MAAM,SAAS,QAAQ,OAAO,GAAG,SAAS,CAAC;AAEjF,SACEA,2BAAAA,KAACC,SAAAA,MAAA,EAAK,OAAe,GAAG,OACtB,UAAA;AAAA,IAAAD,2BAAAA,KAAC,UAAA,EAAU,GAAG,aACX,UAAA;AAAA,MAAA;AAAA,OACC,CAAC,CAAC,SAAS,CAAC,CAAC,gBACbA,2BAAAA,KAACE,YAAAA,aAAA,EAAY,KAAK,MAAM,OAAM,QAAQ,GAAG,qBACtC,UAAA;AAAA,QAAA,OAAO,UAAU,WAChBF,2BAAAA,KAACG,cAAAA,eAAA,EAAc,SAAQ,MAAK,OAAM,gBAAe,KAAK,GAAI,GAAG,YAC1D,UAAA;AAAA,UAAA;AAAA,UAAM;AAAA,UAAE,cAAc,cAAc;AAAA,QAAA,EAAA,CACvC,IAEA;AAAA,QAGD,+CAAiBC,SAAAA,SAAA,EAAQ;AAAA,QAEzB,eACCC,2BAAAA;AAAAA,UAACF,cAAAA;AAAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,YAAW;AAAA,YACV,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,GAEJ;AAAA,MAED,eAAeE,2BAAAA,IAACC,SAAAA,UAAA,EAAU,UAAA,YAAA,CAAY;AAAA,IAAA,GACzC;AAAA,IAEAN,2BAAAA,KAACO,SAAAA,aAAA,EAAa,GAAG,kBACd,UAAA;AAAA,MAAA;AAAA,MAEA,cAAc,CAAC,WACdF,2BAAAA,IAACC,qBAAS,gBAAe,OAAO,GAAG,cAChC,UAAA,QAAA,CACH;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;AAEA,MAAM,WAAWE,OAAAA,QAAOF,SAAAA,QAAQ,EAAE,CAAC,EAAE,YAAY;AAC/C,SAAO;AAAA,IACL,KAAK,MAAM,QAAQ,CAAC;AAAA,IACpB,SAAS,MAAM,QAAQ,GAAG;AAAA,IAC1B,eAAe;AAAA,IACf,OAAO;AAAA,IACP,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,CAAC;;"}
@@ -65,6 +65,9 @@ const IconWrapper = material.styled(material.Box)(({ theme }) => ({
65
65
  "&[data-background-color='secondary']": {
66
66
  backgroundColor: material.alpha(theme.palette.secondary.main, 0.08)
67
67
  },
68
+ "&[data-background-color='white']": {
69
+ backgroundColor: theme.palette.common.white
70
+ },
68
71
  ...theme.applyStyles("dark", {
69
72
  "&[data-background-color='default']": {
70
73
  backgroundColor: theme.palette.action.hover
@@ -89,6 +92,9 @@ const IconWrapper = material.styled(material.Box)(({ theme }) => ({
89
92
  },
90
93
  "&[data-background-color='secondary']": {
91
94
  backgroundColor: material.alpha(theme.palette.secondary.main, 0.15)
95
+ },
96
+ "&[data-background-color='white']": {
97
+ backgroundColor: material.alpha(theme.palette.common.white, 0.1)
92
98
  }
93
99
  })
94
100
  }));
@@ -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 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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"}
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 | 'white';\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 \"&[data-background-color='white']\": {\n backgroundColor: theme.palette.common.white,\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 \"&[data-background-color='white']\": {\n backgroundColor: alpha(theme.palette.common.white, 0.1),\n },\n }),\n}));\n"],"names":["jsx","styled","Box","alpha"],"mappings":"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"}
@@ -21,6 +21,7 @@ const AppCard = ({
21
21
  actions,
22
22
  actionsProps,
23
23
  loading,
24
+ cardContentProps,
24
25
  ...props
25
26
  }) => {
26
27
  const hasActions = Boolean(actions && React__default.Children.toArray(actions)?.length > 0);
@@ -47,7 +48,7 @@ const AppCard = ({
47
48
  ] }),
48
49
  titleAction && /* @__PURE__ */ jsx(StackRow, { children: titleAction })
49
50
  ] }),
50
- /* @__PURE__ */ jsxs(CardContent, { children: [
51
+ /* @__PURE__ */ jsxs(CardContent, { ...cardContentProps, children: [
51
52
  children,
52
53
  hasActions && !loading && /* @__PURE__ */ jsx(StackRow, { justifyContent: "end", ...actionsProps, children: actions })
53
54
  ] })
@@ -1 +1 @@
1
- {"version":3,"file":"app-card.js","sources":["../../../../src/components/app-card.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AppTypography, type AppTypographyProps } from './app-typography';\n\nimport { type Theme, SxProps, Card, CardContent, Divider } from '@mui/material';\nimport { StackRow, StackRowProps } from './stack-row';\nimport { StackColumn, StackColumnProps } from './stack-column';\nimport { styled } from '@mui/material/styles';\n\n//\n//\n\nexport type AppCardColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport type AppCardCorners = 'grouped' | 'all';\n\nexport type AppCardProps = {\n children?: React.ReactNode;\n color?: AppCardColor;\n roundedCorners?: AppCardCorners;\n title?: string | React.ReactNode;\n headerProps?: StackRowProps;\n titleContainerProps?: StackColumnProps;\n titleProps?: AppTypographyProps;\n titlePrefix?: React.ReactNode;\n titleSuffix?: React.ReactNode;\n titleAction?: React.ReactNode;\n titleDivider?: boolean;\n description?: React.ReactNode;\n descriptionProps?: AppTypographyProps;\n sx?: SxProps<Theme>;\n loading?: boolean;\n actions?: React.ReactElement | null | (React.ReactElement | null)[];\n actionsProps?: StackRowProps;\n};\n\nexport const AppCard: React.FC<AppCardProps> = ({\n color,\n title,\n description,\n descriptionProps,\n headerProps,\n titleContainerProps,\n titleProps,\n titleSuffix,\n titleAction,\n titleDivider,\n titlePrefix,\n children,\n actions,\n actionsProps,\n loading,\n ...props\n}) => {\n const hasActions = Boolean(actions && React.Children.toArray(actions)?.length > 0);\n\n return (\n <Card color={color} {...props}>\n <CardHead {...headerProps}>\n {titlePrefix}\n {(!!title || !!description) && (\n <StackColumn gap={0.25} width=\"100%\" {...titleContainerProps}>\n {typeof title === 'string' ? (\n <AppTypography variant=\"h6\" color=\"text.primary\" gap={1} {...titleProps}>\n {title} {titleSuffix ? titleSuffix : null}\n </AppTypography>\n ) : (\n title\n )}\n\n {titleDivider && <Divider />}\n\n {description && (\n <AppTypography\n variant=\"body2\"\n color=\"text.primary\"\n whiteSpace=\"pre-line\"\n {...descriptionProps}\n >\n {description}\n </AppTypography>\n )}\n </StackColumn>\n )}\n {titleAction && <StackRow>{titleAction}</StackRow>}\n </CardHead>\n\n <CardContent>\n {children}\n\n {hasActions && !loading && (\n <StackRow justifyContent=\"end\" {...actionsProps}>\n {actions}\n </StackRow>\n )}\n </CardContent>\n </Card>\n );\n};\n\nconst CardHead = styled(StackRow)(({ theme }) => {\n return {\n gap: theme.spacing(1),\n padding: theme.spacing(1.5),\n paddingBottom: 0,\n width: '100%',\n ':empty': {\n display: 'none',\n },\n };\n});\n"],"names":["React"],"mappings":";;;;;;;AAoCO,MAAM,UAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,aAAa,QAAQ,WAAWA,eAAM,SAAS,QAAQ,OAAO,GAAG,SAAS,CAAC;AAEjF,SACE,qBAAC,MAAA,EAAK,OAAe,GAAG,OACtB,UAAA;AAAA,IAAA,qBAAC,UAAA,EAAU,GAAG,aACX,UAAA;AAAA,MAAA;AAAA,OACC,CAAC,CAAC,SAAS,CAAC,CAAC,gBACb,qBAAC,aAAA,EAAY,KAAK,MAAM,OAAM,QAAQ,GAAG,qBACtC,UAAA;AAAA,QAAA,OAAO,UAAU,WAChB,qBAAC,eAAA,EAAc,SAAQ,MAAK,OAAM,gBAAe,KAAK,GAAI,GAAG,YAC1D,UAAA;AAAA,UAAA;AAAA,UAAM;AAAA,UAAE,cAAc,cAAc;AAAA,QAAA,EAAA,CACvC,IAEA;AAAA,QAGD,oCAAiB,SAAA,EAAQ;AAAA,QAEzB,eACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,YAAW;AAAA,YACV,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,GAEJ;AAAA,MAED,eAAe,oBAAC,UAAA,EAAU,UAAA,YAAA,CAAY;AAAA,IAAA,GACzC;AAAA,yBAEC,aAAA,EACE,UAAA;AAAA,MAAA;AAAA,MAEA,cAAc,CAAC,WACd,oBAAC,YAAS,gBAAe,OAAO,GAAG,cAChC,UAAA,QAAA,CACH;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;AAEA,MAAM,WAAW,OAAO,QAAQ,EAAE,CAAC,EAAE,YAAY;AAC/C,SAAO;AAAA,IACL,KAAK,MAAM,QAAQ,CAAC;AAAA,IACpB,SAAS,MAAM,QAAQ,GAAG;AAAA,IAC1B,eAAe;AAAA,IACf,OAAO;AAAA,IACP,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,CAAC;"}
1
+ {"version":3,"file":"app-card.js","sources":["../../../../src/components/app-card.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AppTypography, type AppTypographyProps } from './app-typography';\n\nimport { type Theme, SxProps, Card, CardContent, Divider, CardContentProps } from '@mui/material';\nimport { StackRow, StackRowProps } from './stack-row';\nimport { StackColumn, StackColumnProps } from './stack-column';\nimport { styled } from '@mui/material/styles';\n\n//\n//\n\nexport type AppCardColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport type AppCardCorners = 'grouped' | 'all';\n\nexport type AppCardProps = {\n children?: React.ReactNode;\n color?: AppCardColor;\n roundedCorners?: AppCardCorners;\n title?: string | React.ReactNode;\n headerProps?: StackRowProps;\n titleContainerProps?: StackColumnProps;\n titleProps?: AppTypographyProps;\n titlePrefix?: React.ReactNode;\n titleSuffix?: React.ReactNode;\n titleAction?: React.ReactNode;\n titleDivider?: boolean;\n description?: React.ReactNode;\n descriptionProps?: AppTypographyProps;\n sx?: SxProps<Theme>;\n loading?: boolean;\n actions?: React.ReactElement | null | (React.ReactElement | null)[];\n actionsProps?: StackRowProps;\n cardContentProps?: CardContentProps;\n};\n\nexport const AppCard: React.FC<AppCardProps> = ({\n color,\n title,\n description,\n descriptionProps,\n headerProps,\n titleContainerProps,\n titleProps,\n titleSuffix,\n titleAction,\n titleDivider,\n titlePrefix,\n children,\n actions,\n actionsProps,\n loading,\n cardContentProps,\n ...props\n}) => {\n const hasActions = Boolean(actions && React.Children.toArray(actions)?.length > 0);\n\n return (\n <Card color={color} {...props}>\n <CardHead {...headerProps}>\n {titlePrefix}\n {(!!title || !!description) && (\n <StackColumn gap={0.25} width=\"100%\" {...titleContainerProps}>\n {typeof title === 'string' ? (\n <AppTypography variant=\"h6\" color=\"text.primary\" gap={1} {...titleProps}>\n {title} {titleSuffix ? titleSuffix : null}\n </AppTypography>\n ) : (\n title\n )}\n\n {titleDivider && <Divider />}\n\n {description && (\n <AppTypography\n variant=\"body2\"\n color=\"text.primary\"\n whiteSpace=\"pre-line\"\n {...descriptionProps}\n >\n {description}\n </AppTypography>\n )}\n </StackColumn>\n )}\n {titleAction && <StackRow>{titleAction}</StackRow>}\n </CardHead>\n\n <CardContent {...cardContentProps}>\n {children}\n\n {hasActions && !loading && (\n <StackRow justifyContent=\"end\" {...actionsProps}>\n {actions}\n </StackRow>\n )}\n </CardContent>\n </Card>\n );\n};\n\nconst CardHead = styled(StackRow)(({ theme }) => {\n return {\n gap: theme.spacing(1),\n padding: theme.spacing(1.5),\n paddingBottom: 0,\n width: '100%',\n ':empty': {\n display: 'none',\n },\n };\n});\n"],"names":["React"],"mappings":";;;;;;;AAqCO,MAAM,UAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,aAAa,QAAQ,WAAWA,eAAM,SAAS,QAAQ,OAAO,GAAG,SAAS,CAAC;AAEjF,SACE,qBAAC,MAAA,EAAK,OAAe,GAAG,OACtB,UAAA;AAAA,IAAA,qBAAC,UAAA,EAAU,GAAG,aACX,UAAA;AAAA,MAAA;AAAA,OACC,CAAC,CAAC,SAAS,CAAC,CAAC,gBACb,qBAAC,aAAA,EAAY,KAAK,MAAM,OAAM,QAAQ,GAAG,qBACtC,UAAA;AAAA,QAAA,OAAO,UAAU,WAChB,qBAAC,eAAA,EAAc,SAAQ,MAAK,OAAM,gBAAe,KAAK,GAAI,GAAG,YAC1D,UAAA;AAAA,UAAA;AAAA,UAAM;AAAA,UAAE,cAAc,cAAc;AAAA,QAAA,EAAA,CACvC,IAEA;AAAA,QAGD,oCAAiB,SAAA,EAAQ;AAAA,QAEzB,eACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,YAAW;AAAA,YACV,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,GAEJ;AAAA,MAED,eAAe,oBAAC,UAAA,EAAU,UAAA,YAAA,CAAY;AAAA,IAAA,GACzC;AAAA,IAEA,qBAAC,aAAA,EAAa,GAAG,kBACd,UAAA;AAAA,MAAA;AAAA,MAEA,cAAc,CAAC,WACd,oBAAC,YAAS,gBAAe,OAAO,GAAG,cAChC,UAAA,QAAA,CACH;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;AAEA,MAAM,WAAW,OAAO,QAAQ,EAAE,CAAC,EAAE,YAAY;AAC/C,SAAO;AAAA,IACL,KAAK,MAAM,QAAQ,CAAC;AAAA,IACpB,SAAS,MAAM,QAAQ,GAAG;AAAA,IAC1B,eAAe;AAAA,IACf,OAAO;AAAA,IACP,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,CAAC;"}
@@ -63,6 +63,9 @@ const IconWrapper = styled(Box)(({ theme }) => ({
63
63
  "&[data-background-color='secondary']": {
64
64
  backgroundColor: alpha(theme.palette.secondary.main, 0.08)
65
65
  },
66
+ "&[data-background-color='white']": {
67
+ backgroundColor: theme.palette.common.white
68
+ },
66
69
  ...theme.applyStyles("dark", {
67
70
  "&[data-background-color='default']": {
68
71
  backgroundColor: theme.palette.action.hover
@@ -87,6 +90,9 @@ const IconWrapper = styled(Box)(({ theme }) => ({
87
90
  },
88
91
  "&[data-background-color='secondary']": {
89
92
  backgroundColor: alpha(theme.palette.secondary.main, 0.15)
93
+ },
94
+ "&[data-background-color='white']": {
95
+ backgroundColor: alpha(theme.palette.common.white, 0.1)
90
96
  }
91
97
  })
92
98
  }));
@@ -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 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;"}
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 | 'white';\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 \"&[data-background-color='white']\": {\n backgroundColor: theme.palette.common.white,\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 \"&[data-background-color='white']\": {\n backgroundColor: alpha(theme.palette.common.white, 0.1),\n },\n }),\n}));\n"],"names":[],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { default as React } from 'react';
2
2
  import { AppTypographyProps } from './app-typography';
3
- import { Theme, SxProps } from '@mui/material';
3
+ import { Theme, SxProps, CardContentProps } from '@mui/material';
4
4
  import { StackRowProps } from './stack-row';
5
5
  import { StackColumnProps } from './stack-column';
6
6
  export type AppCardColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';
@@ -23,5 +23,6 @@ export type AppCardProps = {
23
23
  loading?: boolean;
24
24
  actions?: React.ReactElement | null | (React.ReactElement | null)[];
25
25
  actionsProps?: StackRowProps;
26
+ cardContentProps?: CardContentProps;
26
27
  };
27
28
  export declare const AppCard: React.FC<AppCardProps>;
@@ -1,5 +1,5 @@
1
1
  import { BoxProps } from '@mui/material';
2
- export type AppIconBoxbackgroundColor = 'default' | 'primary' | 'blue' | 'red' | 'green' | 'yellow' | 'orange' | 'secondary';
2
+ export type AppIconBoxbackgroundColor = 'default' | 'primary' | 'blue' | 'red' | 'green' | 'yellow' | 'orange' | 'secondary' | 'white';
3
3
  export type AppIconBoxSize = 'small' | 'medium' | 'large';
4
4
  export type AppIconBoxProps = Omit<BoxProps, 'color'> & {
5
5
  children: React.ReactNode;