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

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createComponent } from '@workday/canvas-kit-react/common';
import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
import { calc, createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
import { externalLinkIcon } from '@workday/canvas-system-icons-web';
import { system } from '@workday/canvas-tokens-web';
import { hyperlinkStencil } from './Hyperlink';
export const externalHyperlinkStencil = createStencil({
    extends: hyperlinkStencil,
    parts: {
        externalHyperlinkIcon: 'external-hyperlink-icon',
    },
    base: { name: "41h5n2", styles: "box-sizing:border-box;[data-part=\"external-hyperlink-icon\"]{vertical-align:text-top;--color-system-icon-c9acc3:currentColor;--size-svg-bca693:1em;width:calc(1em - 0.0625rem);min-width:calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem)) - 0.0625rem);margin-inline-start:calc(var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) - 0.125rem);& > svg{min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));min-height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));}:dir(rtl){transform:rotate(270deg);}}" }
}, "external-hyperlink-5efdf6");
/**
 * `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
 * link on a dark background such as `system.color.accent.info`.
 */
export const ExternalHyperlink = createComponent('a')({
    displayName: 'ExternalHyperlink',
    Component: ({ children, iconLabel, variant, linkType = 'inline', ...elemProps }, ref, Element) => (_jsxs(Element, { ref: ref, target: "_blank", rel: "noreferrer", ...handleCsProp(elemProps, externalHyperlinkStencil({ variant, linkType })), children: [_jsx("span", { "data-part": "external-hyperlink-children", children: children }), _jsx(SystemIcon, { icon: externalLinkIcon, role: "img", "aria-label": iconLabel, ...externalHyperlinkStencil.parts.externalHyperlinkIcon })] })),
});