import { jsx } from "react/jsx-runtime";
import { memo } from "react";
import { tcx } from "@choiceform/design-system";
import { motion } from "../../../_vendor/framer-motion/dist-es-render-components-motion-proxy.js";
const TypingCursor = memo(function TypingCursor2(props) {
  const { className, duration = 1, height = "1em", width = 2, color = "currentColor" } = props;
  return /* @__PURE__ */ jsx(
    motion.span,
    {
      className: tcx("mx-0.5 inline-block", className),
      style: {
        backgroundColor: color,
        width,
        height,
        // Align with text baseline
        verticalAlign: "baseline",
        // Slight offset to align better with text
        transform: "translateY(0.125em)"
      },
      animate: {
        opacity: [1, 1, 0, 0]
      },
      transition: {
        duration,
        repeat: Infinity,
        repeatType: "loop",
        ease: "linear",
        times: [0, 0.5, 0.5, 1]
        // Stay visible for 50%, then invisible for 50%
      },
      "aria-hidden": "true"
    }
  );
});
export {
  TypingCursor
};
//# sourceMappingURL=typing-cursor.js.map
