@workday/canvas-kit-react/dist/es6/button/lib/Hyperlink.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { createComponent } from '@workday/canvas-kit-react/common';
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
export const hyperlinkStencil = createStencil({
    base: { name: "1zucq6", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);text-decoration:underline;color:var(--cnvs-sys-color-fg-link-default);cursor:pointer;border-radius:0.125rem;padding:0 0.125rem;margin:0 -2px;transition:color 0.15s,background-color 0.15s;word-break:break-word;&:hover, &.hover{color:var(--cnvs-sys-color-fg-link-hover);background:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));outline:none;@media (forced-colors: active){outline:solid 0.125rem ButtonBorder;}}&:active, &.active{color:var(--cnvs-sys-color-fg-link-hover);background:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}" },
    modifiers: {
        variant: {
            inverse: { name: "3exwoo", styles: "color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{color:var(--cnvs-sys-color-fg-inverse);background:rgba(255, 255, 255, 0.1);}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 0.125rem  var(--cnvs-sys-color-fg-inverse);}&:active, &.active{color:var(--cnvs-sys-color-fg-link-hover);background:var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));}" },
            secondary: { name: "aw7c9", styles: "color:var(--cnvs-sys-color-fg-default);&:hover, &.hover{color:var(--cnvs-sys-color-fg-strong);background:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:active, &.active{color:var(--cnvs-sys-color-fg-strong);background:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}" }
        },
        linkType: {
            inline: { name: "uaeet", styles: "" },
            standalone: { name: "v2lvq", styles: "text-decoration:none;" }
        }
    }
}, "hyperlink-887109");
/**
 * `Hyperlink`s should be used when you want to navigate away from the current page or to an anchor
 * on the current page.
 */
export const Hyperlink = createComponent('a')({
    displayName: 'Hyperlink',
    Component: ({ children, variant, linkType = 'inline', ...elemProps }, ref, Element) => (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, hyperlinkStencil({ variant, linkType })), children: children })),
});