@octopusdeploy/design-system-components/dist/src/components/Form/Select/MultiSelectCheckbox.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.checkboxStyles = void 0;
exports.MultiSelectCheckbox = MultiSelectCheckbox;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
function MultiSelectCheckbox({ checked, isDisabled, isIndeterminate }) {
    return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(exports.checkboxStyles.container, { [exports.checkboxStyles.checked]: checked, [exports.checkboxStyles.disabled]: isDisabled }), children: isIndeterminate ? (0, jsx_runtime_1.jsx)(design_system_icons_1.MinusIcon, { size: 16, color: "currentColor" }) : checked ? (0, jsx_runtime_1.jsx)(design_system_icons_1.CheckIcon, { size: 16, color: "currentColor" }) : undefined }));
}
const checkboxButtonSize = "1.25rem";
exports.checkboxStyles = {
    container: (0, css_1.css)({
        display: "grid",
        placeContent: "center",
        boxSizing: "border-box",
        backgroundColor: design_system_tokens_1.themeTokens.color.background.primary.default,
        border: `${design_system_tokens_1.borderWidth[1]} solid ${design_system_tokens_1.themeTokens.color.border.bold}`,
        borderRadius: design_system_tokens_1.borderRadius.extraSmall,
        width: checkboxButtonSize,
        height: checkboxButtonSize,
        color: design_system_tokens_1.themeTokens.color.icon.inverse.primary,
    }),
    checked: (0, css_1.css)({
        border: "none",
        backgroundColor: design_system_tokens_1.themeTokens.color.background.selected,
    }),
    disabled: (0, css_1.css)({
        color: design_system_tokens_1.themeTokens.color.icon.tertiary,
        backgroundColor: design_system_tokens_1.themeTokens.color.background.disabled,
    }),
};