@smart-react-components/ui/components/ColorPicker/PaletteSection/PaletteItemElement.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 Li_1 = __importDefault(require("@smart-react-components/core/Element/Li"));
const Svg_1 = __importDefault(require("@smart-react-components/core/Element/Svg"));
const styled_components_1 = __importDefault(require("styled-components"));
exports.default = (0, styled_components_1.default)(Li_1.default).attrs(({
    getColorPickerSize: (v, t) => `
    height: ${t.$.size.colorPicker[v].paletteItemSize};
    margin-left: ${t.$.size.colorPicker[v].space};
    margin-top: ${t.$.size.colorPicker[v].space};
    width: ${t.$.size.colorPicker[v].paletteItemSize};

    ${Svg_1.default} {
      height: ${t.$.size.icon[v]};
      width: ${t.$.size.icon[v]};
    }
  `,
}))(({ theme, isDisabled, palette }) => {
    var _a, _b, _c, _d, _e, _f, _g, _h;
    return `
  align-items: center;
  border-color: ${theme.$.vars.isDarkMode ? ((_b = (_a = theme.$.palette[palette].colorPicker) === null || _a === void 0 ? void 0 : _a.paletteDarkBorder) !== null && _b !== void 0 ? _b : theme.$.color.gray700) : ((_d = (_c = theme.$.palette[palette].colorPicker) === null || _c === void 0 ? void 0 : _c.paletteLightBorder) !== null && _d !== void 0 ? _d : theme.$.color.gray400)};
  border-radius: ${theme.$.radius.colorPicker};
  display: flex;
  justify-content: center;
  overflow: hidden;

  div {
    height: 100%;
    width: 100%;
  }

  ${Svg_1.default} {
    fill: ${theme.$.vars.isDarkMode ? ((_f = (_e = theme.$.palette[palette].colorPicker) === null || _e === void 0 ? void 0 : _e.paletteDarkIcon) !== null && _f !== void 0 ? _f : theme.$.color.gray600) : ((_h = (_g = theme.$.palette[palette].colorPicker) === null || _g === void 0 ? void 0 : _g.paletteLightIcon) !== null && _h !== void 0 ? _h : theme.$.color.gray500)};
  }

  ${isDisabled
        ? `
    opacity: ${theme.$.opacity.buttonDisabled};
   `
        : ''}
`;
});