Improve structure Message component

Author: Kubit

src/components/message/index.ts

@@ -15,4 +15,4 @@ export type {
 
 export { MessageControlled } from './messageControlled';
 export { MessageUnControlled as Message } from './messageUnControlled';
-export { MessageStyled } from './message.styled';
+export { ParentContainerStyled as MessageStyled } from './message.styled';

src/components/message/message.styled.ts

@@ -5,6 +5,12 @@ import { getStyles } from '@/utils';
 
 import { MessagePropsThemeType } from './types/messageTheme';
 
+export const ParentContainerStyled = styled.div<{
+  styles: MessagePropsThemeType;
+}>`
+  ${({ styles }) => getStyles(styles.parentContainer)};
+`;
+
 export const MessageStyled = styled.div<{
   styles: MessagePropsThemeType;
 }>`

src/components/message/messageStandAlone.tsx

@@ -20,6 +20,7 @@ import {
   MessageHeaderStyled,
   MessageStyled,
   MessageTextStyled,
+  ParentContainerStyled,
 } from './message.styled';
 import { IMessageStandAlone } from './types';
 
@@ -88,11 +89,10 @@ const MessageStandAloneComponent = (
   };
 
   return (
-    <>
+    <ParentContainerStyled aria-live={ariaLive} styles={props.styles}>
       {props.open && (
         <MessageStyled
           ref={ref}
-          aria-live={ariaLive}
           as={props.messageContainerProps?.url ? props.linkComponent : 'div'}
           data-testid={`${props.dataTestId}Message`}
           id={props.id}
@@ -185,7 +185,7 @@ const MessageStandAloneComponent = (
           </MessageHeaderStyled>
         </MessageStyled>
       )}
-    </>
+    </ParentContainerStyled>
   );
 };
 

src/components/message/types/messageTheme.ts

@@ -1,6 +1,7 @@
 import { CommonStyleType, IconTypes, IllustrationTypes, TypographyTypes } from '@/types';
 
 export type MessagePropsThemeType = {
+  parentContainer?: CommonStyleType;
   container?: CommonStyleType;
   headerContainer?: CommonStyleType;
   headerContainerLargeMessage?: CommonStyleType;