@smart-react-components/ui/components/Alert/AlertIconElement.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 types_1 = require("../../types");
const css_1 = require("../../util/css");
exports.default = (0, styled_components_1.default)(Div_1.default).attrs(({ hasBackground, iconPosition }) => ({
    getAlertIconSize: (v, t) => `
    padding: 0 ${(0, css_1.toCSSValue)(t.$.size.alert[v].padding.x)(v => v / 2)};

    ${!hasBackground
        ? `
        padding-${iconPosition === types_1.OrderPosition.LEFT ? 'right' : 'left'}: 0;
      `
        : ''}

    > svg {
      height: ${t.$.size.alert[v].iconSize};
      width: ${t.$.size.alert[v].iconSize};
    }

    > i {
      font-size: ${t.$.size.alert[v].iconSize};
    }
  `,
}))(({ theme, alertPalette, hasBackground, hasHover, isClickable, isOutline, isSoft, palette }) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
    return `
  align-items: center;
  align-self: stretch;
  display: flex;
  fill: currentcolor;
  flex: 0 0 auto;
  justify-content: center;

  ${((palette === alertPalette && !isOutline) || hasBackground)
        ? `
      color: ${!isSoft ? ((_c = (_b = (_a = theme.$.palette[alertPalette].alert) === null || _a === void 0 ? void 0 : _a.icon) === null || _b === void 0 ? void 0 : _b.font) !== null && _c !== void 0 ? _c : theme.$.palette[alertPalette].font) : ((_h = (_g = (_f = (_e = (_d = theme.$.palette[alertPalette]) === null || _d === void 0 ? void 0 : _d.alert) === null || _e === void 0 ? void 0 : _e.soft) === null || _f === void 0 ? void 0 : _f.icon) === null || _g === void 0 ? void 0 : _g.font) !== null && _h !== void 0 ? _h : theme.$.palette[alertPalette].softFont)};
    `
        : `
      color: ${!isSoft ? ((_l = (_k = (_j = theme.$.palette[palette].alert) === null || _j === void 0 ? void 0 : _j.icon) === null || _k === void 0 ? void 0 : _k.font) !== null && _l !== void 0 ? _l : theme.$.palette[palette].main) : ((_r = (_q = (_p = (_o = (_m = theme.$.palette[alertPalette]) === null || _m === void 0 ? void 0 : _m.alert) === null || _o === void 0 ? void 0 : _o.soft) === null || _p === void 0 ? void 0 : _p.icon) === null || _q === void 0 ? void 0 : _q.font) !== null && _r !== void 0 ? _r : theme.$.palette[palette].soft)};
    `}

  ${hasBackground
        ? `
      ${!isSoft
            ? `
          ${((_t = (_s = theme.$.palette[palette].alert) === null || _s === void 0 ? void 0 : _s.icon) === null || _t === void 0 ? void 0 : _t.background)
                ? `background: ${theme.$.palette[palette].alert.icon.background};`
                : `background: ${(palette !== alertPalette || isOutline) ? theme.$.palette[palette].main : theme.$.palette[alertPalette].darkest};`}
        `
            : `
          ${((_w = (_v = (_u = theme.$.palette[palette].alert) === null || _u === void 0 ? void 0 : _u.soft) === null || _v === void 0 ? void 0 : _v.icon) === null || _w === void 0 ? void 0 : _w.background)
                ? `background: ${theme.$.palette[palette].alert.soft.icon.background};`
                : `background: ${(palette !== alertPalette || isOutline) ? theme.$.palette[palette].soft : theme.$.palette[alertPalette].softDynamicest};`}
        `}
    `
        : ''}

  ${hasHover
        ? `
      > * {
        opacity: .5;
      }

      &:hover > * {
        opacity: 1;
      }
    `
        : ''}

  ${isClickable
        ? `
      cursor: ${theme.$.cursor.alertIconClickable};
    `
        : ''}
`;
});