@smart-react-components/ui/components/ColorPicker/PickerSection/MajorDraggerElement.js

SRC UI includes React and Styled components.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const styled_components_1 = __importDefault(require("styled-components"));
const DraggerElement_1 = __importDefault(require("./DraggerElement"));
exports.default = (0, styled_components_1.default)(DraggerElement_1.default).attrs({
    getColorPickerSize: (v, t) => `
    height: ${t.$.size.colorPicker[v].majorDraggerSize};
    width: ${t.$.size.colorPicker[v].majorDraggerSize};
  `,
})(({ theme, palette }) => {
    var _a, _b, _c, _d;
    return `
  &::after {
    border: solid 4px ${(_b = (_a = theme.$.palette[palette].colorPicker) === null || _a === void 0 ? void 0 : _a.lightFont) !== null && _b !== void 0 ? _b : theme.$.color.light.background};
    border-radius: 100%;
    content: "";
    left: calc(50% - 4px);
    position: absolute;
    top: calc(50% - 4px);
  }

  &[data-src-is-dark="true"]::after {
    border-color: ${(_d = (_c = theme.$.palette[palette].colorPicker) === null || _c === void 0 ? void 0 : _c.darkFont) !== null && _d !== void 0 ? _d : theme.$.color.dark.background};
  }
`;
});