'use client';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { ArrowUpRightInteractiveIcon } from '@graphprotocol/gds-react/icons';
import { useCSSPropsPolyfill, useCSSState, useGDS } from "../hooks/index.js";
import { cn, getCSSPropsAttributes, trimReactNode } from "../utils/index.js";
import { renderAddon } from "./base/Addon.js";
import { ButtonOrLink } from "./base/ButtonOrLink.js";
import { LinkMeta } from "./Link.meta.js";
export function Link({ ref: passedRef, variant, addonBefore, addonAfter: passedAddonAfter, disabled = false, className, style, children, ...props }) {
    useGDS();
    const [statePassedRef, state] = useCSSState({
        pointer: undefined,
        focus: undefined,
        current: props['aria-current'] && String(props['aria-current']) !== 'false',
        disabled: Boolean(disabled),
    }, {
        ref: passedRef,
    });
    const [cssPropsPolyfillStatePassedRef, cssPropsPolyfillAttributes, cssProps] = useCSSPropsPolyfill(LinkMeta, { variant }, { ref: statePassedRef, returnPropValues: { variant } });
    return (_jsx(ButtonOrLink, { ref: cssPropsPolyfillStatePassedRef, inline: true, disabled: disabled, "data-variant": cssProps.variant, className: cn(`gds-link root-inline u:w-max u:max-w-full u:wrap-anywhere u:outline-0
        u:hover:state-hover
        u:focus-visible:state-focus
        u:active:state-active
        u:disabled:state-disabled
        u:disabled:state-idle
        u:data-[variant=primary]:text-link-idle
        u:current:state-current`, className), ...state.polyfillAttributes, ...getCSSPropsAttributes(LinkMeta, { variant }, style), ...cssPropsPolyfillAttributes, ...props, render: (renderProps, { Element, elementProps, target }) => {
            const addonAfter = passedAddonAfter !== undefined ? (passedAddonAfter) : target === '_blank' ? (_jsx(ArrowUpRightInteractiveIcon, {})) : undefined;
            return (_jsx(Element, { ...renderProps, ...elementProps, children: _jsxs("span", { className: `
                nested/link-paint -mx-1 rounded-[max(--spacing(1),0.25em)] p-1 whitespace-nowrap transition
                @state-hover/link:text-link-hover
                @state-focus/link:outline
                @state-active/link:text-link-active
                @state-active/link:transition-none
                @state-disabled/link:text-link-disabled
                ${ /* Work around this Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1849469 */''}
                firefox:mx-0
                firefox:px-0
                u:**:addon:not-has-icon:transition-opacity
                u:**:addon:not-has-icon:@state-disabled/link:opacity-disabled
                u:**:addon:not-has-icon:@state-disabled/link:grayscale
              `, children: [addonBefore ? (_jsxs(_Fragment, { children: [_jsx(LinkAddon, { children: renderAddon(addonBefore) }), "\u2060"] })) : null, children ? (_jsx("span", { className: `
                    from-current to-current bg-bottom-right pb-0.5 whitespace-normal duration-200
                    not-first:ms-(--gap-addon)
                    not-last:me-(--gap-addon)
                    @state-not-focus/link:bg-linear-to-b
                    @prop-variant-primary/link:bg-size-[0%_1px]
                    @prop-variant-primary/link:transition-[background-size]
                    @prop-variant-primary/link:@state-hover/link:bg-size-[100%_1px]
                    @prop-variant-primary/link:@state-hover/link:bg-bottom-left
                    @prop-variant-primary/link:@state-disabled/link:bg-size-[100%_1px]
                    @prop-variant-secondary/link:bg-size-[100%_1px]
                    ${ /* Prevent a weird color transition bug when toggling `disabled` in Chrome */''}
                    text-current
                  `, style: {
                                // Work around this Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1971673
                                '--tw-gradient-stops': 'var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))',
                            }, children: trimReactNode(children) })) : null, addonAfter ? (_jsxs(_Fragment, { children: ["\u2060", _jsx(LinkAddon, { children: renderAddon(addonAfter) })] })) : null] }) }));
        } }));
}
function LinkAddon({ className, children, ...props }) {
    return (_jsx("span", { className: cn(`gds-addon root-block/inline u:min-w-em u:addon-large
        u:@style-[--gds-font-size=var(--text-12)]:addon-small
        u:@style-[--gds-font-size=var(--text-14)]:addon-small
        u:@style-[--gds-font-size=var(--text-16)]:addon-medium
        u:@style-[--gds-font-size=var(--text-18)]:addon-medium
        i:h-0 ${ /* Fix Chrome issue where the focus ring has a weird shape on a link with addons */''}
        i:align-top ${ /* Prevent messing with the line height */''}
        i:**:icon:default-size-em`, className), ...props, children: _jsx("span", { className: "flex h-lh items-center justify-center", children: children }) }));
}
//# sourceMappingURL=Link.js.map