@foxford/ui 2.14.1 → 2.15.0-beta-4a3c333-20231116

package/dts/index.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import * as react from 'react';
-import { CSSProperties, Component, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
+import { CSSProperties, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent, Component } from 'react';
 import * as styled_components from 'styled-components';
 import { DefaultTheme, FlattenSimpleInterpolation, CSSObject, Interpolation, ThemeProps, SimpleInterpolation, css } from 'styled-components';
-import { Link, NavLink } from 'react-router-dom';
+import { 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,6 +12,69 @@ 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 Display = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'table-cell' | 'inherit' | 'none';
+interface DisplayProperty {
+    display?: Display;
+}
+
+declare enum SizeInput {
+    l = 380,
+    m = 300,
+    s = 220,
+    xs = 140
+}
+
 declare enum DefaultColorNames {
     white = "white",
     black = "black",
@@ -789,66 +852,6 @@ declare const ColorNames: {
     kournikovaDim: DefaultColorNames.kournikovaDim;
 };
 
-declare type ColorPropertyVariants = 'color' | 'fontColor' | `${string}Color` | `color${string}`;
-declare type ColorValue = RGB | RGBA | HEX | 'inherit' | 'initial' | 'transparent';
-declare type ColorCalcProperty = (_color: ColorValue) => FlattenSimpleInterpolation | null;
-declare type ColorCssProperty = string | ColorCalcProperty;
-declare type Color = keyof typeof ColorNames | ColorValue;
-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 enum SizeInput {
-    l = 380,
-    m = 300,
-    s = 220,
-    xs = 140
-}
-
 declare type HEX = `#${string}`;
 declare type RGB = `rgb(${number}, ${number}, ${number})`;
 declare type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
@@ -863,6 +866,10 @@ declare type CSSUnit = 'px' | 'rem' | 'em' | '%';
 declare type SizeValue = Size | number;
 declare type Sizes = Record<Size, CSSProperties>;
 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 | 'currentcolor' | 'inherit' | 'initial' | 'revert' | 'unset' | 'transparent';
+declare type Color = keyof typeof ColorNames | CSSColor;
+declare type TypographyAppearance = 'display' | 'heading' | 'subheading' | 'subheading-compact' | 'body' | 'caption';
 interface BaseProps {
     preset?: ThemePreset;
     className?: string;
@@ -910,12 +917,16 @@ declare type ResponsiveSizeProps = {
 } & {
     [key in `size${Breakpoint}`]?: SizeValue;
 };
+declare type ColorPaletteProps<T extends ColorPaletteKey = ColorPaletteKey> = {
+    palette?: Partial<Record<T, Color>>;
+};
 declare type DynamicSizeDeclaration = (size: number, cssProperty: keyof CSSProperties, cssUnit: CSSUnit) => CSSProperties;
-declare type ResponsiveSizeInterpolationProps<T extends ResponsiveSizeProps> = Omit<T, 'sizes' | 'size'> & {
+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;
@@ -928,6 +939,46 @@ declare type ColorSchemaProps = {
     tertiary?: boolean;
     quaternary?: boolean;
 };
+interface TextProps extends DisplayProperty, ColorProperty, ResponsiveNamedProperty<'size'>, BaseProps {
+    /** Root node polymorphic type */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
+    /** Root id attribute */
+    id?: string;
+    /** Use predefined props with low priority */
+    appearance?: TypographyAppearance;
+    /** Custom sizes set */
+    sizes?: Record<Size, number>;
+    /** Sizing units */
+    fontUnits?: string;
+    /** Font family */
+    fontFamily?: string;
+    /** Font weight */
+    weight?: 'normal' | 'bold' | 'lighter' | 'bolder' | number | 'inherit';
+    /** Font style */
+    fontStyle?: 'normal' | 'italic';
+    /** Text transform */
+    transform?: 'capitalize' | 'uppercase' | 'lowercase';
+    /** Root margin */
+    margin?: number | string;
+    /** Underlined text  */
+    underlineLinks?: boolean;
+    /** Text align */
+    textAlign?: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end';
+    /** Line height */
+    lineHeight?: 'l' | 'm' | 's' | 'xs' | number;
+    /** Title attribute */
+    title?: string;
+    /** Component's children */
+    children?: React.ReactNode;
+    /** @deprecated Use children */
+    content?: string;
+}
+declare type TypographyProps = {
+    textProps?: TextProps;
+};
+declare type RenderProps<T> = T & {
+    baseTextProps: Partial<TextProps>;
+};
 
 /**
  * Converts HEX color code to RGB(A) string
@@ -963,11 +1014,6 @@ declare const teenDarkTheme: DefaultTheme;
 declare const adultLightTheme: DefaultTheme;
 declare const adultDarkTheme: DefaultTheme;
 
-declare type Display = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'table-cell' | 'inherit' | 'none';
-interface DisplayProperty {
-    display?: Display;
-}
-
 interface AnchorProps extends BaseProps, ColorProperty, ResponsiveNamedProperty<'size'>, DisplayProperty {
     /**
      * Custom CSS class name
@@ -1225,93 +1271,6 @@ declare namespace Icon {
     var displayName: string;
 }
 
-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;
-}
-
-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 TextAppearance = 'display' | 'heading' | 'subheading' | 'subheading-compact' | 'body' | 'caption';
-interface TextProps extends DisplayProperty, ColorProperty, ResponsiveNamedProperty<'size'>, BaseProps {
-    /** Root node polymorphic type */
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
-    /** Root id attribute */
-    id?: string;
-    /** Use predefined props with low priority */
-    appearance?: TextAppearance;
-    /** Custom sizes set */
-    sizes?: Record<Size, number>;
-    /** Sizing units */
-    fontUnits?: string;
-    /** Font family */
-    fontFamily?: string;
-    /** Font weight */
-    weight?: 'normal' | 'bold' | 'lighter' | 'bolder' | number;
-    /** Font style */
-    fontStyle?: 'normal' | 'italic';
-    /** Text transform */
-    transform?: 'capitalize' | 'uppercase' | 'lowercase';
-    /** Root margin */
-    margin?: number | string;
-    /** Underlined text  */
-    underlineLinks?: boolean;
-    /** Text align */
-    textAlign?: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end';
-    /** Line height */
-    lineHeight?: 'l' | 'm' | 's' | 'xs' | number;
-    /** Title attribute */
-    title?: string;
-    /** Component's children */
-    children?: React.ReactNode;
-    /** @deprecated Use children */
-    content?: string;
-}
-interface TextComponent extends ForwardRefExoticComponent<PropsWithoutRef<TextProps> & RefAttributes<HTMLElement>> {
-    Heading: (props: TextHeadingProps) => JSX.Element;
-    Ellipse: typeof TextEllipse;
-}
-
-declare const Text: TextComponent;
-
 declare type AlertType = 'warning' | 'error' | 'info' | 'success';
 declare type AlertSize = 'l' | 's';
 interface AlertProps extends BaseProps {
@@ -1458,6 +1417,14 @@ declare const Textarea: {
     displayName: string;
 };
 
+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;
+}
+
 interface SwitcherProps extends BaseProps, ColorProperty<'color'>, ColorProperty<'inactiveColor'> {
     /** Input id */
     id?: string;
@@ -1477,9 +1444,17 @@ interface SwitcherProps extends BaseProps, ColorProperty<'color'>, ColorProperty
 
 declare const Switcher: react.ForwardRefExoticComponent<SwitcherProps & react.RefAttributes<HTMLDivElement>>;
 
-interface ArrowBadgeProps extends ResponsiveSizeProps, ResponsiveMarginProps, ColorSchemaProps, ColorProperty<'color'>, ColorProperty<'backgroundColor'>, BaseProps, Omit<React.ComponentPropsWithRef<'div'>, 'color'> {
+declare type ArrowBadgePalette = {
+    color: CSSColor;
+    backgroundColor: CSSColor;
+};
+interface ArrowBadgeProps extends ResponsiveSizeProps, ResponsiveMarginProps, ColorSchemaProps, 
+/** @deprecated Use palette */
+ColorProperty<'color'>, 
+/** @deprecated Use palette */
+ColorProperty<'backgroundColor'>, ColorPaletteProps<keyof ArrowBadgePalette>, TypographyProps, BaseProps, Omit<React.ComponentPropsWithRef<'div'>, 'color' | 'children'> {
     /** React children */
-    children: React.ReactNode;
+    children: React.ReactNode | ((props: RenderProps<TypographyProps>) => React.ReactNode);
     /** Pointed left */
     left?: boolean;
     /** Pointed right */
@@ -1494,13 +1469,69 @@ interface ArrowBadgeProps extends ResponsiveSizeProps, ResponsiveMarginProps, Co
  * - [`ResponsiveSizeProps`](#/Interfaces)
  * - [`ResponsiveMarginProps`](#/Interfaces)
  * - [`ColorSchemaProps`](#/Interfaces)
- * - [`ColorProperty<'color'>`](#/Interfaces)
- * - [`ColorProperty<'backgroundColor'>`](#/Interfaces)
+ * - [`ColorPaletteProps<keyof ArrowBadgePalette>`](#/Interfaces)
+ * - [`TypographyProps`](#/Interfaces)
  * - [`BaseProps`](#/Interfaces)
  * - [`React.ComponentPropsWithRef<'div'>`](#/Interfaces)
  */
 declare const ArrowBadge: React.ForwardRefExoticComponent<ArrowBadgeProps>;
 
+declare type TabPalette = {
+    color: CSSColor;
+    backgroundColor: CSSColor;
+    borderColor: CSSColor;
+    colorHover: CSSColor;
+    backgroundColorHover: CSSColor;
+    borderColorHover: CSSColor;
+    colorDisabled: CSSColor;
+    backgroundColorDisabled: CSSColor;
+    borderColorDisabled: CSSColor;
+};
+interface TabProps extends ResponsiveSizeProps, ResponsiveMarginProps, BaseProps, 
+/** Use palette with brand preset */
+ColorProperty<'color'>, 
+/** Use palette with brand preset */
+ColorProperty<'borderColor'>, 
+/** Custom colors (brand preset) */
+ColorPaletteProps<keyof TabPalette>, TypographyProps, Omit<React.ComponentPropsWithRef<'button'>, 'color' | 'children'> {
+    /** React children */
+    children: React.ReactNode | ((props: RenderProps<TypographyProps>) => React.ReactNode);
+    /** Active styles applied */
+    active?: boolean;
+    /** Appearance variant (brand preset) */
+    outline?: boolean;
+    /** Appearance variant (brand preset) */
+    onColored?: boolean;
+    /** Appearance variant (default preset) */
+    compact?: boolean;
+    /** Appearance variant (default preset) */
+    crispy?: boolean;
+    /** Appearance variant (default preset) */
+    crispyCompact?: boolean;
+    /** Pointed left (brand preset) */
+    left?: boolean;
+    /** Pointed right (brand preset) */
+    right?: boolean;
+    /** Border radius applied (brand preset) */
+    rounded?: number;
+    /** @ignore @deprecated Use button interface */
+    as?: React.ElementType<any>;
+    /** @ignore @deprecated Use compact, crispy, crispyCompact */
+    theme?: 'compact' | 'crispy' | 'crispyCompact';
+}
+
+/**
+ *
+ * Component interface extends:
+ * - [`ResponsiveSizeProps`](#/Interfaces)
+ * - [`ResponsiveMarginProps`](#/Interfaces)
+ * - [`ColorPaletteProps<keyof TabPalette>`](#/Interfaces)
+ * - [`TypographyProps`](#/Interfaces)
+ * - [`BaseProps`](#/Interfaces)
+ * - [`React.ComponentPropsWithRef<'button'>`](#/Interfaces)
+ */
+declare const Tab: React.ForwardRefExoticComponent<TabProps>;
+
 interface Theme {
     breakpoints: Readonly<{
         xl: number;
@@ -1510,7 +1541,7 @@ interface Theme {
         xs: number;
         xxs: number;
     }>;
-    colors: Record<keyof typeof ColorNames, ColorValue>;
+    colors: Record<keyof typeof ColorNames, CSSColor>;
     borderRadius: string;
     textColor?: string;
     fallbackColor?: string;
@@ -1538,6 +1569,7 @@ interface Theme {
         ArrowBadge?: ArrowBadgeProps;
         'Text.Heading'?: TextHeadingProps;
         Switcher?: SwitcherProps;
+        Tab?: TabProps;
     };
 }
 
@@ -2514,42 +2546,6 @@ declare namespace Spinner {
     var displayName: string;
 }
 
-interface TabProps extends ColorProperty, ColorProperty<'borderColor'> {
-    /**
-     * An element type to render as (string or function).
-     */
-    as?: 'div' | 'a' | 'button' | 'span' | typeof NavLink;
-    /**
-     * Primary content.
-     */
-    /**
-     * Children react node
-     */
-    children?: React.ReactNode;
-    /**
-     * Active tab.
-     */
-    active?: boolean;
-    /**
-     * Active tab.
-     */
-    activeClassName?: string;
-    /**
-     * Active tab.
-     */
-    theme?: 'compact' | 'crispy' | 'crispyCompact';
-    className?: string;
-}
-declare function TabsTab(props: TabProps): JSX.Element;
-declare namespace TabsTab {
-    var defaultProps: {
-        as: string;
-        activeClassName: string;
-        borderColor: string;
-        color: string;
-    };
-}
-
 interface TabsProps extends BaseProps, ColorProperty, ColorProperty<'borderColor'> {
     /**
      * Primary content.
@@ -2565,6 +2561,9 @@ interface TabsProps extends BaseProps, ColorProperty, ColorProperty<'borderColor
     width?: ResponsiveProperty<number>;
 }
 /**
+ *
+ * Use only with default preset
+ *
  * Расширен:
  * - [`BaseProps`](#/Миксины)
  * - [`Color`](#/Миксины)
@@ -2576,8 +2575,52 @@ declare namespace Tabs {
         borderColor: string;
         color: string;
     };
-    var Tab: typeof TabsTab;
+    var Tab: react.ForwardRefExoticComponent<TabProps>;
+}
+
+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;
+}
+
+interface TextComponent extends ForwardRefExoticComponent<PropsWithoutRef<TextProps> & RefAttributes<HTMLElement>> {
+    Heading: (props: TextHeadingProps) => JSX.Element;
+    Ellipse: typeof TextEllipse;
+}
+
+declare const Text: TextComponent;
 
 /**
 Matches any [primitive value](https://developer.mozilla.org/en-US/docs/Glossary/Primitive).
@@ -3224,4 +3267,4 @@ declare namespace Select {
     var displayName: string;
 }
 
-export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSUnit, CURRENCY_MAP, Checkbox, ColorNames, ColorSchemaProps, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, DynamicSizeDeclaration, FontWeight, HEX, INITIAL_MASK, Icon, Input, InputField, MarginProperty, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, ResponsiveMarginProps, ResponsiveSizeInterpolationProps, ResponsiveSizeProps, withThemeScrollable as Scrollable, Section, Select, Separator, Size, SizeValue, Sizes, Spacer, Spinner, Switcher, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, 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, CSSColor, 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, TextProps, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, TypographyAppearance, 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 };

package/hocs/withMergedProps.js

@@ -1,2 +1,2 @@
-import e from'@babel/runtime/helpers/objectSpread2';import{forwardRef as r}from'react';import{useTheme as s}from'styled-components';import{mergeDeepLeft as a}from'ramda';import{jsx as o}from'react/jsx-runtime';var i=(i,t)=>{var m=r(((r,m)=>{var p,d,l;var n=s();var v=a(r,null!==(p=null===(d=n.components)||void 0===d?void 0:d[t.displayName])&&void 0!==p?p:{});var f=null!==(l=v.preset)&&void 0!==l?l:n.preset;var u=v.sizes?a(v.sizes,t.sizes):t.sizes;return i.displayName=t.displayName,o(i,e(e({},v),{},{preset:f,sizes:u,ref:m}))}));return m.displayName="WithMergedProps".concat(t.displayName),m};export{i as withMergedProps};
+import e from'@babel/runtime/helpers/objectSpread2';import{forwardRef as r}from'react';import{useTheme as a}from'styled-components';import{mergeDeepLeft as t}from'ramda';import{jsx as s}from'react/jsx-runtime';var o=(o,i)=>{var p=r(((r,p)=>{var l,m,n;var v=a();var d=t(r,null!==(l=null===(m=v.components)||void 0===m?void 0:m[i.displayName])&&void 0!==l?l:{});var u=null!==(n=d.preset)&&void 0!==n?n:v.preset;var c='function'==typeof i.sizes?i.sizes(e(e({},d),{},{preset:u})):i.sizes;var f=d.sizes?t(d.sizes,c):c;var y=d.palette?function(e,r){var a=arguments.length>0&&void 0!==e?e:{};var t=arguments.length>1?r:void 0;return Object.keys(a).reduce(((e,r)=>{var s;var o=a[r];return e[r]=null!==(s=t.colors[o])&&void 0!==s?s:o,e}),{})}(d.palette,v):{};return o.displayName=i.displayName,s(o,e(e({},d),{},{preset:u,sizes:f,palette:y,ref:p}))}));return p.displayName="WithMergedProps".concat(i.displayName),p};export{o as withMergedProps};
 //# sourceMappingURL=withMergedProps.js.map

package/hocs/withMergedProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"withMergedProps.js","sources":["../../../src/hocs/withMergedProps.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { mergeDeepLeft } from 'ramda'\n\nimport type { BaseProps, ResponsiveSizeProps, Sizes, ThemePreset } from 'shared/interfaces'\n\nexport const withMergedProps = <T extends ResponsiveSizeProps & BaseProps, P extends HTMLElement = HTMLElement>(\n  Component: React.FC<Omit<T, 'sizes' | 'preset'> & { sizes: Sizes; preset: ThemePreset } & React.RefAttributes<P>>,\n  options: { displayName: string; sizes: Sizes }\n) => {\n  const WithMergedProps = forwardRef<P, T>((props, ref) => {\n    const theme = useTheme()\n\n    const forwardProps = mergeDeepLeft(props, theme.components?.[options.displayName] ?? {}) as T\n    const preset = forwardProps.preset ?? theme.preset\n    const sizes = (forwardProps.sizes ? mergeDeepLeft(forwardProps.sizes, options.sizes) : options.sizes) as Sizes\n\n    Component.displayName = options.displayName\n\n    return <Component {...forwardProps} preset={preset} sizes={sizes} ref={ref} />\n  })\n\n  WithMergedProps.displayName = `WithMergedProps${options.displayName}`\n  return WithMergedProps\n}\n"],"names":["withMergedProps","Component","options","WithMergedProps","forwardRef","props","ref","_theme$components$opt","_theme$components","_forwardProps$preset","theme","useTheme","forwardProps","mergeDeepLeft","components","displayName","preset","sizes","_jsx","_objectSpread"],"mappings":"sNAMaA,EAAkB,CAC7BC,EACAC,KAEA,IAAMC,EAAkBC,IAAkBC,EAAOC,KAAQ,IAAAC,EAAAC,EAAAC,EACvD,IAAMC,EAAQC,IAEd,IAAMC,EAAeC,EAAcR,EAAD,UAAA,UAAQK,EAAMI,kBAAAA,IAAdN,OAAA,EAAQA,EAAmBN,EAAQa,oBAAAA,IAAnCR,EAAAA,EAAmD,IACrF,IAAMS,EAAgCN,UAAvBE,EAAaI,cAAAA,IAAUN,EAAAA,EAAAA,EAAMM,OAC5C,IAAMC,EAASL,EAAaK,MAAQJ,EAAcD,EAAaK,MAAOf,EAAQe,OAASf,EAAQe,MAI/F,OAFAhB,EAAUc,YAAcb,EAAQa,YAEzBG,EAACjB,EAADkB,EAAAA,EAAA,GAAeP,GAAf,GAAA,CAA6BI,OAAQA,EAAQC,MAAOA,EAAOX,IAAKA,QAIzE,OADAH,EAAgBY,YAAgCb,kBAAAA,OAAAA,EAAQa,aACjDZ"}
+{"version":3,"file":"withMergedProps.js","sources":["../../../src/hocs/withMergedProps.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { mergeDeepLeft } from 'ramda'\nimport type { DefaultTheme } from 'styled-components'\nimport type {\n  BaseProps,\n  ColorPaletteProps,\n  ResponsiveSizeProps,\n  Sizes,\n  CSSColor,\n  Color,\n  ThemePreset,\n  ColorPaletteKey,\n} from 'shared/interfaces'\n\nconst injectThemeColors = (\n  colors: Partial<Record<ColorPaletteKey, Color>> = {},\n  theme: DefaultTheme\n): Partial<Record<ColorPaletteKey, CSSColor>> =>\n  Object.keys(colors).reduce((resultColors, colorKey) => {\n    const color = colors[colorKey]\n    resultColors[colorKey] = theme.colors[color] ?? color\n    return resultColors\n  }, {} as Record<ColorPaletteKey, CSSColor>)\n\nexport const withMergedProps = <\n  T extends ResponsiveSizeProps & ColorPaletteProps & BaseProps,\n  P extends HTMLElement = HTMLElement\n>(\n  Component: React.FC<\n    Omit<T, 'sizes' | 'preset' | 'palette'> & {\n      sizes: Sizes\n      preset: ThemePreset\n      palette: Partial<Record<ColorPaletteKey, CSSColor>>\n    } & React.RefAttributes<P>\n  >,\n  options: {\n    displayName: string\n    sizes: Sizes | ((props: Omit<T, 'sizes' | 'preset'> & { preset: ThemePreset }) => Sizes)\n  }\n) => {\n  const WithMergedProps = forwardRef<P, T>((props, ref) => {\n    const theme = useTheme()\n\n    const forwardProps = mergeDeepLeft(props, theme.components?.[options.displayName] ?? {}) as T\n    const preset = forwardProps.preset ?? theme.preset\n    const componentSizes =\n      typeof options.sizes === 'function' ? options.sizes({ ...forwardProps, preset }) : options.sizes\n    const sizes = (forwardProps.sizes ? mergeDeepLeft(forwardProps.sizes, componentSizes) : componentSizes) as Sizes\n    const palette = forwardProps.palette ? injectThemeColors(forwardProps.palette, theme) : {}\n\n    Component.displayName = options.displayName\n\n    return <Component {...forwardProps} preset={preset} sizes={sizes} palette={palette} ref={ref} />\n  })\n\n  WithMergedProps.displayName = `WithMergedProps${options.displayName}`\n  return WithMergedProps\n}\n"],"names":["withMergedProps","Component","options","WithMergedProps","forwardRef","props","ref","_theme$components$opt","_theme$components","_forwardProps$preset","theme","useTheme","forwardProps","mergeDeepLeft","components","displayName","preset","componentSizes","sizes","palette","e","r","colors","arguments","length","undefined","Object","keys","reduce","resultColors","colorKey","_theme$colors$color","color","_jsx","_objectSpread"],"mappings":"sNAyBaA,EAAkB,CAI7BC,EAOAC,KAKA,IAAMC,EAAkBC,IAAkBC,EAAOC,KAAQ,IAAAC,EAAAC,EAAAC,EACvD,IAAMC,EAAQC,IAEd,IAAMC,EAAeC,EAAcR,EAAD,UAAA,UAAQK,EAAMI,kBAAd,IAAAN,SAAQA,EAAmBN,EAAQa,oBAAAA,IAAnCR,EAAAA,EAAmD,IACrF,IAAMS,EAAgCN,UAAvBE,EAAaI,cAAAA,IAAUN,EAAAA,EAAAA,EAAMM,OAC5C,IAAMC,EACqB,mBAAlBf,EAAQgB,MAAuBhB,EAAQgB,aAAWN,GAAnB,GAAA,CAAiCI,OAAAA,KAAYd,EAAQgB,MAC7F,IAAMA,EAASN,EAAaM,MAAQL,EAAcD,EAAaM,MAAOD,GAAkBA,EACxF,IAAME,EAAUP,EAAaO,QAlCP,SAAAC,EAAAC,GAAA,IACxBC,+BADwBF,EAAAA,EAC0B,GAD1B,IAExBV,EAFwBa,UAAAC,OAAA,EAAAH,OAAAI,EAAA,OAIxBC,OAAOC,KAAKL,GAAQM,QAAO,CAACC,EAAcC,KAAa,IAAAC,EACrD,IAAMC,EAAQV,EAAOQ,GAErB,OADAD,EAAaC,GAAb,QAAyBpB,EAAAA,EAAMY,OAAOU,UAAAA,IAAtCD,EAAAA,EAAgDC,EACzCH,IACN,IARqB,CAkCmCjB,EAAaO,QAAST,GAAS,GAIxF,OAFAT,EAAUc,YAAcb,EAAQa,YAEzBkB,EAAChC,EAADiC,EAAAA,EAAA,GAAetB,GAAf,GAAA,CAA6BI,OAAQA,EAAQE,MAAOA,EAAOC,QAASA,EAASb,IAAKA,QAI3F,OADAH,EAAgBY,YAAgCb,kBAAAA,OAAAA,EAAQa,aACjDZ"}