@sonardigital/carbon-ui 1.1.51 → 1.1.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonardigital/carbon-ui",
-  "version": "1.1.51",
+  "version": "1.1.53",
   "description": "",
   "main": "src/index.ts",
   "files": [

package/src/components/form/fields/form-list/Row.tsx

@@ -21,8 +21,8 @@ export function Row(props: {
               {{
                 ...Component,
                 props: {
-                  ...Component.props,
-                  name: `${name}[${index}].${Component.props?.name}`,
+                  ...((Component?.props as object) || {}),
+                  name: `${name}[${index}].${(Component?.props as unknown as { name?: string })?.name}`,
                 },
               }}
             </Grid>

package/src/components/form/layout/index.ts

@@ -1,2 +1 @@
-export * from './FormLabel';
 export * from './FormError';

package/src/components/layout/Modal/components/ModalContent.tsx

@@ -1,17 +1,44 @@
-import { Modal } from '@mui/material';
+import { Modal, Stack, SxProps } from '@mui/material';
 import React from 'react';
 import { useModalContext } from '../hooks/useModalContext';
 
 interface ModalContentProps {
   children: React.ReactElement;
+  sx?: SxProps;
 }
 
-export function ModalContent({ children }: ModalContentProps): React.ReactElement {
+export function ModalContent({ children, sx }: ModalContentProps): React.ReactElement {
   const { isOpen, close } = useModalContext();
 
   return (
     <Modal onClose={close} open={isOpen}>
-      {children}
+      <Stack
+        bgcolor="background.default"
+        paddingY={1}
+        zIndex={1200}
+        border="none"
+        sx={{
+          borderRadius: 2,
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          outline: 'none',
+          transform: 'translate(-50%, -50%)',
+          boxSizing: 'border-box',
+          padding: 5,
+          minHeight: {
+            sx: 500,
+            sm: 300,
+          },
+          minWidth: {
+            xs: '100%',
+            sm: 600,
+          },
+          ...sx,
+        }}
+      >
+        {children}
+      </Stack>
     </Modal>
   );
 }

package/src/theme/constants/components.ts

@@ -2,6 +2,7 @@
 
 import { Theme } from '@emotion/react';
 import { Components, CssVarsTheme } from '@mui/material';
+import { palette } from './palette';
 
 const defaultButtonStyle = {
   paddingLeft: 20,
@@ -65,6 +66,11 @@ export const components: Components<Omit<Theme, 'components' | 'palette'> & CssV
       TransitionProps: {
         timeout: 0,
       },
+      slotProps: {
+        transition: {
+          duration: false,
+        },
+      },
       sx: {
         cursor: 'pointer',
         '&:before': { height: '0px' },
@@ -76,6 +82,7 @@ export const components: Components<Omit<Theme, 'components' | 'palette'> & CssV
       },
     },
   },
+
   MuiAccordionDetails: {
     defaultProps: {
       sx: {
@@ -83,6 +90,15 @@ export const components: Components<Omit<Theme, 'components' | 'palette'> & CssV
         display: 'flex',
         flexDirection: 'column',
         gap: 1,
+        borderTop: 3.5,
+        borderColor: palette.background.default,
+      },
+    },
+  },
+  MuiAccordionSummary: {
+    defaultProps: {
+      style: {
+        minHeight: 55,
       },
     },
   },
@@ -154,6 +170,7 @@ export const components: Components<Omit<Theme, 'components' | 'palette'> & CssV
     defaultProps: {
       style: {
         width: 'auto',
+        borderRadius: 100,
         alignSelf: 'start',
         height: 35,
       },
@@ -263,19 +280,50 @@ export const components: Components<Omit<Theme, 'components' | 'palette'> & CssV
   },
   MuiListItemIcon: {
     defaultProps: {
-      sx: {
+      style: {
+        width: 35,
+        minWidth: 35,
         alignItems: 'center',
         justifyContent: 'center',
         paddingRight: 1,
         color: 'inherit',
+        height: '100%',
+        minHeight: 'auto',
+        alignSelf: 'center',
       },
     },
   },
   MuiAlert: {
+    variants: [
+      {
+        props: {
+          variant: 'filled',
+          severity: 'info',
+        },
+        style: {
+          backgroundColor: palette.info.light,
+          color: palette.info.main,
+          boxShadow: 'none',
+        },
+      },
+      {
+        props: {
+          variant: 'filled',
+          severity: 'warning',
+        },
+        style: {
+          backgroundColor: palette.warning.light,
+          color: palette.warning.main,
+          boxShadow: 'none',
+        },
+      },
+    ],
     defaultProps: {
       variant: 'filled',
+      icon: false,
       style: {
-        borderRadius,
+        borderRadius: 4,
+
         opacity: 1,
         boxShadow: 'none',
       },
@@ -292,6 +340,35 @@ export const components: Components<Omit<Theme, 'components' | 'palette'> & CssV
       },
     },
   },
+  MuiBottomNavigation: {
+    defaultProps: {
+      sx: {
+        position: 'fixed',
+        left: 0,
+        bottom: 0,
+        width: '100%',
+        height: 'auto',
+        backgroundColor: 'background.default',
+        boxShadow: 10,
+        boxSizing: 'border-box',
+        paddingY: 1.25,
+        gap: 1,
+      },
+    },
+  },
+  MuiBottomNavigationAction: {
+    defaultProps: {
+      disableRipple: true,
+      disableTouchRipple: true,
+      slotProps: {
+        label: {
+          style: {
+            fontSize: 14,
+          },
+        },
+      },
+    },
+  },
   MuiListItem: {
     defaultProps: {
       style: {

package/src/theme/constants/palette.ts

@@ -25,7 +25,8 @@ export const palette = {
     main: '#222876',
     dark: '#D80809',
     // light: '#e4f5fd',
-    light: '#EEF4FC',
+    // light: '#EEF4FC',
+    light: '#f3f8ff',
   },
   warning: {
     main: '#A5500F',
@@ -33,6 +34,7 @@ export const palette = {
     light: '#FFE5CA',
   },
   background: {
+    default: '#FFFFFF',
     paper: '#FAFAFA',
   },
   diver: '#F7F7F7',