@nextui-org/react 1.0.1-alpha.7 → 1.0.2-alpha.2

package/esm/input/input-password.d.ts

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Props } from './input-props';
+import { CSS } from '../theme/stitches.config';
+interface PasswordProps extends Props {
+    hideToggle?: boolean;
+    visibleIcon?: React.ReactNode;
+    hiddenIcon?: React.ReactNode;
+}
+declare const passwordDefaultProps: {
+    hideToggle: boolean;
+    visibleIcon: JSX.Element;
+    hiddenIcon: JSX.Element;
+    disabled: boolean;
+    bordered: boolean;
+    readOnly: boolean;
+    clearable: boolean;
+    rounded: boolean;
+    animated: boolean;
+    underlined: boolean;
+    shadow: boolean;
+    fullWidth: boolean;
+    contentClickable: boolean;
+    contentRightStyling: boolean;
+    contentLeftStyling: boolean;
+    required: boolean;
+    width: string;
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    color: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    helperColor: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    status: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    borderWeight: "light" | "normal" | "bold" | "extrabold" | "black";
+    autoComplete: string;
+    className: string;
+    placeholder: string;
+    initialValue: string;
+};
+declare type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof PasswordProps>;
+export declare type InputPasswordProps = PasswordProps & typeof passwordDefaultProps & NativeAttrs & {
+    css?: CSS;
+};
+declare const _default: React.ComponentType<Partial<{
+    hideToggle: boolean;
+    visibleIcon: JSX.Element;
+    hiddenIcon: JSX.Element;
+    disabled: boolean;
+    bordered: boolean;
+    readOnly: boolean;
+    clearable: boolean;
+    rounded: boolean;
+    animated: boolean;
+    underlined: boolean;
+    shadow: boolean;
+    fullWidth: boolean;
+    contentClickable: boolean;
+    contentRightStyling: boolean;
+    contentLeftStyling: boolean;
+    required: boolean;
+    width: string;
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    color: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    helperColor: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    status: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    borderWeight: "light" | "normal" | "bold" | "extrabold" | "black";
+    autoComplete: string;
+    className: string;
+    placeholder: string;
+    initialValue: string;
+}> & Omit<PasswordProps & {
+    hideToggle: boolean;
+    visibleIcon: JSX.Element;
+    hiddenIcon: JSX.Element;
+    disabled: boolean;
+    bordered: boolean;
+    readOnly: boolean;
+    clearable: boolean;
+    rounded: boolean;
+    animated: boolean;
+    underlined: boolean;
+    shadow: boolean;
+    fullWidth: boolean;
+    contentClickable: boolean;
+    contentRightStyling: boolean;
+    contentLeftStyling: boolean;
+    required: boolean;
+    width: string;
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    color: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    helperColor: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    status: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    borderWeight: "light" | "normal" | "bold" | "extrabold" | "black";
+    autoComplete: string;
+    className: string;
+    placeholder: string;
+    initialValue: string;
+} & NativeAttrs & {
+    css?: CSS | undefined;
+} & React.RefAttributes<HTMLInputElement>, "clearable" | "rounded" | "contentClickable" | "contentLeftStyling" | "contentRightStyling" | "width" | "color" | "size" | "className" | "borderWeight" | "bordered" | "placeholder" | "status" | "animated" | "disabled" | "autoComplete" | "readOnly" | "required" | "shadow" | "initialValue" | "fullWidth" | "helperColor" | "underlined" | "hideToggle" | "visibleIcon" | "hiddenIcon">>;
+export default _default;

package/esm/input/input-password.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _inputProps = require("./input-props");
+
+var _passwordIcon = _interopRequireDefault(require("./password-icon"));
+
+var _input = _interopRequireDefault(require("./input"));
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _assertion = require("../utils/assertion");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const passwordDefaultProps = { ..._inputProps.defaultProps,
+  hideToggle: false,
+  visibleIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_passwordIcon.default, {
+    visible: true
+  }),
+  hiddenIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_passwordIcon.default, {
+    visible: false
+  })
+};
+
+const InputPassword = /*#__PURE__*/_react.default.forwardRef(({
+  hideToggle,
+  visibleIcon,
+  hiddenIcon,
+  children,
+  ...props
+}, ref) => {
+  const inputRef = (0, _react.useRef)(null);
+  const [visible, setVisible] = (0, _react.useState)(false);
+  (0, _react.useImperativeHandle)(ref, () => inputRef.current);
+
+  const iconClickHandler = () => {
+    setVisible(v => !v);
+  };
+
+  const inputProps = (0, _react.useMemo)(() => ({ ...props,
+    ref: inputRef,
+    className: (0, _clsx.default)('nextui-input-password', props.className),
+    contentClickable: true,
+    onContentClick: iconClickHandler,
+    type: visible ? 'text' : 'password'
+  }), [props, iconClickHandler, visible, inputRef]);
+  const icon = (0, _react.useMemo)(() => {
+    if (hideToggle) return null;
+    return visible ? visibleIcon : hiddenIcon;
+  }, [hideToggle, visible, visibleIcon, hiddenIcon]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.default, {
+    contentRight: icon,
+    ...inputProps,
+    children: children
+  });
+});
+
+if (_assertion.__DEV__) {
+  InputPassword.displayName = 'NextUI - Input Password';
+}
+
+InputPassword.toString = () => '.nextui-input-password';
+
+var _default = (0, _withDefaults.default)(InputPassword, passwordDefaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

package/esm/input/input-props.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import { NormalSizes, SimpleColors, ContentPosition, NormalWeights, AsProp } from '../utils/prop-types';
+export declare type FormElement = HTMLInputElement | HTMLTextAreaElement;
+export interface Props extends AsProp<'input' | 'textarea'>, React.HTMLAttributes<FormElement> {
+    value?: string;
+    fullWidth?: boolean;
+    initialValue?: string;
+    placeholder?: string;
+    size?: NormalSizes;
+    color?: SimpleColors;
+    helperColor?: SimpleColors;
+    status?: SimpleColors;
+    readOnly?: boolean;
+    shadow?: boolean;
+    animated?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    label?: string;
+    helperText?: string;
+    labelPlaceholder?: string;
+    labelLeft?: string;
+    labelRight?: string;
+    contentLeft?: React.ReactNode;
+    contentRight?: React.ReactNode;
+    contentClickable?: boolean;
+    contentRightStyling?: boolean;
+    contentLeftStyling?: boolean;
+    rounded?: boolean;
+    bordered?: boolean;
+    underlined?: boolean;
+    borderWeight?: NormalWeights;
+    width?: string;
+    className?: string;
+    clearable?: boolean;
+    onChange?: (e: React.ChangeEvent<FormElement>) => void;
+    onClearClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onFocus?: (e: React.FocusEvent<FormElement>) => void;
+    onBlur?: (e: React.FocusEvent<FormElement>) => void;
+    onContentClick?: (key: ContentPosition, e: React.MouseEvent<HTMLDivElement>) => void;
+    autoComplete?: string;
+}
+export declare const defaultProps: {
+    disabled: boolean;
+    bordered: boolean;
+    readOnly: boolean;
+    clearable: boolean;
+    rounded: boolean;
+    animated: boolean;
+    underlined: boolean;
+    shadow: boolean;
+    fullWidth: boolean;
+    contentClickable: boolean;
+    contentRightStyling: boolean;
+    contentLeftStyling: boolean;
+    required: boolean;
+    width: string;
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    color: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    helperColor: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    status: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    borderWeight: "light" | "normal" | "bold" | "extrabold" | "black";
+    autoComplete: string;
+    className: string;
+    placeholder: string;
+    initialValue: string;
+};

package/esm/input/input-props.js

@@ -0,0 +1,30 @@
+"use strict";
+
+exports.__esModule = true;
+exports.defaultProps = void 0;
+const defaultProps = {
+  disabled: false,
+  bordered: false,
+  readOnly: false,
+  clearable: false,
+  rounded: false,
+  animated: true,
+  underlined: false,
+  shadow: true,
+  fullWidth: false,
+  contentClickable: false,
+  contentRightStyling: true,
+  contentLeftStyling: true,
+  required: false,
+  width: 'initial',
+  size: 'md',
+  color: 'default',
+  helperColor: 'default',
+  status: 'default',
+  borderWeight: 'normal',
+  autoComplete: 'off',
+  className: '',
+  placeholder: '',
+  initialValue: ''
+};
+exports.defaultProps = defaultProps;

package/esm/input/input.d.ts

@@ -0,0 +1,18 @@
+import React, { PropsWithoutRef, RefAttributes } from 'react';
+import { CSS } from '../theme/stitches.config';
+import Textarea from '../textarea';
+import InputPassword from './input-password';
+import { Props, FormElement, defaultProps } from './input-props';
+declare type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>;
+export declare type InputProps = Props & typeof defaultProps & NativeAttrs & {
+    css?: CSS;
+};
+declare type InputComponent<T, P = {}> = React.ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> & {
+    Textarea: typeof Textarea;
+    Password: typeof InputPassword;
+};
+declare type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs & {
+    css?: CSS;
+};
+declare const _default: InputComponent<FormElement, ComponentProps>;
+export default _default;

package/esm/input/input.js

@@ -0,0 +1,317 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _collections = require("../utils/collections");
+
+var _inputProps = require("./input-props");
+
+var _assertion = require("../utils/assertion");
+
+var _useTheme = _interopRequireDefault(require("../use-theme"));
+
+var _useWarning = _interopRequireDefault(require("../use-warning"));
+
+var _input = require("./input.styles");
+
+var _clearIcon = _interopRequireDefault(require("../utils/clear-icon"));
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const simulateChangeEvent = (el, event) => {
+  return { ...event,
+    target: el,
+    currentTarget: el
+  };
+};
+
+const preClass = 'nextui-input';
+
+const Input = /*#__PURE__*/_react.default.forwardRef(({
+  as: Component = 'input',
+  label,
+  labelPlaceholder,
+  labelLeft,
+  labelRight,
+  size,
+  helperText,
+  color,
+  helperColor,
+  status,
+  contentLeft,
+  contentRight,
+  contentClickable,
+  contentLeftStyling,
+  contentRightStyling,
+  onContentClick,
+  initialValue,
+  onChange,
+  readOnly,
+  value,
+  onClearClick,
+  clearable,
+  shadow,
+  animated,
+  required,
+  width: widthProp,
+  className,
+  onBlur,
+  onFocus,
+  autoComplete,
+  placeholder,
+  fullWidth,
+  borderWeight,
+  disabled,
+  bordered,
+  underlined,
+  rounded,
+  css,
+  ...props
+}, ref) => {
+  const inputRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => inputRef.current);
+  const [selfValue, setSelfValue] = (0, _react.useState)(initialValue);
+  const [hover, setHover] = (0, _react.useState)(false);
+  const {
+    isDark
+  } = (0, _useTheme.default)();
+  const isControlledComponent = (0, _react.useMemo)(() => value !== undefined, [value]);
+  const inputLabel = (0, _react.useMemo)(() => label || labelPlaceholder, [label, labelPlaceholder]);
+  const inputPlaceholder = (0, _react.useMemo)(() => labelPlaceholder ? '' : placeholder, [placeholder, labelPlaceholder]);
+  const width = (0, _react.useMemo)(() => {
+    if (fullWidth) return '100%';
+    if (widthProp) return widthProp;
+    return 'initial';
+  }, [fullWidth, widthProp]);
+
+  if (underlined && _assertion.__DEV__) {
+    bordered && (0, _useWarning.default)('Using underlined and bordered at the same time will have no effect.');
+    rounded && (0, _useWarning.default)('Using underlined and rounded at the same time will have no effect.');
+  }
+
+  const changeHandler = event => {
+    if (disabled || readOnly) return;
+    setSelfValue(event.target.value);
+    onChange && onChange(event);
+  };
+
+  const clearHandler = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    setSelfValue('');
+    onClearClick && onClearClick(event);
+    /* istanbul ignore next */
+
+    if (!inputRef.current) return;
+    const changeEvent = simulateChangeEvent(inputRef.current, event);
+    changeEvent.target.value = '';
+    onChange && onChange(changeEvent);
+    inputRef.current.focus();
+  };
+
+  const focusHandler = e => {
+    setHover(true);
+    onFocus && onFocus(e);
+  };
+
+  const blurHandler = e => {
+    setHover(false);
+    onBlur && onBlur(e);
+  };
+
+  const contentClickHandler = (key, e) => {
+    if (disabled) return;
+    onContentClick && onContentClick(key, e);
+  };
+
+  (0, _react.useEffect)(() => {
+    if (isControlledComponent) {
+      setSelfValue(value);
+    }
+  });
+  const isTextarea = (0, _react.useMemo)(() => Component === 'textarea', [Component]);
+  const controlledValue = isControlledComponent ? {
+    value: selfValue
+  } : {
+    defaultValue: initialValue
+  };
+  const inputProps = { ...props,
+    ...controlledValue
+  };
+  const {
+    inputId,
+    labelId
+  } = (0, _react.useMemo)(() => {
+    const nextuiId = (0, _collections.getId)();
+    return {
+      inputId: inputProps.id || `${preClass}-${nextuiId}`,
+      labelId: !(0, _assertion.isEmpty)(inputProps.id) ? `${preClass}-label-${inputProps.id}` : `${preClass}-label-${nextuiId}`
+    };
+  }, [inputProps.id]);
+
+  if (inputLabel) {
+    inputProps['aria-labelledby'] = labelId;
+  }
+
+  const getState = (0, _react.useMemo)(() => {
+    return hover ? 'hover' : disabled ? 'disabled' : readOnly ? 'read-only' : selfValue ? 'with-value' : 'normal';
+  }, [hover, disabled, readOnly, selfValue]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_input.StyledInputMainContainer, {
+    color: color,
+    "data-state": getState,
+    helperColor: helperColor,
+    borderWeight: borderWeight,
+    status: status,
+    size: size,
+    rounded: rounded,
+    disabled: disabled,
+    css: {
+      width,
+      ...css
+    },
+    className: (0, _clsx.default)(`${preClass}-main-container`, `${preClass}-main-container--${getState}`),
+    children: [inputLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInputBlockLabel, {
+      id: labelId,
+      className: `${preClass}-block-label`,
+      htmlFor: inputId,
+      isTextarea: isTextarea,
+      underlined: underlined,
+      animated: animated,
+      bordered: bordered,
+      rounded: rounded,
+      hasContentLeft: !!contentLeft,
+      withValue: !!selfValue,
+      asPlaceholder: !!labelPlaceholder,
+      focused: hover,
+      children: inputLabel
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInputContainer, {
+      animated: animated,
+      isTextarea: isTextarea,
+      underlined: underlined,
+      isReadOnly: readOnly,
+      focused: hover,
+      className: (0, _clsx.default)(`${preClass}-container`, `${preClass}-container--${getState}`, {
+        [`${preClass}-container--input`]: !isTextarea,
+        [`${preClass}-container--textarea`]: isTextarea,
+        [`${preClass}-container--read-only`]: readOnly
+      }, className),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_input.StyledInputWrapper, {
+        as: inputLabel ? 'div' : 'label',
+        animated: animated,
+        bordered: bordered,
+        shadow: shadow,
+        disabled: disabled,
+        focused: hover,
+        isReadOnly: readOnly,
+        underlined: underlined,
+        isTextarea: isTextarea,
+        className: (0, _clsx.default)(`${preClass}-wrapper`, `${preClass}-wrapper--${getState}`, {
+          [`${preClass}-wrapper--bordered`]: bordered,
+          [`${preClass}-wrapper--underlined`]: underlined,
+          [`${preClass}-wrapper--shadow`]: shadow
+        }),
+        children: [!inputLabel && placeholder && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInputPlaceholder, {
+          className: `${preClass}-placeholder`,
+          children: placeholder
+        }), labelLeft && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInputLabel, {
+          className: `${preClass}-label--left`,
+          isDefaultStatus: status === 'default',
+          underlined: underlined,
+          bordered: bordered,
+          isDark: isDark,
+          children: labelLeft
+        }), contentLeft && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInputContent, {
+          className: (0, _clsx.default)(`${preClass}-content`, `${preClass}-content--left`),
+          applyStyles: contentLeftStyling,
+          clickable: contentClickable,
+          onClick: e => contentClickHandler('left', e),
+          children: contentLeft
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInput, {
+          type: "text",
+          as: Component,
+          id: inputId,
+          ref: inputRef,
+          className: (0, _clsx.default)({
+            [`${preClass}`]: !isTextarea,
+            [`${preClass}-textarea`]: isTextarea,
+            [`${preClass}-disabled`]: disabled,
+            [`${preClass}-rounded`]: rounded,
+            [`${preClass}-${preClass}-right-content`]: contentRight,
+            [`${preClass}-left-content`]: contentLeft
+          }),
+          isTextarea: isTextarea,
+          focused: hover,
+          bordered: bordered,
+          placeholder: inputPlaceholder,
+          disabled: disabled,
+          readOnly: readOnly,
+          onFocus: focusHandler,
+          onBlur: blurHandler,
+          onChange: changeHandler,
+          autoComplete: autoComplete,
+          hasLeftContent: !!contentLeft,
+          hasRightContent: !!contentRight,
+          "data-state": getState,
+          "aria-placeholder": inputPlaceholder,
+          "aria-readonly": readOnly,
+          "aria-required": required,
+          "aria-multiline": isTextarea,
+          ...inputProps
+        }), clearable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInputClearButton, {
+          className: `${preClass}-clear-button`,
+          animated: animated,
+          underlined: underlined,
+          visible: Boolean(selfValue),
+          hasContentRight: !!contentRight,
+          disabled: disabled || readOnly,
+          onClick: clearHandler,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_clearIcon.default, {
+            fill: "currentColor"
+          })
+        }), contentRight && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInputContent, {
+          className: (0, _clsx.default)(`${preClass}-content`, `${preClass}-content--right`),
+          applyStyles: contentRightStyling,
+          clickable: contentClickable,
+          onClick: e => contentClickHandler('right', e),
+          children: contentRight
+        }), labelRight && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledInputLabel, {
+          className: `${preClass}-label--right`,
+          isDefaultStatus: status === 'default',
+          underlined: underlined,
+          bordered: bordered,
+          isRight: true,
+          isDark: isDark,
+          children: labelRight
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledHelperTextContainer, {
+      className: `${preClass}-helper-text-container`,
+      withValue: !!helperText,
+      children: helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.StyledHelperText, {
+        className: `${preClass}-helper-text`,
+        children: helperText
+      })
+    })]
+  });
+});
+
+Input.displayName = 'NextUI - Input';
+Input.defaultProps = _inputProps.defaultProps;
+
+Input.toString = () => '.nextui-input';
+
+var _default = Input;
+exports.default = _default;
+module.exports = exports.default;