diff --git a/src/Anchor/Anchor.tsx b/src/Anchor/Anchor.tsx
index 24c39123..827b4e23 100644
--- a/src/Anchor/Anchor.tsx
+++ b/src/Anchor/Anchor.tsx
@@ -9,10 +9,10 @@ type AnchorProps = {
 } & React.AnchorHTMLAttributes<HTMLAnchorElement> &
   CommonStyledProps;
 
-const StyledAnchor = styled.a<{ underline: boolean }>`
+const StyledAnchor = styled.a<{ $underline: boolean }>`
   color: ${({ theme }) => theme.anchor};
   font-size: inherit;
-  text-decoration: ${({ underline }) => (underline ? 'underline' : 'none')};
+  text-decoration: ${({ $underline }) => ($underline ? 'underline' : 'none')};
   &:visited {
     color: ${({ theme }) => theme.anchorVisited};
   }
@@ -21,7 +21,7 @@ const StyledAnchor = styled.a<{ underline: boolean }>`
 const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(
   ({ children, underline = true, ...otherProps }: AnchorProps, ref) => {
     return (
-      <StyledAnchor ref={ref} underline={underline} {...otherProps}>
+      <StyledAnchor ref={ref} $underline={underline} {...otherProps}>
         {children}
       </StyledAnchor>
     );
diff --git a/src/AppBar/AppBar.tsx b/src/AppBar/AppBar.tsx
index dd480069..47e57795 100644
--- a/src/AppBar/AppBar.tsx
+++ b/src/AppBar/AppBar.tsx
@@ -12,11 +12,17 @@ type AppBarProps = {
 } & React.HTMLAttributes<HTMLElement> &
   CommonStyledProps;
 
-const StyledAppBar = styled.header<AppBarProps>`
+type StyledAppBarProps = {
+  $fixed?: boolean;
+  $position?: CSSProperties['position'];
+} & CommonStyledProps;
+
+const StyledAppBar = styled.header<StyledAppBarProps>`
   ${createBorderStyles()};
   ${createBoxStyles()};
 
-  position: ${props => props.position ?? (props.fixed ? 'fixed' : 'absolute')};
+  position: ${props =>
+    props.$position ?? (props.$fixed ? 'fixed' : 'absolute')};
   top: 0;
   right: 0;
   left: auto;
@@ -29,8 +35,8 @@ const AppBar = forwardRef<HTMLElement, AppBarProps>(
   ({ children, fixed = true, position = 'fixed', ...otherProps }, ref) => {
     return (
       <StyledAppBar
-        fixed={fixed}
-        position={fixed !== false ? position : undefined}
+        $fixed={fixed}
+        $position={fixed !== false ? position : undefined}
         ref={ref}
         {...otherProps}
       >
diff --git a/src/Avatar/Avatar.tsx b/src/Avatar/Avatar.tsx
index 89990fd4..dd57b049 100644
--- a/src/Avatar/Avatar.tsx
+++ b/src/Avatar/Avatar.tsx
@@ -13,21 +13,26 @@ type AvatarProps = {
 } & React.HTMLAttributes<HTMLDivElement> &
   CommonStyledProps;
 
-const StyledAvatar = styled.div<
-  Pick<AvatarProps, 'noBorder' | 'square' | 'src'> & { size?: string }
->`
+type StyledAvatarProps = {
+  $noBorder?: boolean;
+  $square?: boolean;
+  $src?: string;
+  $size?: string;
+};
+
+const StyledAvatar = styled.div<StyledAvatarProps>`
   display: inline-block;
   box-sizing: border-box;
   object-fit: contain;
-  ${({ size }) =>
+  ${({ $size }) =>
     `
-    height: ${size};
-    width: ${size};
+    height: ${$size};
+    width: ${$size};
     `}
-  border-radius: ${({ square }) => (square ? 0 : '50%')};
+  border-radius: ${({ $square }) => ($square ? 0 : '50%')};
   overflow: hidden;
-  ${({ noBorder, theme }) =>
-    !noBorder &&
+  ${({ $noBorder, theme }) =>
+    !$noBorder &&
     `
     border-top: 2px solid ${theme.borderDark};
     border-left: 2px solid ${theme.borderDark};
@@ -35,8 +40,8 @@ const StyledAvatar = styled.div<
     border-right: 2px solid ${theme.borderLightest};
     background: ${theme.material};
   `}
-  ${({ src }) =>
-    !src &&
+  ${({ $src }) =>
+    !$src &&
     `
     display: flex;
     align-items: center;
@@ -68,11 +73,11 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
   ) => {
     return (
       <StyledAvatar
-        noBorder={noBorder}
+        $noBorder={noBorder}
         ref={ref}
-        size={getSize(size)}
-        square={square}
-        src={src}
+        $size={getSize(size)}
+        $square={square}
+        $src={src}
         {...otherProps}
       >
         {src ? <StyledAvatarImg src={src} alt={alt} /> : children}
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
index cd35b7f6..94fe22ab 100644
--- a/src/Button/Button.tsx
+++ b/src/Button/Button.tsx
@@ -38,32 +38,31 @@ type ButtonProps = {
   > &
   CommonStyledProps;
 
-type StyledButtonProps = Pick<
-  ButtonProps,
-  | 'active'
-  | 'disabled'
-  | 'fullWidth'
-  | 'primary'
-  | 'size'
-  | 'square'
-  | 'variant'
->;
+type StyledButtonProps = {
+  $active?: boolean;
+  $disabled?: boolean;
+  $fullWidth?: boolean;
+  $primary?: boolean;
+  $size?: Sizes;
+  $square?: boolean;
+  $variant?: 'default' | 'raised' | 'flat' | 'thin' | 'menu';
+};
 
 const commonButtonStyles = css<StyledButtonProps>`
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: ${({ size = 'md' }) => blockSizes[size]};
-  width: ${({ fullWidth, size = 'md', square }) =>
-    fullWidth ? '100%' : square ? blockSizes[size] : 'auto'};
-  padding: ${({ square }) => (square ? 0 : `0 10px`)};
+  height: ${({ $size = 'md' }) => blockSizes[$size]};
+  width: ${({ $fullWidth, $size = 'md', $square }) =>
+    $fullWidth ? '100%' : $square ? blockSizes[$size] : 'auto'};
+  padding: ${({ $square }) => ($square ? 0 : `0 10px`)};
   font-size: 1rem;
   user-select: none;
   &:active {
-    padding-top: ${({ disabled }) => !disabled && '2px'};
+    padding-top: ${({ $disabled }) => !$disabled && '2px'};
   }
-  padding-top: ${({ active, disabled }) => active && !disabled && '2px'};
+  padding-top: ${({ $active, $disabled }) => $active && !$disabled && '2px'};
   &:after {
     content: '';
     position: absolute;
@@ -80,11 +79,11 @@ const commonButtonStyles = css<StyledButtonProps>`
 `;
 
 export const StyledButton = styled.button<StyledButtonProps>`
-  ${({ active, disabled, primary, theme, variant }) =>
-    variant === 'flat'
+  ${({ $active, $disabled, $primary, theme, $variant }) =>
+    $variant === 'flat'
       ? css`
           ${createFlatBoxStyles()}
-          ${primary
+          ${$primary
             ? `
           border: 2px solid ${theme.checkmark};
             outline: 2px solid ${theme.flatDark};
@@ -96,82 +95,83 @@ export const StyledButton = styled.button<StyledButtonProps>`
             outline-offset: -4px;
           `}
           &:focus:after, &:active:after {
-            ${!active && !disabled && focusOutline}
+            ${!$active && !$disabled && focusOutline}
             outline-offset: -4px;
           }
         `
-      : variant === 'menu' || variant === 'thin'
-      ? css`
-          ${createBoxStyles()};
-          border: 2px solid transparent;
-          &:hover,
-          &:focus {
-            ${!disabled &&
-            !active &&
-            createBorderStyles({ style: 'buttonThin' })}
-          }
-          &:active {
-            ${!disabled && createBorderStyles({ style: 'buttonThinPressed' })}
-          }
-          ${active && createBorderStyles({ style: 'buttonThinPressed' })}
-          ${disabled && createDisabledTextStyles()}
-        `
-      : css`
-          ${createBoxStyles()};
-          border: none;
-          ${disabled && createDisabledTextStyles()}
-          ${active
-            ? createHatchedBackground({
-                mainColor: theme.material,
-                secondaryColor: theme.borderLightest
-              })
-            : ''}
+      : $variant === 'menu' || $variant === 'thin'
+        ? css`
+            ${createBoxStyles()};
+            border: 2px solid transparent;
+            &:hover,
+            &:focus {
+              ${!$disabled &&
+              !$active &&
+              createBorderStyles({ style: 'buttonThin' })}
+            }
+            &:active {
+              ${!$disabled &&
+              createBorderStyles({ style: 'buttonThinPressed' })}
+            }
+            ${$active && createBorderStyles({ style: 'buttonThinPressed' })}
+            ${$disabled && createDisabledTextStyles()}
+          `
+        : css`
+            ${createBoxStyles()};
+            border: none;
+            ${$disabled && createDisabledTextStyles()}
+            ${$active
+              ? createHatchedBackground({
+                  mainColor: theme.material,
+                  secondaryColor: theme.borderLightest
+                })
+              : ''}
           &:before {
-            box-sizing: border-box;
-            content: '';
-            position: absolute;
-            ${primary
-              ? css`
-                  left: 2px;
-                  top: 2px;
-                  width: calc(100% - 4px);
-                  height: calc(100% - 4px);
-                  outline: 2px solid ${theme.borderDarkest};
-                `
-              : css`
-                  left: 0;
-                  top: 0;
-                  width: 100%;
-                  height: 100%;
-                `}
+              box-sizing: border-box;
+              content: '';
+              position: absolute;
+              ${$primary
+                ? css`
+                    left: 2px;
+                    top: 2px;
+                    width: calc(100% - 4px);
+                    height: calc(100% - 4px);
+                    outline: 2px solid ${theme.borderDarkest};
+                  `
+                : css`
+                    left: 0;
+                    top: 0;
+                    width: 100%;
+                    height: 100%;
+                  `}
 
-            ${active
-              ? createBorderStyles({
-                  style: variant === 'raised' ? 'window' : 'button',
-                  invert: true
-                })
-              : createBorderStyles({
-                  style: variant === 'raised' ? 'window' : 'button',
-                  invert: false
-                })}
-          }
-          &:active:before {
-            ${!disabled &&
-            createBorderStyles({
-              style: variant === 'raised' ? 'window' : 'button',
-              invert: true
-            })}
-          }
-          &:focus:after,
-          &:active:after {
-            ${!disabled && focusOutline}
-            outline-offset: -8px;
-          }
-          &:active:focus:after,
-          &:active:after {
-            top: ${active ? '0' : '1px'};
-          }
-        `}
+              ${$active
+                ? createBorderStyles({
+                    style: $variant === 'raised' ? 'window' : 'button',
+                    invert: true
+                  })
+                : createBorderStyles({
+                    style: $variant === 'raised' ? 'window' : 'button',
+                    invert: false
+                  })}
+            }
+            &:active:before {
+              ${!$disabled &&
+              createBorderStyles({
+                style: $variant === 'raised' ? 'window' : 'button',
+                invert: true
+              })}
+            }
+            &:focus:after,
+            &:active:after {
+              ${!$disabled && focusOutline}
+              outline-offset: -8px;
+            }
+            &:active:focus:after,
+            &:active:after {
+              top: ${$active ? '0' : '1px'};
+            }
+          `}
   ${commonButtonStyles}
 `;
 
@@ -195,18 +195,18 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ) => {
     return (
       <StyledButton
-        active={active}
+        $active={active}
         disabled={disabled}
         $disabled={disabled}
-        fullWidth={fullWidth}
+        $fullWidth={fullWidth}
         onClick={disabled ? undefined : onClick}
         onTouchStart={onTouchStart}
-        primary={primary}
+        $primary={primary}
         ref={ref}
-        size={size}
-        square={square}
+        $size={size}
+        $square={square}
         type={type}
-        variant={variant}
+        $variant={variant}
         {...otherProps}
       >
         {children}
diff --git a/src/ColorInput/ColorInput.tsx b/src/ColorInput/ColorInput.tsx
index bf396d0c..66ddc69b 100644
--- a/src/ColorInput/ColorInput.tsx
+++ b/src/ColorInput/ColorInput.tsx
@@ -143,7 +143,7 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
     return (
       //  we only need button styles, so we display
       // it as a div and reset type attribute
-      <Trigger disabled={disabled} as='div' variant={variant} size='md'>
+      <Trigger $disabled={disabled} as='div' $variant={variant} $size='md'>
         <StyledColorInput
           onChange={handleChange}
           readOnly={disabled}
diff --git a/src/Counter/Digit.tsx b/src/Counter/Digit.tsx
index b5358263..fc2392a0 100644
--- a/src/Counter/Digit.tsx
+++ b/src/Counter/Digit.tsx
@@ -10,16 +10,16 @@ type DigitProps = {
 } & React.HTMLAttributes<HTMLDivElement> &
   CommonStyledProps;
 
-const DigitWrapper = styled.div<Required<Pick<DigitProps, 'pixelSize'>>>`
+const DigitWrapper = styled.div<{ $pixelSize: number }>`
   position: relative;
   --react95-digit-primary-color: #ff0102;
   --react95-digit-secondary-color: #740201;
   --react95-digit-bg-color: #000000;
 
-  ${({ pixelSize }) => css`
-    width: ${11 * pixelSize}px;
-    height: ${21 * pixelSize}px;
-    margin: ${pixelSize}px;
+  ${({ $pixelSize }) => css`
+    width: ${11 * $pixelSize}px;
+    height: ${21 * $pixelSize}px;
+    margin: ${$pixelSize}px;
 
     span,
     span:before,
@@ -39,39 +39,39 @@ const DigitWrapper = styled.div<Required<Pick<DigitProps, 'pixelSize'>>>`
       ${createHatchedBackground({
         mainColor: 'var(--react95-digit-bg-color)',
         secondaryColor: 'var(--react95-digit-secondary-color)',
-        pixelSize
+        pixelSize: $pixelSize
       })}
     }
 
     span.horizontal,
     span.horizontal:before,
     span.horizontal:after {
-      height: ${pixelSize}px;
-      border-left: ${pixelSize}px solid var(--react95-digit-bg-color);
-      border-right: ${pixelSize}px solid var(--react95-digit-bg-color);
+      height: ${$pixelSize}px;
+      border-left: ${$pixelSize}px solid var(--react95-digit-bg-color);
+      border-right: ${$pixelSize}px solid var(--react95-digit-bg-color);
     }
     span.horizontal.active,
     span.horizontal.active:before,
     span.horizontal.active:after {
-      height: ${pixelSize}px;
-      border-left: ${pixelSize}px solid var(--react95-digit-primary-color);
-      border-right: ${pixelSize}px solid var(--react95-digit-primary-color);
+      height: ${$pixelSize}px;
+      border-left: ${$pixelSize}px solid var(--react95-digit-primary-color);
+      border-right: ${$pixelSize}px solid var(--react95-digit-primary-color);
     }
     span.horizontal {
-      left: ${pixelSize}px;
-      width: ${9 * pixelSize}px;
+      left: ${$pixelSize}px;
+      width: ${9 * $pixelSize}px;
     }
     span.horizontal:before {
       content: '';
       width: 100%;
-      top: ${pixelSize}px;
+      top: ${$pixelSize}px;
       left: ${0}px;
     }
     span.horizontal:after {
       content: '';
-      width: calc(100% - ${pixelSize * 2}px);
-      top: ${2 * pixelSize}px;
-      left: ${pixelSize}px;
+      width: calc(100% - ${$pixelSize * 2}px);
+      top: ${2 * $pixelSize}px;
+      left: ${$pixelSize}px;
     }
     span.horizontal.top {
       top: 0;
@@ -84,21 +84,21 @@ const DigitWrapper = styled.div<Required<Pick<DigitProps, 'pixelSize'>>>`
     span.center,
     span.center:before,
     span.center:after {
-      height: ${pixelSize}px;
-      border-left: ${pixelSize}px solid var(--react95-digit-bg-color);
-      border-right: ${pixelSize}px solid var(--react95-digit-bg-color);
+      height: ${$pixelSize}px;
+      border-left: ${$pixelSize}px solid var(--react95-digit-bg-color);
+      border-right: ${$pixelSize}px solid var(--react95-digit-bg-color);
     }
     span.center.active,
     span.center.active:before,
     span.center.active:after {
-      border-left: ${pixelSize}px solid var(--react95-digit-primary-color);
-      border-right: ${pixelSize}px solid var(--react95-digit-primary-color);
+      border-left: ${$pixelSize}px solid var(--react95-digit-primary-color);
+      border-right: ${$pixelSize}px solid var(--react95-digit-primary-color);
     }
     span.center {
       top: 50%;
       transform: translateY(-50%);
-      left: ${pixelSize}px;
-      width: ${9 * pixelSize}px;
+      left: ${$pixelSize}px;
+      width: ${9 * $pixelSize}px;
     }
     span.center:before,
     span.center:after {
@@ -106,21 +106,21 @@ const DigitWrapper = styled.div<Required<Pick<DigitProps, 'pixelSize'>>>`
       width: 100%;
     }
     span.center:before {
-      top: ${pixelSize}px;
+      top: ${$pixelSize}px;
     }
     span.center:after {
-      bottom: ${pixelSize}px;
+      bottom: ${$pixelSize}px;
     }
 
     span.vertical,
     span.vertical:before,
     span.vertical:after {
-      width: ${pixelSize}px;
-      border-top: ${pixelSize}px solid var(--react95-digit-bg-color);
-      border-bottom: ${pixelSize}px solid var(--react95-digit-bg-color);
+      width: ${$pixelSize}px;
+      border-top: ${$pixelSize}px solid var(--react95-digit-bg-color);
+      border-bottom: ${$pixelSize}px solid var(--react95-digit-bg-color);
     }
     span.vertical {
-      height: ${11 * pixelSize}px;
+      height: ${11 * $pixelSize}px;
     }
     span.vertical.left {
       left: 0;
@@ -139,13 +139,13 @@ const DigitWrapper = styled.div<Required<Pick<DigitProps, 'pixelSize'>>>`
       content: '';
       height: 100%;
       top: ${0}px;
-      left: ${pixelSize}px;
+      left: ${$pixelSize}px;
     }
     span.vertical:after {
       content: '';
-      height: calc(100% - ${pixelSize * 2}px);
-      top: ${pixelSize}px;
-      left: ${pixelSize * 2}px;
+      height: calc(100% - ${$pixelSize * 2}px);
+      top: ${$pixelSize}px;
+      left: ${$pixelSize * 2}px;
     }
   `}
 `;
@@ -174,11 +174,11 @@ const digitActiveSegments = [
 ];
 
 function Digit({ digit = 0, pixelSize = 2, ...otherProps }: DigitProps) {
-  const segmentClasses = digitActiveSegments[Number(digit)].map((isActive, i) =>
-    isActive ? `${segments[i]} active` : segments[i]
+  const segmentClasses = digitActiveSegments[Number(digit)].map(
+    (isActive, i) => (isActive ? `${segments[i]} active` : segments[i])
   );
   return (
-    <DigitWrapper pixelSize={pixelSize} {...otherProps}>
+    <DigitWrapper $pixelSize={pixelSize} {...otherProps}>
       {segmentClasses.map((className, i) => (
         <span className={className} key={i} />
       ))}
diff --git a/src/DatePicker/DatePicker.tsx b/src/DatePicker/DatePicker.tsx
index 11d1c53d..3a46e339 100644
--- a/src/DatePicker/DatePicker.tsx
+++ b/src/DatePicker/DatePicker.tsx
@@ -40,17 +40,17 @@ const DateItem = styled.div`
   width: 14.28%;
 `;
 
-const DateItemContent = styled.span<{ active: boolean }>`
+const DateItemContent = styled.span<{ $active: boolean }>`
   cursor: pointer;
 
-  background: ${({ active, theme }) =>
-    active ? theme.hoverBackground : 'transparent'};
-  color: ${({ active, theme }) =>
-    active ? theme.canvasTextInvert : theme.canvasText};
+  background: ${({ $active, theme }) =>
+    $active ? theme.hoverBackground : 'transparent'};
+  color: ${({ $active, theme }) =>
+    $active ? theme.canvasTextInvert : theme.canvasText};
 
   &:hover {
     border: 2px dashed
-      ${({ theme, active }) => (active ? 'none' : theme.materialDark)};
+      ${({ theme, $active }) => ($active ? 'none' : theme.materialDark)};
   }
 `;
 
@@ -141,7 +141,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                 handleDaySelect(dayNumber);
               }}
             >
-              <DateItemContent active={dayNumber === itemDay}>
+              <DateItemContent $active={dayNumber === itemDay}>
                 {dayNumber}
               </DateItemContent>
             </DateItem>
diff --git a/src/Frame/Frame.tsx b/src/Frame/Frame.tsx
index 8094ee14..ff873e49 100644
--- a/src/Frame/Frame.tsx
+++ b/src/Frame/Frame.tsx
@@ -41,13 +41,18 @@ const createFrameStyles = (variant: FrameProps['variant']) => {
   }
 };
 
-const StyledFrame = styled.div<Required<Pick<FrameProps, 'variant'>>>`
+type StyledFrameProps = {
+  $variant: FrameProps['variant'];
+  $shadow?: boolean;
+} & CommonStyledProps;
+
+const StyledFrame = styled.div<StyledFrameProps>`
   position: relative;
   font-size: 1rem;
-  ${({ variant }) => createFrameStyles(variant)}
-  ${({ variant }) =>
+  ${({ $variant }) => createFrameStyles($variant)}
+  ${({ $variant }) =>
     createBoxStyles(
-      variant === 'field'
+      $variant === 'field'
         ? { background: 'canvas', color: 'canvasText' }
         : undefined
     )}
@@ -56,7 +61,12 @@ const StyledFrame = styled.div<Required<Pick<FrameProps, 'variant'>>>`
 const Frame = forwardRef<HTMLDivElement, FrameProps>(
   ({ children, shadow = false, variant = 'window', ...otherProps }, ref) => {
     return (
-      <StyledFrame ref={ref} shadow={shadow} variant={variant} {...otherProps}>
+      <StyledFrame
+        ref={ref}
+        $shadow={shadow}
+        $variant={variant}
+        {...otherProps}
+      >
         {children}
       </StyledFrame>
     );
diff --git a/src/GroupBox/GroupBox.tsx b/src/GroupBox/GroupBox.tsx
index a2d381c5..bd97f172 100644
--- a/src/GroupBox/GroupBox.tsx
+++ b/src/GroupBox/GroupBox.tsx
@@ -11,19 +11,20 @@ type GroupBoxProps = {
 } & React.FieldsetHTMLAttributes<HTMLFieldSetElement> &
   CommonStyledProps;
 
-const StyledFieldset = styled.fieldset<
-  Pick<GroupBoxProps, 'variant'> & { $disabled: boolean }
->`
+const StyledFieldset = styled.fieldset<{
+  $variant: GroupBoxProps['variant'];
+  $disabled: boolean;
+}>`
   position: relative;
   border: 2px solid
-    ${({ theme, variant }) =>
-      variant === 'flat' ? theme.flatDark : theme.borderLightest};
+    ${({ theme, $variant }) =>
+      $variant === 'flat' ? theme.flatDark : theme.borderLightest};
   padding: 16px;
   margin-top: 8px;
   font-size: 1rem;
   color: ${({ theme }) => theme.materialText};
-  ${({ variant }) =>
-    variant !== 'flat' &&
+  ${({ $variant }) =>
+    $variant !== 'flat' &&
     css`
       box-shadow: -1px -1px 0 1px ${({ theme }) => theme.borderDark},
         inset -1px -1px 0 1px ${({ theme }) => theme.borderDark};
@@ -31,7 +32,7 @@ const StyledFieldset = styled.fieldset<
   ${props => props.$disabled && createDisabledTextStyles()}
 `;
 
-const StyledLegend = styled.legend<Pick<GroupBoxProps, 'variant'>>`
+const StyledLegend = styled.legend<{ $variant: GroupBoxProps['variant'] }>`
   display: flex;
   position: absolute;
   top: 0;
@@ -40,8 +41,8 @@ const StyledLegend = styled.legend<Pick<GroupBoxProps, 'variant'>>`
   padding: 0 8px;
 
   font-size: 1rem;
-  background: ${({ theme, variant }) =>
-    variant === 'flat' ? theme.canvas : theme.material};
+  background: ${({ theme, $variant }) =>
+    $variant === 'flat' ? theme.canvas : theme.material};
 `;
 
 const GroupBox = forwardRef<HTMLFieldSetElement, GroupBoxProps>(
@@ -53,11 +54,11 @@ const GroupBox = forwardRef<HTMLFieldSetElement, GroupBoxProps>(
       <StyledFieldset
         aria-disabled={disabled}
         $disabled={disabled}
-        variant={variant}
+        $variant={variant}
         ref={ref}
         {...otherProps}
       >
-        {label && <StyledLegend variant={variant}>{label}</StyledLegend>}
+        {label && <StyledLegend $variant={variant}>{label}</StyledLegend>}
         {children}
       </StyledFieldset>
     );
diff --git a/src/Handle/Handle.tsx b/src/Handle/Handle.tsx
index fc8fd851..73dc345b 100644
--- a/src/Handle/Handle.tsx
+++ b/src/Handle/Handle.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { CommonStyledProps } from '../types';
 import { getSize } from '../common/utils';
@@ -10,11 +10,11 @@ type HandleProps = {
 
 // TODO: add horizontal variant
 // TODO: allow user to specify number of bars (like 3 horizontal bars for drag handle)
-const Handle = styled.div<HandleProps>`
-  ${({ theme, size = '100%' }) => `
+const StyledHandle = styled.div<{ $size?: string | number }>`
+  ${({ theme, $size = '100%' }) => `
   display: inline-block;
   box-sizing: border-box;
-  height: ${getSize(size)};
+  height: ${getSize($size)};
   width: 5px;
   border-top: 2px solid ${theme.borderLightest};
   border-left: 2px solid ${theme.borderLightest};
@@ -24,6 +24,12 @@ const Handle = styled.div<HandleProps>`
 `}
 `;
 
+const Handle = forwardRef<HTMLDivElement, HandleProps>(
+  ({ size = '100%', ...otherProps }, ref) => {
+    return <StyledHandle $size={size} ref={ref} {...otherProps} />;
+  }
+);
+
 Handle.displayName = 'Handle';
 
 export { Handle, HandleProps };
diff --git a/src/Hourglass/Hourglass.tsx b/src/Hourglass/Hourglass.tsx
index 4f71b7eb..18f40f20 100644
--- a/src/Hourglass/Hourglass.tsx
+++ b/src/Hourglass/Hourglass.tsx
@@ -9,10 +9,10 @@ type HourglassProps = {
 } & React.HTMLAttributes<HTMLDivElement> &
   CommonStyledProps;
 
-const StyledContainer = styled.div<Required<Pick<HourglassProps, 'size'>>>`
+const StyledContainer = styled.div<{ $size: string | number }>`
   display: inline-block;
-  height: ${({ size }) => getSize(size)};
-  width: ${({ size }) => getSize(size)};
+  height: ${({ $size }) => getSize($size)};
+  width: ${({ $size }) => getSize($size)};
 `;
 
 const StyledHourglass = styled.span`
@@ -26,7 +26,7 @@ const StyledHourglass = styled.span`
 const Hourglass = forwardRef<HTMLSpanElement, HourglassProps>(
   ({ size = 30, ...otherProps }, ref) => {
     return (
-      <StyledContainer size={size} ref={ref} {...otherProps}>
+      <StyledContainer $size={size} ref={ref} {...otherProps}>
         <StyledHourglass />
       </StyledContainer>
     );
diff --git a/src/NumberInput/NumberInput.tsx b/src/NumberInput/NumberInput.tsx
index 88da010c..3fb00a03 100644
--- a/src/NumberInput/NumberInput.tsx
+++ b/src/NumberInput/NumberInput.tsx
@@ -43,14 +43,16 @@ const StyledButton = styled(Button)`
         `}
 `;
 
-const StyledButtonWrapper = styled.div<Pick<NumberInputProps, 'variant'>>`
+const StyledButtonWrapper = styled.div<{
+  $variant: NumberInputProps['variant'];
+}>`
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   justify-content: space-between;
 
-  ${({ variant }) =>
-    variant === 'flat'
+  ${({ $variant }) =>
+    $variant === 'flat'
       ? css`
           height: calc(${blockSizes.md} - 4px);
         `
@@ -60,12 +62,12 @@ const StyledButtonWrapper = styled.div<Pick<NumberInputProps, 'variant'>>`
         `}
 `;
 
-const StyledButtonIcon = styled.span<{ invert?: boolean }>`
+const StyledButtonIcon = styled.span<{ $invert?: boolean }>`
   width: 0px;
   height: 0px;
   display: inline-block;
-  ${({ invert }) =>
-    invert
+  ${({ $invert }) =>
+    $invert
       ? css`
           border-left: 4px solid transparent;
           border-right: 4px solid transparent;
@@ -80,8 +82,8 @@ const StyledButtonIcon = styled.span<{ invert?: boolean }>`
     filter: drop-shadow(
       1px 1px 0px ${({ theme }) => theme.materialTextDisabledShadow}
     );
-    ${({ invert }) =>
-      invert
+    ${({ $invert }) =>
+      $invert
         ? css`
             border-bottom-color: ${({ theme }) => theme.materialTextDisabled};
           `
@@ -174,14 +176,14 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           fullWidth
           onBlur={onBlur}
         />
-        <StyledButtonWrapper variant={variant}>
+        <StyledButtonWrapper $variant={variant}>
           <StyledButton
             data-testid='increment'
             variant={buttonVariant}
             disabled={disabled || readOnly}
             onClick={stepUp}
           >
-            <StyledButtonIcon invert />
+            <StyledButtonIcon $invert />
           </StyledButton>
           <StyledButton
             data-testid='decrement'
diff --git a/src/ProgressBar/ProgressBar.tsx b/src/ProgressBar/ProgressBar.tsx
index 349f8079..58390e3c 100644
--- a/src/ProgressBar/ProgressBar.tsx
+++ b/src/ProgressBar/ProgressBar.tsx
@@ -19,15 +19,15 @@ type ProgressBarProps = {
 } & React.HTMLAttributes<HTMLDivElement> &
   CommonStyledProps;
 
-const Wrapper = styled.div<Required<Pick<ProgressBarProps, 'variant'>>>`
+const Wrapper = styled.div<{ $variant: 'default' | 'tile' }>`
   display: inline-block;
   height: ${blockSizes.md};
   width: 100%;
 `;
 
-const ProgressCutout = styled(StyledScrollView)<
-  Required<Pick<ProgressBarProps, 'variant'>>
->`
+const ProgressCutout = styled(StyledScrollView)<{
+  $variant: 'default' | 'tile';
+}>`
   width: 100%;
   height: 100%;
   position: relative;
@@ -57,7 +57,7 @@ const WhiteBar = styled.div`
   color: ${({ theme }) => theme.materialText};
 `;
 
-const BlueBar = styled.div<Pick<ProgressBarProps, 'value'>>`
+const BlueBar = styled.div<{ $value?: number }>`
   position: absolute;
   top: 2px;
   left: 2px;
@@ -66,8 +66,8 @@ const BlueBar = styled.div<Pick<ProgressBarProps, 'value'>>`
   background: ${({ theme }) => theme.progress};
   clip-path: polygon(
     0 0,
-    ${({ value = 0 }) => value}% 0,
-    ${({ value = 0 }) => value}% 100%,
+    ${({ $value = 0 }) => $value}% 0,
+    ${({ $value = 0 }) => $value}% 100%,
     0 100%
   );
   transition: 0.4s linear clip-path;
@@ -135,14 +135,14 @@ const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
         aria-valuenow={value !== undefined ? Math.round(value) : undefined}
         ref={ref}
         role='progressbar'
-        variant={variant}
+        $variant={variant}
         {...otherProps}
       >
-        <ProgressCutout variant={variant} shadow={shadow}>
+        <ProgressCutout $variant={variant} $shadow={shadow}>
           {variant === 'default' ? (
             <>
               <WhiteBar data-testid='defaultProgress1'>{displayValue}</WhiteBar>
-              <BlueBar data-testid='defaultProgress2' value={value}>
+              <BlueBar data-testid='defaultProgress2' $value={value}>
                 {displayValue}
               </BlueBar>
             </>
diff --git a/src/ScrollView/ScrollView.tsx b/src/ScrollView/ScrollView.tsx
index 632ae1e3..c3aac09e 100644
--- a/src/ScrollView/ScrollView.tsx
+++ b/src/ScrollView/ScrollView.tsx
@@ -9,7 +9,7 @@ type ScrollViewProps = {
 } & React.HTMLAttributes<HTMLDivElement> &
   CommonStyledProps;
 
-export const StyledScrollView = styled.div<Pick<ScrollViewProps, 'shadow'>>`
+export const StyledScrollView = styled.div<{ $shadow?: boolean }>`
   position: relative;
   box-sizing: border-box;
   padding: 2px;
@@ -37,7 +37,7 @@ export const StyledScrollView = styled.div<Pick<ScrollViewProps, 'shadow'>>`
     border-bottom-color: ${({ theme }) => theme.borderLight};
 
     pointer-events: none;
-    ${props => props.shadow && `box-shadow:${insetShadow};`}
+    ${props => props.$shadow && `box-shadow:${insetShadow};`}
   }
 `;
 
@@ -53,7 +53,7 @@ const Content = styled.div`
 const ScrollView = forwardRef<HTMLDivElement, ScrollViewProps>(
   ({ children, shadow = true, ...otherProps }, ref) => {
     return (
-      <StyledScrollView ref={ref} shadow={shadow} {...otherProps}>
+      <StyledScrollView ref={ref} $shadow={shadow} {...otherProps}>
         <Content>{children}</Content>
       </StyledScrollView>
     );
diff --git a/src/Select/Select.styles.tsx b/src/Select/Select.styles.tsx
index 4697e4f6..e31e4dd4 100644
--- a/src/Select/Select.styles.tsx
+++ b/src/Select/Select.styles.tsx
@@ -109,12 +109,16 @@ export const StyledNativeSelect = styled.select`
 
 export const StyledDropdownButton = styled(Button).attrs(() => ({
   'aria-hidden': 'true'
-}))<Omit<CommonSelectStyleProps, 'variant'>>`
+}))<{
+  $disabled?: boolean;
+  native?: boolean;
+  $variant?: 'default' | 'flat' | 'raised';
+}>`
   width: 30px;
   padding: 0;
   flex-shrink: 0;
-  ${({ variant = 'default' }) =>
-    variant === 'flat'
+  ${({ $variant = 'raised' }) =>
+    $variant === 'flat'
       ? css`
           height: 100%;
           margin-right: 0;
@@ -122,9 +126,9 @@ export const StyledDropdownButton = styled(Button).attrs(() => ({
       : css`
           height: 100%;
         `}
-  ${({ native = false, variant = 'default' }) =>
+  ${({ native = false, $variant = 'raised' }) =>
     native &&
-    (variant === 'flat'
+    ($variant === 'flat'
       ? `
       position: absolute;
       right: 0;
@@ -164,7 +168,7 @@ export const StyledDropdownIcon = styled.span<CommonSelectStyleProps>`
   }
 `;
 
-export const StyledDropdownMenu = styled.ul<CommonSelectStyleProps>`
+export const StyledDropdownMenu = styled.ul<{ $variant?: SelectVariants }>`
   box-sizing: border-box;
 
   font-size: 1rem;
@@ -178,8 +182,8 @@ export const StyledDropdownMenu = styled.ul<CommonSelectStyleProps>`
   z-index: 1;
   cursor: pointer;
   box-shadow: ${commonShadow};
-  ${({ variant = 'default' }) =>
-    variant === 'flat'
+  ${({ $variant = 'default' }) =>
+    $variant === 'flat'
       ? css`
           bottom: 2px;
           width: 100%;
@@ -190,10 +194,10 @@ export const StyledDropdownMenu = styled.ul<CommonSelectStyleProps>`
           width: calc(100% - 2px);
           border: 2px solid ${({ theme }) => theme.borderDarkest};
         `}
-  ${({ variant = 'default' }) => createScrollbars(variant)}
+  ${({ $variant = 'default' }) => createScrollbars($variant)}
 `;
 
-export const StyledDropdownMenuItem = styled.li<{ active: boolean }>`
+export const StyledDropdownMenuItem = styled.li<{ $active: boolean }>`
   box-sizing: border-box;
 
   width: 100%;
@@ -209,6 +213,6 @@ export const StyledDropdownMenuItem = styled.li<{ active: boolean }>`
   &:focus {
     outline: 0;
   }
-  ${({ active }) => (active ? sharedHoverStyles : '')}
+  ${({ $active }) => ($active ? sharedHoverStyles : '')}
   user-select: none;
 `;
diff --git a/src/Select/Select.tsx b/src/Select/Select.tsx
index 1f195a7a..db49fddb 100644
--- a/src/Select/Select.tsx
+++ b/src/Select/Select.tsx
@@ -58,7 +58,7 @@ function SelectInnerOption<T>({
 
   return (
     <StyledDropdownMenuItem
-      active={active}
+      $active={active}
       aria-selected={selected ? 'true' : undefined}
       data-value={option.value}
       id={id}
@@ -229,7 +229,7 @@ function SelectInner<T>(
       {...wrapperProps}
       $disabled={disabled}
       ref={wrapperRef}
-      shadow={shadow}
+      $shadow={shadow}
       style={{ ...style, width }}
     >
       <input
@@ -267,7 +267,7 @@ function SelectInner<T>(
           role='listbox'
           style={dropdownMenuStyle}
           tabIndex={0}
-          variant={variant}
+          $variant={variant}
         >
           {optionsContent}
         </StyledDropdownMenu>
diff --git a/src/Select/useSelectCommon.tsx b/src/Select/useSelectCommon.tsx
index 3919e44b..810c71a0 100644
--- a/src/Select/useSelectCommon.tsx
+++ b/src/Select/useSelectCommon.tsx
@@ -54,7 +54,7 @@ export const useSelectCommon = <T,>({
         $disabled={disabled}
         native={native}
         tabIndex={-1}
-        variant={variant === 'flat' ? 'flat' : 'raised'}
+        $variant={variant === 'flat' ? 'flat' : 'raised'}
       >
         <StyledDropdownIcon data-testid='select-icon' $disabled={disabled} />
       </StyledDropdownButton>
diff --git a/src/Separator/Separator.tsx b/src/Separator/Separator.tsx
index 1956a098..a7082930 100644
--- a/src/Separator/Separator.tsx
+++ b/src/Separator/Separator.tsx
@@ -1,3 +1,4 @@
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { getSize } from '../common/utils';
 import { Orientation } from '../types';
@@ -5,25 +6,41 @@ import { Orientation } from '../types';
 type SeparatorProps = {
   size?: string | number;
   orientation?: Orientation;
-};
+} & React.HTMLAttributes<HTMLDivElement>;
 
-const Separator = styled.div<SeparatorProps>`
-  ${({ orientation, theme, size = '100%' }) =>
-    orientation === 'vertical'
+const StyledSeparator = styled.div<{
+  $orientation?: Orientation;
+  $size?: string | number;
+}>`
+  ${({ $orientation, theme, $size = '100%' }) =>
+    $orientation === 'vertical'
       ? `
-    height: ${getSize(size)};
+    height: ${getSize($size)};
     border-left: 2px solid ${theme.borderDark};
     border-right: 2px solid ${theme.borderLightest};
     margin: 0;
     `
       : `
-    width: ${getSize(size)};
+    width: ${getSize($size)};
     border-bottom: 2px solid ${theme.borderLightest};
     border-top: 2px solid ${theme.borderDark};
     margin: 0;
     `}
 `;
 
+const Separator = forwardRef<HTMLDivElement, SeparatorProps>(
+  ({ size = '100%', orientation, ...otherProps }, ref) => {
+    return (
+      <StyledSeparator
+        $size={size}
+        $orientation={orientation}
+        ref={ref}
+        {...otherProps}
+      />
+    );
+  }
+);
+
 Separator.displayName = 'Separator';
 
 export { Separator, SeparatorProps };
diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx
index 617b682a..cdd9bde7 100644
--- a/src/Slider/Slider.tsx
+++ b/src/Slider/Slider.tsx
@@ -108,13 +108,13 @@ function findClosest(values: number[], currentValue: number) {
   return closestIndex ?? -1;
 }
 
-type StyledSliderProps = Pick<
-  SliderProps,
-  'orientation' | 'size' | 'variant'
-> & {
+type StyledSliderProps = {
+  $orientation?: SliderProps['orientation'];
+  $size?: SliderProps['size'];
+  $variant?: SliderProps['variant'];
   $disabled?: boolean;
-  hasMarks?: boolean;
-  isFocused?: boolean;
+  $hasMarks?: boolean;
+  $isFocused?: boolean;
 };
 
 const Wrapper = styled.div<StyledSliderProps>`
@@ -128,34 +128,34 @@ const Wrapper = styled.div<StyledSliderProps>`
     top: -2px;
     left: -15px;
     width: calc(100% + 30px);
-    height: ${({ hasMarks }) => (hasMarks ? '41px' : '39px')};
-    ${({ isFocused, theme }) =>
-      isFocused &&
+    height: ${({ $hasMarks }) => ($hasMarks ? '41px' : '39px')};
+    ${({ $isFocused, theme }) =>
+      $isFocused &&
       `
         outline: 2px dotted ${theme.materialText};
         `}
   }
 
-  ${({ orientation, size }) =>
-    orientation === 'vertical'
+  ${({ $orientation, $size }) =>
+    $orientation === 'vertical'
       ? css<StyledSliderProps>`
-          height: ${size};
+          height: ${$size};
           margin-right: 1.5rem;
           &:before {
             left: -6px;
             top: -15px;
             height: calc(100% + 30px);
-            width: ${({ hasMarks }) => (hasMarks ? '41px' : '39px')};
+            width: ${({ $hasMarks }) => ($hasMarks ? '41px' : '39px')};
           }
         `
       : css<StyledSliderProps>`
-          width: ${size};
+          width: ${$size};
           margin-bottom: 1.5rem;
           &:before {
             top: -2px;
             left: -15px;
             width: calc(100% + 30px);
-            height: ${({ hasMarks }) => (hasMarks ? '41px' : '39px')};
+            height: ${({ $hasMarks }) => ($hasMarks ? '41px' : '39px')};
           }
         `}
 
@@ -163,8 +163,8 @@ const Wrapper = styled.div<StyledSliderProps>`
 `;
 const sharedGrooveStyles = () => css<StyledSliderProps>`
   position: absolute;
-  ${({ orientation }) =>
-    orientation === 'vertical'
+  ${({ $orientation }) =>
+    $orientation === 'vertical'
       ? css`
           bottom: 0;
           left: 50%;
@@ -199,8 +199,8 @@ const StyledFlatGroove = styled(StyledScrollView)<StyledSliderProps>`
 `;
 const Thumb = styled.span<StyledSliderProps>`
   position: relative;
-  ${({ orientation }) =>
-    orientation === 'vertical'
+  ${({ $orientation }) =>
+    $orientation === 'vertical'
       ? css`
           width: 32px;
           height: 18px;
@@ -213,8 +213,8 @@ const Thumb = styled.span<StyledSliderProps>`
           top: 2px;
           transform: translateX(-50%);
         `}
-  ${({ variant }) =>
-    variant === 'flat'
+  ${({ $variant }) =>
+    $variant === 'flat'
       ? css`
           ${createFlatBoxStyles()}
           outline: 2px solid ${({ theme }) => theme.flatDark};
@@ -240,8 +240,8 @@ const Tick = styled.span<StyledSliderProps>`
   display: inline-block;
   position: absolute;
 
-  ${({ orientation }) =>
-    orientation === 'vertical'
+  ${({ $orientation }) =>
+    $orientation === 'vertical'
       ? css`
           right: ${-tickHeight - 2}px;
           bottom: 0px;
@@ -273,8 +273,8 @@ const Mark = styled.div<StyledSliderProps>`
   line-height: 1;
   font-size: 0.875rem;
 
-  ${({ orientation }) =>
-    orientation === 'vertical'
+  ${({ $orientation }) =>
+    $orientation === 'vertical'
       ? css`
           transform: translate(${tickHeight + 2}px, ${tickHeight + 1}px);
         `
@@ -548,12 +548,12 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
     return (
       <Wrapper
         $disabled={disabled}
-        hasMarks={Boolean(marks.length)}
-        isFocused={focusVisible}
+        $hasMarks={Boolean(marks.length)}
+        $isFocused={focusVisible}
         onMouseDown={handleMouseDown}
-        orientation={orientation}
+        $orientation={orientation}
         ref={handleRef}
-        size={getSize(size)}
+        $size={getSize(size)}
         {...otherProps}
       >
         {/* should we keep the hidden input ? */}
@@ -569,7 +569,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
               $disabled={disabled}
               data-testid='tick'
               key={(m.value / (max - min)) * 100}
-              orientation={orientation}
+              $orientation={orientation}
               style={{
                 [vertical ? 'bottom' : 'left']: `${
                   ((m.value - min) / (max - min)) * 100
@@ -577,13 +577,13 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
               }}
             >
               {m.label && (
-                <Mark aria-hidden data-testid='mark' orientation={orientation}>
+                <Mark aria-hidden data-testid='mark' $orientation={orientation}>
                   {m.label}
                 </Mark>
               )}
             </Tick>
           ))}
-        <Groove orientation={orientation} variant={variant} />
+        <Groove $orientation={orientation} $variant={variant} />
         <Thumb
           $disabled={disabled}
           aria-disabled={disabled ? true : undefined}
@@ -594,7 +594,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
           onBlur={handleBlur}
           onFocus={handleFocus}
           onKeyDown={handleKeyDown}
-          orientation={orientation}
+          $orientation={orientation}
           ref={thumbRef}
           role='slider'
           style={{
@@ -603,7 +603,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
             }%`
           }}
           tabIndex={disabled ? undefined : 0}
-          variant={variant}
+          $variant={variant}
         />
       </Wrapper>
     );
diff --git a/src/Tabs/Tab.tsx b/src/Tabs/Tab.tsx
index 6977e586..7361517f 100644
--- a/src/Tabs/Tab.tsx
+++ b/src/Tabs/Tab.tsx
@@ -15,7 +15,7 @@ type TabProps = {
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'value'> &
   CommonStyledProps;
 
-const StyledTab = styled.button<TabProps>`
+const StyledTab = styled.button<{ $selected?: boolean }>`
   ${createBoxStyles()}
   ${createBorderStyles()}
   position: relative;
@@ -46,7 +46,7 @@ const StyledTab = styled.button<TabProps>`
     outline-offset: -6px;
   }
   ${props =>
-    props.selected &&
+    props.$selected &&
     `
     z-index: 1;
     height: calc(${blockSizes.md} + 4px);
@@ -74,7 +74,7 @@ const Tab = forwardRef<HTMLButtonElement, TabProps>(
     return (
       <StyledTab
         aria-selected={selected}
-        selected={selected}
+        $selected={selected}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
           onClick?.(value, e)
         }
diff --git a/src/Tabs/Tabs.tsx b/src/Tabs/Tabs.tsx
index b0c95582..126f6b16 100644
--- a/src/Tabs/Tabs.tsx
+++ b/src/Tabs/Tabs.tsx
@@ -13,10 +13,10 @@ type TabsProps = {
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value'> &
   CommonStyledProps;
 
-const StyledTabs = styled.div<{ isMultiRow: boolean }>`
+const StyledTabs = styled.div<{ $isMultiRow: boolean }>`
   position: relative;
-  ${({ isMultiRow, theme }) =>
-    isMultiRow &&
+  ${({ $isMultiRow, theme }) =>
+    $isMultiRow &&
     `
   button {
     flex-grow: 1;
@@ -89,7 +89,7 @@ const Tabs = forwardRef<HTMLDivElement, TabsProps>(
     return (
       <StyledTabs
         {...otherProps}
-        isMultiRow={rows > 1}
+        $isMultiRow={rows > 1}
         role='tablist'
         ref={ref}
       >
diff --git a/src/TextInput/TextInput.tsx b/src/TextInput/TextInput.tsx
index 11f92999..00f2a699 100644
--- a/src/TextInput/TextInput.tsx
+++ b/src/TextInput/TextInput.tsx
@@ -39,13 +39,15 @@ type TextInputProps = {
 } & (TextInputInputProps | TextInputTextAreaProps) &
   CommonStyledProps;
 
-type WrapperProps = Pick<TextInputProps, 'fullWidth' | 'variant'> &
-  CommonThemeProps;
+type WrapperProps = {
+  $fullWidth?: boolean;
+  $variant?: TextInputProps['variant'];
+} & CommonThemeProps;
 
 const sharedWrapperStyles = css<WrapperProps>`
   display: flex;
   align-items: center;
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
   min-height: ${blockSizes.md};
 `;
 
@@ -65,7 +67,11 @@ const FlatWrapper = styled.div.attrs({
   position: relative;
 `;
 
-type InputProps = Pick<TextInputProps, 'disabled' | 'fullWidth' | 'variant'>;
+type InputProps = {
+  disabled?: boolean;
+  $fullWidth?: boolean;
+  $variant?: TextInputProps['variant'];
+};
 
 const sharedInputStyles = css<InputProps>`
   display: block;
@@ -79,8 +85,8 @@ const sharedInputStyles = css<InputProps>`
   min-height: 27px;
   font-family: inherit;
   color: ${({ theme }) => theme.canvasText};
-  ${({ disabled, variant }) =>
-    variant !== 'flat' && disabled && createDisabledTextStyles()}
+  ${({ disabled, $variant }) =>
+    $variant !== 'flat' && disabled && createDisabledTextStyles()}
 `;
 
 const StyledTextInput = styled.input<InputProps>`
@@ -92,7 +98,7 @@ const StyledTextArea = styled.textarea<InputProps>`
   ${sharedInputStyles}
   padding: 8px;
   resize: none;
-  ${({ variant }) => createScrollbars(variant)}
+  ${({ $variant }) => createScrollbars($variant)}
 `;
 
 const TextInput = forwardRef<
@@ -122,7 +128,7 @@ const TextInput = forwardRef<
             onChange={disabled ? undefined : onChange}
             readOnly={disabled}
             ref={ref}
-            variant={variant}
+            $variant={variant}
             {...otherProps}
           />
         ) : (
@@ -132,7 +138,7 @@ const TextInput = forwardRef<
             readOnly={disabled}
             ref={ref}
             type={otherProps.type ?? 'text'}
-            variant={variant}
+            $variant={variant}
             {...otherProps}
           />
         ),
@@ -142,9 +148,9 @@ const TextInput = forwardRef<
     return (
       <WrapperComponent
         className={className}
-        fullWidth={fullWidth}
+        $fullWidth={fullWidth}
         $disabled={disabled}
-        shadow={shadow}
+        $shadow={shadow}
         style={style}
       >
         {field}
diff --git a/src/Toolbar/Toolbar.tsx b/src/Toolbar/Toolbar.tsx
index 032897cd..422d8c5b 100644
--- a/src/Toolbar/Toolbar.tsx
+++ b/src/Toolbar/Toolbar.tsx
@@ -6,11 +6,15 @@ type ToolbarProps = {
   noPadding?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-const StyledToolbar = styled.div<ToolbarProps>`
+type StyledToolbarProps = {
+  $noPadding?: boolean;
+};
+
+const StyledToolbar = styled.div<StyledToolbarProps>`
   position: relative;
   display: flex;
   align-items: center;
-  padding: ${props => (props.noPadding ? '0' : '4px')};
+  padding: ${props => (props.$noPadding ? '0' : '4px')};
 `;
 
 const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(function Toolbar(
@@ -18,7 +22,7 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(function Toolbar(
   ref
 ) {
   return (
-    <StyledToolbar noPadding={noPadding} ref={ref} {...otherProps}>
+    <StyledToolbar $noPadding={noPadding} ref={ref} {...otherProps}>
       {children}
     </StyledToolbar>
   );
diff --git a/src/Tooltip/Tooltip.tsx b/src/Tooltip/Tooltip.tsx
index 60cf5558..3e56fa79 100644
--- a/src/Tooltip/Tooltip.tsx
+++ b/src/Tooltip/Tooltip.tsx
@@ -48,18 +48,18 @@ const positioningStyles: Record<TooltipPosition, string> = {
           transform: translate(100%, -50%);`
 };
 
-const Tip = styled.span<{ position: TooltipPosition; show: boolean }>`
+const Tip = styled.span<{ $position: TooltipPosition; $show: boolean }>`
   position: absolute;
 
   z-index: 1;
-  display: ${props => (props.show ? 'block' : 'none')};
+  display: ${props => (props.$show ? 'block' : 'none')};
   padding: 4px;
   border: 2px solid ${({ theme }) => theme.borderDarkest};
   background: ${({ theme }) => theme.tooltip};
   box-shadow: ${shadow};
   text-align: center;
   font-size: 1rem;
-  ${props => positioningStyles[props.position]}
+  ${props => positioningStyles[props.$position]}
 `;
 
 const Wrapper = styled.div`
@@ -178,9 +178,9 @@ const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(
         <Tip
           className={className}
           data-testid='tooltip'
-          position={position}
+          $position={position}
           ref={ref}
-          show={show}
+          $show={show}
           style={style}
           {...otherProps}
         >
diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx
index d896957f..b112b96b 100644
--- a/src/TreeView/TreeView.tsx
+++ b/src/TreeView/TreeView.tsx
@@ -66,12 +66,12 @@ const focusedElementStyles = css<{ $disabled: boolean }>`
       : `cursor: default;`}
 `;
 
-const TreeWrapper = styled.ul<{ isRootLevel: boolean }>`
+const TreeWrapper = styled.ul<{ $isRootLevel: boolean }>`
   position: relative;
   isolation: isolate;
 
-  ${({ isRootLevel }) =>
-    isRootLevel &&
+  ${({ $isRootLevel }) =>
+    $isRootLevel &&
     css`
       &:before {
         content: '';
@@ -103,12 +103,12 @@ const TreeWrapper = styled.ul<{ isRootLevel: boolean }>`
   }
 `;
 
-const TreeItem = styled.li<{ hasItems: boolean; isRootLevel: boolean }>`
+const TreeItem = styled.li<{ $hasItems: boolean; $isRootLevel: boolean }>`
   position: relative;
-  padding-left: ${({ hasItems }) => (!hasItems ? '13px' : '0')};
+  padding-left: ${({ $hasItems }) => (!$hasItems ? '13px' : '0')};
 
-  ${({ isRootLevel }) =>
-    !isRootLevel
+  ${({ $isRootLevel }) =>
+    !$isRootLevel
       ? css`
           &:last-child {
             &:after {
@@ -248,11 +248,11 @@ function TreeBranch<T>({
       return (
         <TreeItem
           key={item.label}
-          isRootLevel={isRootLevel}
+          $isRootLevel={isRootLevel}
           role='treeitem'
           aria-expanded={isMenuShown}
           aria-selected={isSelected}
-          hasItems={hasItems}
+          $hasItems={hasItems}
         >
           {!hasItems ? (
             <TitleWithIcon
@@ -298,7 +298,7 @@ function TreeBranch<T>({
       style={isRootLevel ? style : undefined}
       ref={isRootLevel ? innerRef : undefined}
       role={isRootLevel ? 'tree' : 'group'}
-      isRootLevel={isRootLevel}
+      $isRootLevel={isRootLevel}
     >
       {tree.map(renderLeaf)}
     </TreeWrapper>
diff --git a/src/Window/Window.tsx b/src/Window/Window.tsx
index 79c003dd..987e4eef 100644
--- a/src/Window/Window.tsx
+++ b/src/Window/Window.tsx
@@ -53,7 +53,7 @@ const Window = forwardRef<HTMLDivElement, WindowProps>(
     ref
   ) => {
     return (
-      <StyledWindow ref={ref} shadow={shadow} {...otherProps}>
+      <StyledWindow ref={ref} $shadow={shadow} {...otherProps}>
         {children}
         {resizable && (
           <ResizeHandle data-testid='resizeHandle' ref={resizeRef} />
diff --git a/src/Window/WindowHeader.tsx b/src/Window/WindowHeader.tsx
index 8c1bdd71..09816288 100644
--- a/src/Window/WindowHeader.tsx
+++ b/src/Window/WindowHeader.tsx
@@ -9,15 +9,15 @@ type WindowHeaderProps = {
 } & React.HTMLAttributes<HTMLDivElement> &
   CommonStyledProps;
 
-const StyledWindowHeader = styled.div<Pick<WindowHeaderProps, 'active'>>`
+const StyledWindowHeader = styled.div<{ $active?: boolean }>`
   height: 33px;
   line-height: 33px;
   padding-left: 0.25rem;
   padding-right: 3px;
   font-weight: bold;
   border: 2px solid ${({ theme }) => theme.material};
-  ${({ active }) =>
-    active === false
+  ${({ $active }) =>
+    $active === false
       ? css`
           background: ${({ theme }) => theme.headerNotActiveBackground};
           color: ${({ theme }) => theme.headerNotActiveText};
@@ -39,7 +39,7 @@ const StyledWindowHeader = styled.div<Pick<WindowHeaderProps, 'active'>>`
 const WindowHeader = forwardRef<HTMLDivElement, WindowHeaderProps>(
   function WindowHeader({ active = true, children, ...otherProps }, ref) {
     return (
-      <StyledWindowHeader active={active} ref={ref} {...otherProps}>
+      <StyledWindowHeader $active={active} ref={ref} {...otherProps}>
         {children}
       </StyledWindowHeader>
     );
diff --git a/src/common/index.ts b/src/common/index.ts
index 6789ed15..0f266258 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -178,12 +178,12 @@ export const createBorderStyles = ({
       theme[borderStyles[style][borders.bottomRightOuter]]};
     border-bottom-color: ${({ theme }) =>
       theme[borderStyles[style][borders.bottomRightOuter]]};
-    box-shadow: ${({ theme, shadow: hasShadow }) =>
+    box-shadow: ${({ theme, shadow, $shadow }) =>
       createInnerBorderWithShadow({
         theme,
         topLeftInner: borderStyles[style][borders.topLeftInner],
         bottomRightInner: borderStyles[style][borders.bottomRightInner],
-        hasShadow
+        hasShadow: $shadow ?? shadow
       })};
   `;
 };
diff --git a/src/types.ts b/src/types.ts
index 9e75b220..6f85253a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -24,6 +24,8 @@ export type HTMLDataAttributes = Record<`data-${string}`, any>;
 export type CommonThemeProps = {
   'data-testid'?: string;
   $disabled?: boolean;
+  $shadow?: boolean;
+  /** @deprecated use $shadow */
   shadow?: boolean;
 };