import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useAtomValue } from 'jotai';
import { Link as LinkRouter } from 'react-router-dom';
import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
import { globalOptionsAtom } from '../../jotai/store.js';
import { tryDecodeURIComponent } from '../../utils/index.js';
import { styled } from '../../styled-components.js';
export function Link(props) {
    const { routingBasePath, unstable_hooks, onDeepLinkClick } = useAtomValue(globalOptionsAtom);
    const link = props.security
        ? unstable_hooks?.replaceSecurityLink?.({ securityRequirementId: props.to })
        : props.to;
    const linkHandler = onDeepLinkClick && {
        onClick: (e) => {
            e.preventDefault();
            onDeepLinkClick((routingBasePath || '') + link);
        },
    };
    return link ? (_jsx(LinkRouter, { "aria-label": props['aria-label'] || `link to ${link}`, id: tryDecodeURIComponent(props.id || ''), className: props.className || '', to: link?.startsWith('#') ? link : (routingBasePath || '') + link, ...linkHandler, children: props.children })) : props.children ? (_jsxs("span", { "aria-label": props['aria-label'] || `link to ${link}`, className: props.className, children: [' ', props.children, ' '] })) : null;
}
export const StyledShareLink = styled(Link) `
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);
  padding-right: var(--heading-anchor-offset-right);
  z-index: 1;

  ${LinkIcon} {
    opacity: 0;
    transition:
      visibility 0.3s linear,
      opacity 0.3s linear;
  }

  :hover ${LinkIcon}, :focus ${LinkIcon} {
    visibility: visible;
    opacity: 1;
  }
`;
export function ShareLink(props) {
    return (_jsx(StyledShareLink, { ...props, children: _jsx(LinkIcon, { size: "13px", color: "--heading-anchor-color" }) }));
}
//# sourceMappingURL=linkify.js.map