"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require$$0 = require("react/jsx-runtime");
const React = require("react");
const designSystem = require("@choiceform/design-system");
const proxy = require("../../../_vendor/framer-motion/dist-es-render-components-motion-proxy.cjs");
const TypingCursor = React.memo(function TypingCursor2(props) {
  const { className, duration = 1, height = "1em", width = 2, color = "currentColor" } = props;
  return /* @__PURE__ */ require$$0.jsx(
    proxy.motion.span,
    {
      className: designSystem.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"
    }
  );
});
exports.TypingCursor = TypingCursor;
//# sourceMappingURL=typing-cursor.cjs.map
