import { jsx as _jsx } from "react/jsx-runtime";
import { cn } from "../utils/index.js";
import { ArrowRightIcon } from "./icons.generated/ArrowRightIcon.js";
export function ArrowRightInteractiveIcon({ hiddenByDefault = false, className, ...props }) {
    return (_jsx(ArrowRightIcon, { alt: "", "data-name": "ArrowRightInteractive", "data-hidden-by-default": hiddenByDefault || undefined, className: cn(`u:pointer-events-none
        u:transition-[opacity,translate]
        u:data-hidden-by-default:translate-x-[calc(-15%*var(--gds-rtl-factor))]
        u:data-hidden-by-default:opacity-0
        u:data-[hidden-by-default=if-can-hover]:not-can-hover:translate-x-0
        u:data-[hidden-by-default=if-can-hover]:not-can-hover:opacity-100
        u:data-hidden-by-default:nearest-clickable-hocus-visible:translate-x-0
        u:data-hidden-by-default:nearest-clickable-hocus-visible:opacity-100
        u:not-data-hidden-by-default:nearest-clickable-hover:translate-x-[calc(15%*var(--gds-rtl-factor))]`, className), ...props }));
}
//# sourceMappingURL=ArrowRightInteractiveIcon.js.map