@itcase/ui 1.1.6 → 1.1.8

package/dist/components/Image.js

@@ -1,28 +1,20 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var clsx = require('clsx');
-var borderColor = require('../constants/componentProps/borderColor.js');
-var resizeMode = require('../constants/componentProps/resizeMode.js');
-var shape = require('../constants/componentProps/shape.js');
-var width = require('../constants/componentProps/width.js');
-var useStyles = require('../hooks/useStyles.js');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
-require('lodash/castArray');
-
-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);
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import borderColorProps from '../constants/componentProps/borderColor.js';
+import resizeModeProps from '../constants/componentProps/resizeMode.js';
+import shapeProps from '../constants/componentProps/shape.js';
+import widthProps from '../constants/componentProps/width.js';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import 'lodash/castArray';
+import 'lodash/camelCase';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
 
 function Image(props) {
   const {
@@ -42,55 +34,55 @@ function Image(props) {
     onClick,
     onError
   } = props;
-  const cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const cursorClass = useDeviceTargetClass(props, {
     prefix: 'cursor_',
     propsKey: 'cursor'
   });
-  const horizontalAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const horizontalAlignClass = useDeviceTargetClass(props, {
     prefix: 'image_horizontal-align_',
     propsKey: 'horizontalAlign'
   });
-  const verticalAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const verticalAlignClass = useDeviceTargetClass(props, {
     prefix: 'image_vertical-align_',
     propsKey: 'verticalContentAlign'
   });
-  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass(props, {
     prefix: 'image_shape_',
     propsKey: 'shape'
   });
-  const resizeModeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const resizeModeClass = useDeviceTargetClass(props, {
     prefix: 'image_resize-mode_',
     propsKey: 'resizeMode'
   });
-  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  const heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const heightClass = useDeviceTargetClass(props, {
     prefix: 'height_',
     propsKey: 'height'
   });
-  const imageWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const imageWidthClass = useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'imageWidth'
   });
-  const imageHeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const imageHeightClass = useDeviceTargetClass(props, {
     prefix: 'height_',
     propsKey: 'imageHeight'
   });
-  const borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
-    propsKey: 'border'
+    propsKey: 'borderColor'
   });
-  const borderColorImageClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorImageClass = useDeviceTargetClass(props, {
     prefix: 'border-color-image_',
     propsKey: 'borderColorImage'
   });
-  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillHoverClass = useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
@@ -98,64 +90,64 @@ function Image(props) {
     styles,
     wrapper: wrapperStyles,
     image: imageStyles
-  } = useStyles.useStyles(props);
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'image', mode && `image_mode_${mode}`, type && `image_type_${type}`, cursorClass, horizontalAlignClass, verticalAlignClass, shapeClass, fillClass, fillHoverClass, resizeModeClass, widthClass, heightClass),
+  } = useStyles(props);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clsx(className, 'image', mode && `image_mode_${mode}`, type && `image_type_${type}`, cursorClass, horizontalAlignClass, verticalAlignClass, shapeClass, fillClass, fillHoverClass, resizeModeClass, widthClass, heightClass),
     onClick: onClick,
     style: styles
-  }, before, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('image__wrapper', imageWrapperClassName),
+  }, before, /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('image__wrapper', imageWrapperClassName),
     style: wrapperStyles
-  }, /*#__PURE__*/React__default.default.createElement("img", {
+  }, /*#__PURE__*/React__default.createElement("img", {
     alt: alt,
     src: src,
     style: imageStyles,
     title: title,
-    className: clsx__default.default('image__item', imageWidthClass, imageHeightClass, imageClassName, borderClass, borderColorImageClass),
+    className: clsx('image__item', imageWidthClass, imageHeightClass, imageClassName, borderClass, borderColorImageClass),
     onError: onError
   }), overlay, caption, children), after);
 }
 Image.propTypes = {
-  after: PropTypes__default.default.any,
-  alt: PropTypes__default.default.string,
-  before: PropTypes__default.default.any,
-  border: PropTypes__default.default.string,
-  borderColorImage: PropTypes__default.default.oneOf(borderColor.default),
-  borderColorImageDesktop: PropTypes__default.default.oneOf(borderColor.default),
-  borderColorImageMobile: PropTypes__default.default.oneOf(borderColor.default),
-  borderColorImageTablet: PropTypes__default.default.oneOf(borderColor.default),
-  overlay: PropTypes__default.default.any,
-  caption: PropTypes__default.default.any,
-  children: PropTypes__default.default.any,
-  className: PropTypes__default.default.string,
-  imageClassName: PropTypes__default.default.string,
-  imgWrapClassName: PropTypes__default.default.string,
-  onClick: PropTypes__default.default.func,
-  resizeMode: PropTypes__default.default.oneOf(resizeMode.default),
-  resizeModeDesktop: PropTypes__default.default.oneOf(resizeMode.default),
-  resizeModeMobile: PropTypes__default.default.oneOf(resizeMode.default),
-  resizeModeTablet: PropTypes__default.default.oneOf(resizeMode.default),
-  shape: PropTypes__default.default.oneOf(shape.default),
-  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
-  shapeMobile: PropTypes__default.default.oneOf(shape.default),
-  shapeTablet: PropTypes__default.default.oneOf(shape.default),
-  src: PropTypes__default.default.string,
-  style: PropTypes__default.default.object,
-  title: PropTypes__default.default.string,
-  type: PropTypes__default.default.string,
-  сontentX: PropTypes__default.default.string,
-  сontentXDesktop: PropTypes__default.default.string,
-  сontentXMobile: PropTypes__default.default.string,
-  сontentXTablet: PropTypes__default.default.string,
-  сontentY: PropTypes__default.default.string,
-  сontentYDesktop: PropTypes__default.default.string,
-  сontentYMobile: PropTypes__default.default.string,
-  сontentYTablet: PropTypes__default.default.string,
-  imageWidth: PropTypes__default.default.oneOf(width.default),
-  imageWidthMobile: PropTypes__default.default.oneOf(width.default),
-  imageWidthTablet: PropTypes__default.default.oneOf(width.default),
-  imageWidthDesktop: PropTypes__default.default.oneOf(width.default),
-  onError: PropTypes__default.default.func
+  after: PropTypes.any,
+  alt: PropTypes.string,
+  before: PropTypes.any,
+  border: PropTypes.string,
+  borderColorImage: PropTypes.oneOf(borderColorProps),
+  borderColorImageDesktop: PropTypes.oneOf(borderColorProps),
+  borderColorImageMobile: PropTypes.oneOf(borderColorProps),
+  borderColorImageTablet: PropTypes.oneOf(borderColorProps),
+  overlay: PropTypes.any,
+  caption: PropTypes.any,
+  children: PropTypes.any,
+  className: PropTypes.string,
+  imageClassName: PropTypes.string,
+  imgWrapClassName: PropTypes.string,
+  onClick: PropTypes.func,
+  resizeMode: PropTypes.oneOf(resizeModeProps),
+  resizeModeDesktop: PropTypes.oneOf(resizeModeProps),
+  resizeModeMobile: PropTypes.oneOf(resizeModeProps),
+  resizeModeTablet: PropTypes.oneOf(resizeModeProps),
+  shape: PropTypes.oneOf(shapeProps),
+  shapeDesktop: PropTypes.oneOf(shapeProps),
+  shapeMobile: PropTypes.oneOf(shapeProps),
+  shapeTablet: PropTypes.oneOf(shapeProps),
+  src: PropTypes.string,
+  style: PropTypes.object,
+  title: PropTypes.string,
+  type: PropTypes.string,
+  сontentX: PropTypes.string,
+  сontentXDesktop: PropTypes.string,
+  сontentXMobile: PropTypes.string,
+  сontentXTablet: PropTypes.string,
+  сontentY: PropTypes.string,
+  сontentYDesktop: PropTypes.string,
+  сontentYMobile: PropTypes.string,
+  сontentYTablet: PropTypes.string,
+  imageWidth: PropTypes.oneOf(widthProps),
+  imageWidthMobile: PropTypes.oneOf(widthProps),
+  imageWidthTablet: PropTypes.oneOf(widthProps),
+  imageWidthDesktop: PropTypes.oneOf(widthProps),
+  onError: PropTypes.func
 };
 Image.__docgenInfo = {
   "description": "",
@@ -477,4 +469,4 @@ Image.__docgenInfo = {
   }
 };
 
-exports.Image = Image;
+export { Image };

package/dist/components/Input.js

@@ -1,20 +1,12 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var clsx = require('clsx');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
-require('lodash/camelCase');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
-
-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);
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import 'lodash/castArray';
+import 'lodash/camelCase';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
 
 const inputConfig = {
   state: {},
@@ -26,12 +18,12 @@ const inputConfig = {
     inputConfig.appearance = newComponent;
   }
 };
-const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(props, ref) {
+const Input = /*#__PURE__*/React__default.forwardRef(function Input(props, ref) {
   const {
     appearance,
     state,
-    id,
     index,
+    id,
     dataTestId,
     type,
     className,
@@ -44,72 +36,72 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
     onFocus,
     onKeyDown
   } = props;
-  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillDisabledClass = useDeviceTargetClass(props, {
     prefix: 'fill_disabled_',
     propsKey: 'fillDisabled'
   });
-  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const sizeClass = useDeviceTargetClass(props, {
     prefix: 'input_size_',
     propsKey: 'size'
   });
-  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass(props, {
     prefix: 'input_shape_',
     propsKey: 'shape'
   });
-  const textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textSizeClass = useDeviceTargetClass(props, {
     prefix: 'text_size_',
     propsKey: 'textSize'
   });
-  const textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textColorClass = useDeviceTargetClass(props, {
     prefix: 'text-color_',
     propsKey: 'textColor'
   });
-  const textColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textColorDisabledClass = useDeviceTargetClass(props, {
     prefix: 'text-color_disabled_',
     propsKey: 'textColor'
   });
-  const caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const caretClass = useDeviceTargetClass(props, {
     prefix: 'caret-color_',
     propsKey: 'caret'
   });
-  const placeholderTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const placeholderTextColorClass = useDeviceTargetClass(props, {
     prefix: 'placeholder-text-color_',
     propsKey: 'placeholderTextColor'
   });
-  const placeholderTextColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const placeholderTextColorDisabledClass = useDeviceTargetClass(props, {
     prefix: 'placeholder-text-color_disabled_',
     propsKey: 'placeholderTextColorDisabled'
   });
-  const weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const weightClass = useDeviceTargetClass(props, {
     prefix: 'text-weight_',
     propsKey: 'textWeight'
   });
-  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderWidthClass = useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'borderWidth'
   });
-  const borderWidthDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderWidthDisabledClass = useDeviceTargetClass(props, {
     prefix: 'border-width_disabled_',
     propsKey: 'borderWidthDisabled'
   });
-  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
-  const borderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorDisabledClass = useDeviceTargetClass(props, {
     prefix: 'border-color_disabled_',
     propsKey: 'borderColorDisabled'
   });
-  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  return /*#__PURE__*/React__default.default.createElement("input", {
-    className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass || inputConfig.appearance[appearance] && `input_shape_${inputConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || inputConfig.appearance[appearance] && `text_size_${inputConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass || inputConfig.appearance[appearance] && `input_size_${inputConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || inputConfig.appearance[appearance]?.borderColor && `border-color_${inputConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${inputConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputConfig.appearance[appearance]?.textColor && `text-color_${inputConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? borderColorClass || inputConfig.state[state]?.borderColor && `border-color_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : borderColorDisabledClass || inputConfig.state[state]?.borderColor && `border-color_disabled_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? placeholderTextColorClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : placeholderTextColorDisabledClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? textColorClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : textColorDisabledClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
+  return /*#__PURE__*/React__default.createElement("input", {
+    className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass || inputConfig.appearance[appearance]?.shape && `input_shape_${inputConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || inputConfig.appearance[appearance]?.textSize && `text_size_${inputConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass || inputConfig.appearance[appearance]?.size && `input_size_${inputConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || inputConfig.appearance[appearance]?.borderColor && `border-color_${inputConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${inputConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputConfig.appearance[appearance]?.textColor && `text-color_${inputConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? borderColorClass || inputConfig.state[state]?.borderColor && `border-color_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : borderColorDisabledClass || inputConfig.state[state]?.borderColor && `border-color_disabled_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? placeholderTextColorClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : placeholderTextColorDisabledClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? textColorClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : textColorDisabledClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
     "data-test-id": dataTestId || (name ? `${name}Input` : 'input'),
     disabled: isDisabled,
     id: id,
@@ -125,16 +117,16 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
   });
 });
 Input.propTypes = {
-  checked: PropTypes__default.default.bool,
-  className: PropTypes__default.default.string,
-  id: PropTypes__default.default.string,
-  isDisabled: PropTypes__default.default.bool,
-  placeholder: PropTypes__default.default.string,
-  type: PropTypes__default.default.string,
-  value: PropTypes__default.default.string,
-  onBlur: PropTypes__default.default.func,
-  onChange: PropTypes__default.default.func,
-  onKeyDown: PropTypes__default.default.func
+  checked: PropTypes.bool,
+  className: PropTypes.string,
+  id: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  placeholder: PropTypes.string,
+  type: PropTypes.string,
+  value: PropTypes.string,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onKeyDown: PropTypes.func
 };
 Input.defaultProps = {
   size: 'm',
@@ -229,5 +221,4 @@ Input.__docgenInfo = {
   }
 };
 
-exports.Input = Input;
-exports.inputConfig = inputConfig;
+export { Input, inputConfig };

package/dist/components/InputMask.js

@@ -1,20 +1,12 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var clsx = require('clsx');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
-require('lodash/camelCase');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
-
-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);
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import 'lodash/castArray';
+import 'lodash/camelCase';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
 
 const inputMaskConfig = {
   state: {},
@@ -26,7 +18,7 @@ const inputMaskConfig = {
     inputMaskConfig.appearance = newComponent;
   }
 };
-const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(props, ref) {
+const Input = /*#__PURE__*/React__default.forwardRef(function Input(props, ref) {
   const {
     appearance,
     state,
@@ -44,72 +36,72 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
     onFocus,
     onKeyDown
   } = props;
-  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillDisabledClass = useDeviceTargetClass(props, {
     prefix: 'fill_disabled_',
     propsKey: 'fillDisabled'
   });
-  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const sizeClass = useDeviceTargetClass(props, {
     prefix: 'input_size_',
     propsKey: 'size'
   });
-  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass(props, {
     prefix: 'input_shape_',
     propsKey: 'shape'
   });
-  const textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textSizeClass = useDeviceTargetClass(props, {
     prefix: 'text_size_',
     propsKey: 'textSize'
   });
-  const textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textColorClass = useDeviceTargetClass(props, {
     prefix: 'text-color_',
     propsKey: 'textColor'
   });
-  const textColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textColorDisabledClass = useDeviceTargetClass(props, {
     prefix: 'text-color_disabled_',
     propsKey: 'textColor'
   });
-  const caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const caretClass = useDeviceTargetClass(props, {
     prefix: 'caret-color_',
     propsKey: 'caret'
   });
-  const placeholderTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const placeholderTextColorClass = useDeviceTargetClass(props, {
     prefix: 'placeholder-text-color_',
     propsKey: 'placeholderTextColor'
   });
-  const placeholderTextColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const placeholderTextColorDisabledClass = useDeviceTargetClass(props, {
     prefix: 'placeholder-text-color_disabled_',
     propsKey: 'placeholderTextColorDisabled'
   });
-  const weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const weightClass = useDeviceTargetClass(props, {
     prefix: 'text-weight_',
     propsKey: 'textWeight'
   });
-  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderWidthClass = useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'borderWidth'
   });
-  const borderWidthDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderWidthDisabledClass = useDeviceTargetClass(props, {
     prefix: 'border-width_disabled_',
     propsKey: 'borderWidthDisabled'
   });
-  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
-  const borderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorDisabledClass = useDeviceTargetClass(props, {
     prefix: 'border-color_disabled_',
     propsKey: 'borderColorDisabled'
   });
-  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  return /*#__PURE__*/React__default.default.createElement("input", {
-    className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass || inputMaskConfig.appearance[appearance] && `input_shape_${inputMaskConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || inputMaskConfig.appearance[appearance] && `text_size_${inputMaskConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass || inputMaskConfig.appearance[appearance] && `input_size_${inputMaskConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || inputMaskConfig.appearance[appearance]?.borderColor && `border-color_${inputMaskConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputMaskConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${inputMaskConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputMaskConfig.appearance[appearance]?.textColor && `text-color_${inputMaskConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? borderColorClass || inputMaskConfig.state[state]?.borderColor && `border-color_${inputMaskConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : borderColorDisabledClass || inputMaskConfig.state[state]?.borderColor && `border-color_disabled_${inputMaskConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? placeholderTextColorClass || inputMaskConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputMaskConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : placeholderTextColorDisabledClass || inputMaskConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputMaskConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? textColorClass || inputMaskConfig.state[state]?.textColor && `text-color_${inputMaskConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : textColorDisabledClass || inputMaskConfig.state[state]?.textColor && `text-color_${inputMaskConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
+  return /*#__PURE__*/React__default.createElement("input", {
+    className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass || inputMaskConfig.appearance[appearance]?.shape && `input_shape_${inputMaskConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || inputMaskConfig.appearance[appearance]?.textSize && `text_size_${inputMaskConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass || inputMaskConfig.appearance[appearance]?.size && `input_size_${inputMaskConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || inputMaskConfig.appearance[appearance]?.borderColor && `border-color_${inputMaskConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputMaskConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${inputMaskConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputMaskConfig.appearance[appearance]?.textColor && `text-color_${inputMaskConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? borderColorClass || inputMaskConfig.state[state]?.borderColor && `border-color_${inputMaskConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : borderColorDisabledClass || inputMaskConfig.state[state]?.borderColor && `border-color_disabled_${inputMaskConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? placeholderTextColorClass || inputMaskConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputMaskConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : placeholderTextColorDisabledClass || inputMaskConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputMaskConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? textColorClass || inputMaskConfig.state[state]?.textColor && `text-color_${inputMaskConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : textColorDisabledClass || inputMaskConfig.state[state]?.textColor && `text-color_${inputMaskConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
     type: type,
     id: id,
     index: index,
@@ -125,16 +117,16 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
   });
 });
 Input.propTypes = {
-  id: PropTypes__default.default.string,
-  className: PropTypes__default.default.string,
-  placeholder: PropTypes__default.default.string,
-  value: PropTypes__default.default.string,
-  checked: PropTypes__default.default.bool,
-  isDisabled: PropTypes__default.default.bool,
-  onBlur: PropTypes__default.default.func,
-  onChange: PropTypes__default.default.func,
-  onKeyDown: PropTypes__default.default.func,
-  type: PropTypes__default.default.string
+  id: PropTypes.string,
+  className: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  checked: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  type: PropTypes.string
 };
 Input.defaultProps = {
   size: 'm',
@@ -229,5 +221,4 @@ Input.__docgenInfo = {
   }
 };
 
-exports.Input = Input;
-exports.inputMaskConfig = inputMaskConfig;
+export { Input, inputMaskConfig };