@foxford/ui 2.16.2 → 2.17.0

package/dts/index.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import * as react from 'react';
-import { Component, CSSProperties, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
+import { CSSProperties, Component, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
 import * as styled_components from 'styled-components';
 import { DefaultTheme, FlattenSimpleInterpolation, CSSObject, Interpolation, ThemeProps, SimpleInterpolation, css } from 'styled-components';
-import { Link } from 'react-router-dom';
+import { LinkProps, Link } from 'react-router-dom';
 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';
@@ -12,161 +12,6 @@ import { Styles, Props } from 'react-floater/lib/types';
 import { InputState, MaskOptions } from 'react-input-mask';
 import { ReactSelectProps } from 'react-select';
 
-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 Display = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'table-cell' | 'inherit' | 'none';
-interface DisplayProperty {
-    display?: Display;
-}
-
-declare type TypographyAppearance = 'display' | 'heading' | 'subheading' | 'subheading-compact' | 'body' | 'caption';
-interface TextProps extends ResponsiveSizeProps, ResponsiveMarginProps, DisplayProperty, ColorProperty, BaseProps, Omit<React.ComponentPropsWithRef<'div'>, 'color'> {
-    /** Root node polymorphic type */
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
-    /** Predefined styles and sizes */
-    appearance?: TypographyAppearance;
-    /** Font family */
-    fontFamily?: string;
-    /** Font weight */
-    weight?: 'normal' | 'bold' | 'lighter' | 'bolder' | number | 'inherit';
-    /** Font style */
-    fontStyle?: 'normal' | 'italic';
-    /** Text transform */
-    transform?: 'capitalize' | 'uppercase' | 'lowercase';
-    /** Underline inner <a>  */
-    underlineLinks?: boolean;
-    /** Text align */
-    textAlign?: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end';
-    /** Line height */
-    lineHeight?: 'l' | 'm' | 's' | 'xs' | number;
-    /** React children */
-    children?: React.ReactNode;
-    /** @deprecated Use children */
-    content?: string;
-}
-
-/**
- *
- * Component interface extends:
- * - [`ResponsiveSizeProps`](#/Interfaces)
- * - [`ResponsiveMarginProps`](#/Interfaces)
- * - [`BaseProps`](#/Interfaces)
- * - [`React.ComponentPropsWithRef<'div'>`](#/Interfaces)
- */
-declare const Text: React.ForwardRefExoticComponent<TextProps> & {
-    Heading: typeof TextHeading;
-    Ellipse: typeof TextEllipse;
-};
-
-declare enum SizeInput {
-    l = 380,
-    m = 300,
-    s = 220,
-    xs = 140
-}
-
 declare enum DefaultColorNames {
     white = "white",
     black = "black",
@@ -952,102 +797,262 @@ declare const ColorNames: {
     kournikovaDim: DefaultColorNames.kournikovaDim;
 };
 
+declare type Nullable<T> = T | null | undefined;
 declare type HEX = `#${string}`;
 declare type RGB = `rgb(${number}, ${number}, ${number})`;
 declare type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
-declare type Nullable<T> = T | null | undefined;
-declare type FontWeight = 'normal' | 'bold' | 'lighter' | 'bolder' | number;
-declare type ThemePreset = 'default' | 'brand';
-declare type ThemeMode = 'light' | 'dark';
-declare type ThemeName = 'mother' | 'baby' | 'teen' | 'adult';
+declare type CSSGlobalValue = 'initial' | 'inherit' | 'unset' | 'revert' | 'revert-layer';
+declare type CSSUnit = 'px' | 'rem' | 'em' | '%';
+declare type CSSColor = RGB | RGBA | HEX | CSSGlobalValue | 'currentcolor' | 'transparent';
+declare type CSSBorderStyle = CSSGlobalValue | 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+declare type CSSVerticalAlign = CSSGlobalValue | 'baseline' | 'sub' | 'super' | 'text-top' | 'text-bottom' | 'middle' | 'top' | 'bottom';
+declare type CSSFontWeight = CSSGlobalValue | 'normal' | 'bold' | 'lighter' | 'bolder' | number;
 declare type Size = 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs';
 declare type Breakpoint = 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL';
-declare type CSSUnit = 'px' | 'rem' | 'em' | '%';
-declare type CSSGlobalValue = 'initial' | 'inherit' | 'unset' | 'revert' | 'revert-layer';
 declare type SizeValue = Size | CSSGlobalValue | number;
-declare type Sizes = Record<Size, CSSProperties>;
+declare type Color = keyof typeof ColorNames | CSSColor;
 declare type MarginProperty = 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft';
 declare type ColorPaletteKey = 'color' | `color${string}` | `${string}Color` | `${string}Color${string}`;
-declare type CSSColor = RGB | RGBA | HEX | CSSGlobalValue | 'currentcolor' | 'transparent';
-declare type Color = keyof typeof ColorNames | CSSColor;
-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 ResponsiveSizeProps = {
-    sizeUnits?: CSSUnit;
-    sizes?: Partial<Sizes>;
-    size?: SizeValue | [desktop: SizeValue, tablet: SizeValue, mobile: SizeValue] | [xl: SizeValue, l: SizeValue, m: SizeValue, s: SizeValue, xs: SizeValue, xxs: SizeValue];
-} & {
-    [key in `size${Breakpoint}`]?: SizeValue;
-};
-declare type ColorPaletteProps<T extends ColorPaletteKey = ColorPaletteKey> = {
-    palette?: Partial<Record<T, Color>>;
-};
-declare type DynamicSizeDeclaration = (size: number | CSSGlobalValue, cssProperty: keyof CSSProperties, cssUnit: CSSUnit) => CSSProperties;
-declare type CommonInterpolationProps<T extends ResponsiveSizeProps & ColorPaletteProps> = Omit<T, 'sizes' | 'size' | 'palette'> & {
-    dynamicSizeDeclaration?: DynamicSizeDeclaration;
-    sizeProperty?: keyof CSSProperties;
-    sizes: Sizes;
-    size: SizeValue | [desktop: SizeValue, tablet: SizeValue, mobile: SizeValue] | [xl: SizeValue, l: SizeValue, m: SizeValue, s: SizeValue, xs: SizeValue, xxs: SizeValue];
-    palette: Partial<Record<ColorPaletteKey, CSSColor>>;
-};
-declare type ResponsiveMarginProps = {
-    marginUnits?: CSSUnit;
-} & {
-    [key in `${MarginProperty}${Breakpoint | ''}`]?: CSSProperties['margin'];
-};
-declare type ColorSchemaProps = {
-    primary?: boolean;
-    secondary?: boolean;
-    tertiary?: boolean;
-    quaternary?: boolean;
-};
-declare type TypographyProps = {
-    textProps?: TextProps;
-};
-declare type RenderProps<T> = T & {
-    baseTextProps: Partial<TextProps>;
+declare type Sizes = Record<Size, CSSProperties>;
+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;
 
 /**
- * Converts HEX color code to RGB(A) string
+ * 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 Display = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'table-cell' | 'inherit' | 'none';
+interface DisplayProperty {
+    display?: Display;
+}
+
+declare type TypographyAppearance = 'display' | 'heading' | 'subheading' | 'subheading-compact' | 'body' | 'caption';
+interface TextProps extends ResponsiveSizeProps, ResponsiveMarginProps, DisplayProperty, ColorProperty, BaseProps, Omit<React.ComponentPropsWithRef<'div'>, 'color'> {
+    /** Root node polymorphic type */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
+    /** Predefined styles and sizes */
+    appearance?: TypographyAppearance;
+    /** Font family */
+    fontFamily?: string;
+    /** Font weight */
+    weight?: 'normal' | 'bold' | 'lighter' | 'bolder' | number | 'inherit';
+    /** Font style */
+    fontStyle?: 'normal' | 'italic';
+    /** Text transform */
+    transform?: 'capitalize' | 'uppercase' | 'lowercase';
+    /** Underline content */
+    underline?: CSSBorderStyle | boolean;
+    /** Text align */
+    textAlign?: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end';
+    /** Line height */
+    lineHeight?: 'l' | 'm' | 's' | 'xs' | number;
+    /** React children */
+    children?: React.ReactNode;
+    /** @ignore @deprecated Use Anchor interface */
+    underlineLinks?: boolean;
+    /** @ignore @deprecated Use children */
+    content?: string;
+}
+
+/**
+ *
+ * Component interface extends:
+ * - [`ResponsiveSizeProps`](#/Interfaces)
+ * - [`ResponsiveMarginProps`](#/Interfaces)
+ * - [`BaseProps`](#/Interfaces)
+ * - [`React.ComponentPropsWithRef<'div'>`](#/Interfaces)
+ */
+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 ResponsiveSizeProps = {
+    sizeUnits?: CSSUnit;
+    sizes?: Partial<Sizes>;
+    size?: SizeValue | [desktop: SizeValue, tablet: SizeValue, mobile: SizeValue] | [xl: SizeValue, l: SizeValue, m: SizeValue, s: SizeValue, xs: SizeValue, xxs: SizeValue];
+} & {
+    [key in `size${Breakpoint}`]?: SizeValue;
+};
+declare type ColorPaletteProps<T extends ColorPaletteKey = ColorPaletteKey> = {
+    palette?: Partial<Record<T, Color>>;
+};
+declare type DynamicSizeDeclaration = (size: number | CSSGlobalValue, cssProperty: keyof CSSProperties, cssUnit: CSSUnit) => CSSProperties;
+declare type CommonInterpolationProps<T extends ResponsiveSizeProps & ColorPaletteProps> = Omit<T, 'sizes' | 'size' | 'palette'> & {
+    dynamicSizeDeclaration?: DynamicSizeDeclaration;
+    sizeProperty?: keyof CSSProperties;
+    sizes: Sizes;
+    size: SizeValue | [desktop: SizeValue, tablet: SizeValue, mobile: SizeValue] | [xl: SizeValue, l: SizeValue, m: SizeValue, s: SizeValue, xs: SizeValue, xxs: SizeValue];
+    palette: Partial<Record<ColorPaletteKey, CSSColor>>;
+};
+declare type ResponsiveMarginProps = {
+    marginUnits?: CSSUnit;
+} & {
+    [key in `${MarginProperty}${Breakpoint | ''}`]?: CSSProperties['margin'];
+};
+declare type ColorSchemaProps = {
+    primary?: boolean;
+    secondary?: boolean;
+    tertiary?: boolean;
+    quaternary?: boolean;
+};
+declare type TypographyProps = {
+    textProps?: TextProps;
+};
+declare type RenderProps<T> = T & {
+    baseTextProps: Partial<TextProps>;
+};
+
+/**
+ * Converts HEX color code to RGB(A) string
  *
  * @export
  * @param {string} HEX color with length of either 3 or 6 (can be with or without '#' sign)
@@ -1080,142 +1085,6 @@ declare const teenDarkTheme: DefaultTheme;
 declare const adultLightTheme: DefaultTheme;
 declare const adultDarkTheme: DefaultTheme;
 
-interface AnchorProps extends BaseProps, ColorProperty, ResponsiveNamedProperty<'size'>, DisplayProperty {
-    /**
-     * Custom CSS class name
-     */
-    as?: 'div' | 'span' | 'a' | typeof Link;
-    /**
-     * React router link to
-     */
-    to?: string;
-    /**
-     *  Link href
-     */
-    href?: string;
-    /**
-     * Is display inline
-     * */
-    wrapper?: boolean;
-    /**
-     * Pseudo link has dashed bottom border
-     * */
-    pseudo?: boolean;
-    /**
-     * If link should be underlined
-     * */
-    underline?: boolean;
-    /**
-     * Primary content
-     */
-    /**
-     * Children react node
-     */
-    children?: React.ReactNode;
-    /**
-     * Primary content
-     */
-    content?: string;
-    /**
-     * Onclick handler
-     */
-    onClick?: () => void;
-    tabIndex?: number;
-    target?: string;
-    rel?: string;
-    /**
-     * Auto-generate rel. You must specify domain inside theme
-     */
-    autoRel?: boolean;
-}
-/**
- * Расширен:
- * - [`BaseProps`](#/Миксины)
- * - [`Color`](#/Миксины)
- * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
- * - [`Display`](#/Миксины)
- */
-declare function Anchor(props: typeof Anchor.defaultProps & AnchorProps): JSX.Element;
-declare namespace Anchor {
-    var displayName: string;
-    var defaultProps: {
-        display: string;
-    };
-}
-
-interface ButtonProps extends BaseProps, ResponsiveSizeProps, DisplayProperty, ColorProperty, ColorProperty<'fontColor'>, ResponsiveNamedProperty<'padding'>, ResponsiveNamedProperty<'paddingTop'>, ResponsiveNamedProperty<'paddingRight'>, ResponsiveNamedProperty<'paddingBottom'>, ResponsiveNamedProperty<'paddingLeft'>, ResponsiveNamedProperty<'margin'>, ResponsiveNamedProperty<'marginTop'>, ResponsiveNamedProperty<'marginRight'>, ResponsiveNamedProperty<'marginBottom'>, ResponsiveNamedProperty<'marginLeft'>, ResponsiveNamedProperty<'fontSize'>, ResponsiveNamedProperty<'fluid', boolean>, ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>, ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {
-    /** Root node polymorphic type */
-    as?: 'div' | 'span' | 'a' | 'button' | typeof Link | typeof Anchor;
-    /** Button type attribute */
-    type?: 'button' | 'submit' | 'reset';
-    /** Button icons */
-    icon?: JSX.Element | [Nullable<JSX.Element>, Nullable<JSX.Element>];
-    /** Button success state */
-    success?: boolean;
-    /** Loading state */
-    loading?: boolean;
-    /** Button disabled */
-    disabled?: boolean;
-    /** Rounded border radius */
-    rounded?: boolean;
-    /** Rounded shape button */
-    round?: boolean;
-    /** Anchor target attribute  */
-    target?: string;
-    /** Anchor rel attribute */
-    rel?: string;
-    /** Auto-generate rel. You must specify domain inside theme */
-    autoRel?: boolean;
-    /** Anchor href attribute */
-    href?: string;
-    /** React router Link to prop */
-    to?: string;
-    /**
-     * Indicates if there should not be any margin
-     * between this button and the previous one
-     */
-    noSpacing?: boolean;
-    /** Outline appearance */
-    outline?: boolean;
-    /** Content font weight */
-    fontWeight?: FontWeight;
-    /** Associated form */
-    form?: string;
-    /** @preset {Default} Primary appearance */
-    primary?: boolean;
-    /** @preset {Default} Secondary appearance */
-    secondary?: boolean;
-    /** @preset {Default} Inverted colors */
-    inverted?: boolean;
-    /** @preset {Brand} Base appearance */
-    base?: boolean;
-    /** @preset {Brand} Clear appearance */
-    clear?: boolean;
-    /** @preset {Brand} Black colors appearance  */
-    black?: boolean;
-    /** @preset {Brand} Red colors appearance */
-    danger?: boolean;
-    /** @preset {Brand} Modifies appearance on colored background */
-    onColored?: boolean;
-    /** @deprecated Use outline */
-    basic?: boolean;
-    /** @deprecated Use children */
-    content?: React.ReactNode;
-    /** @deprecated Use ref */
-    innerRef?: any;
-    /** Component's children */
-    children?: React.ReactNode | React.ReactNode[];
-    onClick?: (evt: React.SyntheticEvent<HTMLElement>) => void;
-    onClickCapture?: (evt: React.SyntheticEvent<HTMLElement>) => void;
-    onMouseEnter?: (evt: React.SyntheticEvent<HTMLElement>) => void;
-    onMouseLeave?: (evt: React.SyntheticEvent<HTMLElement>) => void;
-}
-
-/**
- * Main button
- */
-declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLElement>>;
-
 interface VAlign {
     vAlign?: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline';
 }
@@ -1323,6 +1192,8 @@ interface IconProps extends BaseProps, ColorProperty, VAlign, ResponsiveNamedPro
      * Show pointer cursor on hover?
      */
     pointer?: boolean;
+    /** Root node polymorphic type */
+    as?: React.ElementType<any>;
 }
 /**
  * Расширен:
@@ -1337,6 +1208,136 @@ declare namespace Icon {
     var displayName: string;
 }
 
+declare type AnchorPalette = {
+    color: CSSColor;
+    colorHover: CSSColor;
+    colorDisabled: CSSColor;
+};
+interface AnchorProps extends ResponsiveSizeProps, ResponsiveMarginProps, TypographyProps, ColorPaletteProps<keyof AnchorPalette>, BaseProps, Omit<React.ComponentPropsWithRef<'a'>, 'color' | 'children'>, 
+/** @deprecated Use palette */
+ColorProperty<'color'>, 
+/** @deprecated Use children as function */
+DisplayProperty {
+    /** React children */
+    children?: React.ReactNode | ((props: RenderProps<TypographyProps & {
+        iconBaseProps: Partial<IconProps>;
+        iconProps: AnchorProps['iconProps'];
+        icon: AnchorProps['icon'];
+    }>) => React.ReactNode);
+    /** Underline text content */
+    underline?: CSSBorderStyle | boolean;
+    /** Icons before and after content */
+    icon?: JSX.Element | [Nullable<JSX.Element>, Nullable<JSX.Element>];
+    /** Props for icon components */
+    iconProps?: IconProps;
+    /** Build rel attribute with relBuilder from context */
+    autoRel?: boolean;
+    /** Link from react-router-dom will be used.
+     *  Look up [docs](https://v5.reactrouter.com/web/api/Link) */
+    to?: Pick<LinkProps, 'to'>;
+    /** Look up react-router-dom [docs](https://v5.reactrouter.com/web/api/Link) */
+    replace?: Pick<LinkProps, 'replace'>;
+    /** Anchor disabled */
+    disabled?: boolean;
+    /** Appearance variant */
+    onColored?: boolean;
+    /** Vertical alignment */
+    verticalAlign?: CSSVerticalAlign | boolean;
+    /** @ignore @deprecated Use anchor or Link interface */
+    as?: React.ElementType<any>;
+    /** @ignore @deprecated Use children */
+    content?: string;
+    /** @ignore @deprecated Use underline */
+    pseudo?: boolean;
+    /** @ignore @deprecated */
+    wrapper?: boolean;
+}
+
+/**
+ *
+ * Component interface extends:
+ * - [`ResponsiveSizeProps`](#/Interfaces)
+ * - [`ResponsiveMarginProps`](#/Interfaces)
+ * - [`ColorPaletteProps<keyof AnchorPalette>`](#/Interfaces)
+ * - [`TypographyProps`](#/Interfaces)
+ * - [`BaseProps`](#/Interfaces)
+ * - [`React.ComponentPropsWithRef<'a'>`](#/Interfaces)
+ */
+declare const Anchor: React.ForwardRefExoticComponent<AnchorProps>;
+
+interface ButtonProps extends BaseProps, ResponsiveSizeProps, DisplayProperty, ColorProperty, ColorProperty<'fontColor'>, ResponsiveNamedProperty<'padding'>, ResponsiveNamedProperty<'paddingTop'>, ResponsiveNamedProperty<'paddingRight'>, ResponsiveNamedProperty<'paddingBottom'>, ResponsiveNamedProperty<'paddingLeft'>, ResponsiveNamedProperty<'margin'>, ResponsiveNamedProperty<'marginTop'>, ResponsiveNamedProperty<'marginRight'>, ResponsiveNamedProperty<'marginBottom'>, ResponsiveNamedProperty<'marginLeft'>, ResponsiveNamedProperty<'fontSize'>, ResponsiveNamedProperty<'fluid', boolean>, ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>, ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {
+    /** Root node polymorphic type */
+    as?: 'div' | 'span' | 'a' | 'button' | typeof Link | typeof Anchor;
+    /** Button type attribute */
+    type?: 'button' | 'submit' | 'reset';
+    /** Button icons */
+    icon?: JSX.Element | [Nullable<JSX.Element>, Nullable<JSX.Element>];
+    /** Button success state */
+    success?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Button disabled */
+    disabled?: boolean;
+    /** Rounded border radius */
+    rounded?: boolean;
+    /** Rounded shape button */
+    round?: boolean;
+    /** Anchor target attribute  */
+    target?: string;
+    /** Anchor rel attribute */
+    rel?: string;
+    /** Auto-generate rel. You must specify domain inside theme */
+    autoRel?: boolean;
+    /** Anchor href attribute */
+    href?: string;
+    /** React router Link to prop */
+    to?: string;
+    /**
+     * Indicates if there should not be any margin
+     * between this button and the previous one
+     */
+    noSpacing?: boolean;
+    /** Outline appearance */
+    outline?: boolean;
+    /** Content font weight */
+    fontWeight?: CSSFontWeight;
+    /** Associated form */
+    form?: string;
+    /** @preset {Default} Primary appearance */
+    primary?: boolean;
+    /** @preset {Default} Secondary appearance */
+    secondary?: boolean;
+    /** @preset {Default} Inverted colors */
+    inverted?: boolean;
+    /** @preset {Brand} Base appearance */
+    base?: boolean;
+    /** @preset {Brand} Clear appearance */
+    clear?: boolean;
+    /** @preset {Brand} Black colors appearance  */
+    black?: boolean;
+    /** @preset {Brand} Red colors appearance */
+    danger?: boolean;
+    /** @preset {Brand} Modifies appearance on colored background */
+    onColored?: boolean;
+    /** @deprecated Use outline */
+    basic?: boolean;
+    /** @deprecated Use children */
+    content?: React.ReactNode;
+    /** @deprecated Use ref */
+    innerRef?: any;
+    /** Component's children */
+    children?: React.ReactNode | React.ReactNode[];
+    onClick?: (evt: React.SyntheticEvent<HTMLElement>) => void;
+    onClickCapture?: (evt: React.SyntheticEvent<HTMLElement>) => void;
+    onMouseEnter?: (evt: React.SyntheticEvent<HTMLElement>) => void;
+    onMouseLeave?: (evt: React.SyntheticEvent<HTMLElement>) => void;
+}
+
+/**
+ * Main button
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLElement>>;
+
 declare type AlertType = 'warning' | 'error' | 'info' | 'success';
 declare type AlertSize = 'l' | 's';
 interface AlertProps extends BaseProps {
@@ -1387,7 +1388,7 @@ interface AlertProps extends BaseProps {
     title?: string;
     titleProps?: TextProps;
     type?: AlertType;
-    width?: ResponsiveProperty;
+    width?: ResponsiveProperty<string | number>;
 }
 
 declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
@@ -1671,6 +1672,7 @@ interface Theme {
         Switcher?: SwitcherProps;
         Tab?: TabProps;
         Badge?: BadgeProps;
+        Anchor?: AnchorProps;
     };
 }
 
@@ -1896,7 +1898,7 @@ declare enum CurrencyCodes {
 }
 declare const CURRENCY_MAP: Readonly<Record<CurrencyCodes, string>>;
 
-interface AmountProps extends ResponsiveSizeProps, BaseProps, ColorProperty, DisplayProperty {
+interface AmountProps extends TextProps {
     /**
      * Value for amount
      */
@@ -3303,4 +3305,4 @@ declare namespace Select {
     var displayName: string;
 }
 
-export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSColor, CSSGlobalValue, CSSUnit, CURRENCY_MAP, Checkbox, Color, ColorNames, ColorPaletteKey, ColorPaletteProps, ColorSchemaProps, CommonInterpolationProps, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, DynamicSizeDeclaration, FontWeight, HEX, INITIAL_MASK, Icon, Input, InputField, MarginProperty, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, RenderProps, ResponsiveMarginProps, ResponsiveSizeProps, withThemeScrollable as Scrollable, Section, Select, Separator, Size, SizeValue, 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, ColorPaletteKey, ColorPaletteProps, ColorSchemaProps, CommonInterpolationProps, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, DynamicSizeDeclaration, HEX, INITIAL_MASK, Icon, Input, InputField, MarginProperty, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, RenderProps, ResponsiveMarginProps, ResponsiveSizeProps, withThemeScrollable as Scrollable, Section, Select, Separator, Size, SizeValue, 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 };