fix(elements): prefix styled component props in Legend

src/components/Banner/index.tsx

@@ -178,7 +178,9 @@ const ContentWrapper = styled.div<ContentWrapperProps>`
 const ButtonWrapper = styled.div`
   align-self: center;
 `
-const HideText = styled.span<{ $level: Level }>`
+const HideText = styled.span<{
+  $level: Level
+}>`
   ${p =>
     p.$level === Level.ERROR
       ? css`

src/components/Dialog/Body.tsx

@@ -1,6 +1,8 @@
 import styled from 'styled-components'
 
-export const Body = styled.div<{ $color?: string }>`
+export const Body = styled.div<{
+  $color?: string
+}>`
   background-color: ${p => p.theme.color.white};
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;

src/elements/Fieldset.tsx

@@ -28,7 +28,12 @@ export function Fieldset({
   return (
     <Box className={classnames('Element-Fieldset', className)} {...nativeProps}>
       {legend && (
-        <Legend $isRequired={isRequired} disabled={nativeProps.disabled} hasError={hasError} isHidden={isLegendHidden}>
+        <Legend
+          $disabled={nativeProps.disabled}
+          $hasError={hasError}
+          $isHidden={isLegendHidden}
+          $isRequired={isRequired}
+        >
           {legend}
         </Legend>
       )}

src/elements/Legend.tsx

@@ -4,18 +4,18 @@ import styled from 'styled-components'
 import type { HTMLAttributes } from 'react'
 
 export type LegendProps = HTMLAttributes<HTMLLegendElement> & {
+  $disabled?: boolean | undefined
+  $hasError?: boolean | undefined
+  $isHidden?: boolean | undefined
   $isRequired?: boolean | undefined
-  disabled?: boolean | undefined
-  hasError?: boolean | undefined
-  isHidden?: boolean | undefined
 }
 export const Legend = styled.legend.attrs<LegendProps, LegendProps>(props => ({
   className: classnames('Element-Legend', props.className)
 }))`
   color: ${p =>
     // eslint-disable-next-line no-nested-ternary
-    p.disabled ? p.theme.color.lightGray : p.hasError ? p.theme.color.maximumRed : p.theme.color.slateGray};
-  display: ${p => (p.isHidden ? 'none' : 'block')};
+    p.$disabled ? p.theme.color.lightGray : p.$hasError ? p.theme.color.maximumRed : p.theme.color.slateGray};
+  display: ${p => (p.$isHidden ? 'none' : 'block')};
   font-size: 13px;
   line-height: 1.3846;
   margin-bottom: 4px;

src/fields/DateRangePicker/RangedTimePicker.tsx

@@ -96,9 +96,9 @@ export function RangedTimePicker({ filter, minutesRange, onChange }: RangedTimeP
       {filteredRangedTimeOptions.map(({ label, value }, index) => (
         <Option
           key={label}
+          $isSelected={index === selectedOptionIndex}
           aria-selected={false}
           className="js-ranged-time-picker-option"
-          isSelected={index === selectedOptionIndex}
           onClick={() => onChange(value)}
           role="option"
           tabIndex={-1}
@@ -142,16 +142,16 @@ const Box = styled.div`
 `
 
 const Option = styled.div<{
-  isSelected: boolean
+  $isSelected: boolean
 }>`
-  background-color: ${p => (p.isSelected ? p.theme.color.blueGray : 'transparent')};
-  color: ${p => (p.isSelected ? p.theme.color.white : p.theme.color.gunMetal)};
+  background-color: ${p => (p.$isSelected ? p.theme.color.blueGray : 'transparent')};
+  color: ${p => (p.$isSelected ? p.theme.color.white : p.theme.color.gunMetal)};
   cursor: pointer;
   line-height: 1;
   padding: 8.5px 0 10.5px 8px;
 
   &:hover {
-    background-color: ${p => (p.isSelected ? p.theme.color.blueGray : p.theme.color.blueYonder25)};
+    background-color: ${p => (p.$isSelected ? p.theme.color.blueGray : p.theme.color.blueYonder25)};
   }
 
   > span {

src/fields/DateRangePicker/index.tsx

@@ -493,7 +493,7 @@ export function DateRangePicker({
         </Field>
 
         {withTime && (
-          <Field isTimeField>
+          <Field $isTimeField>
             <TimeInput
               ref={startTimeInputRef}
               baseContainer={baseContainer ?? undefined}
@@ -516,7 +516,7 @@ export function DateRangePicker({
           </Field>
         )}
 
-        <Field isEndDateField>
+        <Field $isEndDateField>
           <DateInput
             ref={endDateInputRef}
             baseContainer={baseContainer ?? undefined}
@@ -542,7 +542,7 @@ export function DateRangePicker({
         </Field>
 
         {withTime && (
-          <Field isTimeField>
+          <Field $isTimeField>
             <TimeInput
               ref={endTimeInputRef}
               baseContainer={baseContainer ?? undefined}
@@ -604,15 +604,15 @@ const Box = styled.div<CommonFieldStyleProps>`
 `
 
 const Field = styled.span<{
-  isEndDateField?: boolean
-  isTimeField?: boolean
+  $isEndDateField?: boolean
+  $isTimeField?: boolean
 }>`
   font-size: inherit;
   margin-left: ${p => {
-    if (p.isEndDateField) {
+    if (p.$isEndDateField) {
       return '10px'
     }
 
-    return p.isTimeField ? '2px' : 0
+    return p.$isTimeField ? '2px' : 0
   }} !important;
 `

src/fields/TextInput.tsx

@@ -148,7 +148,9 @@ const IconsContainer = styled.div<{
   top: ${p => (p.$size === Size.LARGE ? '9px' : '5px')};
 `
 
-const RestyledStyledInputBox = styled(StyledInputBox)<{ $isSearchInput: boolean }>`
+const RestyledStyledInputBox = styled(StyledInputBox)<{
+  $isSearchInput: boolean
+}>`
   > input,
   > .rs-auto-complete > input {
     padding-right: ${p => p.$isSearchInput && '64px'};

stories/elements/Legend.stories.tsx

@@ -6,10 +6,10 @@ import type { LegendProps } from '../../src'
 import type { Meta } from '@storybook/react'
 
 const args: LegendProps = {
+  $disabled: false,
+  $isHidden: false,
   $isRequired: false,
-  children: 'A form fieldset legend',
-  disabled: false,
-  isHidden: false
+  children: 'A form fieldset legend'
 }
 
 /* eslint-disable sort-keys-fix/sort-keys-fix */