@stakefish/ui/components/Input.js

<div align="center"> <a href="https://www.npmjs.com/package/@stakefish/ui"><img src="https://gateway.pinata.cloud/ipfs/QmbZL1ceA8Yiz2pKALTg919jYx141DPUGegC9L4XpyayW5" width="300" /></a> </div>

import { a as __rest, _ as __assign } from '../tslib.es6-35932c2c.js';
import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { styled } from '@mui/material/styles';
import MuiInput from '@mui/material/Input';
import EndAdornment from './EndAdornment.js';
import '@mui/material/useMediaQuery';
import '@mui/material/Box';
import '@mui/material/InputAdornment';
import './Icon.js';
import '../icons/ArrowLeft.js';
import '../icons/ArrowRight.js';
import '../icons/CloseCircle.js';
import '../icons/InfoCircle.js';
import '../icons/ErrorCircle.js';
import '../icons/Attention.js';
import '../icons/HelpCircle.js';
import '../icons/Document.js';
import '../icons/DocumentText.js';
import '../icons/Lock.js';
import '../icons/Delete.js';
import '../icons/Users.js';
import '../icons/Stakefish.js';
import '../icons/Sound.js';
import '../icons/Beacon.js';
import '../icons/TriangleRight.js';
import '../icons/TriangleLeft.js';
import '../icons/TriangleUp.js';
import '../icons/TriangleDown.js';
import '../icons/Sent.js';
import '../icons/Download.js';
import '../icons/Faster.js';
import '../icons/Slower.js';
import '../icons/Usb.js';
import '../icons/Key.js';
import '../icons/Edit.js';
import '../icons/Expand.js';
import '../icons/Collapse.js';
import '../icons/Success.js';
import '../icons/SuccessCircle.js';
import '../icons/Fail.js';
import '../icons/Desktop.js';
import '../icons/Mobile.js';
import '../icons/Loading.js';
import '../icons/Upload.js';
import '../icons/Check.js';
import '../icons/ChevronLeft.js';
import '../icons/ChevronRight.js';
import '../icons/Plus.js';
import '../icons/Minus.js';
import '../icons/Globe.js';
import '../icons/Link.js';
import '../icons/Copy.js';
import '../icons/Medium.js';
import '../icons/Twitter.js';
import '../icons/Telegram.js';
import '../icons/Eth.js';
import '../icons/Sort.js';
import '../icons/Close.js';
import '../icons/DollarSign.js';
import '../icons/Search.js';
import '../icons/Range.js';
import '../icons/Instagram.js';
import '../icons/LinkedIn.js';
import '../icons/Reddit.js';
import '../icons/YouTube.js';
import '../icons/Chrome.js';
import '../icons/CloudConnect.js';
import '../icons/Update.js';
import '../icons/Menu.js';
import '../icons/Settings.js';
import './Button.js';
import '../clsx.m-6243b874.js';
import '@mui/material/Button';
import '../theme/colors.js';

var getFontSize = function (_a) {
    var size = _a.size, theme = _a.theme;
    switch (size) {
        case "xs":
            return {
                main: theme.typography.fontSizeXs2,
                mobile: theme.typography.fontSizeXs3
            };
        case "sm":
            return {
                main: theme.typography.fontSizeXs2,
                mobile: theme.typography.fontSizeXs3
            };
        case "md":
            return {
                main: theme.typography.fontSizeXs1,
                mobile: theme.typography.fontSizeXs1
            };
        case "lg":
            return {
                main: theme.typography.fontSizeXl1,
                mobile: theme.typography.fontSizeS
            };
    }
};
var getLineHeight = function (_a) {
    var size = _a.size, theme = _a.theme;
    switch (size) {
        case "xs":
            return {
                main: theme.typography.lineHeightXs1,
                mobile: theme.typography.lineHeightXs3
            };
        case "sm":
            return {
                main: theme.typography.lineHeightXs1,
                mobile: theme.typography.lineHeightXs3
            };
        case "md":
            return {
                main: theme.typography.lineHeightS,
                mobile: theme.typography.lineHeightS
            };
        case "lg":
            return {
                main: theme.typography.lineHeightL,
                mobile: theme.typography.lineHeightM
            };
    }
};
var getPadding = function (_a) {
    var size = _a.size, theme = _a.theme, append = _a.$append;
    switch (size) {
        case "xs":
            return {
                main: theme.spacing(1.5, append ? 0.5 : 2.5, 1.5, 2.5),
                mobile: theme.spacing(0.75, append ? 0.4 : 1.5, 0.75, 1.5)
            };
        case "sm":
            return {
                main: theme.spacing(1.75, append ? 0.75 : 2.5, 1.75, 2.5),
                mobile: theme.spacing(1, append ? 0.4 : 1.5, 1, 1.5)
            };
        case "md":
            return {
                main: theme.spacing(2.125, append ? 1 : 2.5, 2.125, 2.5),
                mobile: theme.spacing(1.125, append ? 0.4 : 2, 1.125, 2)
            };
        case "lg":
            return {
                main: theme.spacing(3, append ? 2 : 4, 3, 4),
                mobile: theme.spacing(1.375, append ? 0.4 : 2.5, 1.375, 2.5)
            };
    }
};
// TODO: Store form control's similar styles somewhere in utils
var getRadius = function (_a) {
    var size = _a.size, theme = _a.theme;
    switch (size) {
        case "xs":
            return {
                main: theme.borders.radius.sm,
                mobile: theme.borders.radius.xs1
            };
        case "sm":
            return {
                main: theme.borders.radius.sm,
                mobile: theme.borders.radius.xs1
            };
        case "md":
            return {
                main: theme.borders.radius.md,
                mobile: theme.borders.radius.sm
            };
        case "lg":
            return {
                main: theme.borders.radius.xl1,
                mobile: theme.borders.radius.sm
            };
    }
};
var formCommonStyles = function (theme) {
    var _a;
    return (_a = {
            caretColor: theme.palette.blue.main,
            backgroundColor: theme.palette.gray.white,
            "&.MuiInputBase-colorSecondary": {
                backgroundColor: theme.palette.gray[100]
            },
            "& input": {
                height: "auto"
            },
            "&.Mui-focused": {
                boxShadow: "0 0 0 ".concat(theme.borders.size.primary, "px ").concat(theme.palette.primary.main)
            },
            "&.Mui-error": {
                boxShadow: "0 0 0 ".concat(theme.borders.size.primary, "px ").concat(theme.palette.negative.main)
            },
            "&.Mui-disabled": {
                backgroundColor: theme.palette.gray[300]
            }
        },
        _a[theme.breakpoints.down("sm")] = {
            "&.Mui-focused": {
                boxShadow: "0 0 0 ".concat(theme.borders.size.secondary, "px ").concat(theme.palette.primary.main)
            },
            "&.Mui-error": {
                boxShadow: "0 0 0 ".concat(theme.borders.size.secondary, "px ").concat(theme.palette.negative.main)
            }
        },
        _a);
};
var StyledInput = styled(MuiInput)(function (_a) {
    var _b;
    var _c, _d, _e, _f, _g, _h, _j, _k;
    var theme = _a.theme, props = __rest(_a, ["theme"]);
    var size = props.size, $append = props.$append;
    return __assign(__assign({}, formCommonStyles(theme)), (_b = { padding: (_c = getPadding({ size: size, theme: theme, $append: $append })) === null || _c === void 0 ? void 0 : _c.main, fontSize: (_d = getFontSize({ size: size, theme: theme })) === null || _d === void 0 ? void 0 : _d.main, lineHeight: (_e = getLineHeight({ size: size, theme: theme })) === null || _e === void 0 ? void 0 : _e.main, borderRadius: (_f = getRadius({ size: size, theme: theme })) === null || _f === void 0 ? void 0 : _f.main }, _b[theme.breakpoints.down(601)] = {
        padding: (_g = getPadding({ size: size, theme: theme, $append: $append })) === null || _g === void 0 ? void 0 : _g.mobile,
        fontSize: (_h = getFontSize({ size: size, theme: theme })) === null || _h === void 0 ? void 0 : _h.mobile,
        lineHeight: (_j = getLineHeight({ size: size, theme: theme })) === null || _j === void 0 ? void 0 : _j.mobile,
        borderRadius: (_k = getRadius({ size: size, theme: theme })) === null || _k === void 0 ? void 0 : _k.mobile
    }, _b));
});
var Input = forwardRef(function (props, ref) {
    var _a = props.color, color = _a === void 0 ? "primary" : _a, _b = props.size, size = _b === void 0 ? "md" : _b, endAdornment = props.endAdornment, error = props.error, _c = props.overrideErrorAdornment, overrideErrorAdornment = _c === void 0 ? false : _c, actionButtonProps = props.actionButtonProps, rest = __rest(props
    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
    , ["color", "size", "endAdornment", "error", "overrideErrorAdornment", "actionButtonProps"]);
    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
    var append = Boolean(endAdornment || actionButtonProps);
    return (jsx(StyledInput, __assign({ inputRef: ref, color: color, size: size, "$append": append, className: "Input-size-".concat(size), endAdornment: jsx(EndAdornment, { size: size, error: error && !overrideErrorAdornment, endAdornment: overrideErrorAdornment ? endAdornment : undefined, actionButtonProps: actionButtonProps }, void 0) }, rest), void 0));
});

export { Input as default, formCommonStyles, getFontSize, getLineHeight, getPadding, getRadius };