@workday/canvas-kit-react/dist/es6/checkbox/lib/CheckboxCheck.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 { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
import { checkSmallIcon } from '@workday/canvas-system-icons-web';
import { component, system } from '@workday/canvas-tokens-web';
import { CheckBackground } from './CheckBackground';
const checkboxCheckStencil = createStencil({
    base: { name: "2g9qna", styles: "box-sizing:border-box;--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));display:flex;flex-direction:column;justify-content:center;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.3125rem * -1);transition:margin 200ms ease;}opacity:var(--cnvs-sys-opacity-zero);transform:scale(0.5);" },
    modifiers: {
        checked: {
            true: { name: "3dsut1", styles: "--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
        },
        indeterminate: {
            true: { name: "2o0m2e", styles: "opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
        },
        variant: {
            inverse: { name: "31balq", styles: "--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));& > div{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}" }
        }
    }
}, "checkbox-check-f2bc56");
const indeterminateBoxStencil = createStencil({
    base: { name: "3hpgf1", styles: "box-sizing:border-box;width:0.625rem;height:0.125rem;background-color:var(--cnvs-sys-color-fg-inverse);" },
    modifiers: {
        variant: {
            inverse: { name: "olgox", styles: "background-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));" }
        }
    }
}, "indeterminate-box-db8fc6");
export const CheckboxCheck = createComponent('div')({
    displayName: 'CheckboxCheck',
    Component: ({ checked, error, indeterminate, variant }) => {
        return (_jsx(CheckBackground, { error: error, variant: variant, children: _jsx("div", { ...checkboxCheckStencil({ checked, indeterminate, variant }), children: indeterminate ? (_jsx("div", { ...indeterminateBoxStencil({ variant }) })) : (checked && _jsx(SystemIcon, { icon: checkSmallIcon })) }) }));
    },
});