'use strict';

var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
var chip = require('../chip/chip.cjs');
var inputField_module = require('./input-field.module.css.cjs');

// Todo: Add a dropdown and chip support
const inputWrapper = index.cva(inputField_module.default.inputWrapper, {
    variants: {
        size: {
            small: inputField_module.default["size-small"],
            large: inputField_module.default["size-large"],
        }
    },
    defaultVariants: {
        size: "large",
    }
});
const InputField = ({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible = 2, ref, size, ...props }) => {
    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: inputField_module.default.container, style: { width: width || '100%' }, children: [label && (jsxRuntime.jsxRuntimeExports.jsxs("label", { className: clsx.clsx(inputField_module.default.label, disabled && inputField_module.default["label-disabled"]), children: [label, optional && jsxRuntime.jsxRuntimeExports.jsx("span", { className: inputField_module.default.optional, children: "(optional)" })] })), jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx.clsx(inputWrapper({ size, className }), chips?.length && inputField_module.default['has-chips']), children: [leadingIcon && jsxRuntime.jsxRuntimeExports.jsx("span", { className: inputField_module.default['leading-icon'], children: leadingIcon }), prefix && jsxRuntime.jsxRuntimeExports.jsx("span", { className: inputField_module.default.prefix, children: prefix }), jsxRuntime.jsxRuntimeExports.jsxs("div", { className: inputField_module.default['chip-input-container'], children: [chips?.slice(0, maxChipsVisible).map((chip$1, index) => (jsxRuntime.jsxRuntimeExports.jsx(chip.Chip, { variant: "outline", isDismissible: !!chip$1.onRemove, onDismiss: chip$1.onRemove, className: inputField_module.default.chip, children: chip$1.label }, index))), chips && chips.length > maxChipsVisible && (jsxRuntime.jsxRuntimeExports.jsxs("span", { className: inputField_module.default['chip-overflow'], children: ["+", chips.length - maxChipsVisible] })), jsxRuntime.jsxRuntimeExports.jsx("input", { ref: ref, className: clsx.clsx(inputField_module.default['input-field'], leadingIcon && inputField_module.default['has-leading-icon'], trailingIcon && inputField_module.default['has-trailing-icon'], prefix && inputField_module.default['has-prefix'], suffix && inputField_module.default['has-suffix'], error && inputField_module.default['input-error'], disabled && inputField_module.default['input-disabled'], className), "aria-invalid": !!error, placeholder: placeholder, disabled: disabled, ...props })] }), suffix && jsxRuntime.jsxRuntimeExports.jsx("span", { className: inputField_module.default.suffix, children: suffix }), trailingIcon && jsxRuntime.jsxRuntimeExports.jsx("span", { className: inputField_module.default['trailing-icon'], children: trailingIcon })] }), (error || helperText) && (jsxRuntime.jsxRuntimeExports.jsx("span", { className: clsx.clsx(inputField_module.default['helper-text'], error && inputField_module.default['helper-text-error'], disabled && inputField_module.default['helper-text-disabled']), children: error || helperText }))] }));
};
InputField.displayName = "InputField";

exports.InputField = InputField;
//# sourceMappingURL=input-field.cjs.map
