Fix localProps & compact warnings

src/dataDisplay/Accordion/index.tsx

@@ -9,17 +9,21 @@ import styled from 'styled-components';
 
 import FixedIcon from '../FixedIcon';
 
-type StyledAccordionProps = AccordionMUIProps & {
+type AccordionProps = AccordionMUIProps & {
   compact?: boolean;
 };
 
+type StyledAccordionProps = AccordionMUIProps & {
+  $compact?: AccordionProps['compact'];
+};
+
 const StyledAccordion = styled(AccordionMUI)<StyledAccordionProps>`
   &.MuiAccordion-root {
-    border-radius: ${({ compact }) => (compact ? '8px' : '0')};
-    border: ${({ compact, theme }) =>
-      compact ? '2px solid ' + theme.colors.separator : 'none'};
+    border-radius: ${({ $compact }) => ($compact ? '8px' : '0')};
+    border: ${({ $compact, theme }) =>
+      $compact ? '2px solid ' + theme.colors.separator : 'none'};
     border-bottom: 2px solid ${({ theme }) => theme.colors.separator};
-    margin-bottom: ${({ compact }) => (compact ? '16px' : '0')};
+    margin-bottom: ${({ $compact }) => ($compact ? '16px' : '0')};
     overflow: hidden;
 
     &:before {
@@ -31,7 +35,7 @@ const StyledAccordion = styled(AccordionMUI)<StyledAccordionProps>`
     }
 
     &.Mui-expanded {
-      margin: ${({ compact }) => (compact ? '0 0 16px 0' : '0')};
+      margin: ${({ $compact }) => ($compact ? '0 0 16px 0' : '0')};
     }
 
     .MuiAccordionDetails-root {
@@ -68,9 +72,9 @@ export const Accordion = ({
   compact,
   children,
   ...props
-}: StyledAccordionProps): ReactElement => {
+}: AccordionProps): ReactElement => {
   return (
-    <StyledAccordion square elevation={0} compact={compact} {...props}>
+    <StyledAccordion square elevation={0} $compact={compact} {...props}>
       {children}
     </StyledAccordion>
   );

src/inputs/Button/index.tsx

@@ -213,20 +213,20 @@ const customStyles: {
   },
 };
 
-const StyledButton = styled(ButtonMUI)<{ localProps: LocalProps }>`
+const StyledButton = styled(ButtonMUI)<{ $localProps: LocalProps }>`
   && {
-    height: ${({ theme, localProps }) =>
-      theme.buttons.size[localProps.size].height};
+    height: ${({ theme, $localProps }) =>
+      theme.buttons.size[$localProps.size].height};
     &.MuiButton-root {
-      min-width: ${({ theme, localProps: { size } }) =>
+      min-width: ${({ theme, $localProps: { size } }) =>
         theme.buttons.size[size].minWidth};
-      padding: ${({ theme, localProps: { size } }) =>
+      padding: ${({ theme, $localProps: { size } }) =>
         theme.buttons.size[size].padding};
       font-family: ${theme.fonts.fontFamily};
-      font-size: ${({ theme, localProps }) =>
-        theme.text.size[localProps.textSize ?? 'xl'].fontSize};
-      line-height: ${({ theme, localProps }) =>
-        theme.text.size[localProps.textSize ?? 'xl'].lineHeight};
+      font-size: ${({ theme, $localProps }) =>
+        theme.text.size[$localProps.textSize ?? 'xl'].fontSize};
+      line-height: ${({ theme, $localProps }) =>
+        theme.text.size[$localProps.textSize ?? 'xl'].lineHeight};
       text-transform: none;
       border-radius: 8px;
       letter-spacing: 0;
@@ -244,9 +244,12 @@ const StyledButton = styled(ButtonMUI)<{ localProps: LocalProps }>`
       opacity: ${({ theme }) => theme.colors.disabled.opacity};
     }
 
-    ${({ localProps }) => {
-      if (localProps.color !== undefined && localProps.variant !== undefined) {
-        return customStyles[localProps.color][localProps.variant];
+    ${({ $localProps }) => {
+      if (
+        $localProps.color !== undefined &&
+        $localProps.variant !== undefined
+      ) {
+        return customStyles[$localProps.color][$localProps.variant];
       }
     }}
   }
@@ -267,7 +270,7 @@ export const Button = ({
     <StyledButton
       className={`${color} ${variant}`}
       {...buttonMuiProps}
-      localProps={{ color, variant, size, textSize }}>
+      $localProps={{ color, variant, size, textSize }}>
       {iconType && <StyledIcon size={iconSize} type={iconType} />}
       {children}
     </StyledButton>