@redocly/theme
Version:
Shared UI components lib
24 lines (23 loc) • 2.85 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckboxIcon = void 0;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const Icon = ({ className, checked = false, onClick, }) => (react_1.default.createElement("span", { className: className, onClick: onClick }, checked ? (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
react_1.default.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H10C12.2091 0 14 1.79086 14 4V10C14 12.2091 12.2091 14 10 14H4C1.79086 14 0 12.2091 0 10V4Z", fill: "var(--checkbox-content-color-inverse)" }),
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 1H4C2.34315 1 1 2.34315 1 4V10C1 11.6569 2.34315 13 4 13H10C11.6569 13 13 11.6569 13 10V4C13 2.34315 11.6569 1 10 1ZM4 0C1.79086 0 0 1.79086 0 4V10C0 12.2091 1.79086 14 4 14H10C12.2091 14 14 12.2091 14 10V4C14 1.79086 12.2091 0 10 0H4Z", fill: "var(--checkbox-box-color-active)" }),
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.36018 9.98574L10.9106 4.21938C11.0343 4.06448 10.9203 3.83984 10.7272 3.83984H10.0758C9.93597 3.83984 9.80268 3.90389 9.71608 4.01474L9.03424 4.8785L5.99975 8.72257L4.28308 6.54742C4.24025 6.49305 4.18567 6.44909 4.12342 6.41883C4.06118 6.38858 3.99269 6.37282 3.92348 6.37273H3.27208C3.07619 6.37273 2.96673 6.59854 3.08778 6.75208L5.64029 9.98581C5.82388 10.2182 6.17616 10.2168 6.36018 9.98574Z", fill: "var(--checkbox-box-color-active)" }))) : (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "var(--checkbox-box-color)", xmlns: "http://www.w3.org/2000/svg" },
react_1.default.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H10C12.2091 0 14 1.79086 14 4V10C14 12.2091 12.2091 14 10 14H4C1.79086 14 0 12.2091 0 10V4Z", fill: "var(--checkbox-content-color-inverse)" }),
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 1H4C2.34315 1 1 2.34315 1 4V10C1 11.6569 2.34315 13 4 13H10C11.6569 13 13 11.6569 13 10V4C13 2.34315 11.6569 1 10 1ZM4 0C1.79086 0 0 1.79086 0 4V10C0 12.2091 1.79086 14 4 14H10C12.2091 14 14 12.2091 14 10V4C14 1.79086 12.2091 0 10 0H4Z", fill: "var(--checkbox-border-color)" })))));
exports.CheckboxIcon = (0, styled_components_1.default)(Icon).attrs({
'data-component-name': 'icons/CheckboxIcon/CheckboxIcon',
}) `
display: flex;
&:hover {
--checkbox-border-color: var(--checkbox-border-color-active);
}
`;
//# sourceMappingURL=CheckboxIcon.js.map