@itcase/ui 1.0.16 → 1.0.18

package/dist/components/Avatar.js

@@ -62,8 +62,8 @@ function Avatar(props) {
     iconFill = props.iconFill,
     iconFillHover = props.iconFillHover,
     iconFillSize = props.iconFillSize,
-    firstname = props.firstname,
-    secondname = props.secondname;
+    firstName = props.firstName,
+    secondName = props.secondName;
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
@@ -76,6 +76,11 @@ function Avatar(props) {
     prefix: 'avatar_shape_',
     propsKey: 'shape'
   });
+  var avatarChars = React.useMemo(function () {
+    var firstChar = (firstName[0] || '').toUpperCase();
+    var secondChar = (secondName[0] || '').toUpperCase();
+    return "" + firstChar + secondChar;
+  }, [firstName, secondName]);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'avatar', shapeClass, size && "avatar_size_" + size, type && "avatar_type_" + type),
     onClick: onClick
@@ -85,12 +90,12 @@ function Avatar(props) {
     className: "avatar__image",
     shape: "circular",
     src: src
-  }) : /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+  }) : avatarChars ? /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     className: "avatar__name",
     size: textSize,
     textColor: textColor,
     textWeight: textWeight
-  }, firstname[0].toUpperCase() + secondname[0].toUpperCase()), icon && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
+  }, avatarChars) : null, icon && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "avatar__icon",
     fill: iconFill,
     fillHover: iconFillHover,

package/dist/components/Button.js

@@ -47,7 +47,7 @@ var buttonConfig = {
     buttonConfig.appearance = newComponent;
   }
 };
-function Button(props) {
+var Button = /*#__PURE__*/React__default.default.forwardRef(function Button(props, ref) {
   var before = props.before,
     after = props.after,
     className = props.className,
@@ -124,9 +124,9 @@ function Button(props) {
   console.log(isDisabled);
   return /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
     className: clsx__default.default(className, 'button', type && "button_type_" + type, borderWidthClass, borderColorClass, borderTypeClass, fillClass, fillHoverClass, shapeClass, sizeClass, widthClass, elevationClass, Badge && 'button_type_badge', loading && 'button_state_loading', !label && (iconBefore || iconAfter || icon) && 'button_type_icon', label && (iconBefore || iconAfter || before || after) && "button_type_with-icon button_type_with-icon_" + size),
-    href: link || href,
     DefaultComponent: "button",
     disabled: isDisabled,
+    href: link || href,
     rel: rel,
     style: buttonStyles,
     target: target,
@@ -134,41 +134,41 @@ function Button(props) {
     onClick: onClick,
     onMouseDown: onMouseDown
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: "button__wrapper"
+    className: "button__wrapper",
+    ref: ref
   }, loading && /*#__PURE__*/React__default.default.createElement(index$1.Loader, {
     className: "button__loader",
-    set: loaderSet,
     fill: loaderFill,
-    itemFill: loaderItemFill
+    itemFill: loaderItemFill,
+    set: loaderSet
   }), before, iconBefore && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "button__icon_before",
-    SvgImage: iconBefore,
-    size: iconBeforeSize,
     iconFill: iconBeforeFill,
-    iconStroke: iconBeforeStroke
+    iconStroke: iconBeforeStroke,
+    size: iconBeforeSize,
+    SvgImage: iconBefore
   }), icon && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "button__icon",
-    SvgImage: icon,
-    size: iconSize,
     iconFill: iconFill,
-    iconStroke: iconStroke
+    iconStroke: iconStroke,
+    size: iconSize,
+    SvgImage: icon
   }), (children || label) && /*#__PURE__*/React__default.default.createElement(index$3.Text, {
     className: "button__label",
-    textColor: labelTextColor,
     size: labelTextSize,
-    style: labelStyles
+    style: labelStyles,
+    textColor: labelTextColor
   }, children || label), iconAfter && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "button__icon_after",
-    SvgImage: iconAfter,
-    size: iconAfterSize,
     iconFill: iconAfterFill,
-    iconStroke: iconAfterStroke
+    iconStroke: iconAfterStroke,
+    size: iconAfterSize,
+    SvgImage: iconAfter
   }), Badge, after));
-}
+});
 Button.propTypes = {
-  Badge: PropTypes__default.default.element,
-  LinkComponent: PropTypes__default.default.any,
   after: PropTypes__default.default.any,
+  Badge: PropTypes__default.default.element,
   before: PropTypes__default.default.any,
   border: PropTypes__default.default.string,
   borderDesktop: PropTypes__default.default.string,
@@ -203,6 +203,7 @@ Button.propTypes = {
   labelSizeMobile: PropTypes__default.default.oneOf(size.default),
   labelSizeTablet: PropTypes__default.default.oneOf(size.default),
   link: PropTypes__default.default.string,
+  LinkComponent: PropTypes__default.default.any,
   rel: PropTypes__default.default.string,
   shape: PropTypes__default.default.oneOf(shape.default),
   shapeDesktop: PropTypes__default.default.oneOf(shape.default),

package/dist/components/Code.js

@@ -0,0 +1,150 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var index = require('./Text.js');
+var index$1 = require('./Input.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../useStyles-e4accb53.js');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var currentOtpIndex = 0;
+function Code(props) {
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  var className = props.className,
+    fields = props.fields,
+    before = props.before,
+    errorText = props.errorText,
+    errorTextSize = props.errorTextSize,
+    errorTextColor = props.errorTextColor,
+    errorTextWeight = props.errorTextWeight,
+    inputSize = props.inputSize,
+    inputFill = props.inputFill,
+    inputPlaceholder = props.inputPlaceholder,
+    inputPlaceholderColor = props.inputPlaceholderColor,
+    inputTextSize = props.inputTextSize,
+    inputTextColor = props.inputTextColor,
+    inputTextWeight = props.inputTextWeight,
+    inputBorderColor = props.inputBorderColor,
+    inputBorderWidth = props.inputBorderWidth,
+    inputShape = props.inputShape,
+    onBlur = props.onBlur,
+    onChange = props.onChange,
+    helpText = props.helpText,
+    helpTextSize = props.helpTextSize,
+    helpTextColor = props.helpTextColor,
+    helpTextWeight = props.helpTextWeight,
+    after = props.after;
+  var _useState = React.useState(new Array(fields).fill('')),
+    otp = _useState[0],
+    setOtp = _useState[1];
+  var _useState2 = React.useState(0),
+    activeOtpIndex = _useState2[0],
+    setActiveOtpIndex = _useState2[1];
+  var inputRef = React.useRef(null);
+  var formattedHelpText = React.useMemo(function () {
+    return helpText.replace('{fields}', fields);
+  }, []);
+  var handleChange = function handleChange(e) {
+    var value = e.target.value;
+    var newOtp = [].concat(otp);
+    newOtp[currentOtpIndex] = value.substring(value.length - 1);
+    if (!value) {
+      setActiveOtpIndex(currentOtpIndex - 1);
+    } else {
+      setActiveOtpIndex(currentOtpIndex + 1);
+    }
+    setOtp(newOtp);
+    onChange && onChange(newOtp);
+  };
+  var handleOnKeyDown = function handleOnKeyDown(e) {
+    var index = +e.target.getAttribute('index');
+    currentOtpIndex = index;
+    if (e.key === 'Backspace') {
+      setActiveOtpIndex(currentOtpIndex - 1);
+    }
+  };
+  React.useEffect(function () {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+  }, [activeOtpIndex]);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'code', widthClass)
+  }, before, errorText && /*#__PURE__*/React__default.default.createElement(index.Text, {
+    className: "code__error",
+    size: errorTextSize,
+    textColor: errorTextColor,
+    textWeight: errorTextWeight
+  }, errorText), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "code__group"
+  }, otp.map(function (value, index) {
+    return /*#__PURE__*/React__default.default.createElement(index$1.Input, {
+      className: "code__input",
+      key: index,
+      index: index,
+      size: inputSize,
+      fill: inputFill,
+      placeholder: inputPlaceholder,
+      placeholderTextColor: inputPlaceholderColor,
+      textSize: inputTextSize,
+      textColor: inputTextColor,
+      textWeight: inputTextWeight,
+      value: value,
+      borderColor: inputBorderColor,
+      borderWidth: inputBorderWidth,
+      shape: inputShape,
+      onBlur: onBlur,
+      onChange: handleChange,
+      onKeyDown: function onKeyDown(e) {
+        return handleOnKeyDown(e);
+      },
+      inputRef: index === activeOtpIndex ? inputRef : null
+    });
+  })), helpText && /*#__PURE__*/React__default.default.createElement(index.Text, {
+    className: "code__help",
+    size: helpTextSize,
+    textColor: helpTextColor,
+    textWeight: helpTextWeight
+  }, formattedHelpText), after);
+}
+Code.propTypes = {
+  value: PropTypes__default.default.number
+};
+Code.defaultProps = {
+  inputBorderColor: 'surfaceBorderQuaternary',
+  inputFill: 'surfacePrimary',
+  inputPlaceholder: '0',
+  inputPlaceholderTextColor: 'surfaceTextQuaternary',
+  inputShape: 'rounded',
+  inputTextColor: 'surfaceTextPrimary',
+  inputTextSize: 'xxl',
+  helpText: 'Введите {fields} значный код',
+  helpTextSize: 's',
+  helpTextColor: 'surfaceTextTertiary',
+  helpTextWeight: 400
+};
+
+exports.Code = Code;

package/dist/components/DatePicker.js

@@ -9,13 +9,13 @@ var index = require('./Input.js');
 var index$3 = require('./Text.js');
 var index$1 = require('./Button.js');
 var index$2 = require('./Icon.js');
+var size = require('../constants/componentProps/size.js');
+var textColor = require('../constants/componentProps/textColor.js');
+var textWeight = require('../constants/componentProps/textWeight.js');
+require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
-var size$1 = require('../constants/componentProps/size.js');
-var textColor$1 = require('../constants/componentProps/textColor.js');
-var textWeight = require('../constants/componentProps/textWeight.js');
-require('../hooks/useDeviceTargetClass.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../constants/componentProps/textColorActive.js');
@@ -10103,13 +10103,20 @@ var ru = locale;
 function DatePickerInput(props) {
   var className = props.className,
     inputProps = props.inputProps,
-    datePickerProps = props.datePickerProps;
-  var _useState = React.useState(new Date()),
+    datePickerProps = props.datePickerProps,
+    onChange = props.onChange;
+  var _useState = React.useState(function () {
+      return datePickerProps.isStartDefaultNull ? null : new Date();
+    }),
     startDate = _useState[0],
     setStartDate = _useState[1];
   var _useState2 = React.useState(null),
     endDate = _useState2[0],
     setEndDate = _useState2[1];
+  var onChangeDate = React.useCallback(function (date) {
+    setStartDate(date);
+    onChange && onChange(date);
+  }, []);
   var handleChange = function handleChange(_ref) {
     var newStartDate = _ref[0],
       newEndDate = _ref[1];
@@ -10118,11 +10125,12 @@ function DatePickerInput(props) {
   };
   var renderDayContents = function renderDayContents(day, date) {
     return /*#__PURE__*/React__namespace.default.createElement(index$1.Button, {
-      size: datePickerProps.daySize,
+      className: "react-datepicker__day-button",
       label: date.getDate(),
       labelTextColor: datePickerProps.dayTextColor,
       labelTextSize: datePickerProps.dayTextSize,
-      shape: datePickerProps.dayTextShape
+      shape: datePickerProps.dayTextShape,
+      size: datePickerProps.daySize
     });
   };
   var renderCustomHeader = function renderCustomHeader(_ref2) {
@@ -10137,8 +10145,8 @@ function DatePickerInput(props) {
       fillHover: datePickerProps.iconFillHover,
       fillSize: datePickerProps.iconFillSize,
       iconFill: datePickerProps.iconItemFill,
-      size: datePickerProps.iconSize,
       shape: datePickerProps.iconShape,
+      size: datePickerProps.iconSize,
       stroke: datePickerProps.iconStroke,
       SvgImage: datePickerProps.iconLeft,
       onClick: decreaseMonth
@@ -10146,15 +10154,15 @@ function DatePickerInput(props) {
       className: "react-datepicker__data"
     }, /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
       className: "react-datepicker__month",
-      textColor: datePickerProps.monthTextColor,
       size: datePickerProps.monthTextSize,
+      textColor: datePickerProps.monthTextColor,
       textWeight: datePickerProps.monthTextWeight
     }, monthDate.toLocaleString('ru-RU', {
       month: 'long'
     })), /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
       className: "react-datepicker__year",
-      textColor: datePickerProps.yearTextColor,
       size: datePickerProps.yearTextSize,
+      textColor: datePickerProps.yearTextColor,
       textWeight: datePickerProps.yearTextWeight
     }, monthDate.toLocaleString('ru-RU', {
       year: 'numeric'
@@ -10164,32 +10172,24 @@ function DatePickerInput(props) {
       fillHover: datePickerProps.iconFillHover,
       fillSize: datePickerProps.iconFillSize,
       iconFill: datePickerProps.iconItemFill,
-      size: datePickerProps.iconSize,
       shape: datePickerProps.iconShape,
+      size: datePickerProps.iconSize,
       stroke: datePickerProps.iconStroke,
       SvgImage: datePickerProps.iconRight,
       onClick: increaseMonth
     }));
   };
-  console.log('datePickerProps', datePickerProps);
   return /*#__PURE__*/React__namespace.default.createElement("div", {
-    className: clsx__default.default(className, 'datepicker', datePickerProps.monthsShown && 'datepicker_type_multiple-months', (datePickerProps == null ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button')
+    className: clsx__default.default(className, 'datepicker', (datePickerProps == null ? void 0 : datePickerProps.monthsShown) && 'datepicker_type_multiple-months', (datePickerProps == null ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button')
   }, /*#__PURE__*/React__namespace.default.createElement(Xt, Object.assign({
-    customInput: /*#__PURE__*/React__namespace.default.createElement(DatePickerСustomInput, Object.assign({}, inputProps, {
-      size: size,
-      textSize: textSize,
-      textColor: textColor,
-      label: label
-    })),
+    customInput: /*#__PURE__*/React__namespace.default.createElement(DatePickerСustomInput, inputProps),
     endDate: (datePickerProps == null ? void 0 : datePickerProps.selectsRange) && endDate,
     locale: ru,
+    renderCustomHeader: renderCustomHeader,
+    renderDayContents: renderDayContents,
     selected: startDate,
     startDate: startDate,
-    onChange: datePickerProps != null && datePickerProps.selectsRange ? handleChange : function (date) {
-      return setStartDate(date);
-    },
-    renderDayContents: renderDayContents,
-    renderCustomHeader: renderCustomHeader
+    onChange: datePickerProps != null && datePickerProps.selectsRange ? handleChange : onChangeDate
   }, datePickerProps)));
 }
 var DatePickerСustomInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -10199,9 +10199,13 @@ var DatePickerСustomInput = /*#__PURE__*/React.forwardRef(function (props, ref)
 });
 DatePickerСustomInput.displayName = 'DatePickerСustomInput';
 DatePickerInput.propTypes = {
-  size: PropTypes__default.default.oneOf(size$1.default),
-  textColor: PropTypes__default.default.oneOf(textColor$1.default),
-  textWeight: PropTypes__default.default.oneOf(textWeight.default)
+  className: PropTypes__default.default.string,
+  datePickerProps: PropTypes__default.default.object,
+  inputProps: PropTypes__default.default.object,
+  size: PropTypes__default.default.oneOf(size.default),
+  textColor: PropTypes__default.default.oneOf(textColor.default),
+  textWeight: PropTypes__default.default.oneOf(textWeight.default),
+  onChange: PropTypes__default.default.func
 };
 
 exports.DatePickerInput = DatePickerInput;

package/dist/components/Dropdown.js

@@ -62,12 +62,12 @@ function Dropdown(props) {
   var onAnimationEnd = React.useCallback(function (event) {
     // When component is change his visibility(display) in DOM,
     // animation of close can run unnecessary on showing element.
-    console.info('------  onAnimationEnd   -------------');
-    console.log('event: ', event);
-    console.log('event.target: ', event.target);
-    console.log('isOpen: ', isOpen);
-    console.log('animationOpen: ', animationOpen);
-    console.log('animationClose: ', animationClose);
+    // console.info('------  onAnimationEnd   -------------')
+    // console.log('event: ', event)
+    // console.log('event.target: ', event.target)
+    // console.log('isOpen: ', isOpen)
+    // console.log('animationOpen: ', animationOpen)
+    // console.log('animationClose: ', animationClose)
     // const dropdownElement = dropdownRef.current
     // console.log('dropdownElement', dropdownElement)
     // console.log('dropdownElement hasClass', dropdownElement.hasClass(animationClose))
@@ -80,7 +80,7 @@ function Dropdown(props) {
 
   // Close dropdown by click outside
   React.useEffect(function () {
-    console.info('---------   useEffect  Dropdown   -------');
+    // console.info('---------   useEffect  Dropdown   -------')
     // Add a handler to keep track of the click target.
     function onClickWindow(event) {
       var dropdownElement = dropdownRef.current;
@@ -99,7 +99,7 @@ function Dropdown(props) {
     // Add event listener for current dropdown on first render
     window.addEventListener('click', onClickWindow);
     return function () {
-      console.info('---------  UNMOUNT  useEffect  Dropdown   -------');
+      // console.info('---------  UNMOUNT  useEffect  Dropdown   -------')
       // Remove event listener for current dropdown on unmount
       window.removeEventListener('click', onClickWindow);
     };
@@ -123,10 +123,12 @@ function Dropdown(props) {
   });
   var _useStyles = useStyles.useStyles(props),
     styles = _useStyles.styles;
-  console.warn('======   Dropdown  ========');
-  console.log('props: ', props);
-  console.log('isOpen: ', isOpen);
-  console.log('animationState: ', animationState);
+
+  // console.warn('======   Dropdown  ========')
+  // console.log('props: ', props)
+  // console.log('isOpen: ', isOpen)
+  // console.log('animationState: ', animationState)
+
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'dropdown', set && "dropdown_set_" + set, shapeClass, fillClass, fillHoverClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
     ref: dropdownRef,

package/dist/components/FormField.js

@@ -16,6 +16,8 @@ require('lodash/camelCase');
 require('../context/UIContext.js');
 var index$4 = require('./Switch.js');
 var index$5 = require('./Select.js');
+require('react-select');
+require('./Group.js');
 require('../constants/componentProps/fill.js');
 require('../constants/componentProps/width.js');
 require('lodash/maxBy');
@@ -36,9 +38,10 @@ require('./Link.js');
 require('../constants/componentProps/textGradient.js');
 require('../constants/componentProps/type.js');
 require('../constants/componentProps/underline.js');
-require('react-select');
 require('../defineProperty-f9e5e1f3.js');
 require('react-dom');
+require('../constants/componentProps/stacking.js');
+require('../constants/componentProps/wrap.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

package/dist/components/Group.js

@@ -65,6 +65,10 @@ function Group(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
   var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'group_shape_',
     propsKey: 'shape'
@@ -101,7 +105,7 @@ function Group(props) {
     groupStyles = _useStyles.styles,
     groupWrapperStyles = _useStyles.wrapper;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
+    className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, fillHoverClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
     id: id,
     style: Object.assign({}, groupStyles, style)
   }, horizontalScroll ? /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/Icon.js

@@ -45,6 +45,7 @@ var Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props, r
     after = props.after,
     Badge = props.Badge,
     SvgImage = props.SvgImage,
+    id = props.id,
     imageSrc = props.imageSrc;
     props.simple;
     var className = props.className,
@@ -138,6 +139,7 @@ var Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props, r
   }, [SvgImage, imageSrc]);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'icon', fillClass, fillHoverClass, fillSizeClass, iconFillClass, iconFillHoverClass, shapeClass, iconStrokeClass, iconStrokeHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'),
+    id: id,
     ref: ref,
     style: iconStyles,
     onClick: onClick

package/dist/components/Input.js

@@ -26,11 +26,13 @@ function Input(props) {
   var _inputConfig$state$st, _inputConfig$state$st2, _inputConfig$state$st3;
   var state = props.state,
     id = props.id,
+    index = props.index,
     type = props.type,
     className = props.className,
     placeholder = props.placeholder,
     disabled = props.disabled,
     value = props.value,
+    inputRef = props.inputRef,
     onBlur = props.onBlur,
     onChange = props.onChange,
     onFocus = props.onFocus,
@@ -83,6 +85,8 @@ function Input(props) {
     className: clsx__default.default(className, 'input', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, widthClass, borderWidthClass, borderColorClass, sizeClass, ((_inputConfig$state$st = inputConfig.state[state]) == null ? void 0 : _inputConfig$state$st.fillClass) && ("fill_" + inputConfig.state[state].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase(), ((_inputConfig$state$st2 = inputConfig.state[state]) == null ? void 0 : _inputConfig$state$st2.borderColor) && ("border-color_" + inputConfig.state[state].borderColor).replace(/([A-Z])/g, '-$1').toLowerCase(), ((_inputConfig$state$st3 = inputConfig.state[state]) == null ? void 0 : _inputConfig$state$st3.shape) && "shape_" + inputConfig.state[state].shape),
     type: type,
     id: id,
+    index: index,
+    ref: inputRef,
     disabled: disabled,
     placeholder: placeholder,
     value: value,