Newton-School · MihirSachdeva · Aug 13, 2025 · Aug 18, 2025
diff --git a/common/types.ts b/common/types.ts
@@ -43,9 +43,9 @@ export interface StyledInputProps
 export interface StyledLabelProps
     extends React.LabelHTMLAttributes<HTMLLabelElement> {
     ref?: React.Ref<HTMLLabelElement>;
-    isRequired?: boolean;
-    isDisabled?: boolean;
-    color?: `${TEXT_COLORS}`;
+    $isRequired?: boolean;
+    $isDisabled?: boolean;
+    $color?: `${TEXT_COLORS}`;
 }
 
 /**

diff --git a/stories/helper-components/TokenBlock/index.styles.ts b/stories/helper-components/TokenBlock/index.styles.ts
@@ -15,8 +15,8 @@ export const StyledTokenBlock = styled.div<any>`
     gap: 8px;
     border-radius: var(--corner-radius-8px, 8px);
     border: 1px solid var(--border, #e1e5ea);
-    background: ${({ background }) =>
-        background || 'var(--bg-tertiary, #edeff3)'};
+    background: ${({ $background }) =>
+        $background || 'var(--bg-tertiary, #edeff3)'};
     color: var(--text-primary, #16191d) !important;
     font-family: var(--font-family-code, 'Fira Code', 'monospace') !important;
     font-size: var(--font-size-14px, 14px) !important;
@@ -26,8 +26,8 @@ export const StyledTokenBlock = styled.div<any>`
     position: relative;
     overflow: hidden;
 
-    ${({ interactive }) =>
-        interactive &&
+    ${({ $interactive }) =>
+        $interactive &&
         css`
             cursor: pointer;
         `}
@@ -55,8 +55,8 @@ export const StyledTokenBlockCopiedContainer = styled.div<any>`
     transition: all 0.3s ease;
     z-index: -1;
 
-    ${({ copied }) =>
-        copied &&
+    ${({ $copied }) =>
+        $copied &&
         css`
             z-index: 1;
             opacity: 1;

diff --git a/stories/helper-components/TokenBlock/index.tsx b/stories/helper-components/TokenBlock/index.tsx
@@ -68,14 +68,14 @@ const TokenBlock = ({
     return (
         <WrapperComponent>
             <StyledTokenBlock
-                background={background}
-                interactive={copy}
+                $background={background}
+                $interactive={copy}
                 onClick={copy ? handleCopy : null}
             >
                 {color && <ColorRenderer color={color} size="small" />}
                 {children}
                 {showCopiedOverlay && (
-                    <StyledTokenBlockCopiedContainer copied={copied}>
+                    <StyledTokenBlockCopiedContainer $copied={copied}>
                         <NSIcon name="check" color="var(--text-success)" />
                         Copied!
                     </StyledTokenBlockCopiedContainer>

diff --git a/ui/elements/Alert/Alert.styles.ts b/ui/elements/Alert/Alert.styles.ts
@@ -34,8 +34,8 @@ export const StyledAlertBody = styled.div<AlertBodyProps>`
     margin-right: var(--spacing-4px, 4px);
     flex: 1 0 0;
 
-    ${({ inlineButtons }) =>
-        inlineButtons &&
+    ${({ $inlineButtons }) =>
+        $inlineButtons &&
         css`
             flex-direction: row;
             align-items: flex-start;
@@ -52,7 +52,7 @@ export const StyledAlertContent = styled.div`
 
 export const StyledAlertTitle = styled.h2<AlertTitleProps>`
     align-self: stretch;
-    color: ${({ textColor }) => textColor};
+    color: ${({ $textColor }) => $textColor};
     font-size: var(--font-size-14px, 14px);
     font-weight: var(--font-weight-semibold, 600);
     line-height: 160%;
@@ -62,7 +62,7 @@ export const StyledAlertTitle = styled.h2<AlertTitleProps>`
 
 export const StyledAlertDescription = styled.div<AlertDescriptionProps>`
     align-self: stretch;
-    color: ${({ textColor }) => textColor};
+    color: ${({ $textColor }) => $textColor};
     font-size: var(--font-size-14px, 14px);
     font-weight: var(--font-weight-medium, 500);
     line-height: 160%;

diff --git a/ui/elements/Alert/Alert.tsx b/ui/elements/Alert/Alert.tsx
@@ -70,19 +70,19 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(({
                     size="20"
                 />
             )}
-            <StyledAlertBody inlineButtons={inlineButtons}>
+            <StyledAlertBody $inlineButtons={inlineButtons}>
                 <StyledAlertContent>
                     {title && (
                         <StyledAlertTitle
-                            textColor={textColor}
+                            $textColor={textColor}
                             id={`alert-title-${id}`}
                         >
                             {title}
                         </StyledAlertTitle>
                     )}
                     {description && (
                         <StyledAlertDescription
-                            textColor={textColor}
+                            $textColor={textColor}
                             id={`alert-description-${id}`}
                         >
                             {description}

diff --git a/ui/elements/Alert/types.ts b/ui/elements/Alert/types.ts
@@ -143,18 +143,18 @@ export interface AlertContainerProps {
 }
 
 export interface AlertBodyProps {
-    inlineButtons: boolean;
+    $inlineButtons: boolean;
     children: React.ReactNode;
 }
 
 export interface AlertTitleProps {
-    textColor: string;
+    $textColor: string;
     children: React.ReactNode;
     id: string;
 }
 
 export interface AlertDescriptionProps {
-    textColor: string;
+    $textColor: string;
     children: React.ReactNode;
     id?: string;
 }
diff --git a/ui/elements/AlertBanner/AlertBanner.styles.ts b/ui/elements/AlertBanner/AlertBanner.styles.ts
@@ -10,23 +10,23 @@ export const StyledAlertBannerContainer = styled.div<AlertBannerContainerProps>`
     align-items: center;
     flex-shrink: 0;
 
-    position: ${({ position }) => position};
-    top: ${({ top }) => top};
-    bottom: ${({ bottom }) => bottom};
-    left: ${({ left }) => left};
-    right: ${({ right }) => right};
-    padding: ${({ padding }) => padding};
-    justify-content: ${({ justifyContent }) => justifyContent};
+    position: ${({ $position }) => $position};
+    top: ${({ $top }) => $top};
+    bottom: ${({ $bottom }) => $bottom};
+    left: ${({ $left }) => $left};
+    right: ${({ $right }) => $right};
+    padding: ${({ $padding }) => $padding};
+    justify-content: ${({ $justifyContent }) => $justifyContent};
 
-    color: ${({ textColor }) => textColor};
-    background-color: ${({ backgroundColor }) => backgroundColor};
+    color: ${({ $textColor }) => $textColor};
+    background-color: ${({ $backgroundColor }) => $backgroundColor};
 `;
 
 export const StyledAlertBannerContent = styled.div<any>`
     display: flex;
     align-items: center;
     gap: var(--spacing-8px, 8px);
-    color: ${({ color }) => color};
+    color: ${({ $color }) => $color};
     font-family: var(--font-family, 'Mona Sans');
     font-size: var(--font-size-14px, 14px);
     font-weight: var(--font-weight-semibold, 600);

diff --git a/ui/elements/AlertBanner/AlertBanner.tsx b/ui/elements/AlertBanner/AlertBanner.tsx
@@ -51,25 +51,25 @@ const AlertBanner = forwardRef<HTMLDivElement, AlertBannerProps>(
             <StyledAlertBannerContainer
                 type={type}
                 variant={variant}
-                padding={
+                $padding={
                     padding || hasButton
                         ? 'var(--spacing-4px, 4px) var(--spacing-8px, 8px)'
                         : 'var(--spacing-8px, 8px)'
                 }
-                top={top}
-                bottom={bottom}
-                left={left}
-                right={right}
-                position={position}
+                $top={top}
+                $bottom={bottom}
+                $left={left}
+                $right={right}
+                $position={position}
                 ref={ref}
                 className={className}
-                textColor={textColor}
-                backgroundColor={backgroundColor}
-                borderColor={borderColor}
-                justifyContent={justifyContent}
+                $textColor={textColor}
+                $backgroundColor={backgroundColor}
+                $borderColor={borderColor}
+                $justifyContent={justifyContent}
                 role="alert"
             >
-                <StyledAlertBannerContent color={textColor}>
+                <StyledAlertBannerContent $color={textColor}>
                     {iconName && (
                         <Icon
                             name={iconName}

diff --git a/ui/elements/AlertBanner/types.ts b/ui/elements/AlertBanner/types.ts
@@ -123,16 +123,16 @@ export interface AlertBannerProps {
 export interface AlertBannerContainerProps {
     type: AlertBannerType;
     variant: AlertBannerVariant;
-    justifyContent: string;
-    padding: string;
-    top: string;
-    bottom: string;
-    left: string;
-    right: string;
-    position: string;
-    textColor: string;
-    backgroundColor: string;
-    borderColor: string;
+    $justifyContent: string;
+    $padding: string;
+    $top: string;
+    $bottom: string;
+    $left: string;
+    $right: string;
+    $position: string;
+    $textColor: string;
+    $backgroundColor: string;
+    $borderColor: string;
     children: React.ReactNode;
     ref: React.Ref<HTMLDivElement>;
     role: string;

diff --git a/ui/elements/Button/Button.styles.ts b/ui/elements/Button/Button.styles.ts
@@ -23,8 +23,8 @@ export const StyledButton = styled.button<ButtonComponentProps>`
     gap: var(--spacing-8px, 8px);
     transform-origin: center;
 
-    ${({ variant, $color }) =>
-        variant && getButtonStyles({ variant, color: $color })}
+    ${({ $variant, $color }) =>
+        $variant && getButtonStyles({ variant: $variant, color: $color })}
 
     ${({ $showAnimationOnClick }) =>
         $showAnimationOnClick &&
@@ -38,32 +38,32 @@ export const StyledButton = styled.button<ButtonComponentProps>`
         cursor: not-allowed;
     }
 
-    ${({ size, isIconButton }) => {
-        if (!isIconButton) {
+    ${({ $size, $isIconButton }) => {
+        if (!$isIconButton) {
             return css`
-                ${BUTTON_SIZE_STYLES_MAPPING[size]}
+                ${BUTTON_SIZE_STYLES_MAPPING[$size]}
             `;
         }
 
         return css`
-            ${ICON_BUTTON_SIZE_STYLES_MAPPING[size]}
+            ${ICON_BUTTON_SIZE_STYLES_MAPPING[$size]}
         `;
     }}
 
-    ${({ fullWidth }) =>
-        fullWidth &&
+    ${({ $fullWidth }) =>
+        $fullWidth &&
         css`
             width: 100%;
         `}
 
-    ${({ isLoading }) =>
-        isLoading &&
+    ${({ $isLoading }) =>
+        $isLoading &&
         css`
             cursor: progress;
         `}
 
-    ${({ iconPosition }) =>
-        iconPosition === 'right' &&
+    ${({ $iconPosition }) =>
+        $iconPosition === 'right' &&
         css`
             flex-direction: row-reverse;
         `}

diff --git a/ui/elements/Button/Button.tsx b/ui/elements/Button/Button.tsx
@@ -54,13 +54,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
             onClick={handleClick}
             className={classes}
             style={style}
-            isLoading={loading}
+            $isLoading={loading}
             disabled={disabled || loading}
-            variant={variant}
+            $variant={variant}
             $color={color as ButtonColors}
-            size={size}
-            fullWidth={fullWidth}
-            iconPosition={iconPosition}
+            $size={size}
+            $fullWidth={fullWidth}
+            $iconPosition={iconPosition}
             type={type}
             title={tooltip}
             tabIndex={tabIndex}

diff --git a/ui/elements/Button/IconButton.tsx b/ui/elements/Button/IconButton.tsx
@@ -53,20 +53,20 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
                 onClick={handleClick}
                 className={classes}
                 style={style}
-                isLoading={loading}
+                $isLoading={loading}
                 disabled={disabled || loading}
-                variant={variant}
+                $variant={variant}
                 $color={color}
-                size={size}
-                fullWidth={fullWidth}
+                $size={size}
+                $fullWidth={fullWidth}
                 type={type}
                 role="button"
                 aria-label={ariaLabel || icon}
                 title={tooltip}
                 tabIndex={tabIndex}
                 onMouseEnter={onMouseEnter}
                 onMouseLeave={onMouseLeave}
-                isIconButton
+                $isIconButton
                 $showAnimationOnClick={showAnimationOnClick}
                 {...buttonProps}
                 data-testid="testid-iconbutton"

diff --git a/ui/elements/Button/types.ts b/ui/elements/Button/types.ts
@@ -271,19 +271,19 @@ export interface IconButtonProps {
 }
 
 export interface ButtonComponentProps extends StyledButtonProps {
-    variant?: ButtonVariants;
+    $variant?: ButtonVariants;
     $color?: ButtonColors;
-    size?: ButtonSizes;
+    $size?: ButtonSizes;
     icon?: string | number;
     iconSize?: string;
-    iconPosition?: 'left' | 'right';
+    $iconPosition?: 'left' | 'right';
     className?: string;
     disabled?: boolean;
-    isLoading?: boolean;
+    $isLoading?: boolean;
     style?: React.CSSProperties;
     onClick?: (e?: any) => void;
-    fullWidth?: boolean;
-    isIconButton?: boolean;
+    $fullWidth?: boolean;
+    $isIconButton?: boolean;
     children?: React.ReactNode;
     ref?: React.Ref<HTMLButtonElement>;
     type?: ButtonTypeAttribute;

diff --git a/ui/elements/Calendar/MonthlyCalendar/DateCircle.tsx b/ui/elements/Calendar/MonthlyCalendar/DateCircle.tsx
@@ -16,11 +16,11 @@ function DateCircle(props: DateCircleProps) {
 
     return (
         <StyledDateCircle
-            isInActiveMonth={isInActiveMonth}
-            isToday={isToday}
-            backgroundColor={backgroundColor}
+            $isInActiveMonth={isInActiveMonth}
+            $isToday={isToday}
+            $backgroundColor={backgroundColor}
         >
-            <StyledDateCircleText isToday={isToday} textColor={textColor}>
+            <StyledDateCircleText $isToday={isToday} $textColor={textColor}>
                 {date.getDate()}
             </StyledDateCircleText>
         </StyledDateCircle>

diff --git a/ui/elements/Calendar/MonthlyCalendar/Loading.tsx b/ui/elements/Calendar/MonthlyCalendar/Loading.tsx
@@ -19,7 +19,7 @@ function Loading(props: MonthlyCalendarLoadingProps) {
         <StyledMonthlyCalendarGridContainer>
             <StyledMonthlyGridItemContainer>
                 <StyledMonthlyCalendarGrid
-                    rows={gridData.length % DAYS_IN_WEEK}
+                    $rows={gridData.length % DAYS_IN_WEEK}
                 >
                     {gridData.map((item, idx) => (
                         <StyledMonthlyCalendarGridItem>