@foxford/ui 2.0.0-beta-d2ba84e-20220706 → 2.0.0-beta-38ffcd6-20220707

package/dts/index.d.ts

@@ -14,116 +14,6 @@ import Floater from 'react-floater';
 import { InputState, MaskOptions } from 'react-input-mask';
 import { ReactSelectProps } from 'react-select';
 
-declare type ColorPropsProperties = 'color' | 'fontColor' | `${string}Color` | `color${string}`;
-declare type ColorValue = keyof typeof ColorNames | RGB | RGBA | HEX;
-declare type ColorCalcProperty = (_color: ColorValue) => FlattenSimpleInterpolation | null;
-declare type ColorCssProperty = string | ColorCalcProperty;
-declare type Color<T extends ColorPropsProperties = 'color'> = {
-    [key in `${T}`]?: RGB | RGBA | HEX | keyof typeof ColorNames;
-};
-declare const color: (color?: ColorValue, cssProperty?: ColorCssProperty) => () => (props: {
-    theme: DefaultTheme;
-}) => FlattenSimpleInterpolation | null;
-
-declare enum SizeLatin {
-    xxxl = "xxxl",
-    xxl = "xxl",
-    xl = "xl",
-    l = "l",
-    m = "m",
-    s = "s",
-    xs = "xs",
-    xxs = "xxs",
-    xxxs = "xxxs"
-}
-
-/**
- * Value for breakpoint
- */
-declare type PossibleValues = number | keyof typeof SizeLatin | '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, _sizing?: string) => FlattenSimpleInterpolation | null;
-declare type CssProperty = string | CalcProperty;
-declare type ResponsiveKeys = '' | 'XS' | 'S' | 'M' | 'L' | 'XL';
-declare type ResponsiveProperty<T extends PropsProperties, V extends PossibleValues = PossibleValues> = {
-    [key in `${T}${ResponsiveKeys}`]?: V;
-};
-declare const property: (value: PossibleValues, cssProperty?: CssProperty, sizing?: string) => () => () => FlattenSimpleInterpolation | null;
-interface ResponsivePropertyPayload<T extends PropsProperties> {
-    sizes: ResponsiveProperty<T>;
-    cssProperty: CssProperty;
-    sizing?: 'px' | 'rem' | 'em' | '%';
-    customSizeHandler?: (_value: PossibleValues) => PossibleValues;
-    sort?: (_a: string, _b: string) => number;
-}
-/**
- * Миксин для генерации media запросов
- *
- * @param obj.sizes Объект, в качестве ключей брэйкпоинт, в качестве значений - величина
- * @param obj.cssProperty CSS свойство, может быть функцией, возвращающей css`` из styled-components
- * @param obj.sizing значение величины, по умолчанию `px`
- * @param obj.customSizeHandler функция для вычисления кастомных значений величин
- * @returns строки медиазапросов
- */
-declare const responsiveProperty: <T extends PropsProperties>({ sizes, cssProperty, sizing, customSizeHandler, sort, }: ResponsivePropertyPayload<T>) => () => () => styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>[];
-
-declare type HEX = `#${string}`;
-declare type RGB = `rgb(${number}, ${number}, ${number})`;
-declare type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
-interface Tooltiped {
-    innerRef?: React.LegacyRef<HTMLElement>;
-    onMouseEnter?: () => void;
-    onMouseLeave?: () => void;
-}
-interface BaseProps {
-    /**
-     * CSS classname
-     */
-    className?: string;
-    /**
-     * Style object
-     */
-    style?: React.CSSProperties;
-}
-interface InputField extends Color, Color<'placeholderColor'>, ResponsiveProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number> {
-    /**
-     * Is disabled field
-     */
-    disabled?: boolean;
-    /**
-     * Has error
-     */
-    error?: boolean;
-    /**
-     * Tab index
-     */
-    tabIndex?: number;
-    /**
-     * Take on the size of it's container.
-     */
-    fluid?: boolean;
-    /**
-     * Children react node
-     */
-    children?: React.ReactNode;
-    /**
-     * 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 enum ColorNames {
     facebook = "facebook",
     twitter = "twitter",
@@ -304,6 +194,141 @@ interface Props {
 }
 declare function ThemeProvider(props: Props): JSX.Element;
 
+declare const theme: Theme;
+
+declare type ColorPropsProperties = 'color' | 'fontColor' | `${string}Color` | `color${string}`;
+declare type ColorValue = keyof typeof ColorNames | RGB | RGBA | HEX;
+declare type ColorCalcProperty = (_color: ColorValue) => FlattenSimpleInterpolation | null;
+declare type ColorCssProperty = string | ColorCalcProperty;
+declare type Color<T extends ColorPropsProperties = 'color'> = {
+    [key in `${T}`]?: RGB | RGBA | HEX | keyof typeof ColorNames;
+};
+declare const color: (color?: ColorValue, cssProperty?: ColorCssProperty) => () => (props: {
+    theme: DefaultTheme;
+}) => FlattenSimpleInterpolation | null;
+
+declare enum SizeLatin {
+    xxxl = "xxxl",
+    xxl = "xxl",
+    xl = "xl",
+    l = "l",
+    m = "m",
+    s = "s",
+    xs = "xs",
+    xxs = "xxs",
+    xxxs = "xxxs"
+}
+
+/**
+ * Value for breakpoint
+ */
+declare type PossibleValues = number | keyof typeof SizeLatin | '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, _sizing?: 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 | string | keyof typeof SizeLatin> = 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?: string) => () => () => FlattenSimpleInterpolation | null;
+/**
+ * Sort keys as desktop first
+ * @param a key a
+ * @param b key b
+ * @returns number
+ */
+declare const desktopFirst: (a: string, b: string) => number;
+/**
+ * Sort keys as mobile first
+ * @param a key a
+ * @param b key b
+ * @returns number
+ */
+declare const mobileFirst: (a: string, b: string) => number;
+interface ResponsiveNamedPropertyPayload<T extends PropsProperties> {
+    sizes: ResponsiveNamedProperty<T>;
+    cssProperty: CssProperty;
+    sizing?: 'px' | 'rem' | 'em' | '%';
+    customSizeHandler?: (_value: PossibleValues) => PossibleValues;
+    sort?: (_a: string, _b: string) => 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, cssProperty, sizing, customSizeHandler, sort, }: ResponsiveNamedPropertyPayload<T>) => () => () => styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>[];
+/**
+ * Миксин для генерации media запросов
+ *
+ * @param property имя пропсы
+ * @param cssProperty имя css свойства
+ * @param sizing значение величины, по умолчанию `px`
+ * @returns строки медиазапросов
+ */
+declare const responsiveProperty: (property: string, cssProperty?: string | null, sizing?: string) => () => (props: any) => styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>> | null;
+
+declare type HEX = `#${string}`;
+declare type RGB = `rgb(${number}, ${number}, ${number})`;
+declare type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
+interface Tooltiped {
+    innerRef?: React.LegacyRef<HTMLElement>;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}
+interface BaseProps {
+    /**
+     * CSS classname
+     */
+    className?: string;
+    /**
+     * Style object
+     */
+    style?: React.CSSProperties;
+}
+interface InputField extends Color, Color<'placeholderColor'>, ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number> {
+    /**
+     * Is disabled field
+     */
+    disabled?: boolean;
+    /**
+     * Has error
+     */
+    error?: boolean;
+    /**
+     * Tab index
+     */
+    tabIndex?: number;
+    /**
+     * Take on the size of it's container.
+     */
+    fluid?: boolean;
+    /**
+     * Children react node
+     */
+    children?: React.ReactNode;
+    /**
+     * 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;
+}
 interface Theme {
     breakpoints: Readonly<{
         xl: number;
@@ -325,7 +350,6 @@ interface Theme {
     };
     classNamePrefix: string;
 }
-declare const theme: Theme;
 
 declare type StyledComponentProps = {
     theme?: {
@@ -497,7 +521,7 @@ declare enum IconNames {
 declare type Icon$1 = React.FC<React.SVGProps<SVGSVGElement>> | (() => JSX.Element);
 declare const defaultIcons: Record<IconNames, Icon$1>;
 
-interface IconProps extends BaseProps, Color, VAlign, ResponsiveProperty<'size'> {
+interface IconProps extends BaseProps, Color, VAlign, ResponsiveNamedProperty<'size'> {
     /**
      * Children react node
      */
@@ -525,7 +549,7 @@ interface IconProps extends BaseProps, Color, VAlign, ResponsiveProperty<'size'>
  * - [`VAlign`](#/Миксины)
  * - [`Color`](#/Миксины)
  * - [`Color<'fontColor'>`](#/Миксины)
- * - [`ResponsiveProperty<'size'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
  */
 declare function Icon(props: IconProps): JSX.Element;
 declare namespace Icon {
@@ -672,7 +696,7 @@ declare enum CurrencyCodes {
 }
 declare const CURRENCY_MAP: Readonly<Record<CurrencyCodes, string>>;
 
-interface AmountProps extends BaseProps, Color, ResponsiveProperty<'size'>, Display {
+interface AmountProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {
     /**
      * Value for amount
      */
@@ -710,7 +734,7 @@ interface AmountProps extends BaseProps, Color, ResponsiveProperty<'size'>, Disp
  * Расширен:
  * - [`BaseProps`](#/Миксины)
  * - [`Color`](#/Миксины)
- * - [`ResponsiveProperty<'size'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
  */
 declare class Amount extends PureComponent<AmountProps> {
     static displayName: string;
@@ -728,7 +752,7 @@ declare class Amount extends PureComponent<AmountProps> {
     render(): JSX.Element;
 }
 
-interface AnchorProps extends BaseProps, Color, ResponsiveProperty<'size'>, Display {
+interface AnchorProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {
     /**
      * Custom CSS class name
      */
@@ -775,7 +799,7 @@ interface AnchorProps extends BaseProps, Color, ResponsiveProperty<'size'>, Disp
  * Расширен:
  * - [`BaseProps`](#/Миксины)
  * - [`Color`](#/Миксины)
- * - [`ResponsiveProperty<'size'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
  * - [`Display`](#/Миксины)
  */
 declare function Anchor(props: typeof Anchor.defaultProps & AnchorProps): JSX.Element;
@@ -913,7 +937,7 @@ interface TextEllipseState {
  * - [`BaseProps`](#/Миксины)
  * - [`Color`](#/Миксины)
  * - [`Display`](#/Миксины)
- * - [`ResponsiveProperty<'size'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
  */
 declare class TextEllipse extends Component<TextEllipseProps, TextEllipseState> {
     static displayName: string;
@@ -924,7 +948,7 @@ declare class TextEllipse extends Component<TextEllipseProps, TextEllipseState>
     render(): JSX.Element;
 }
 
-interface TextProps extends BaseProps, Color, ResponsiveProperty<'size'>, Display {
+interface TextProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {
     /**
      * An element type to render as (string).
      */
@@ -970,7 +994,7 @@ interface TextProps extends BaseProps, Color, ResponsiveProperty<'size'>, Displa
  * - [`BaseProps`](#/Миксины)
  * - [`Color`](#/Миксины)
  * - [`Display`](#/Миксины)
- * - [`ResponsiveProperty<'size'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
  */
 declare function Text(props: TextProps): JSX.Element;
 declare namespace Text {
@@ -1000,7 +1024,7 @@ declare namespace Badge {
     var displayName: string;
 }
 
-interface ButtonProps extends BaseProps, Tooltiped, Display, Color, Color<'fontColor'>, ResponsiveProperty<'padding'>, ResponsiveProperty<'paddingTop'>, ResponsiveProperty<'paddingRight'>, ResponsiveProperty<'paddingBottom'>, ResponsiveProperty<'paddingLeft'>, ResponsiveProperty<'margin'>, ResponsiveProperty<'marginTop'>, ResponsiveProperty<'marginRight'>, ResponsiveProperty<'marginBottom'>, ResponsiveProperty<'marginLeft'>, ResponsiveProperty<'fontSize'>, ResponsiveProperty<'fluid', boolean>, ResponsiveProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>, ResponsiveProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {
+interface ButtonProps extends BaseProps, Tooltiped, Display, Color, Color<'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> {
     /**
      * Node type
      */
@@ -1080,20 +1104,20 @@ interface ButtonProps extends BaseProps, Tooltiped, Display, Color, Color<'fontC
  * - [`Tooltiped`](#/Миксины)
  * - [`Color`](#/Миксины)
  * - [`Color<'fontColor'>`](#/Миксины)
- * - [`ResponsiveProperty<'padding'>`](#/Миксины)
- * - [`ResponsiveProperty<'paddingTop'>`](#/Миксины)
- * - [`ResponsiveProperty<'paddingRight'>`](#/Миксины)
- * - [`ResponsiveProperty<'paddingBottom'>`](#/Миксины)
- * - [`ResponsiveProperty<'paddingLeft'>`](#/Миксины)
- * - [`ResponsiveProperty<'margin'>`](#/Миксины)
- * - [`ResponsiveProperty<'marginTop'>`](#/Миксины)
- * - [`ResponsiveProperty<'marginRight'>`](#/Миксины)
- * - [`ResponsiveProperty<'marginBottom'>`](#/Миксины)
- * - [`ResponsiveProperty<'marginLeft'>`](#/Миксины)
- * - [`ResponsiveProperty<'fontSize'>`](#/Миксины)
- * - [`ResponsiveProperty<'fluid', boolean>`](#/Миксины)
- * - [`ResponsiveProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)
- * - [`ResponsiveProperty<'height', 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)
+ * - [`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>`](#/Миксины)
  */
 declare function Button(props: ButtonProps): JSX.Element;
 declare namespace Button {
@@ -1140,7 +1164,7 @@ interface ModalCloseProps {
 }
 declare function ModalClose({ className, onClick }: ModalCloseProps): JSX.Element;
 
-interface ModalProps extends BaseProps, ResponsiveProperty<'width'> {
+interface ModalProps extends BaseProps, ResponsiveNamedProperty<'width'> {
     /**
      * Primary content.
      */
@@ -1198,7 +1222,7 @@ interface ModalProps extends BaseProps, ResponsiveProperty<'width'> {
  *
  * Расширен:
  * - [`BaseProps`](#/Миксины)
- * - [`ResponsiveProperty<'width'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'width'>`](#/Миксины)
  */
 declare function Modal(props: ModalProps): JSX.Element;
 declare namespace Modal {
@@ -1217,7 +1241,7 @@ declare namespace Modal {
     var displayName: string;
 }
 
-interface PaperProps extends BaseProps, Display, Color, ResponsiveProperty<'padding'> {
+interface PaperProps extends BaseProps, Display, Color, ResponsiveNamedProperty<'padding'> {
     /**
      * Paper content
      */
@@ -1251,7 +1275,7 @@ interface PaperProps extends BaseProps, Display, Color, ResponsiveProperty<'padd
  * - [`BaseProps`](#/Миксины)
  * - [`Display`](#/Миксины)
  * - [`Color`](#/Миксины)
- * - [`ResponsiveProperty<'padding'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'padding'>`](#/Миксины)
  */
 declare function Paper({ padding, rounded, shadow, className, ...props }: PaperProps): JSX.Element;
 declare namespace Paper {
@@ -1607,7 +1631,7 @@ declare const withThemeScrollable: react.ForwardRefExoticComponent<{
     theme?: DefaultTheme | undefined;
 }>;
 
-interface SectionProps extends BaseProps, Display, Color, ResponsiveProperty<'padding'> {
+interface SectionProps extends BaseProps, Display, Color, ResponsiveNamedProperty<'padding'> {
     /**
      * Paper with shadow
      */
@@ -1633,7 +1657,7 @@ interface SectionProps extends BaseProps, Display, Color, ResponsiveProperty<'pa
  * - [`BaseProps`](#/Миксины)
  * - [`Color`](#/Миксины)
  * - [`Display`](#/Миксины)
- * - [`ResponsiveProperty<'padding'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'padding'>`](#/Миксины)
  */
 declare function Section(props: SectionProps): JSX.Element;
 declare namespace Section {
@@ -1648,7 +1672,7 @@ interface SeparatorTextProps extends BaseProps, Color {
 }
 declare function SeparatorText({ children, className, color, ...restProps }: SeparatorTextProps): JSX.Element;
 
-interface SeparatorProps extends BaseProps, Color, ResponsiveProperty<'top'>, ResponsiveProperty<'right'>, ResponsiveProperty<'bottom'>, ResponsiveProperty<'left'>, ResponsiveProperty<'padding'>, ResponsiveProperty<'paddingTop'>, ResponsiveProperty<'paddingRight'>, ResponsiveProperty<'paddingBottom'>, ResponsiveProperty<'paddingLeft'>, ResponsiveProperty<'margin'>, ResponsiveProperty<'marginTop'>, ResponsiveProperty<'marginRight'>, ResponsiveProperty<'marginBottom'>, ResponsiveProperty<'marginLeft'> {
+interface SeparatorProps extends BaseProps, Color, ResponsiveNamedProperty<'top'>, ResponsiveNamedProperty<'right'>, ResponsiveNamedProperty<'bottom'>, ResponsiveNamedProperty<'left'>, ResponsiveNamedProperty<'padding'>, ResponsiveNamedProperty<'paddingTop'>, ResponsiveNamedProperty<'paddingRight'>, ResponsiveNamedProperty<'paddingBottom'>, ResponsiveNamedProperty<'paddingLeft'>, ResponsiveNamedProperty<'margin'>, ResponsiveNamedProperty<'marginTop'>, ResponsiveNamedProperty<'marginRight'>, ResponsiveNamedProperty<'marginBottom'>, ResponsiveNamedProperty<'marginLeft'> {
     /**
      * Separator weight
      */
@@ -1659,20 +1683,20 @@ interface SeparatorProps extends BaseProps, Color, ResponsiveProperty<'top'>, Re
  * - [`BaseProps`](#/Миксины)
  * - [`Color`](#/Миксины)
  * - [`Color<'fontColor'>`](#/Миксины)
- * - [`ResponsiveProperty<'top'>`](#/Миксины)
- * - [`ResponsiveProperty<'right'>`](#/Миксины)
- * - [`ResponsiveProperty<'bottom'>`](#/Миксины)
- * - [`ResponsiveProperty<'left'>`](#/Миксины)
- * - [`ResponsiveProperty<'padding'>`](#/Миксины)
- * - [`ResponsiveProperty<'paddingTop'>`](#/Миксины)
- * - [`ResponsiveProperty<'paddingRight'>`](#/Миксины)
- * - [`ResponsiveProperty<'paddingBottom'>`](#/Миксины)
- * - [`ResponsiveProperty<'paddingLeft'>`](#/Миксины)
- * - [`ResponsiveProperty<'margin'>`](#/Миксины)
- * - [`ResponsiveProperty<'marginTop'>`](#/Миксины)
- * - [`ResponsiveProperty<'marginRight'>`](#/Миксины)
- * - [`ResponsiveProperty<'marginBottom'>`](#/Миксины)
- * - [`ResponsiveProperty<'marginLeft'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'top'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'right'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'bottom'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'left'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'padding'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'paddingTop'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'paddingRight'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'paddingBottom'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'paddingLeft'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'margin'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'marginTop'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'marginRight'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'marginBottom'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'marginLeft'>`](#/Миксины)
  */
 declare function Separator(props: typeof Separator.defaultProps & SeparatorProps): JSX.Element;
 declare namespace Separator {
@@ -1685,7 +1709,7 @@ declare namespace Separator {
     var displayName: string;
 }
 
-interface SpacerProps extends BaseProps, Display, ResponsiveProperty<'top'>, ResponsiveProperty<'right'>, ResponsiveProperty<'bottom'>, ResponsiveProperty<'left'>, ResponsiveProperty<'padding'>, ResponsiveProperty<'paddingTop'>, ResponsiveProperty<'paddingRight'>, ResponsiveProperty<'paddingBottom'>, ResponsiveProperty<'paddingLeft'>, ResponsiveProperty<'margin'>, ResponsiveProperty<'marginTop'>, ResponsiveProperty<'marginRight'>, ResponsiveProperty<'marginBottom'>, ResponsiveProperty<'marginLeft'> {
+interface SpacerProps extends BaseProps, Display, ResponsiveNamedProperty<'top'>, ResponsiveNamedProperty<'right'>, ResponsiveNamedProperty<'bottom'>, ResponsiveNamedProperty<'left'>, ResponsiveNamedProperty<'padding'>, ResponsiveNamedProperty<'paddingTop'>, ResponsiveNamedProperty<'paddingRight'>, ResponsiveNamedProperty<'paddingBottom'>, ResponsiveNamedProperty<'paddingLeft'>, ResponsiveNamedProperty<'margin'>, ResponsiveNamedProperty<'marginTop'>, ResponsiveNamedProperty<'marginRight'>, ResponsiveNamedProperty<'marginBottom'>, ResponsiveNamedProperty<'marginLeft'> {
     /**
      * Primary content
      */
@@ -1698,27 +1722,27 @@ interface SpacerProps extends BaseProps, Display, ResponsiveProperty<'top'>, Res
  * Расширен:
  * - [`BaseProps`](#/Миксины)
  * - [`Display`](#/Миксины)
- * - [`ResponsiveProperty<'top'>`](#/Миксины)
- * - [`ResponsiveProperty<'right'>`](#/Миксины)
- * - [`ResponsiveProperty<'bottom'>`](#/Миксины)
- * - [`ResponsiveProperty<'left'>`](#/Миксины)
- * - [`ResponsiveProperty<'padding'>`](#/Миксины)
- * - [`ResponsiveProperty<'paddingTop'>`](#/Миксины)
- * - [`ResponsiveProperty<'paddingRight'>`](#/Миксины)
- * - [`ResponsiveProperty<'paddingBottom'>`](#/Миксины)
- * - [`ResponsiveProperty<'paddingLeft'>`](#/Миксины)
- * - [`ResponsiveProperty<'margin'>`](#/Миксины)
- * - [`ResponsiveProperty<'marginTop'>`](#/Миксины)
- * - [`ResponsiveProperty<'marginRight'>`](#/Миксины)
- * - [`ResponsiveProperty<'marginBottom'>`](#/Миксины)
- * - [`ResponsiveProperty<'marginLeft'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'top'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'right'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'bottom'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'left'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'padding'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'paddingTop'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'paddingRight'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'paddingBottom'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'paddingLeft'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'margin'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'marginTop'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'marginRight'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'marginBottom'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'marginLeft'>`](#/Миксины)
  */
 declare function Spacer(props: SpacerProps): JSX.Element;
 declare namespace Spacer {
     var displayName: string;
 }
 
-interface SpinnerProps extends BaseProps, ResponsiveProperty<'size'> {
+interface SpinnerProps extends BaseProps, ResponsiveNamedProperty<'size'> {
     /**
      * Size of spinner
      */
@@ -1735,7 +1759,7 @@ interface SpinnerProps extends BaseProps, ResponsiveProperty<'size'> {
 /**
  * Расширен:
  * - [`BaseProps`](#/Миксины)
- * - [`ResponsiveProperty<'size'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
  */
 declare function Spinner({ className, ...props }: typeof Spinner.defaultProps & SpinnerProps): JSX.Element;
 declare namespace Spinner {
@@ -1820,8 +1844,8 @@ interface TabProps extends Color, Color<'borderColor'> {
     theme?: 'compact' | 'crispy' | 'crispyCompact';
     className?: string;
 }
-declare function Tab(props: TabProps): JSX.Element;
-declare namespace Tab {
+declare function TabsTab(props: TabProps): JSX.Element;
+declare namespace TabsTab {
     var defaultProps: {
         as: string;
         activeClassName: string;
@@ -1842,6 +1866,7 @@ interface TabsProps extends BaseProps, Color, Color<'borderColor'> {
     classNameInner?: string;
     classNameContent?: string;
     noBorder?: boolean;
+    width?: ResponsiveProperty<number>;
 }
 /**
  * Расширен:
@@ -1855,7 +1880,7 @@ declare namespace Tabs {
         borderColor: string;
         color: string;
     };
-    var Tab: typeof Tab;
+    var Tab: typeof TabsTab;
 }
 
 declare type FloaterProps = Parameters<typeof Floater>[0];
@@ -1890,7 +1915,7 @@ declare namespace Tooltip {
     var displayName: string;
 }
 
-interface TagProps extends BaseProps, Display, Color, ResponsiveProperty<'height'>, ResponsiveProperty<'width'> {
+interface TagProps extends BaseProps, Display, Color, ResponsiveNamedProperty<'height'>, ResponsiveNamedProperty<'width'> {
     as?: 'button' | 'div' | 'input' | 'label';
     /**
      * Field id
@@ -1958,8 +1983,8 @@ declare namespace TagInput {
  * - [`BaseProps`](#/Миксины)
  * - [`Display`](#/Миксины)
  * - [`Color`](#/Миксины)
- * - [`ResponsiveProperty<'width'>`](#/Миксины)
- * - [`ResponsiveProperty<'height'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'width'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'height'>`](#/Миксины)
  */
 declare function Tag(props: typeof Tag.defaultProps & TagProps): JSX.Element;
 declare namespace Tag {
@@ -2507,4 +2532,4 @@ declare namespace Select {
     var displayName: string;
 }
 
-export { ActionBtn, Amount, Anchor, Arrow, Avatar, Badge, Button, COUNTRY_DATA, CURRENCY_MAP, Checkbox, ColorNames, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, INITIAL_MASK, Icon, Input, Modal, Paper, Progress, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Spacer, Spinner, Switcher, Tabs, Tag, Text, Textarea, ThemeProvider, Tooltip, baseInputStyle, buildMediaQuery, color, defaultIcons, property, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, theme, vAlign };
+export { ActionBtn, Amount, Anchor, Arrow, Avatar, Badge, BaseProps, Button, COUNTRY_DATA, CURRENCY_MAP, Checkbox, ColorNames, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, HEX, INITIAL_MASK, Icon, Input, InputField, Modal, Paper, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Spacer, Spinner, Switcher, Tabs, Tag, Text, Textarea, Theme, ThemeProvider, Tooltip, Tooltiped, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, mobileFirst, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, theme, vAlign };

package/hooks/useClassname.js

@@ -0,0 +1,2 @@
+import e from'clsx';import{useTheme as s}from'styled-components';function o(o,a){var r=s();return e("".concat(r.classNamePrefix,"-").concat(o),a)}export{o as useClassname};
+//# sourceMappingURL=useClassname.js.map

package/hooks/useClassname.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClassname.js","sources":["../../../src/hooks/useClassname.ts"],"sourcesContent":["import cx from 'clsx'\nimport { useTheme } from 'styled-components'\n\nexport function useClassname(componentName: string, originalClassName: string | undefined) {\n  const theme = useTheme()\n  return cx(`${theme.classNamePrefix}-${componentName}`, originalClassName)\n}\n"],"names":["useClassname","componentName","originalClassName","theme","useTheme","cx","classNamePrefix"],"mappings":"iEAGO,SAASA,EAAaC,EAAuBC,GAClD,IAAMC,EAAQC,IACd,OAAOC,YAAMF,EAAMG,gBAAmBL,KAAAA,OAAAA,GAAiBC"}