add TransitionDuration type

components/src/components/atoms/DynamicPopover/DynamicPopover.tsx

@@ -9,6 +9,7 @@ import { getValueForTransitionState } from './utils/getValueForTransitionState'
 import { container } from './style.css'
 import { debounce } from '../../../utils/debounce'
 import { useBreakPoints } from '@/src/hooks/useBreakpoints'
+import type { TransitionDuration } from '@/src/tokens'
 
 export type DynamicPopoverSide = 'top' | 'right' | 'bottom' | 'left'
 
@@ -57,7 +58,7 @@ export type DynamicPopoverProps = {
   /** Aligns the popover */
   align?: DynamicPopoverAlignment
   /** The duration of the transition */
-  transitionDuration?: number
+  transitionDuration?: TransitionDuration
   /** If this is not undefined, popover becomes externally controlled */
   isOpen?: boolean
   /** Hides the overflow of the content */
@@ -140,9 +141,6 @@ const checkRectContainsPoint = (
   )
 }
 
-const makeWidth = (width: number | string) =>
-  typeof width === 'number' ? width : width
-
 type PopoverBoxProps = {
   $state: TransitionState
   $translate: string
@@ -151,7 +149,7 @@ type PopoverBoxProps = {
   $x: number
   $y: number
   // $isControlled: boolean
-  $transitionDuration: number
+  $transitionDuration: TransitionDuration
   $hideOverflow: boolean | undefined
 }
 
@@ -199,7 +197,7 @@ const PopoverBox = React.forwardRef<HTMLElement, BoxProps & PopoverBoxProps>(
         'transitionProperty',
       )}
       visibility={getValueForTransitionState($state.status, 'visibility')}
-      width={{ xs: makeWidth($mobileWidth), sm: makeWidth($width) }}
+      width={{ xs: $mobileWidth, sm: $width }}
       zIndex={999999}
     />
   ),

components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx

@@ -45,7 +45,9 @@ const Label = ({
     left="1/2"
     position="absolute"
     top="1/2"
-    transition="color 0.1s linear"
+    transitionProperty="color"
+    transitionDuration={100}
+    transitionTimingFunction="linear"
     width={getValuesForKnob($size, 'width')}
   />
 )
@@ -74,7 +76,7 @@ const Slider = ({
   $size,
   $color,
   ...props
-}: BoxProps & { $size: Size, $color: Color }) => (
+}: { $size: Size, $color: Color }) => (
   <Box
     {...props}
     backgroundColor={$color}
@@ -84,7 +86,7 @@ const Slider = ({
     left="1/2"
     position="absolute"
     top="1/2"
-    transition="transform 0.3s ease-in-out, background-color 0.1s ease-in-out"
+    className={styles.slider}
     width={getValuesForKnob($size, 'width')}
   />
 )
@@ -106,7 +108,7 @@ export const CurrencyToggle = React.forwardRef<HTMLInputElement, CurrencyToggleP
           {...props}
           $size={size}
         />
-        <Slider $color={color} $size={size} className={styles.slider} />
+        <Slider $color={color} $size={size} />
         <Label
           $size={size}
           $type="eth"

components/src/components/molecules/Dropdown/Dropdown.tsx

@@ -10,8 +10,6 @@ import { breakpoints } from '@/src/tokens'
 
 import { modeVars } from '@/src/css/theme.css'
 
-import type { Color } from '@/src/tokens/color'
-
 import { ActionSheet } from './ActionSheet'
 import type { AsProp, BoxProps } from '../../atoms/Box/Box'
 import { Box } from '../../atoms/Box/Box'
@@ -22,6 +20,7 @@ import { DownChevronSVG } from '@/src/icons'
 import { ScrollBox } from '../../atoms/ScrollBox/ScrollBox'
 import * as styles from './styles.css'
 import { clsx } from 'clsx'
+import type { Color } from '@/src/interfaces/withColor'
 
 type Align = 'left' | 'right'
 type LabelAlign = 'flex-start' | 'flex-end' | 'center'
@@ -174,7 +173,7 @@ const DropdownMenuBox = React.forwardRef<
 })
 
 interface MenuButtonProps {
-  $color?: Colors
+  $color?: Color
   $icon?: AsProp
   $showIndicator?: boolean | Colors
 }

components/src/components/molecules/Textarea/Textarea.tsx

@@ -12,7 +12,7 @@ import * as styles from './styles.css'
 
 import type { FieldBaseProps } from '../../atoms/Field/Field'
 import { Field } from '../../atoms/Field/Field'
-import type { BoxProps } from '../../atoms/Box/Box'
+import type { AsProp, BoxProps } from '../../atoms/Box/Box'
 import { Box } from '../../atoms/Box/Box'
 import { getValueForSize } from './utils/getValueForSize'
 import { CrossCircleSVG } from '@/src/icons'
@@ -115,11 +115,9 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, BoxProps & TextAreaProps>
 
 const ActionButton = ({
   $size = 'medium',
-  $icon, className,
+  $icon = CrossCircleSVG, className,
   ...props
-}: BoxProps & { $size: Size, $icon: React.ReactNode }) => {
-  const icon = React.isValidElement($icon) ? $icon : <CrossCircleSVG />
-
+}: BoxProps & { $size: Size, $icon?: AsProp }) => {
   return (
     <Box
       {...props}
@@ -140,7 +138,7 @@ const ActionButton = ({
       className={clsx(styles.actionButton, className)}
     >
       <Box
-        as={icon}
+        as={$icon}
         transitionProperty="all"
         transitionDuration={100}
         transitionTimingFunction="ease-in-out"
@@ -188,7 +186,7 @@ export type TextareaProps = Omit<FieldBaseProps, 'inline'> & {
   /** If true, shows a status dot of the current state of validation */
   showDot?: boolean
   /** A replacement icon for the action button */
-  actionIcon?: React.ReactNode
+  actionIcon?: AsProp
   /** If true, will show the action button even when there is not input */
   alwaysShowAction?: boolean
   /** A custom handler that replaces the clear handler */
@@ -335,9 +333,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
                 $size={size}
                 type="button"
                 onClick={handleClickAction}
-              >
-                {actionIcon || <CrossCircleSVG />}
-              </ActionButton>
+              />
             )}
           </Container>
         )}

components/src/css/sprinkles.css.ts

@@ -131,7 +131,7 @@ const staticProperties = defineProperties({
     pointerEvents: ['none', 'auto', 'all', 'initial', 'inherit'],
     transitionTimingFunction: commonVars.transitionTimingFunction,
     transitionDuration: commonVars.transitionDuration,
-    transitionProperty: ['all', 'none', 'box-shadow', 'background-color', 'transform', 'initial', 'inherit', 'stroke'],
+    transitionProperty: ['all', 'none', 'box-shadow', 'background-color', 'transform', 'initial', 'inherit', 'stroke', 'color'],
     visibility: ['visible', 'hidden', 'initial', 'inherit'],
     zIndex: [1, 10, 20, 100, 9999, 10000, 999999],
     strokeWidth: commonVars.space,

components/src/tokens/index.ts

@@ -100,3 +100,4 @@ export type Space = keyof typeof space
 export type Colors = keyof typeof colors.light
 export type ColorStyles = ColorStyleBase
 export type Radii = keyof typeof radii
+export type TransitionDuration = keyof typeof transitionDuration