@smart-react-components/ui/components/ColorPicker/ConsoleSection/ConsoleSectionElement.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 Section_1 = __importDefault(require("@smart-react-components/core/Element/Section"));
const styled_components_1 = __importDefault(require("styled-components"));
const InputAddonElement_1 = __importDefault(require("../../Input/InputAddonElement"));
const InputElement_1 = __importDefault(require("../../Input/InputElement"));
exports.default = (0, styled_components_1.default)(Section_1.default)(({ theme, isDisabled, palette }) => {
    var _a, _b, _c, _d;
    return `
  background-clip: content-box;
  background-image: url('${theme.$.media.opacityBackground}');
  border-radius: ${theme.$.radius.input.rectangle};

  ${InputElement_1.default},
  ${InputAddonElement_1.default} {
    color: ${(_b = (_a = theme.$.palette[palette].colorPicker) === null || _a === void 0 ? void 0 : _a.lightFont) !== null && _b !== void 0 ? _b : theme.$.color.light.background};
    transition: none;

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

  ${isDisabled
        ? `
    opacity: ${theme.$.opacity.buttonDisabled};
    pointer-events: none;
   `
        : ''} 
`;
});