@reservoir0x/relay-kit-ui/_esm/src/components/primitives/Input.js

Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { forwardRef } from 'react';
import Flex from './Flex.js';
import { cva, css as designCss } from '@reservoir0x/relay-design-system/css';
import Box from './Box.js';
const StyledInputCss = cva({
    base: {
        px: 16,
        py: 12,
        borderRadius: 'input-border-radius',
        fontFamily: 'body',
        fontSize: 16,
        color: 'input-color',
        backgroundColor: 'input-background',
        _placeholder: {
            color: 'gray10'
        },
        '--focusColor': 'colors.focus-color',
        _focus: {
            boxShadow: 'inset 0 0 0 2px var(--focusColor)',
            outline: 'none'
        },
        _disabled: {
            cursor: 'not-allowed'
        },
        _spinButtons: {
            WebkitAppearance: 'none'
        }
    },
    variants: {
        size: {
            large: {
                fontSize: 32,
                lineHeight: '42px'
            }
        },
        ellipsify: {
            true: {
                textOverflow: 'ellipsis',
                overflow: 'hidden',
                whiteSpace: 'nowrap'
            }
        }
    }
});
const Input = forwardRef(({ children, icon, iconPosition, iconCss, containerCss, css, ...props }, ref) => {
    const { size, ellipsify, ...inputProps } = props;
    return (_jsxs(Flex, { css: {
            ...containerCss
        }, style: { ...props.style }, children: [icon && (_jsx(Flex, { css: { position: 'relative' }, children: _jsx(Box, { css: {
                        position: 'absolute',
                        top: 12,
                        left: iconPosition === 'right' ? 'unset' : 16,
                        right: iconPosition === 'right' ? 16 : 'unset',
                        zIndex: 0,
                        ...iconCss
                    }, children: icon }) })), _jsx("input", { ...inputProps, type: "text", ref: ref, style: {
                    paddingLeft: icon && iconPosition !== 'right' ? 42 : 16,
                    paddingRight: icon && iconPosition === 'right' ? 42 : 16
                }, className: designCss(StyledInputCss.raw({ size, ellipsify }), designCss.raw({
                    ...css
                })) })] }));
});
Input.displayName = 'Input';
export default Input;
//# sourceMappingURL=Input.js.map