import { useReducedMotion, motion } from 'framer-motion';
import { jsx } from 'react/jsx-runtime';

const AnimatedNumber = ({
  children,
  onClick,
  className
}) => {
  const reducedMotion = useReducedMotion();
  return /*#__PURE__*/jsx(motion.span, {
    className: className,
    "aria-hidden": true,
    initial: {
      zoom: 0.01
    },
    animate: {
      zoom: 1
    },
    exit: {
      zoom: 0.01
    },
    transition: {
      duration: reducedMotion ? 0 : 0.3,
      type: 'tween',
      ease: [0.3, 0, 0.1, 1]
    },
    onClick: () => onClick?.(),
    children: /*#__PURE__*/jsx(motion.span, {
      initial: {
        opacity: 0
      },
      animate: {
        opacity: [0, 0, 1]
      },
      exit: {
        opacity: [1, 0, 0]
      },
      transition: {
        duration: reducedMotion ? 0 : 0.3,
        times: [0, 0.5, 1]
      },
      children: children
    })
  });
};

export { AnimatedNumber };
//# sourceMappingURL=AnimatedNumber.mjs.map
