@smart-react-components/ui/components/Tooltip/TooltipElement.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 Div_1 = __importDefault(require("@smart-react-components/core/Element/Div"));
const styled_components_1 = __importDefault(require("styled-components"));
const PopoverArrow_1 = __importDefault(require("../Popover/PopoverArrow"));
const popover_1 = require("../../util/popover");
exports.default = (0, styled_components_1.default)(Div_1.default).attrs({
    getTooltipSize: (v, t) => `
    font-size: ${t.$.size.tooltip[v].fontSize};
    padding: ${t.$.size.tooltip[v].padding.y} ${t.$.size.tooltip[v].padding.x};
  `,
})(({ theme, duration, hasTransition, isSoft, palette }) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
    return `
  border-radius: ${theme.$.radius.tooltip};
  box-shadow: 0 0 10px 1px ${(_b = (_a = theme.$.palette[palette].tooltip) === null || _a === void 0 ? void 0 : _a.shadow) !== null && _b !== void 0 ? _b : theme.$.palette[palette].shadow};
  box-sizing: border-box;
  font-family: ${theme.$.fontFamily.tooltip};
  position: fixed;
  z-index: ${theme.$.zIndex.tooltip};

  ${!isSoft
        ? `
      background: ${(_d = (_c = theme.$.palette[palette].tooltip) === null || _c === void 0 ? void 0 : _c.background) !== null && _d !== void 0 ? _d : theme.$.palette[palette].main};
      color: ${(_f = (_e = theme.$.palette[palette].tooltip) === null || _e === void 0 ? void 0 : _e.font) !== null && _f !== void 0 ? _f : theme.$.palette[palette].font};
      fill: ${(_h = (_g = theme.$.palette[palette].tooltip) === null || _g === void 0 ? void 0 : _g.font) !== null && _h !== void 0 ? _h : theme.$.palette[palette].font};

      ${PopoverArrow_1.default} {
        fill: ${(_k = (_j = theme.$.palette[palette].tooltip) === null || _j === void 0 ? void 0 : _j.background) !== null && _k !== void 0 ? _k : theme.$.palette[palette].main};
        stroke: ${(_m = (_l = theme.$.palette[palette].tooltip) === null || _l === void 0 ? void 0 : _l.background) !== null && _m !== void 0 ? _m : theme.$.palette[palette].main};
      }
    `
        : `
      background: ${(_q = (_p = (_o = theme.$.palette[palette].tooltip) === null || _o === void 0 ? void 0 : _o.soft) === null || _p === void 0 ? void 0 : _p.background) !== null && _q !== void 0 ? _q : theme.$.palette[palette].soft};
      color: ${(_t = (_s = (_r = theme.$.palette[palette].tooltip) === null || _r === void 0 ? void 0 : _r.soft) === null || _s === void 0 ? void 0 : _s.font) !== null && _t !== void 0 ? _t : theme.$.palette[palette].softFont};
      fill: ${(_w = (_v = (_u = theme.$.palette[palette].tooltip) === null || _u === void 0 ? void 0 : _u.soft) === null || _v === void 0 ? void 0 : _v.font) !== null && _w !== void 0 ? _w : theme.$.palette[palette].softFont};
      font-weight: ${theme.$.fontWeight.bold};

      ${PopoverArrow_1.default} {
        fill: ${(_z = (_y = (_x = theme.$.palette[palette].tooltip) === null || _x === void 0 ? void 0 : _x.soft) === null || _y === void 0 ? void 0 : _y.background) !== null && _z !== void 0 ? _z : theme.$.palette[palette].soft};
        stroke: ${(_2 = (_1 = (_0 = theme.$.palette[palette].tooltip) === null || _0 === void 0 ? void 0 : _0.soft) === null || _1 === void 0 ? void 0 : _1.background) !== null && _2 !== void 0 ? _2 : theme.$.palette[palette].soft};
      }
    `}

  ${hasTransition ? (0, popover_1.generateCSSTransitionClasses)('tooltip', duration) : ''}
`;
});