@foxford/ui 2.19.2 → 2.20.0-beta-74e0253-20240306

package/dts/index.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import * as styled_components from 'styled-components';
-import { DefaultTheme, FlattenSimpleInterpolation, CSSObject, Interpolation, ThemeProps, SimpleInterpolation, css } from 'styled-components';
 import * as react from 'react';
-import { CSSProperties, Component, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
+import { Component, CSSProperties, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
+import * as styled_components from 'styled-components';
+import { DefaultTheme, FlattenSimpleInterpolation, CSSObject, Interpolation, ThemeProps, SimpleInterpolation, css, StyledProps } from 'styled-components';
 import { Classes } from 'react-modal';
 import * as rc_scrollbars_lib_Scrollbars_types from 'rc-scrollbars/lib/Scrollbars/types';
 import * as rc_scrollbars from 'rc-scrollbars';
@@ -11,6 +11,59 @@ import { Styles, Props } from 'react-floater/lib/types';
 import { InputState, MaskOptions } from 'react-input-mask';
 import { ReactSelectProps } from 'react-select';
 
+declare type H = 'h1' | 'h2' | 'h3' | 'h4';
+interface TextHeadingProps extends Omit<TextProps, 'content' | 'as'> {
+    /** Default set of size, lineHeight and weight props */
+    h?: H;
+    /** Children react node */
+    children?: React.ReactNode;
+}
+
+/**
+ * @visibleName Text.Heading
+ */
+declare const TextHeading: {
+    (props: TextHeadingProps): JSX.Element;
+    displayName: string;
+};
+
+interface TextEllipseProps extends Omit<TextProps, 'content'> {
+    /** Toggle text for folded state */
+    moreText?: string;
+    /** Toggle text for unfolded state */
+    lessText?: string;
+    /** Classname */
+    className?: string;
+    /** Html content */
+    content: string | string[];
+    /** Characters quantity for ellipsed text */
+    chars?: number;
+    /** Wrap text in quotes */
+    quoted?: boolean;
+    /** Flag to show toggler */
+    showToggler?: boolean;
+}
+interface TextEllipseState {
+    isUnFolded: boolean;
+    isEllipsed: boolean;
+}
+/**
+ * Расширен:
+ * - [`BaseProps`](#/Миксины)
+ * - [`Color`](#/Миксины)
+ * - [`Display`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
+ */
+declare class TextEllipse extends Component<TextEllipseProps, TextEllipseState> {
+    static displayName: string;
+    constructor(props: TextEllipseProps);
+    componentDidUpdate({ content }: TextEllipseProps): void;
+    getContent: (props: Omit<TextEllipseProps, 'className' | 'moreText' | 'lessText' | 'showToggler'>) => "" | JSX.Element;
+    getQuted: (content: string) => string;
+    toggle: () => void;
+    render(): JSX.Element;
+}
+
 declare enum DefaultColorNames {
     white = "white",
     black = "black",
@@ -817,110 +870,6 @@ declare type ThemePreset = 'default' | 'brand';
 declare type ThemeMode = 'light' | 'dark';
 declare type ThemeName = 'mother' | 'baby' | 'teen' | 'adult';
 
-declare type ColorPropertyVariants = 'color' | 'fontColor' | `${string}Color` | `color${string}`;
-declare type ColorCalcProperty = (_color: CSSColor) => FlattenSimpleInterpolation | null;
-declare type ColorCssProperty = string | ColorCalcProperty;
-declare type ColorProperty<T extends ColorPropertyVariants = 'color'> = {
-    [key in `${T}`]?: Color;
-};
-declare const color: (color?: Color | string, cssProperty?: ColorCssProperty) => () => (props: {
-    theme: DefaultTheme;
-}) => FlattenSimpleInterpolation | null;
-
-/**
- * Value for breakpoint
- */
-declare type PossibleValues = number | Size | 'auto' | 'initial' | 'inherit' | boolean;
-declare type PropsProperties = 'size' | 'fontSize' | 'height' | 'width' | 'top' | 'right' | 'bottom' | 'left' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'fluid';
-declare type CalcProperty = (_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null;
-declare type CssProperty = string | CalcProperty;
-declare type ResponsiveKeys = '' | 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL';
-declare type ResponsiveNamedProperty<T extends PropsProperties, V extends PossibleValues = PossibleValues> = {
-    [key in `${T}${ResponsiveKeys}`]?: V;
-};
-declare type ResponsiveProperty<V = number | Size> = V | [desktop: V, tablet: V, mobile: V] | [xl: V, l: V, m: V, s: V, xs: V, xxs: V];
-declare const property: (value: PossibleValues, cssProperty?: CssProperty, sizing?: null | string, sizes?: Record<Size, number>) => () => () => FlattenSimpleInterpolation | null;
-interface ResponsiveNamedPropertyPayload<T extends PropsProperties> {
-    sizes: ResponsiveNamedProperty<T>;
-    cssProperty: CssProperty;
-    sizing?: null | string;
-    customSizeHandler?: (_value: PossibleValues) => PossibleValues;
-    sort?: (_a: string, _b: string) => number;
-    predefinedSizes?: Record<Size, number>;
-}
-/**
- * Миксин для генерации media запросов
- *
- * @param obj.sizes Объект, в качестве ключей брэйкпоинт, в качестве значений - величина
- * @param obj.cssProperty CSS свойство, может быть функцией, возвращающей css`` из styled-components
- * @param obj.sizing значение величины, по умолчанию `px`
- * @param obj.customSizeHandler функция для вычисления кастомных значений величин
- * @returns строки медиазапросов
- */
-declare const responsiveNamedProperty: <T extends PropsProperties>({ sizes, predefinedSizes, cssProperty, sizing, customSizeHandler, sort, }: ResponsiveNamedPropertyPayload<T>) => () => () => styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>[];
-/**
- * Миксин для генерации media запросов
- *
- * @param propName имя пропсы
- * @param cssProperty имя css свойства
- * @param sizing значение величины, по умолчанию `px`
- * @returns строки медиазапросов
- */
-declare const responsiveProperty: (propName: string, cssProperty?: string | null, sizing?: null | string) => () => (props: any) => styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>> | null;
-
-declare type H = 'h1' | 'h2' | 'h3' | 'h4';
-interface TextHeadingProps extends Omit<TextProps, 'content' | 'as'> {
-    /** Default set of size, lineHeight and weight props */
-    h?: H;
-    /** Children react node */
-    children?: React.ReactNode;
-}
-
-/**
- * @visibleName Text.Heading
- */
-declare const TextHeading: {
-    (props: TextHeadingProps): JSX.Element;
-    displayName: string;
-};
-
-interface TextEllipseProps extends Omit<TextProps, 'content'> {
-    /** Toggle text for folded state */
-    moreText?: string;
-    /** Toggle text for unfolded state */
-    lessText?: string;
-    /** Classname */
-    className?: string;
-    /** Html content */
-    content: string | string[];
-    /** Characters quantity for ellipsed text */
-    chars?: number;
-    /** Wrap text in quotes */
-    quoted?: boolean;
-    /** Flag to show toggler */
-    showToggler?: boolean;
-}
-interface TextEllipseState {
-    isUnFolded: boolean;
-    isEllipsed: boolean;
-}
-/**
- * Расширен:
- * - [`BaseProps`](#/Миксины)
- * - [`Color`](#/Миксины)
- * - [`Display`](#/Миксины)
- * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
- */
-declare class TextEllipse extends Component<TextEllipseProps, TextEllipseState> {
-    static displayName: string;
-    constructor(props: TextEllipseProps);
-    componentDidUpdate({ content }: TextEllipseProps): void;
-    getContent: (props: Omit<TextEllipseProps, 'className' | 'moreText' | 'lessText' | 'showToggler'>) => "" | JSX.Element;
-    getQuted: (content: string) => string;
-    toggle: () => void;
-    render(): JSX.Element;
-}
-
 declare type ResponsivePropKey = 'size' | keyof CSSProperties;
 declare type ResponsiveProps<K extends ResponsivePropKey, V> = {
     [key in K]?: V | [desktop: V, tablet: V, mobile: V] | [xl: V, l: V, m: V, s: V, xs: V, xxs: V];
@@ -940,6 +889,16 @@ declare type ResponsiveMarginProps = ResponsiveProps<MarginProperty, CSSProperti
     marginUnits?: CSSUnit;
 };
 
+declare type ColorPropertyVariants = 'color' | 'fontColor' | `${string}Color` | `color${string}`;
+declare type ColorCalcProperty = (_color: CSSColor) => FlattenSimpleInterpolation | null;
+declare type ColorCssProperty = string | ColorCalcProperty;
+declare type ColorProperty<T extends ColorPropertyVariants = 'color'> = {
+    [key in `${T}`]?: Color;
+};
+declare const color: (color?: Color | string, cssProperty?: ColorCssProperty) => () => (props: {
+    theme: DefaultTheme;
+}) => FlattenSimpleInterpolation | null;
+
 declare type Display = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'table-cell' | 'inherit' | 'none';
 interface DisplayProperty {
     display?: Display;
@@ -955,6 +914,8 @@ interface TextProps extends ResponsiveSizeProps, ResponsiveMarginProps, DisplayP
     fontFamily?: string;
     /** Font weight */
     weight?: CSSFontWeight;
+    /** White space */
+    whiteSpace?: string;
     /** Font style */
     fontStyle?: 'normal' | 'italic';
     /** Text transform */
@@ -975,64 +936,25 @@ interface TextProps extends ResponsiveSizeProps, ResponsiveMarginProps, DisplayP
 
 /**
  *
- * Component interface extends:
- * - [`ResponsiveSizeProps`](#/Interfaces)
- * - [`ResponsiveMarginProps`](#/Interfaces)
- * - [`BaseProps`](#/Interfaces)
- * - [`React.ComponentPropsWithRef<'div'>`](#/Interfaces)
+ * Component accepts all \<div\> attributes.
+ *
+ * Responsive "size", "margin" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [TextProps](https://github.com/foxford/ui/blob/master/src/components/Text/types.ts)
  */
 declare const Text: React.ForwardRefExoticComponent<TextProps> & {
     Heading: typeof TextHeading;
     Ellipse: typeof TextEllipse;
 };
 
-declare enum SizeInput {
-    l = 380,
-    m = 300,
-    s = 220,
-    xs = 140
-}
-
 interface BaseProps {
     preset?: ThemePreset;
     className?: string;
     style?: React.CSSProperties;
     cursor?: string;
 }
-interface InputField extends ColorProperty, ColorProperty<'placeholderColor'>, ResponsiveNamedProperty<'width', 'auto' | keyof typeof SizeInput | number> {
-    /**
-     * Is disabled field
-     */
-    disabled?: boolean;
-    /**
-     * Has error
-     */
-    error?: boolean;
-    /**
-     * Tab index
-     */
-    tabIndex?: number;
-    /**
-     * Take on the size of it's container.
-     */
-    fluid?: boolean;
-    /**
-     * @preset {Default} Rounded style
-     */
-    rounded?: boolean;
-    /**
-     * Placeholder text
-     */
-    placeholder?: string;
-    /**
-     * Field name attribute
-     */
-    name?: string;
-    autoComplete?: string | undefined;
-    autoFocus?: boolean | undefined;
-    readOnly?: boolean | undefined;
-    required?: boolean | undefined;
-}
 declare type ColorPaletteProps<T extends ColorPaletteKey = ColorPaletteKey> = {
     palette?: Partial<Record<T, Color>>;
 };
@@ -1086,6 +1008,47 @@ declare const teenDarkTheme: DefaultTheme;
 declare const adultLightTheme: DefaultTheme;
 declare const adultDarkTheme: DefaultTheme;
 
+/**
+ * Value for breakpoint
+ */
+declare type PossibleValues = number | Size | 'auto' | 'initial' | 'inherit' | boolean;
+declare type PropsProperties = 'size' | 'fontSize' | 'height' | 'width' | 'top' | 'right' | 'bottom' | 'left' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'fluid';
+declare type CalcProperty = (_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null;
+declare type CssProperty = string | CalcProperty;
+declare type ResponsiveKeys = '' | 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL';
+declare type ResponsiveNamedProperty<T extends PropsProperties, V extends PossibleValues = PossibleValues> = {
+    [key in `${T}${ResponsiveKeys}`]?: V;
+};
+declare type ResponsiveProperty<V = number | Size> = V | [desktop: V, tablet: V, mobile: V] | [xl: V, l: V, m: V, s: V, xs: V, xxs: V];
+declare const property: (value: PossibleValues, cssProperty?: CssProperty, sizing?: null | string, sizes?: Record<Size, number>) => () => () => FlattenSimpleInterpolation | null;
+interface ResponsiveNamedPropertyPayload<T extends PropsProperties> {
+    sizes: ResponsiveNamedProperty<T>;
+    cssProperty: CssProperty;
+    sizing?: null | string;
+    customSizeHandler?: (_value: PossibleValues) => PossibleValues;
+    sort?: (_a: string, _b: string) => number;
+    predefinedSizes?: Record<Size, number>;
+}
+/**
+ * Миксин для генерации media запросов
+ *
+ * @param obj.sizes Объект, в качестве ключей брэйкпоинт, в качестве значений - величина
+ * @param obj.cssProperty CSS свойство, может быть функцией, возвращающей css`` из styled-components
+ * @param obj.sizing значение величины, по умолчанию `px`
+ * @param obj.customSizeHandler функция для вычисления кастомных значений величин
+ * @returns строки медиазапросов
+ */
+declare const responsiveNamedProperty: <T extends PropsProperties>({ sizes, predefinedSizes, cssProperty, sizing, customSizeHandler, sort, }: ResponsiveNamedPropertyPayload<T>) => () => () => styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>[];
+/**
+ * Миксин для генерации media запросов
+ *
+ * @param propName имя пропсы
+ * @param cssProperty имя css свойства
+ * @param sizing значение величины, по умолчанию `px`
+ * @returns строки медиазапросов
+ */
+declare const responsiveProperty: (propName: string, cssProperty?: string | null, sizing?: null | string) => () => (props: any) => styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>> | null;
+
 declare global {
     // Some users of this package are don't use "dom" libs
     interface EventTarget {}
@@ -1328,13 +1291,13 @@ DisplayProperty {
 
 /**
  *
- * Component interface extends:
- * - [`ResponsiveSizeProps`](#/Interfaces)
- * - [`ResponsiveMarginProps`](#/Interfaces)
- * - [`ColorPaletteProps<keyof AnchorPalette>`](#/Interfaces)
- * - [`TypographyProps`](#/Interfaces)
- * - [`BaseProps`](#/Interfaces)
- * - [`React.ComponentPropsWithRef<'a'>`](#/Interfaces)
+ * Component accepts all \<a\> attributes.
+ *
+ * Responsive "size", "margin" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [AnchorProps](https://github.com/foxford/ui/blob/master/src/components/Anchor/types.ts)
  */
 declare const Anchor: React.ForwardRefExoticComponent<AnchorProps>;
 
@@ -1435,12 +1398,13 @@ ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {
 
 /**
  *
- * Component interface extends:
- * - [`BaseProps`](#/Interfaces)
- * - [`TypographyProps`](#/Interfaces)
- * - [`ResponsiveSizeProps`](#/Interfaces)
- * - [`ColorPaletteProps<keyof ButtonPalette>`](#/Interfaces)
- * - [`React.ComponentPropsWithRef<'button'>`](#/Interfaces)
+ * Component accepts all \<button\> attributes.
+ *
+ * Responsive "size" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [ButtonProps](https://github.com/foxford/ui/blob/master/src/components/Button/types.ts)
  */
 declare const Button: React.ForwardRefExoticComponent<ButtonProps>;
 
@@ -1598,22 +1562,26 @@ interface CheckboxComponent extends ForwardRefExoticComponent<PropsWithoutRef<Ch
 
 declare const Checkbox: CheckboxComponent;
 
-declare type TextAreaHTMLAttributes = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'cols' | 'rows' | 'color'>;
-interface TextareaProps extends BaseProps, InputField, TextAreaHTMLAttributes {
-    /** Specifies the visible width of a text area */
-    cols?: number;
-    /** Specifies the visible number of lines in a text area */
-    rows?: number;
+declare enum SizeInput {
+    l = 380,
+    m = 300,
+    s = 220,
+    xs = 140
+}
+
+interface TextareaProps extends BaseProps, ColorProperty, ColorProperty<'placeholderColor'>, ResponsiveNamedProperty<'width', 'auto' | keyof typeof SizeInput | number>, Omit<React.ComponentPropsWithoutRef<'textarea'>, 'color'> {
     /** Specifies the visible max number of lines in a text area */
     maxRows?: number;
-    /** Specifies the maximum number of characters allowed in the text area */
-    maxLength?: number;
-    /** On change handler */
-    onChange?(_event: React.ChangeEvent<HTMLTextAreaElement>): void;
     /** Value */
     value?: string;
     /** Autosize for textarea */
     autosize?: boolean;
+    /** Has error */
+    error?: boolean;
+    /** Take on the size of it's container */
+    fluid?: boolean;
+    /** Rounded style */
+    rounded?: boolean;
 }
 
 declare const Textarea: {
@@ -1661,14 +1629,13 @@ ColorProperty<'backgroundColor'>, ColorPaletteProps<keyof ArrowBadgePalette>, Ty
 
 /**
  *
- * Component interface extends:
- * - [`ResponsiveSizeProps`](#/Interfaces)
- * - [`ResponsiveMarginProps`](#/Interfaces)
- * - [`ColorSchemaProps`](#/Interfaces)
- * - [`ColorPaletteProps<keyof ArrowBadgePalette>`](#/Interfaces)
- * - [`TypographyProps`](#/Interfaces)
- * - [`BaseProps`](#/Interfaces)
- * - [`React.ComponentPropsWithRef<'div'>`](#/Interfaces)
+ * Component accepts all \<div\> attributes.
+ *
+ * Responsive "size", "margin" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [ArrowBadgeProps](https://github.com/foxford/ui/blob/master/src/components/ArrowBadge/types.ts)
  */
 declare const ArrowBadge: React.ForwardRefExoticComponent<ArrowBadgeProps>;
 
@@ -1718,13 +1685,13 @@ ColorPaletteProps<keyof TabPalette>, TypographyProps, Omit<React.ComponentPropsW
 
 /**
  *
- * Component interface extends:
- * - [`ResponsiveSizeProps`](#/Interfaces)
- * - [`ResponsiveMarginProps`](#/Interfaces)
- * - [`ColorPaletteProps<keyof TabPalette>`](#/Interfaces)
- * - [`TypographyProps`](#/Interfaces)
- * - [`BaseProps`](#/Interfaces)
- * - [`React.ComponentPropsWithRef<'button'>`](#/Interfaces)
+ * Component accepts all \<button\> attributes.
+ *
+ * Responsive "size", "margin" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [TabProps](https://github.com/foxford/ui/blob/master/src/components/Tab/types.ts)
  */
 declare const Tab: React.ForwardRefExoticComponent<TabProps>;
 
@@ -1759,14 +1726,13 @@ DisplayProperty, ColorPaletteProps<keyof BadgePalette>, Omit<React.ComponentProp
 
 /**
  *
- * Component interface extends:
- * - [`ResponsiveSizeProps`](#/Interfaces)
- * - [`ResponsiveMarginProps`](#/Interfaces)
- * - [`ColorSchemaProps`](#/Interfaces)
- * - [`ColorPaletteProps<keyof BadgePalette>`](#/Interfaces)
- * - [`TypographyProps`](#/Interfaces)
- * - [`BaseProps`](#/Interfaces)
- * - [`React.ComponentPropsWithRef<'div'>`](#/Interfaces)
+ * Component accepts all \<div\> attributes.
+ *
+ * Responsive "size", "margin" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [BadgeProps](https://github.com/foxford/ui/blob/master/src/components/Badge/types.ts)
  */
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps>;
 
@@ -3222,15 +3188,15 @@ interface InputPhoneState {
 declare class InputPhone extends PureComponent<typeof InputPhone.defaultProps & InputPhoneProps, InputPhoneState> {
     static displayName: string;
     static defaultProps: {
+        countryData: [string, string, string, RegExp][];
+        defaultMask: string;
+        initialMask: string;
+        placeholder: string;
         rounded: boolean;
         type: string;
         color: string;
         mask: string;
         placeholderColor: string;
-        countryData: [string, string, string, RegExp][];
-        defaultMask: string;
-        initialMask: string;
-        placeholder: string;
     };
     autocorrectOf8: boolean;
     autocorrectOf9: boolean;
@@ -3249,76 +3215,118 @@ declare class InputPhone extends PureComponent<typeof InputPhone.defaultProps &
     render(): JSX.Element;
 }
 
-declare type InputHTMLAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'width'>;
-interface InputProps extends BaseProps, InputField, InputHTMLAttributes {
-    /**
-     * Mask string. Format characters are:
-     * * `9`: `0-9`
-     * * `a`: `A-Z, a-z`
-     * * `\*`: `A-Z, a-z, 0-9`
-     *
-     * Any character can be escaped with backslash, which usually will appear as double backslash in JS strings.
-     * For example, German phone mask with unremoveable prefix +49 will look like `mask="+4\\9 99 999 99"` or `mask={"+4\\\\9 99 999 99"}`
-     */
-    mask?: string | Array<string | RegExp>;
-    /**
-     * Character to cover unfilled editable parts of mask. Default character is "_". If set to null, unfilled parts will be empty, like in ordinary input.
-     */
+declare type FormInputLabelPalette = {
+    color: CSSColor;
+    backgroundColor: CSSColor;
+    borderColor: CSSColor;
+    colorHover: CSSColor;
+    backgroundColorHover: CSSColor;
+    borderColorHover: CSSColor;
+};
+
+declare type InputPalette = {
+    inputColor: CSSColor;
+    inputPlaceholderColor: CSSColor;
+    inputColorDisabled: CSSColor;
+    inputPlaceholderColorDisabled: CSSColor;
+};
+declare type InputControlsPalette = {
+    controlsColor: CSSColor;
+    controlsBackgroundColor: CSSColor;
+    controlsSeparatorColor: CSSColor;
+    controlsColorHover: CSSColor;
+    controlsBackgroundColorHover: CSSColor;
+    controlsColorActive: CSSColor;
+    controlsBackgroundColorActive: CSSColor;
+    controlsColorDisabled: CSSColor;
+    controlsBackgroundColorDisabled: CSSColor;
+};
+interface InputProps extends BaseProps, ResponsiveSizeProps, ResponsiveMarginProps, TypographyProps, ColorPaletteProps<keyof InputPalette | keyof InputControlsPalette | keyof FormInputLabelPalette>, Omit<React.ComponentPropsWithRef<'input'>, 'children' | 'size' | 'type' | 'value' | 'defaultValue' | 'color' | 'width'>, 
+/** @deprecated Use palette */
+ColorProperty, 
+/** @deprecated Use palette */
+ColorProperty<'placeholderColor'>, 
+/** @ignore Control width with container */
+ResponsiveNamedProperty<'width', 'auto' | keyof typeof SizeInput | number> {
+    /** Input mask.
+     *  Look up [docs v2.0.4](https://www.npmjs.com/package/react-input-mask/v/2.0.4?activeTab=code) */
+    mask?: string;
+    /** Character to cover unfilled editable parts of mask.
+     *  Look up [docs v2.0.4](https://www.npmjs.com/package/react-input-mask/v/2.0.4?activeTab=code) */
     maskChar?: string | null;
-    /**
-     * Defines format characters with characters as keys and corresponding RegExp string as values. Default ones:
-     * ```
-     * {
-     *   "9": "[0-9]",
-     *   "a": "[A-Za-z]",
-     *   "*": "[A-Za-z0-9]"
-     * }```
-     */
-    formatChars?: {
-        [key: string]: string;
-    };
-    /**
-     * Show mask even in empty input without focus.
-     */
+    /** Defines format characters with characters as keys and corresponding RegExp string as values.
+     *  Look up [docs v2.0.4](https://www.npmjs.com/package/react-input-mask/v/2.0.4?activeTab=code) */
+    formatChars?: Record<string, string>;
+    /** Show mask in empty input without focus */
     alwaysShowMask?: boolean;
-    /**
-     * Use inputRef instead of ref if you need input node to manage focus, selection, etc.
-     */
+    /** Callback to change masked value and cursor position before it will be applied to the input.
+     *  Look up [docs v2.0.4](https://www.npmjs.com/package/react-input-mask/v/2.0.4?activeTab=code) */
+    beforeMaskedValueChange?: (newState: InputState, oldState: InputState, userInput: string, maskOptions: MaskOptions) => InputState;
+    /** Type attribute */
+    type?: 'email' | 'number' | 'password' | 'tel' | 'text' | 'url';
+    /** Value for controlled input */
+    value?: string | number;
+    /** Default value for uncontrolled input */
+    defaultValue?: string | number;
+    /** Label for input */
+    label?: React.ReactNode;
+    /** Label position */
+    labelPosition?: 'dynamic' | 'top' | 'center';
+    /** Icon before input */
+    icon?: JSX.Element;
+    /** Props for icon component */
+    iconProps?: IconProps;
+    /** Input controls */
+    controls?: {
+        additional?: {
+            icon: JSX.Element;
+            iconProps?: IconProps;
+            buttonProps?: React.ComponentPropsWithoutRef<'button'>;
+        };
+        number?: {
+            icon?: [JSX.Element, JSX.Element];
+            iconProps?: IconProps;
+            buttonProps?: React.ComponentPropsWithoutRef<'button'> | [Nullable<React.ComponentPropsWithoutRef<'button'>>, Nullable<React.ComponentPropsWithoutRef<'button'>>];
+        };
+    };
+    /** Content after input */
+    text?: React.ReactNode;
+    /** Appearance variant */
+    primary?: boolean;
+    /** Appearance variant */
+    secondary?: boolean;
+    /** Appearance variant */
+    onColored?: boolean;
+    /** Appearance variant */
+    error?: boolean;
+    /** Appearance variant */
+    success?: boolean;
+    /** Display inline */
+    inline?: boolean;
+    /** @ignore */
+    fluid?: boolean;
+    /** @ignore */
+    rounded?: boolean;
+    /** @ignore @deprecated Use ref */
     inputRef?: React.Ref<HTMLInputElement>;
-    /**
-     * In case you need to implement more complex masking behavior, you can provide
-     * beforeMaskedValueChange function to change masked value and cursor position
-     * before it will be applied to the input.
-     */
-    beforeMaskedValueChange?(_newState: InputState, _oldState: InputState, _userInput: string, _maskOptions: MaskOptions): InputState;
-    /**
-     * Input type
-     */
-    type?: string;
-    dataset?: Record<string, string>;
 }
+declare type StyledBaseInputProps = React.ComponentPropsWithoutRef<'input'> & Pick<InputProps, 'color' | 'placeholderColor' | 'width' | 'widthXXS' | 'widthXS' | 'widthS' | 'widthM' | 'widthL' | 'widthXL' | 'mask' | 'maskChar' | 'formatChars' | 'alwaysShowMask' | 'beforeMaskedValueChange' | 'error' | 'fluid' | 'rounded' | 'inputRef'>;
+
 /**
- * Расширен:
- * - [`BaseProps`](#/Миксины)
- * - [`InputField`](#/Миксины)
- * - `React.InputHTMLAttributes<HTMLInputElement>`
+ *
+ * Component accepts all \<input\> attributes and "react-input-mask" props.
+ *
+ * Responsive "size", "margin" props are supported.
+ *
+ * Exposed "ref" attached to \<input\>.
+ *
+ * See full [InputProps](https://github.com/foxford/ui/blob/master/src/components/Input/types.ts)
  */
-declare function Input(props: InputProps): JSX.Element;
-declare namespace Input {
-    var defaultProps: {
-        rounded: boolean;
-        type: string;
-        color: string;
-        mask: string;
-        placeholderColor: string;
-    };
-    var Phone: typeof InputPhone;
-    var displayName: string;
-}
+declare const Input: React.ForwardRefExoticComponent<InputProps> & {
+    Phone: typeof InputPhone;
+};
 
-declare const baseInputStyle: <T extends InputField>(props: T & {
-    theme: DefaultTheme;
-}) => styled_components.FlattenInterpolation<styled_components.ThemeProps<DefaultTheme>>;
+declare const baseInputStyle: (props: StyledProps<Pick<StyledBaseInputProps, 'color' | 'placeholderColor' | 'disabled' | 'rounded' | 'width' | 'widthXS' | 'widthS' | 'widthM' | 'widthL' | 'widthXL' | 'fluid' | 'error'>>) => styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>;
 
 declare const INITIAL_MASK = "99999999999999999999";
 declare const DEFAULT_MASK: string;
@@ -3490,13 +3498,14 @@ interface FormLabelProps extends BaseProps, TypographyProps, ResponsiveSizeProps
 
 /**
  *
- * Component interface extends:
- * - [`BaseProps`](#/Interfaces)
- * - [`ResponsiveSizeProps`](#/Interfaces)
- * - [`ResponsiveMarginProps`](#/Interfaces)
- * - [`ColorPaletteProps<keyof FormLabelPalette>`](#/Interfaces)
- * - [`React.ComponentPropsWithRef<'label'>`](#/Interfaces)
+ * Component accepts all \<label\> attributes.
+ *
+ * Responsive "size", "margin" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [FormLabelProps](https://github.com/foxford/ui/blob/master/src/components/FormLabel/types.ts)
  */
 declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps>;
 
-export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Color, ColorNames, ColorPaletteInterpolationProps, ColorPaletteKey, ColorPaletteProps, ColorSchemaProps, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FormLabel, HEX, INITIAL_MASK, Icon, Input, InputField, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, RenderProps, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, TypographyProps, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };
+export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Color, ColorNames, ColorPaletteInterpolationProps, ColorPaletteKey, ColorPaletteProps, ColorSchemaProps, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FormLabel, HEX, INITIAL_MASK, Icon, Input, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, RenderProps, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, TypographyProps, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };