@smart-react-components/ui/components/Input/InputWrapper.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"));
exports.default = (0, styled_components_1.default)(Div_1.default)(({ theme, hasBorder, hasSeparatedLeftAddon, hasSeparatedRightAddon, isDisabled, isFocused, isOutline, isSoft, palette, shape }) => {
    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, _3, _4;
    return `
  border: ${hasBorder ? 'solid 1px' : '0'};
  border-radius: ${theme.$.radius.input[shape]};
  display: flex;
  flex: 1 1 auto;
  min-width: 1px;
  overflow: hidden;
  transition: 200ms 0s ease-in-out;
  transition-property: border;

  ${!isOutline
        ? `
      ${!isSoft
            ? `
          border-color: ${!isFocused ? ((_b = (_a = theme.$.palette[palette].input) === null || _a === void 0 ? void 0 : _a.border) !== null && _b !== void 0 ? _b : theme.$.palette[palette].dark) : ((_e = (_d = (_c = theme.$.palette[palette].input) === null || _c === void 0 ? void 0 : _c.focused) === null || _d === void 0 ? void 0 : _d.border) !== null && _e !== void 0 ? _e : theme.$.palette[palette].dynamicest)};
        `
            : `
          border-color: ${!isFocused ? ((_h = (_g = (_f = theme.$.palette[palette].input) === null || _f === void 0 ? void 0 : _f.soft) === null || _g === void 0 ? void 0 : _g.border) !== null && _h !== void 0 ? _h : theme.$.palette[palette].softDynamic) : ((_o = (_m = (_l = (_k = (_j = theme.$.palette[palette]) === null || _j === void 0 ? void 0 : _j.input) === null || _k === void 0 ? void 0 : _k.soft) === null || _l === void 0 ? void 0 : _l.focused) === null || _m === void 0 ? void 0 : _m.border) !== null && _o !== void 0 ? _o : theme.$.palette[palette].softDynamicest)};
        `}
    `
        : `
      ${!isFocused
            ? `
        border-color: ${!isSoft ? ((_r = (_q = (_p = theme.$.palette[palette].input) === null || _p === void 0 ? void 0 : _p.outline) === null || _q === void 0 ? void 0 : _q.border) !== null && _r !== void 0 ? _r : theme.$.color.dynamic.accent) : ((_v = (_u = (_t = (_s = theme.$.palette[palette].input) === null || _s === void 0 ? void 0 : _s.soft) === null || _t === void 0 ? void 0 : _t.outline) === null || _u === void 0 ? void 0 : _u.border) !== null && _v !== void 0 ? _v : theme.$.color.dynamic.accent)};
      `
            : `
        border-color: ${!isSoft ? ((_z = (_y = (_x = (_w = theme.$.palette[palette].input) === null || _w === void 0 ? void 0 : _w.outline) === null || _x === void 0 ? void 0 : _x.focused) === null || _y === void 0 ? void 0 : _y.border) !== null && _z !== void 0 ? _z : theme.$.palette[palette].main) : ((_4 = (_3 = (_2 = (_1 = (_0 = theme.$.palette[palette].input) === null || _0 === void 0 ? void 0 : _0.soft) === null || _1 === void 0 ? void 0 : _1.outline) === null || _2 === void 0 ? void 0 : _2.focused) === null || _3 === void 0 ? void 0 : _3.border) !== null && _4 !== void 0 ? _4 : theme.$.palette[palette].soft)};
      `}
    `}

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

  ${(hasSeparatedLeftAddon)
        ? `
      border-left: 0;
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    `
        : ''}
  ${hasSeparatedRightAddon
        ? `
      border-right: 0;
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    `
        : ''}
`;
});