feat(input): add new default input

packages/input/src/Component.module.css

@@ -0,0 +1,35 @@
+@import '../../themes/default.css';
+
+
+:root {
+    --input-font-family: var(--font-family);
+    --input-hint-color: var(--color-dark-indigo-60-flat);
+    --input-error-color: var(--color-red-brand-85-flat);
+}
+
+.component {
+    max-width: 310px;
+    font-family: var(--input-font-family);
+    box-sizing: border-box;
+}
+
+.input {}
+
+.sub {
+    display: block;
+    font-size: 14px;
+    line-height: 18px;
+    margin-top: var(--gap-2xs);
+    color: var(--input-hint-color);
+}
+
+.has-error  .sub {
+    color: var(--input-error-color);
+}
+
+.has-error .inner {
+    box-shadow: inset 0 -1px var(--input-error-color);
+    border-bottom-color: var(--input-error-color);
+}
+
+.left-addons {}

packages/input/src/Component.stories.tsx

@@ -0,0 +1,47 @@
+/**
+ * Vendor
+ */
+
+import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
+import React, { useState } from 'react';
+import { withDesign } from 'storybook-addon-designs';
+/**
+ * Components
+ */
+import { Input } from './Component';
+
+
+
+export default {
+    title: 'Common',
+    component: Input,
+    decorators: [withDesign, withKnobs]
+};
+
+export const InputStory = () => {
+    const [value, setValue] = useState('value');
+
+    return (
+        <Input
+            size={ select('size', ['s', 'm', 'l'], 's') }
+            disabled={ boolean('Disabled', false) }
+            placeholder={ text('placeholder', '') }
+            label={ text('label', '') }
+            hint={ text('hint', '') }
+            error={ text('error', '') }
+            value={ value }
+            onChange={ (e: any) => setValue(e.target.value) }
+        />
+    );
+};
+
+InputStory.story = {
+    name: 'Input',
+    parameters: {
+        design: {
+            type: 'figma',
+            // public link for testing
+            url: ''
+        }
+    }
+};

packages/input/src/Component.test.tsx

@@ -0,0 +1,12 @@
+/**
+ * Vendor
+ */
+
+// import React from 'react';
+// import { render } from '@testing-library/react';
+
+/**
+ * Exp
+ */
+
+// test('renders learn react link', () => {});

packages/input/src/Component.tsx

@@ -0,0 +1,86 @@
+/**
+ * Vendor
+ */
+
+import React from 'react';
+import cn from 'classnames';
+
+/**
+ * Styles
+ */
+
+import styles from './Component.module.css';
+import { BaseInput, BaseInputProps } from '../../base-input/src';
+
+/**
+ * Types
+ */
+
+type InputProps = BaseInputProps & {
+    /** Текст подсказки */
+    hint?: 'string';
+    /** Текст ошибки */
+    error?: 'string';
+};
+
+/**
+ * Expo
+ */
+
+export const Input: React.FC<InputProps> = ({
+    size,
+    children,
+    className,
+    innerClassName,
+    inputClassName,
+    value,
+    label,
+    placeholder,
+    hint,
+    error,
+    disabled,
+    onChange,
+    onFocus,
+    onBlur,
+    dataTestId
+}) => {
+    const hasHint = !!hint;
+    const hasError = !!error;
+    const hasSub = hasHint || hasError;
+
+    return (
+        <div
+            className={ cn(
+                styles.component,
+                {
+                    [styles.hasError]: hasError
+                },
+                className
+            ) }
+            data-test-id={ dataTestId }
+        >
+            <BaseInput
+                className={ cn(styles.baseInput) }
+                innerClassName={ cn(styles.inner, innerClassName) }
+                inputClassName={ cn(styles.input, inputClassName) }
+                size={ size }
+                value={ value }
+                label={ label }
+                placeholder={ placeholder }
+                disabled={ disabled }
+                onChange={ onChange }
+                onFocus={ onFocus }
+                onBlur={ onBlur }
+            />
+
+            { hasSub && (
+                <span className={ cn(styles.sub) }>
+                    { (hasHint && !hasError) && hint }
+                    { hasError && error }
+                </span>
+            ) }
+
+            { children }
+        </div>
+    );
+};

packages/input/src/index.ts

@@ -0,0 +1 @@
+export * from './Component';