@workday/canvas-kit-react/dist/commonjs/icon/lib/SystemIcon.js

The parent module that contains all Workday Canvas Kit React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SystemIcon = exports.systemIconStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const Svg_1 = require("./Svg");
exports.systemIconStencil = (0, canvas_kit_styling_1.createStencil)({
    extends: Svg_1.svgStencil,
    vars: {
        /**
         * This will set the icon's color (both `.wd-icon-fill` and `.wd-icon-accent` SVG layers). Most
         * of the time, this is the only color you need to change. Icons also have an accent layer. If you
         * wish to change the accent layer independently, also set the `accentColor` variable
         */
        color: '',
        /**
         * This will set the icon's accent color for the `.wd-icon-accent` SVG layer.
         */
        accentColor: '',
        /**
         * This will set the icon's background color for the `.wd-icon-background` SVG layer.
         */
        backgroundColor: '',
    },
    base: { name: "2eh3qd", styles: "box-sizing:border-box;& svg{width:var(--size-svg-bca693, var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6, 1.5rem)));height:var(--size-svg-bca693, var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6, 1.5rem)));}.wd-icon .wd-icon-fill{fill:var(--color-system-icon-c9acc3, var(--cnvs-component-system-icon-color-fill, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1))));}.wd-icon .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentColor-system-icon-c9acc3, var(--color-system-icon-c9acc3, var(--cnvs-component-system-icon-color-accent, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1)))));}.wd-icon .wd-icon-background{fill:var(--backgroundColor-system-icon-c9acc3, transparent);}@media (prefers-contrast: more){.wd-icon .wd-icon-fill, .wd-icon .wd-icon-accent{color:currentColor;fill:currentColor;}}" },
    // Keeps parent stencil `ME` inferred as `{}` so extending stencils keep correct boolean modifier typings.
    modifiers: {}
}, "system-icon-c9acc3");
exports.SystemIcon = (0, common_1.createComponent)('span')({
    displayName: 'SystemIcon',
    Component: ({ accent, background, color, icon, size, ...elemProps }, ref, Element) => {
        return ((0, jsx_runtime_1.jsx)(Svg_1.Svg, { as: Element, src: icon, type: canvas_system_icons_web_1.CanvasIconTypes.System, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.systemIconStencil)({
                size: (0, Svg_1.resolveSize)(size, canvas_tokens_web_1.component.legacy.systemIcon.size),
                color,
                accentColor: accent,
                backgroundColor: background,
            })) }));
    },
});