From cebb363a31c699d85a78b0dff55b5694465fed43 Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Sat, 2 Dec 2023 21:26:17 +0100
Subject: [PATCH] fix: linter warnings related with transient props (#330)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: rename cardSize → $cardSize

* refactor: rename isLoading → $isLoading

* refactor: rename useNanoClamp → $useNanoClamp
---
 .../react/src/components/Card/CardContent.js  | 38 +++++++++----------
 .../react/src/components/Card/CardEmpty.js    | 24 ++++++------
 .../Card/CardMedia/Controls/FooterControls.js | 28 +++++++-------
 .../Card/CardMedia/Controls/PlaybackButton.js | 12 +++---
 .../Controls/ProgressBar/Scrubber.js          |  5 +--
 .../CardMedia/Controls/ProgressBar/Tooltip.js |  4 +-
 .../CardMedia/Controls/ProgressBar/index.js   | 16 ++++----
 .../Card/CardMedia/Controls/SeekButton.js     | 20 +++++-----
 .../Card/CardMedia/Controls/Spinner.js        |  8 ++--
 .../Card/CardMedia/Controls/index.js          | 10 ++---
 .../src/components/Card/CardMedia/Wrap.js     |  4 +-
 .../src/components/Card/CardMedia/index.js    |  2 +-
 .../src/components/Card/CardMedia/loader.js   |  6 +--
 .../react/src/components/Card/CardText.js     |  6 +--
 .../react/src/components/Card/CardWrap.js     | 12 +++---
 packages/react/src/index.js                   |  2 +-
 packages/react/src/utils/index.js             | 14 +++----
 17 files changed, 105 insertions(+), 106 deletions(-)

diff --git a/packages/react/src/components/Card/CardContent.js b/packages/react/src/components/Card/CardContent.js
index ffc554c92..4616022d3 100644
--- a/packages/react/src/components/Card/CardContent.js
+++ b/packages/react/src/components/Card/CardContent.js
@@ -33,11 +33,11 @@ export const Content = styled('div').attrs({ className: classNames.content })`
   padding: 10px 15px;
   min-width: 0;
   box-sizing: border-box;
-  ${({ cardSize }) => css`
-    flex: ${!isLarge(cardSize) ? 1 : '0 0 125px'};
-    justify-content: ${!isSmall(cardSize) ? 'space-around' : 'space-between'};
-    flex-direction: ${!isSmall(cardSize) ? 'column' : 'row'};
-    align-items: ${!isSmall(cardSize) ? 'stretch' : 'center'};
+  ${({ $cardSize }) => css`
+    flex: ${!isLarge($cardSize) ? 1 : '0 0 125px'};
+    justify-content: ${!isSmall($cardSize) ? 'space-around' : 'space-between'};
+    flex-direction: ${!isSmall($cardSize) ? 'column' : 'row'};
+    align-items: ${!isSmall($cardSize) ? 'stretch' : 'center'};
   `};
 `
 
@@ -46,11 +46,11 @@ const Header = styled('header').attrs({ className: classNames.title })`
   font-weight: bold;
   margin: 0;
   width: 100%;
-  ${({ cardSize }) => css`
-    flex-grow: ${!isSmall(cardSize) ? 1.2 : 0.8};
-    font-size: ${!isSmall(cardSize) ? '16px' : '15px'};
+  ${({ $cardSize }) => css`
+    flex-grow: ${!isSmall($cardSize) ? 1.2 : 0.8};
+    font-size: ${!isSmall($cardSize) ? '16px' : '15px'};
 
-    ${isSmall(cardSize) &&
+    ${isSmall($cardSize) &&
     css`
       min-width: 0;
       padding-right: 14px;
@@ -65,7 +65,7 @@ const Description = styled('div').attrs({ className: classNames.description })`
   margin: auto 0;
   line-height: 18px;
   font-weight: normal;
-  ${({ cardSize }) => !isLarge(cardSize) && mobileDescriptionStyle};
+  ${({ $cardSize }) => !isLarge($cardSize) && mobileDescriptionStyle};
 `
 
 const Footer = styled('footer').attrs({ className: classNames.url })`
@@ -76,9 +76,9 @@ const Footer = styled('footer').attrs({ className: classNames.url })`
   margin: 0;
   flex-grow: 0;
   font-weight: normal;
-  ${({ cardSize }) => css`
-    font-size: ${!isSmall(cardSize) ? '12px' : '10px'};
-    ${!isSmall(cardSize) && 'width: 100%;'}
+  ${({ $cardSize }) => css`
+    font-size: ${!isSmall($cardSize) ? '12px' : '10px'};
+    ${!isSmall($cardSize) && 'width: 100%;'}
   `};
 `
 
@@ -123,17 +123,17 @@ const CardContent = () => {
   }, [])
 
   return (
-    <Content cardSize={size}>
-      <Header cardSize={size}>
-        <CardText useNanoClamp={false}>{title}</CardText>
+    <Content $cardSize={size}>
+      <Header $cardSize={size}>
+        <CardText $useNanoClamp={false}>{title}</CardText>
       </Header>
       {!isSmallCard && (
-        <Description cardSize={size}>
+        <Description $cardSize={size}>
           <CardText lines={2}>{description}</CardText>
         </Description>
       )}
-      <Footer cardSize={size}>
-        <Author useNanoClamp={false}>{formattedUrl}</Author>
+      <Footer $cardSize={size}>
+        <Author $useNanoClamp={false}>{formattedUrl}</Author>
         <PoweredBy onClick={handleOnClick} />
       </Footer>
     </Content>
diff --git a/packages/react/src/components/Card/CardEmpty.js b/packages/react/src/components/Card/CardEmpty.js
index 43ee9cf53..468c4afe0 100644
--- a/packages/react/src/components/Card/CardEmpty.js
+++ b/packages/react/src/components/Card/CardEmpty.js
@@ -16,15 +16,15 @@ const MediaEmpty = styled(CardImage)`
 const HeaderEmpty = styled('span')`
   opacity: 0.8;
   height: 16px;
-  width: ${({ cardSize }) => (!isSmall(cardSize) ? '60%' : '75%')};
+  width: ${({ $cardSize }) => (!isSmall($cardSize) ? '60%' : '75%')};
   display: block;
   background: #e1e8ed;
-  margin: ${({ cardSize }) =>
-    !isSmall(cardSize) ? '2px 0 8px' : '0 20px 0 0'};
+  margin: ${({ $cardSize }) =>
+    !isSmall($cardSize) ? '2px 0 8px' : '0 20px 0 0'};
   ${emptyStateAnimation};
 
-  ${({ cardSize }) =>
-    !isLarge(cardSize) &&
+  ${({ $cardSize }) =>
+    !isLarge($cardSize) &&
     `
     height: 15px;
   `};
@@ -47,8 +47,8 @@ const FooterEmpty = styled('span')`
   display: block;
   ${emptyStateAnimation} animation-delay: .25s;
 
-  ${({ cardSize }) =>
-    !isLarge(cardSize) &&
+  ${({ $cardSize }) =>
+    !isLarge($cardSize) &&
     `
     height: 10px;
   `};
@@ -62,14 +62,14 @@ const CardEmptyState = () => {
 
   return (
     <>
-      <MediaEmpty cardSize={size} />
-      <Content cardSize={size}>
-        <HeaderEmpty cardSize={size} />
+      <MediaEmpty $cardSize={size} />
+      <Content $cardSize={size}>
+        <HeaderEmpty $cardSize={size} />
         {!isSmallCard ? (
           <>
-            <DescriptionEmpty cardSize={size} />
+            <DescriptionEmpty $cardSize={size} />
             <DescriptionEmpty
-              cardSize={size}
+              $cardSize={size}
               style={{ marginBottom: '12px' }}
             />
           </>
diff --git a/packages/react/src/components/Card/CardMedia/Controls/FooterControls.js b/packages/react/src/components/Card/CardMedia/Controls/FooterControls.js
index 19246ba51..bff241b76 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/FooterControls.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/FooterControls.js
@@ -34,7 +34,7 @@ const VolumeUp = props => (
 const BottomControls = styled('div')`
   z-index: 2;
   position: absolute;
-  bottom: ${({ cardSize }) => (isLarge(cardSize) ? 18 : 14)}px;
+  bottom: ${({ $cardSize }) => (isLarge($cardSize) ? 18 : 14)}px;
   left: 0;
   right: 0;
   display: flex;
@@ -52,11 +52,11 @@ const VolumeButton = styled(MediaButton).attrs({
   className: classNames.volumeControl
 })`
   ${VolumeIcon} {
-    width: ${({ cardSize }) => (isLarge(cardSize) ? 16 : 14)}px;
-    height: ${({ cardSize }) => (isLarge(cardSize) ? 16 : 14)}px;
+    width: ${({ $cardSize }) => (isLarge($cardSize) ? 16 : 14)}px;
+    height: ${({ $cardSize }) => (isLarge($cardSize) ? 16 : 14)}px;
 
-    ${({ cardSize }) =>
-      !isLarge(cardSize) &&
+    ${({ $cardSize }) =>
+      !isLarge($cardSize) &&
       media.mobile`
       width: 12px;
       height: 12px;
@@ -67,8 +67,8 @@ const VolumeButton = styled(MediaButton).attrs({
 const PlaybackRateButton = styled(MediaButton).attrs({
   className: classNames.rateControl
 })`
-  font-size: ${({ cardSize }) => (isLarge(cardSize) ? 12 : 10)}px;
-  min-width: ${({ cardSize }) => (isLarge(cardSize) ? 33 : 28)}px;
+  font-size: ${({ $cardSize }) => (isLarge($cardSize) ? 12 : 10)}px;
+  min-width: ${({ $cardSize }) => (isLarge($cardSize) ? 33 : 28)}px;
   line-height: 1;
   font-weight: bold;
   border: 1.5px solid #fff;
@@ -78,8 +78,8 @@ const PlaybackRateButton = styled(MediaButton).attrs({
   color: #fff;
   margin-left: 10px;
 
-  ${({ cardSize }) =>
-    !isLarge(cardSize) &&
+  ${({ $cardSize }) =>
+    !isLarge($cardSize) &&
     media.mobile`
     font-size: 8px;
     margin-left: 8px;
@@ -97,7 +97,7 @@ const TimeLabel = styled('span').attrs({ className: classNames.progressTime })`
 `
 
 const FooterControls = ({
-  cardSize,
+  $cardSize,
   currentTime,
   endTime,
   isMuted,
@@ -109,15 +109,15 @@ const FooterControls = ({
     () => (isMuted ? VolumeMute : VolumeUp),
     [isMuted]
   )
-  const isLargeCard = useMemo(() => isLarge(cardSize), [cardSize])
+  const isLargeCard = useMemo(() => isLarge($cardSize), [$cardSize])
 
   return (
-    <BottomControls cardSize={cardSize}>
+    <BottomControls $cardSize={$cardSize}>
       {isLargeCard && <TimeLabel>{currentTime}</TimeLabel>}
 
       <VolumeButton
         title={isMuted ? 'Unmute' : 'Mute'}
-        cardSize={cardSize}
+        $cardSize={$cardSize}
         onClick={onMuteClick}
       >
         <VolumeIcon as={VolumeComponent} />
@@ -125,7 +125,7 @@ const FooterControls = ({
 
       <PlaybackRateButton
         title='Playback Rate'
-        cardSize={cardSize}
+        $cardSize={$cardSize}
         onClick={onPlaybackRateClick}
       >
         <span>{playbackRate}x</span>
diff --git a/packages/react/src/components/Card/CardMedia/Controls/PlaybackButton.js b/packages/react/src/components/Card/CardMedia/Controls/PlaybackButton.js
index dd3b40d62..332e9b12b 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/PlaybackButton.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/PlaybackButton.js
@@ -44,13 +44,13 @@ const PlaybackButtonWrap = styled(MediaButton).attrs({
   className: classNames.playbackControl
 })`
   ${PlaybackIcon} {
-    ${({ cardSize }) => css`
-      width: ${iconSizes[cardSize]};
-      height: ${iconSizes[cardSize]};
-      padding: ${isLarge(cardSize) ? 0 : '8px'};
+    ${({ $cardSize }) => css`
+      width: ${iconSizes[$cardSize]};
+      height: ${iconSizes[$cardSize]};
+      padding: ${isLarge($cardSize) ? 0 : '8px'};
 
-      ${!isLarge(cardSize) &&
-      !isSmall(cardSize) &&
+      ${!isLarge($cardSize) &&
+      !isSmall($cardSize) &&
       media.mobile`
         width: calc(${iconSizes.small} * 1.2);
         height: calc(${iconSizes.small} * 1.2);
diff --git a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Scrubber.js b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Scrubber.js
index e76969487..1b78e5a5b 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Scrubber.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Scrubber.js
@@ -28,9 +28,8 @@ const Scrubber = styled('div').attrs(({ isVisible, positionX }) => ({
   backface-visibility: hidden;
   z-index: 3;
 
-  ${({ cardSize }) => {
-    const scrubberSize = getScrubberSize(cardSize)
-
+  ${({ $cardSize }) => {
+    const scrubberSize = getScrubberSize($cardSize)
     return css`
       height: ${scrubberSize}px;
       width: ${scrubberSize}px;
diff --git a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Tooltip.js b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Tooltip.js
index 32e00261e..b78ed0999 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Tooltip.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Tooltip.js
@@ -26,7 +26,7 @@ const TooltipBase = styled('span').attrs(
   padding: 2px 3px;
   border-radius: 4px;
   font-family: ${font.mono};
-  font-size: ${({ cardSize }) => getMarkerFontSize(cardSize)}px;
+  font-size: ${({ $cardSize }) => getMarkerFontSize($cardSize)}px;
   line-height: 1;
   transition: ${transition.medium('opacity', 'visibility', 'transform')},
     ${transition.long('top')};
@@ -40,7 +40,7 @@ const Tooltip = forwardRef(
       <TooltipBase
         visible={isVisible}
         position={positionX}
-        cardSize={size}
+        $cardSize={size}
         ref={ref}
         isDragging={isDragging}
         {...props}
diff --git a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/index.js b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/index.js
index e11b19253..72f4cf3f6 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/index.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/index.js
@@ -34,9 +34,9 @@ const OuterWrap = styled('div').attrs(() => ({
   backface-visibility: hidden;
 `
 
-const BarsWrap = styled('div').attrs(({ cardSize, isDragging }) => {
+const BarsWrap = styled('div').attrs(({ $cardSize, isDragging }) => {
   if (isDragging) {
-    const activeHeight = getProgressBarActiveHeight(cardSize)
+    const activeHeight = getProgressBarActiveHeight($cardSize)
 
     return {
       style: {
@@ -56,9 +56,9 @@ const BarsWrap = styled('div').attrs(({ cardSize, isDragging }) => {
   pointer-events: none;
   position: relative;
 
-  ${({ cardSize }) => {
-    const height = getProgressBarHeight(cardSize)
-    const activeHeight = getProgressBarActiveHeight(cardSize)
+  ${({ $cardSize }) => {
+    const height = getProgressBarHeight($cardSize)
+    const activeHeight = getProgressBarActiveHeight($cardSize)
 
     return css`
       height: ${height}px;
@@ -218,8 +218,8 @@ const ProgressBar = ({
   )
 
   return (
-    <OuterWrap cardSize={size} ref={wrapRef} {...mouseEvents}>
-      <BarsWrap cardSize={size} isDragging={isDragging}>
+    <OuterWrap $cardSize={size} ref={wrapRef} {...mouseEvents}>
+      <BarsWrap $cardSize={size} isDragging={isDragging}>
         <ProgressLine>
           <ProgressHover
             cursorRatio={cursorRatio}
@@ -235,7 +235,7 @@ const ProgressBar = ({
         </ProgressLine>
 
         <Scrubber
-          cardSize={size}
+          $cardSize={size}
           isVisible={showAccessories}
           positionX={progressPercent}
         />
diff --git a/packages/react/src/components/Card/CardMedia/Controls/SeekButton.js b/packages/react/src/components/Card/CardMedia/Controls/SeekButton.js
index 65101f141..dbd4621b9 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/SeekButton.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/SeekButton.js
@@ -4,7 +4,7 @@ import { styled } from 'styled-components'
 import MediaButton from './MediaButton'
 import { media, isLarge } from '../../../../utils'
 
-const Backward = ({ cardSize, ...props }) => (
+const Backward = ({ $cardSize, ...props }) => (
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 29' {...props}>
     <path
       fill='#FFF'
@@ -17,7 +17,7 @@ const Backward = ({ cardSize, ...props }) => (
   </svg>
 )
 
-const Forward = ({ cardSize, ...props }) => (
+const Forward = ({ $cardSize, ...props }) => (
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 29' {...props}>
     <path
       fill='#FFF'
@@ -32,11 +32,11 @@ const Forward = ({ cardSize, ...props }) => (
 
 const SeekIcon = styled('svg')`
   stroke: #fff;
-  width: ${({ cardSize }) => (isLarge(cardSize) ? 30 : 24)}px;
-  height: ${({ cardSize }) => (isLarge(cardSize) ? 30 : 24)}px;
+  width: ${({ $cardSize }) => (isLarge($cardSize) ? 30 : 24)}px;
+  height: ${({ $cardSize }) => (isLarge($cardSize) ? 30 : 24)}px;
 
-  ${({ cardSize }) =>
-    !isLarge(cardSize) &&
+  ${({ $cardSize }) =>
+    !isLarge($cardSize) &&
     media.mobile`
     width: 0;
     height: 0;
@@ -44,10 +44,10 @@ const SeekIcon = styled('svg')`
 `
 
 const SeekButtonWrap = styled(MediaButton)`
-  margin: 0 ${({ cardSize }) => (isLarge(cardSize) ? '28px' : '3px')};
+  margin: 0 ${({ $cardSize }) => (isLarge($cardSize) ? '28px' : '3px')};
 `
 
-const SeekButton = ({ type = 'rewind', cardSize, ...props }) => {
+const SeekButton = ({ type = 'rewind', $cardSize, ...props }) => {
   const IconComponent = useMemo(
     () => (type === 'rewind' ? Backward : Forward),
     [type]
@@ -56,10 +56,10 @@ const SeekButton = ({ type = 'rewind', cardSize, ...props }) => {
   return (
     <SeekButtonWrap
       title={type === 'rewind' ? 'Rewind' : 'Forward'}
-      cardSize={cardSize}
+      $cardSize={$cardSize}
       {...props}
     >
-      <SeekIcon as={IconComponent} cardSize={cardSize} />
+      <SeekIcon as={IconComponent} $cardSize={$cardSize} />
     </SeekButtonWrap>
   )
 }
diff --git a/packages/react/src/components/Card/CardMedia/Controls/Spinner.js b/packages/react/src/components/Card/CardMedia/Controls/Spinner.js
index 02f6b9f6e..5ae92d38e 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/Spinner.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/Spinner.js
@@ -43,9 +43,9 @@ const Wrap = styled(MediaButton).attrs(({ isVisible }) => ({
     opacity: isVisible ? 1 : 0,
     visibility: isVisible ? 'visible' : 'hidden'
   }
-}))(({ cardSize }) => {
-  const size = `${getSpinnerSize(cardSize)}px`
-  const offset = `${getSpinnerOffset(cardSize)}px`
+}))(({ $cardSize }) => {
+  const size = `${getSpinnerSize($cardSize)}px`
+  const offset = `${getSpinnerOffset($cardSize)}px`
 
   return css`
     position: absolute;
@@ -74,7 +74,7 @@ const Circle = styled('circle')`
 `
 
 const Spinner = ({ size, isVisible }) => (
-  <Wrap cardSize={size} className={classNames.spinner} isVisible={isVisible}>
+  <Wrap $cardSize={size} className={classNames.spinner} isVisible={isVisible}>
     <Svg viewBox='0 0 50 50'>
       <Circle cx='25' cy='25' r='20' />
     </Svg>
diff --git a/packages/react/src/components/Card/CardMedia/Controls/index.js b/packages/react/src/components/Card/CardMedia/Controls/index.js
index d19943cc8..e8a06346b 100644
--- a/packages/react/src/components/Card/CardMedia/Controls/index.js
+++ b/packages/react/src/components/Card/CardMedia/Controls/index.js
@@ -359,7 +359,7 @@ const Controls = ({ MediaComponent, mediaProps }) => {
 
   const footerControlsProps = useMemo(
     () => ({
-      cardSize: size,
+      $cardSize: size,
       currentTime,
       endTime,
       isMuted,
@@ -442,7 +442,7 @@ const Controls = ({ MediaComponent, mediaProps }) => {
 
           {!hasInteracted ? (
             <InnerWrap>
-              <PlaybackButton cardSize={size} />
+              <PlaybackButton $cardSize={size} />
             </InnerWrap>
           ) : (
             <>
@@ -452,18 +452,18 @@ const Controls = ({ MediaComponent, mediaProps }) => {
                     <SeekButton
                       className={classNames.rwControl}
                       type='rewind'
-                      cardSize={size}
+                      $cardSize={size}
                       onClick={event => onSeekClick(event, 'rewind')}
                     />
                   )}
 
-                  <PlaybackButton cardSize={size} isPlaying={isPlaying} />
+                  <PlaybackButton $cardSize={size} isPlaying={isPlaying} />
 
                   {isNotSmall && (
                     <SeekButton
                       className={classNames.ffwControl}
                       type='fastforward'
-                      cardSize={size}
+                      $cardSize={size}
                       onClick={event => onSeekClick(event, 'fastforward')}
                     />
                   )}
diff --git a/packages/react/src/components/Card/CardMedia/Wrap.js b/packages/react/src/components/Card/CardMedia/Wrap.js
index 1865efb11..7ecf8bc0f 100644
--- a/packages/react/src/components/Card/CardMedia/Wrap.js
+++ b/packages/react/src/components/Card/CardMedia/Wrap.js
@@ -38,7 +38,7 @@ const StyledWrap = styled('div')`
     display: block;
   }
 
-  ${({ cardSize }) => mediaSizeStyles[cardSize]};
+  ${({ $cardSize }) => mediaSizeStyles[$cardSize]};
 
   ${loadingOverlay};
 `
@@ -48,7 +48,7 @@ const Wrap = props => {
     props: { size }
   } = useContext(GlobalContext)
 
-  return <StyledWrap cardSize={size} {...props} />
+  return <StyledWrap $cardSize={size} {...props} />
 }
 
 export default Wrap
diff --git a/packages/react/src/components/Card/CardMedia/index.js b/packages/react/src/components/Card/CardMedia/index.js
index 10ecd9905..556be768f 100644
--- a/packages/react/src/components/Card/CardMedia/index.js
+++ b/packages/react/src/components/Card/CardMedia/index.js
@@ -31,7 +31,7 @@ const CardMedia = () => {
 
   return (
     <>
-      <MediaComponent isLoading={isLoading} />
+      <MediaComponent $isLoading={isLoading} />
       {isLoading && (
         <ImageLoadCatcher src={imageUrl} onLoad={() => setIsLoading(false)} />
       )}
diff --git a/packages/react/src/components/Card/CardMedia/loader.js b/packages/react/src/components/Card/CardMedia/loader.js
index ff229d934..3101c09da 100644
--- a/packages/react/src/components/Card/CardMedia/loader.js
+++ b/packages/react/src/components/Card/CardMedia/loader.js
@@ -21,9 +21,9 @@ export const loadingOverlay = css`
     transition: ${transition.medium('opacity', 'visibility')};
     will-change: opacity;
 
-    ${({ isLoading }) => css`
-      opacity: ${isLoading ? 1 : 0};
-      visibility: ${isLoading ? 'visible' : 'hidden'};
+    ${({ $isLoading }) => css`
+      opacity: ${$isLoading ? 1 : 0};
+      visibility: ${$isLoading ? 'visible' : 'hidden'};
     `};
   }
 `
diff --git a/packages/react/src/components/Card/CardText.js b/packages/react/src/components/Card/CardText.js
index 11612bffc..8f6d1e8da 100644
--- a/packages/react/src/components/Card/CardText.js
+++ b/packages/react/src/components/Card/CardText.js
@@ -19,8 +19,8 @@ const StyledClamp = styled(Clamp)`
     color: inherit;
     margin: 0;
 
-    ${({ useNanoClamp }) =>
-      !useNanoClamp &&
+    ${({ $useNanoClamp }) =>
+      !$useNanoClamp &&
       css`
         overflow: hidden;
         white-space: nowrap;
@@ -35,7 +35,7 @@ const CardText = ({ useNanoClamp = true, children, ...props }) => {
     : { ...props, as: 'p', title: children }
 
   return (
-    <StyledClamp useNanoClamp={useNanoClamp} {...textProps}>
+    <StyledClamp $useNanoClamp={useNanoClamp} {...textProps}>
       {children}
     </StyledClamp>
   )
diff --git a/packages/react/src/components/Card/CardWrap.js b/packages/react/src/components/Card/CardWrap.js
index 5be253bfc..863a5d584 100644
--- a/packages/react/src/components/Card/CardWrap.js
+++ b/packages/react/src/components/Card/CardWrap.js
@@ -39,8 +39,8 @@ const hoverStyle = css`
   }
 `
 
-const rtlStyle = ({ cardSize }) => css`
-  flex-direction: ${isLarge(cardSize) ? 'column-reverse' : 'row-reverse'};
+const rtlStyle = ({ $cardSize }) => css`
+  flex-direction: ${isLarge($cardSize) ? 'column-reverse' : 'row-reverse'};
 `
 
 const baseStyle = css(
@@ -69,8 +69,8 @@ const baseStyle = css(
 
 const Element = styled('a')(
   baseStyle,
-  ({ isLoading, contrast }) => !isLoading && !contrast && hoverStyle,
-  ({ cardSize }) => isLarge(cardSize) && largeStyle,
+  ({ $isLoading, contrast }) => !$isLoading && !contrast && hoverStyle,
+  ({ $cardSize }) => isLarge($cardSize) && largeStyle,
   ({ direction }) => direction === 'rtl' && rtlStyle,
   ({ backgroundColor, color, contrast }) =>
     contrast && color && backgroundColor && contrastStyle,
@@ -81,14 +81,14 @@ const Element = styled('a')(
 const CardWrap = forwardRef(({ href, rel, target, ...restProps }, ref) => {
   const {
     state: { backgroundColor, color, title },
-    props: { size: cardSize }
+    props: { size: $cardSize }
   } = useContext(GlobalContext)
 
   return createElement(Element, {
     ...(restProps.as === 'a' ? { href, rel, target } : undefined),
     ...restProps,
     backgroundColor,
-    cardSize,
+    $cardSize,
     color,
     ref,
     title
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index 9834d42ba..6fdb78a24 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -193,7 +193,7 @@ microlink.io/${error.code.toLowerCase()}
     <CardWrap
       className={`${classNames.main} ${className}`.trim()}
       href={url}
-      isLoading={isLoading}
+      $isLoading={isLoading}
       ref={cardRef}
       {...restProps}
     >
diff --git a/packages/react/src/utils/index.js b/packages/react/src/utils/index.js
index 847ec77dd..6750179ae 100644
--- a/packages/react/src/utils/index.js
+++ b/packages/react/src/utils/index.js
@@ -84,13 +84,13 @@ export const imageProxy = url =>
   localhostUrl().test(url)
     ? url
     : `https://images.weserv.nl/?${new URLSearchParams({
-        url,
-        default: url,
-        l: 9,
-        af: '',
-        il: '',
-        n: -1
-      }).toString()}`
+      url,
+      default: url,
+      l: 9,
+      af: '',
+      il: '',
+      n: -1
+    }).toString()}`
 
 export const isLazySupported = !isSSR && 'IntersectionObserver' in window