uniswap/interface

export const LiveIcon = deprecatedStyled.div<{ display: string }>`
  display: ${({ display }) => display};
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: ${({ theme }) => theme.success};

  @media (prefers-reduced-motion: no-preference) {
    animation-name: ${({ theme }) => pulsate(theme.success)};
    animation-fill-mode: forwards;
    animation-direction: alternate;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }
`

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches

{isDarkMode ? (
  <DarkAnimation onMouseEnter={() => !prefersReducedMotion && darkAnimation?.play()} />
) : (
  <LightAnimation onMouseEnter={() => !prefersReducedMotion && lightAnimation?.play()} />
)}

const RiseInStyles = css<{ count?: number; delay?: number }>`
  opacity: 0;
  animation-fill-mode: forwards;
  animation-delay: ${(props) => 1000 * (props.delay ?? 0)}ms;

  @media (prefers-reduced-motion: no-preference) {
    animation-name: ${riseInAnimation};
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    opacity: 1;
  }
`

transition="opacity 0.1s ease-in-out, transform 0.1s ease-in-out"

return (
    <Mask aria-label={`${props.prefix ?? ''}${value}${props.suffix ?? ''}`} role="text">
      {chars.map((char: string, index: number) => {
        // decorative per-character sprites, hidden from AT via aria-hidden below

export function Wallet({ fill = 'currentColor', ...props }: IconProps) {
  return (
    <svg width={props.size} height={props.size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="..."
        fill={fill}
      />