@workday/canvas-kit-react/dist/es6/icon/lib/SystemIconCircle.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 { calc, createStencil, cssVar, handleCsProp, px2rem, } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { resolveSize } from './Svg';
import { SystemIcon, systemIconStencil } from './SystemIcon';
/* @deprecated Use tokens instead. Deprecated in v15.0.0. */
export var SystemIconCircleSize;
(function (SystemIconCircleSize) {
    SystemIconCircleSize[SystemIconCircleSize["xs"] = 16] = "xs";
    SystemIconCircleSize[SystemIconCircleSize["s"] = 24] = "s";
    SystemIconCircleSize[SystemIconCircleSize["m"] = 32] = "m";
    SystemIconCircleSize[SystemIconCircleSize["l"] = 40] = "l";
    SystemIconCircleSize[SystemIconCircleSize["xl"] = 64] = "xl";
    SystemIconCircleSize[SystemIconCircleSize["xxl"] = 120] = "xxl";
})(SystemIconCircleSize || (SystemIconCircleSize = {}));
/** Mapping utility for the SystemIconCircleSize enum to the systemLegacy size tokens.
 * @deprecated Use tokens instead. Deprecated in v15.0.0.
 * */
const sizes = {
    xs: system.legacy.size.xxxs,
    s: system.legacy.size.xs,
    m: system.legacy.size.sm,
    l: system.legacy.size.md,
    xl: system.legacy.size.xxl,
    xxl: px2rem(120),
};
export const systemIconCircleStencil = createStencil({
    vars: {
        background: '',
        color: '',
        size: '',
    },
    base: { name: "prult", styles: "box-sizing:border-box;background:var(--background-system-icon-circle-11ad12, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))));display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));overflow:hidden;width:var(--size-system-icon-circle-11ad12, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)));height:var(--size-system-icon-circle-11ad12, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)));--size-svg-bca693:calc(var(--size-system-icon-circle-11ad12, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))) * 0.625);--color-system-icon-c9acc3:var(--color-system-icon-circle-11ad12);& img{width:100%;height:100%;}" },
    modifiers: {
        inverse: {
            true: { name: "1pe53t", styles: "background:var(--background-system-icon-circle-11ad12, var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1))));--color-system-icon-c9acc3:var(--color-system-icon-circle-11ad12, var(--cnvs-sys-color-fg-inverse));" }
        }
    }
}, "system-icon-circle-11ad12");
export const SystemIconCircle = createComponent('span')({
    displayName: 'SystemIconCircle',
    Component: ({ background, color, size, icon, shouldMirror, shouldMirrorInRTL, inverse, ...elemProps }, ref, Element) => {
        return (_jsx("div", { ...handleCsProp(elemProps, systemIconCircleStencil({
                size: resolveSize(size, sizes),
                background,
                color,
                inverse,
            })), children: _jsx(SystemIcon, { as: Element, ref: ref, icon: icon, shouldMirror: shouldMirror, shouldMirrorInRTL: shouldMirrorInRTL }) }));
    },
});