diff --git a/apis/nucleus/src/components/listbox/components/ListBoxDisclaimer.jsx b/apis/nucleus/src/components/listbox/components/ListBoxDisclaimer.jsx
index 241ba3b1a..3e41b5634 100644
--- a/apis/nucleus/src/components/listbox/components/ListBoxDisclaimer.jsx
+++ b/apis/nucleus/src/components/listbox/components/ListBoxDisclaimer.jsx
@@ -3,9 +3,8 @@ import React, { useContext } from 'react';
 import { styled } from '@mui/material/styles';
 import InstanceContext from '../../../contexts/InstanceContext';
 
-export default function ListBoxDisclaimer({ width, text, dense, tooltip }) {
-  const { translator } = useContext(InstanceContext);
-  const StyledText = styled(Typography)(() => ({
+const StyledText = styled(Typography, { shouldForwardProp: (p) => !['width', 'dense'].includes(p) })(
+  ({ width, dense }) => ({
     minWidth: `${width}px`,
     textAlign: 'center',
     fontSize: `${dense ? '12px' : '14px'}`,
@@ -15,11 +14,15 @@ export default function ListBoxDisclaimer({ width, text, dense, tooltip }) {
       whiteSpace: 'nowrap',
       width,
     }),
-  }));
+  })
+);
+
+export default function ListBoxDisclaimer({ width, text, dense, tooltip }) {
+  const { translator } = useContext(InstanceContext);
 
   return (
     <Tooltip title={tooltip ? translator.get(text) : ''}>
-      <StyledText component="div" variant="body1" py="12px">
+      <StyledText width={width} dense={dense} component="div" variant="body1" py="12px">
         {translator.get(text)}
       </StyledText>
     </Tooltip>
diff --git a/apis/nucleus/src/components/listbox/components/ListBoxError.jsx b/apis/nucleus/src/components/listbox/components/ListBoxError.jsx
index b3dad1550..869dffa49 100644
--- a/apis/nucleus/src/components/listbox/components/ListBoxError.jsx
+++ b/apis/nucleus/src/components/listbox/components/ListBoxError.jsx
@@ -2,15 +2,15 @@ import { styled } from '@mui/material/styles';
 import React, { useContext } from 'react';
 import InstanceContext from '../../../contexts/InstanceContext';
 
+const StyledDiv = styled('div')(() => ({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
 export default function ListBoxError({ text }) {
   const { translator } = useContext(InstanceContext);
-  const StyledDiv = styled('div')(() => ({
-    display: 'flex',
-    width: '100%',
-    height: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-  }));
-
   return <StyledDiv>{translator.get(text)}</StyledDiv>;
 }