@foxford/ui 2.8.0-beta-aad81f2-20230829 → 2.8.0-beta-d4f31ed-20230905

package/dts/index.d.ts

@@ -1,17 +1,9 @@
 /// <reference types="react" />
 import * as styled_components from 'styled-components';
 import { DefaultTheme, FlattenSimpleInterpolation, CSSObject, SimpleInterpolation, css } from 'styled-components';
-import * as react from 'react';
-import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
-import { ResponsiveNamedProperty as ResponsiveNamedProperty$1, ResponsiveProperty as ResponsiveProperty$1 } from 'mixins/responsive-property';
-import { BaseProps as BaseProps$1, Nullable as Nullable$1, FontWeight as FontWeight$1, InputField as InputField$1 } from 'shared/interfaces';
-import { SizeLatin as SizeLatin$1 } from 'shared/enums/sizeLatin';
 import { Link, NavLink } from 'react-router-dom';
-import { Display as Display$1 } from 'mixins/display';
-import { Color as Color$1 } from 'mixins/color';
-import { Anchor as Anchor$1 } from 'components/Anchor';
-import { TextHeadingProps } from 'components/Text.Heading';
-import { TextEllipse } from 'components/Text.Ellipse';
+import * as react from 'react';
+import { Component, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
 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';
@@ -22,72 +14,7 @@ import Floater from 'react-floater';
 import { InputState, MaskOptions } from 'react-input-mask';
 import { ReactSelectProps } from 'react-select';
 
-interface ThemeProviderProps {
-    theme: Partial<DefaultTheme> | ((topLevelTheme: DefaultTheme) => DefaultTheme);
-    children: React.ReactNode;
-}
-declare function ThemeProvider(props: ThemeProviderProps): JSX.Element;
-
-declare const defaultTheme: DefaultTheme;
-declare const motherLightTheme: DefaultTheme;
-declare const motherDarkTheme: DefaultTheme;
-declare const babyLightTheme: DefaultTheme;
-declare const babyDarkTheme: DefaultTheme;
-declare const teenLightTheme: DefaultTheme;
-declare const teenDarkTheme: DefaultTheme;
-declare const adultLightTheme: DefaultTheme;
-declare const adultDarkTheme: DefaultTheme;
-
-declare enum ColorNames {
-    facebook = "facebook",
-    twitter = "twitter",
-    youtube = "youtube",
-    instagrammagenta = "instagrammagenta",
-    instagramblue = "instagramblue",
-    instagrampurple = "instagrampurple",
-    instagramorange = "instagramorange",
-    instagramyellow = "instagramyellow",
-    pinterest = "pinterest",
-    googleplus = "googleplus",
-    linkedin = "linkedin",
-    vimeoblue = "vimeoblue",
-    vimeogreen = "vimeogreen",
-    vimeoorange = "vimeoorange",
-    vimeopink = "vimeopink",
-    tumblr = "tumblr",
-    snapchat = "snapchat",
-    whatsappgreen = "whatsappgreen",
-    whatsappteal1 = "whatsappteal1",
-    whatsappteal2 = "whatsappteal2",
-    foursquarepink = "foursquarepink",
-    foursquareblue = "foursquareblue",
-    swarm = "swarm",
-    skypeblue = "skypeblue",
-    skypegreen = "skypegreen",
-    android = "android",
-    stumbleupon = "stumbleupon",
-    flickrpink = "flickrpink",
-    flickrblue = "flickrblue",
-    yahoo = "yahoo",
-    soundcloud = "soundcloud",
-    spotifygreen = "spotifygreen",
-    spotifydarkgreen = "spotifydarkgreen",
-    dribbble = "dribbble",
-    reddit = "reddit",
-    deviantart = "deviantart",
-    pocket = "pocket",
-    quora = "quora",
-    quorablue = "quorablue",
-    slideshareorange = "slideshareorange",
-    slideshareblue = "slideshareblue",
-    telegram = "telegram",
-    fivehundredpx = "fivehundredpx",
-    listlyorange = "listlyorange",
-    listlyblue = "listlyblue",
-    vine = "vine",
-    vk = "vk",
-    ok = "ok",
-    mailru = "mailru",
+declare enum DefaultColorNames {
     white = "white",
     black = "black",
     tundora = "tundora",
@@ -158,6 +85,138 @@ declare enum ColorNames {
     baliHai = "baliHai",
     primary = "primary",
     accent = "accent",
+    transparent = "transparent"
+}
+declare enum BaseColorNames {
+    'content-onmain-primary' = "content-onmain-primary",
+    'content-onmain-secondary' = "content-onmain-secondary",
+    'content-onmain-tertiary' = "content-onmain-tertiary",
+    'content-oncolor-primary' = "content-oncolor-primary",
+    'content-oncolor-secondary' = "content-oncolor-secondary",
+    'content-oncolor-tertiary' = "content-oncolor-tertiary",
+    'content-oncolor-inverse' = "content-oncolor-inverse",
+    'content-oncolor-constant' = "content-oncolor-constant",
+    'content-disabled' = "content-disabled",
+    'content-oncolor-disabled' = "content-oncolor-disabled",
+    'content-oncolor-hover' = "content-oncolor-hover",
+    'content-onmain-hover' = "content-onmain-hover",
+    'content-discount' = "content-discount",
+    'content-link' = "content-link",
+    'border-onmain-default-large' = "border-onmain-default-large",
+    'border-onmain-default-small' = "border-onmain-default-small",
+    'border-onmain-contrast' = "border-onmain-contrast",
+    'border-disabled' = "border-disabled",
+    'border-oncolor-disabled' = "border-oncolor-disabled",
+    'border-oncolor-default' = "border-oncolor-default",
+    'bg-onmain-main' = "bg-onmain-main",
+    'bg-onmain-primary' = "bg-onmain-primary",
+    'bg-onmain-secondary' = "bg-onmain-secondary",
+    'bg-onmain-tertiary' = "bg-onmain-tertiary",
+    'bg-onmain-divider' = "bg-onmain-divider",
+    'bg-onmain-contrast' = "bg-onmain-contrast",
+    'bg-onmain-inverse' = "bg-onmain-inverse",
+    'bg-oncolor-primary' = "bg-oncolor-primary",
+    'bg-oncolor-secondary' = "bg-oncolor-secondary",
+    'bg-oncolor-tertiary' = "bg-oncolor-tertiary",
+    'bg-oncolor-hover' = "bg-oncolor-hover",
+    'bg-disabled-large' = "bg-disabled-large",
+    'bg-disabled-small' = "bg-disabled-small",
+    'bg-disabled-active' = "bg-disabled-active",
+    'bg-oncolor-disabled' = "bg-oncolor-disabled",
+    'bg-contrast-active' = "bg-contrast-active",
+    'bg-oncontrast-hover' = "bg-oncontrast-hover",
+    'alert-bg-success-100' = "alert-bg-success-100",
+    'alert-bg-success-200' = "alert-bg-success-200",
+    'alert-bg-success-500' = "alert-bg-success-500",
+    'alert-bg-warning-100' = "alert-bg-warning-100",
+    'alert-bg-warning-200' = "alert-bg-warning-200",
+    'alert-bg-warning-500' = "alert-bg-warning-500",
+    'alert-bg-error-100' = "alert-bg-error-100",
+    'alert-bg-error-200' = "alert-bg-error-200",
+    'alert-bg-error-500' = "alert-bg-error-500",
+    'alert-success' = "alert-success",
+    'alert-warning' = "alert-warning",
+    'alert-error' = "alert-error"
+}
+declare enum BrandColorNames {
+    'content-brand-primary' = "content-brand-primary",
+    'content-brand-secondary' = "content-brand-secondary",
+    'border-brand-primary' = "border-brand-primary",
+    'border-brand-secondary' = "border-brand-secondary",
+    'border-brand-primary-hover' = "border-brand-primary-hover",
+    'border-brand-primary-active' = "border-brand-primary-active",
+    'bg-brand-primary-basic' = "bg-brand-primary-basic",
+    'bg-brand-primary-100' = "bg-brand-primary-100",
+    'bg-brand-primary-200' = "bg-brand-primary-200",
+    'bg-brand-primary-400' = "bg-brand-primary-400",
+    'bg-brand-primary-500' = "bg-brand-primary-500",
+    'bg-brand-secondary-basic' = "bg-brand-secondary-basic",
+    'bg-brand-secondary-100' = "bg-brand-secondary-100",
+    'bg-brand-secondary-200' = "bg-brand-secondary-200",
+    'bg-brand-secondary-400' = "bg-brand-secondary-400",
+    'bg-brand-secondary-500' = "bg-brand-secondary-500",
+    'bg-brand-tertiary-100' = "bg-brand-tertiary-100",
+    'bg-brand-tertiary-200' = "bg-brand-tertiary-200",
+    'bg-brand-quaternary-100' = "bg-brand-quaternary-100",
+    'bg-brand-quaternary-200' = "bg-brand-quaternary-200",
+    'bg-brand-quaternary-400' = "bg-brand-quaternary-400",
+    'bg-brand-quaternary-500' = "bg-brand-quaternary-500",
+    'bg-brand-primary-basic-active' = "bg-brand-primary-basic-active",
+    'bg-brand-primary-100-active' = "bg-brand-primary-100-active",
+    'bg-brand-primary-100-hover' = "bg-brand-primary-100-hover"
+}
+declare enum SocialColorNames {
+    facebook = "facebook",
+    twitter = "twitter",
+    youtube = "youtube",
+    instagrammagenta = "instagrammagenta",
+    instagramblue = "instagramblue",
+    instagrampurple = "instagrampurple",
+    instagramorange = "instagramorange",
+    instagramyellow = "instagramyellow",
+    pinterest = "pinterest",
+    googleplus = "googleplus",
+    linkedin = "linkedin",
+    vimeoblue = "vimeoblue",
+    vimeogreen = "vimeogreen",
+    vimeoorange = "vimeoorange",
+    vimeopink = "vimeopink",
+    tumblr = "tumblr",
+    snapchat = "snapchat",
+    whatsappgreen = "whatsappgreen",
+    whatsappteal1 = "whatsappteal1",
+    whatsappteal2 = "whatsappteal2",
+    foursquarepink = "foursquarepink",
+    foursquareblue = "foursquareblue",
+    swarm = "swarm",
+    skypeblue = "skypeblue",
+    skypegreen = "skypegreen",
+    android = "android",
+    stumbleupon = "stumbleupon",
+    flickrpink = "flickrpink",
+    flickrblue = "flickrblue",
+    yahoo = "yahoo",
+    soundcloud = "soundcloud",
+    spotifygreen = "spotifygreen",
+    spotifydarkgreen = "spotifydarkgreen",
+    dribbble = "dribbble",
+    reddit = "reddit",
+    deviantart = "deviantart",
+    pocket = "pocket",
+    quora = "quora",
+    quorablue = "quorablue",
+    slideshareorange = "slideshareorange",
+    slideshareblue = "slideshareblue",
+    telegram = "telegram",
+    fivehundredpx = "fivehundredpx",
+    listlyorange = "listlyorange",
+    listlyblue = "listlyblue",
+    vine = "vine",
+    vk = "vk",
+    ok = "ok",
+    mailru = "mailru"
+}
+declare enum UnitColorNames {
     profession = "profession",
     professionDark = "professionDark",
     camps = "camps",
@@ -209,18 +268,266 @@ declare enum ColorNames {
     grey = "grey",
     darkgrey = "darkgrey",
     lightgrey = "lightgrey",
-    superlightgrey = "superlightgrey",
-    transparent = "transparent"
-}
+    superlightgrey = "superlightgrey"
+}
+declare const ColorNames: {
+    'content-brand-primary': (typeof BrandColorNames)["content-brand-primary"];
+    'content-brand-secondary': (typeof BrandColorNames)["content-brand-secondary"];
+    'border-brand-primary': (typeof BrandColorNames)["border-brand-primary"];
+    'border-brand-secondary': (typeof BrandColorNames)["border-brand-secondary"];
+    'border-brand-primary-hover': (typeof BrandColorNames)["border-brand-primary-hover"];
+    'border-brand-primary-active': (typeof BrandColorNames)["border-brand-primary-active"];
+    'bg-brand-primary-basic': (typeof BrandColorNames)["bg-brand-primary-basic"];
+    'bg-brand-primary-100': (typeof BrandColorNames)["bg-brand-primary-100"];
+    'bg-brand-primary-200': (typeof BrandColorNames)["bg-brand-primary-200"];
+    'bg-brand-primary-400': (typeof BrandColorNames)["bg-brand-primary-400"];
+    'bg-brand-primary-500': (typeof BrandColorNames)["bg-brand-primary-500"];
+    'bg-brand-secondary-basic': (typeof BrandColorNames)["bg-brand-secondary-basic"];
+    'bg-brand-secondary-100': (typeof BrandColorNames)["bg-brand-secondary-100"];
+    'bg-brand-secondary-200': (typeof BrandColorNames)["bg-brand-secondary-200"];
+    'bg-brand-secondary-400': (typeof BrandColorNames)["bg-brand-secondary-400"];
+    'bg-brand-secondary-500': (typeof BrandColorNames)["bg-brand-secondary-500"];
+    'bg-brand-tertiary-100': (typeof BrandColorNames)["bg-brand-tertiary-100"];
+    'bg-brand-tertiary-200': (typeof BrandColorNames)["bg-brand-tertiary-200"];
+    'bg-brand-quaternary-100': (typeof BrandColorNames)["bg-brand-quaternary-100"];
+    'bg-brand-quaternary-200': (typeof BrandColorNames)["bg-brand-quaternary-200"];
+    'bg-brand-quaternary-400': (typeof BrandColorNames)["bg-brand-quaternary-400"];
+    'bg-brand-quaternary-500': (typeof BrandColorNames)["bg-brand-quaternary-500"];
+    'bg-brand-primary-basic-active': (typeof BrandColorNames)["bg-brand-primary-basic-active"];
+    'bg-brand-primary-100-active': (typeof BrandColorNames)["bg-brand-primary-100-active"];
+    'bg-brand-primary-100-hover': (typeof BrandColorNames)["bg-brand-primary-100-hover"];
+    'content-onmain-primary': (typeof BaseColorNames)["content-onmain-primary"];
+    'content-onmain-secondary': (typeof BaseColorNames)["content-onmain-secondary"];
+    'content-onmain-tertiary': (typeof BaseColorNames)["content-onmain-tertiary"];
+    'content-oncolor-primary': (typeof BaseColorNames)["content-oncolor-primary"];
+    'content-oncolor-secondary': (typeof BaseColorNames)["content-oncolor-secondary"];
+    'content-oncolor-tertiary': (typeof BaseColorNames)["content-oncolor-tertiary"];
+    'content-oncolor-inverse': (typeof BaseColorNames)["content-oncolor-inverse"];
+    'content-oncolor-constant': (typeof BaseColorNames)["content-oncolor-constant"];
+    'content-disabled': (typeof BaseColorNames)["content-disabled"];
+    'content-oncolor-disabled': (typeof BaseColorNames)["content-oncolor-disabled"];
+    'content-oncolor-hover': (typeof BaseColorNames)["content-oncolor-hover"];
+    'content-onmain-hover': (typeof BaseColorNames)["content-onmain-hover"];
+    'content-discount': (typeof BaseColorNames)["content-discount"];
+    'content-link': (typeof BaseColorNames)["content-link"];
+    'border-onmain-default-large': (typeof BaseColorNames)["border-onmain-default-large"];
+    'border-onmain-default-small': (typeof BaseColorNames)["border-onmain-default-small"];
+    'border-onmain-contrast': (typeof BaseColorNames)["border-onmain-contrast"];
+    'border-disabled': (typeof BaseColorNames)["border-disabled"];
+    'border-oncolor-disabled': (typeof BaseColorNames)["border-oncolor-disabled"];
+    'border-oncolor-default': (typeof BaseColorNames)["border-oncolor-default"];
+    'bg-onmain-main': (typeof BaseColorNames)["bg-onmain-main"];
+    'bg-onmain-primary': (typeof BaseColorNames)["bg-onmain-primary"];
+    'bg-onmain-secondary': (typeof BaseColorNames)["bg-onmain-secondary"];
+    'bg-onmain-tertiary': (typeof BaseColorNames)["bg-onmain-tertiary"];
+    'bg-onmain-divider': (typeof BaseColorNames)["bg-onmain-divider"];
+    'bg-onmain-contrast': (typeof BaseColorNames)["bg-onmain-contrast"];
+    'bg-onmain-inverse': (typeof BaseColorNames)["bg-onmain-inverse"];
+    'bg-oncolor-primary': (typeof BaseColorNames)["bg-oncolor-primary"];
+    'bg-oncolor-secondary': (typeof BaseColorNames)["bg-oncolor-secondary"];
+    'bg-oncolor-tertiary': (typeof BaseColorNames)["bg-oncolor-tertiary"];
+    'bg-oncolor-hover': (typeof BaseColorNames)["bg-oncolor-hover"];
+    'bg-disabled-large': (typeof BaseColorNames)["bg-disabled-large"];
+    'bg-disabled-small': (typeof BaseColorNames)["bg-disabled-small"];
+    'bg-disabled-active': (typeof BaseColorNames)["bg-disabled-active"];
+    'bg-oncolor-disabled': (typeof BaseColorNames)["bg-oncolor-disabled"];
+    'bg-contrast-active': (typeof BaseColorNames)["bg-contrast-active"];
+    'bg-oncontrast-hover': (typeof BaseColorNames)["bg-oncontrast-hover"];
+    'alert-bg-success-100': (typeof BaseColorNames)["alert-bg-success-100"];
+    'alert-bg-success-200': (typeof BaseColorNames)["alert-bg-success-200"];
+    'alert-bg-success-500': (typeof BaseColorNames)["alert-bg-success-500"];
+    'alert-bg-warning-100': (typeof BaseColorNames)["alert-bg-warning-100"];
+    'alert-bg-warning-200': (typeof BaseColorNames)["alert-bg-warning-200"];
+    'alert-bg-warning-500': (typeof BaseColorNames)["alert-bg-warning-500"];
+    'alert-bg-error-100': (typeof BaseColorNames)["alert-bg-error-100"];
+    'alert-bg-error-200': (typeof BaseColorNames)["alert-bg-error-200"];
+    'alert-bg-error-500': (typeof BaseColorNames)["alert-bg-error-500"];
+    'alert-success': (typeof BaseColorNames)["alert-success"];
+    'alert-warning': (typeof BaseColorNames)["alert-warning"];
+    'alert-error': (typeof BaseColorNames)["alert-error"];
+    profession: UnitColorNames.profession;
+    professionDark: UnitColorNames.professionDark;
+    camps: UnitColorNames.camps;
+    campsDark: UnitColorNames.campsDark;
+    courses: UnitColorNames.courses;
+    coursesDark: UnitColorNames.coursesDark;
+    openLesson: UnitColorNames.openLesson;
+    openLessonDark: UnitColorNames.openLessonDark;
+    externat: UnitColorNames.externat;
+    externatDark: UnitColorNames.externatDark;
+    olympiad: UnitColorNames.olympiad;
+    olympiadDark: UnitColorNames.olympiadDark;
+    textbook: UnitColorNames.textbook;
+    textbookDark: UnitColorNames.textbookDark;
+    tutors: UnitColorNames.tutors;
+    tutorsDark: UnitColorNames.tutorsDark;
+    training: UnitColorNames.training;
+    trainingDark: UnitColorNames.trainingDark;
+    mathematics: UnitColorNames.mathematics;
+    physics: UnitColorNames.physics;
+    informatics: UnitColorNames.informatics;
+    chemistry: UnitColorNames.chemistry;
+    biology: UnitColorNames.biology;
+    english: UnitColorNames.english;
+    russian: UnitColorNames.russian;
+    history: UnitColorNames.history;
+    society: UnitColorNames.society;
+    geography: UnitColorNames.geography;
+    developing: UnitColorNames.developing;
+    literature: UnitColorNames.literature;
+    intersubject: UnitColorNames.intersubject;
+    primarySchool: UnitColorNames.primarySchool;
+    recommended: UnitColorNames.recommended;
+    astronomy: UnitColorNames.astronomy;
+    ecology: UnitColorNames.ecology;
+    technology: UnitColorNames.technology;
+    languages: UnitColorNames.languages;
+    art: UnitColorNames.art;
+    physicalCulture: UnitColorNames.physicalCulture;
+    logic: UnitColorNames.logic;
+    businessLogic: UnitColorNames.businessLogic;
+    rap: UnitColorNames.rap;
+    ikt: UnitColorNames.ikt;
+    kids: UnitColorNames.kids;
+    fgos: UnitColorNames.fgos;
+    blue: UnitColorNames.blue;
+    red: UnitColorNames.red;
+    green: UnitColorNames.green;
+    grey: UnitColorNames.grey;
+    darkgrey: UnitColorNames.darkgrey;
+    lightgrey: UnitColorNames.lightgrey;
+    superlightgrey: UnitColorNames.superlightgrey;
+    facebook: SocialColorNames.facebook;
+    twitter: SocialColorNames.twitter;
+    youtube: SocialColorNames.youtube;
+    instagrammagenta: SocialColorNames.instagrammagenta;
+    instagramblue: SocialColorNames.instagramblue;
+    instagrampurple: SocialColorNames.instagrampurple;
+    instagramorange: SocialColorNames.instagramorange;
+    instagramyellow: SocialColorNames.instagramyellow;
+    pinterest: SocialColorNames.pinterest;
+    googleplus: SocialColorNames.googleplus;
+    linkedin: SocialColorNames.linkedin;
+    vimeoblue: SocialColorNames.vimeoblue;
+    vimeogreen: SocialColorNames.vimeogreen;
+    vimeoorange: SocialColorNames.vimeoorange;
+    vimeopink: SocialColorNames.vimeopink;
+    tumblr: SocialColorNames.tumblr;
+    snapchat: SocialColorNames.snapchat;
+    whatsappgreen: SocialColorNames.whatsappgreen;
+    whatsappteal1: SocialColorNames.whatsappteal1;
+    whatsappteal2: SocialColorNames.whatsappteal2;
+    foursquarepink: SocialColorNames.foursquarepink;
+    foursquareblue: SocialColorNames.foursquareblue;
+    swarm: SocialColorNames.swarm;
+    skypeblue: SocialColorNames.skypeblue;
+    skypegreen: SocialColorNames.skypegreen;
+    android: SocialColorNames.android;
+    stumbleupon: SocialColorNames.stumbleupon;
+    flickrpink: SocialColorNames.flickrpink;
+    flickrblue: SocialColorNames.flickrblue;
+    yahoo: SocialColorNames.yahoo;
+    soundcloud: SocialColorNames.soundcloud;
+    spotifygreen: SocialColorNames.spotifygreen;
+    spotifydarkgreen: SocialColorNames.spotifydarkgreen;
+    dribbble: SocialColorNames.dribbble;
+    reddit: SocialColorNames.reddit;
+    deviantart: SocialColorNames.deviantart;
+    pocket: SocialColorNames.pocket;
+    quora: SocialColorNames.quora;
+    quorablue: SocialColorNames.quorablue;
+    slideshareorange: SocialColorNames.slideshareorange;
+    slideshareblue: SocialColorNames.slideshareblue;
+    telegram: SocialColorNames.telegram;
+    fivehundredpx: SocialColorNames.fivehundredpx;
+    listlyorange: SocialColorNames.listlyorange;
+    listlyblue: SocialColorNames.listlyblue;
+    vine: SocialColorNames.vine;
+    vk: SocialColorNames.vk;
+    ok: SocialColorNames.ok;
+    mailru: SocialColorNames.mailru;
+    white: DefaultColorNames.white;
+    black: DefaultColorNames.black;
+    tundora: DefaultColorNames.tundora;
+    paleSky: DefaultColorNames.paleSky;
+    bostonBlue: DefaultColorNames.bostonBlue;
+    atlantisBrightly: DefaultColorNames.atlantisBrightly;
+    cinnabar: DefaultColorNames.cinnabar;
+    sail: DefaultColorNames.sail;
+    bittersweet: DefaultColorNames.bittersweet;
+    turquoise: DefaultColorNames.turquoise;
+    dodgerBlue: DefaultColorNames.dodgerBlue;
+    mantis: DefaultColorNames.mantis;
+    azure: DefaultColorNames.azure;
+    bahamaBlue: DefaultColorNames.bahamaBlue;
+    shamrock: DefaultColorNames.shamrock;
+    olive: DefaultColorNames.olive;
+    copperRose: DefaultColorNames.copperRose;
+    cyan: DefaultColorNames.cyan;
+    plum: DefaultColorNames.plum;
+    hokeyPokey: DefaultColorNames.hokeyPokey;
+    monaLisa: DefaultColorNames.monaLisa;
+    mariner: DefaultColorNames.mariner;
+    heliotrope: DefaultColorNames.heliotrope;
+    dandelion: DefaultColorNames.dandelion;
+    fruitSalad: DefaultColorNames.fruitSalad;
+    fuchsiaBlue: DefaultColorNames.fuchsiaBlue;
+    persianGreen: DefaultColorNames.persianGreen;
+    watermelon: DefaultColorNames.watermelon;
+    tropaz: DefaultColorNames.tropaz;
+    lima: DefaultColorNames.lima;
+    mintTulip: DefaultColorNames.mintTulip;
+    carnationPink: DefaultColorNames.carnationPink;
+    paleRose: DefaultColorNames.paleRose;
+    deYork: DefaultColorNames.deYork;
+    peppermint: DefaultColorNames.peppermint;
+    cornflowerBlue: DefaultColorNames.cornflowerBlue;
+    colonialWhite: DefaultColorNames.colonialWhite;
+    cherokee: DefaultColorNames.cherokee;
+    supernova: DefaultColorNames.supernova;
+    picasso: DefaultColorNames.picasso;
+    bilobaFlower: DefaultColorNames.bilobaFlower;
+    linkWater: DefaultColorNames.linkWater;
+    mineShaft: DefaultColorNames.mineShaft;
+    silver: DefaultColorNames.silver;
+    alto: DefaultColorNames.alto;
+    mercury: DefaultColorNames.mercury;
+    wildSand: DefaultColorNames.wildSand;
+    whiteGray: DefaultColorNames.whiteGray;
+    alabaster: DefaultColorNames.alabaster;
+    whiteLilac: DefaultColorNames.whiteLilac;
+    atlantis: DefaultColorNames.atlantis;
+    yellowOrange: DefaultColorNames.yellowOrange;
+    mystic: DefaultColorNames.mystic;
+    pomegranate: DefaultColorNames.pomegranate;
+    oliveDrab: DefaultColorNames.oliveDrab;
+    curious: DefaultColorNames.curious;
+    orangePeel: DefaultColorNames.orangePeel;
+    nebula: DefaultColorNames.nebula;
+    seaNymph: DefaultColorNames.seaNymph;
+    chromeWhite: DefaultColorNames.chromeWhite;
+    onahau: DefaultColorNames.onahau;
+    citrineWhite: DefaultColorNames.citrineWhite;
+    coralReef: DefaultColorNames.coralReef;
+    creemBrulee: DefaultColorNames.creemBrulee;
+    frangipani: DefaultColorNames.frangipani;
+    yourPink: DefaultColorNames.yourPink;
+    periwinkleGray: DefaultColorNames.periwinkleGray;
+    baliHai: DefaultColorNames.baliHai;
+    primary: DefaultColorNames.primary;
+    accent: DefaultColorNames.accent;
+    transparent: DefaultColorNames.transparent;
+};
 
-declare type ColorPropsProperties = 'color' | 'fontColor' | `${string}Color` | `color${string}`;
-declare type ColorValue = keyof typeof ColorNames | RGB | RGBA | HEX;
+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<T extends ColorPropsProperties = 'color'> = {
-    [key in `${T}`]?: RGB | RGBA | HEX | keyof typeof ColorNames;
+declare type Color = keyof typeof ColorNames | ColorValue;
+declare type ColorProperty<T extends ColorPropertyVariants = 'color'> = {
+    [key in `${T}`]?: Color;
 };
-declare const color: (color?: ColorValue, cssProperty?: ColorCssProperty) => () => (props: {
+declare const color: (color?: Color, cssProperty?: ColorCssProperty) => () => (props: {
     theme: DefaultTheme;
 }) => FlattenSimpleInterpolation | null;
 
@@ -314,7 +621,7 @@ interface BaseProps {
     /** Style object */
     style?: React.CSSProperties;
 }
-interface InputField extends Color, Color<'placeholderColor'>, ResponsiveNamedProperty<'width', 'auto' | keyof typeof SizeInput | number> {
+interface InputField extends ColorProperty, ColorProperty<'placeholderColor'>, ResponsiveNamedProperty<'width', 'auto' | keyof typeof SizeInput | number> {
     /**
      * Is disabled field
      */
@@ -367,233 +674,28 @@ declare function hexToRgbA(hex: string, alpha?: number): string;
  */
 declare function isHex(hex: string): boolean;
 
-declare type StyledComponentProps = {
-    theme?: {
-        breakpoints?: typeof defaultTheme.breakpoints;
-    };
-};
-declare type MediaQueryParams = {
-    and?: string;
-    condition?: (_props: any) => boolean;
-};
-/**
- * @return `@media screen and (min-width: 320px) and (max-width: 374px) { ...args }`
- */
-declare const screenXs: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
-/**
- * @return `@media screen and (min-width: 375px) and (max-width: 767px) { ...args }`
- */
-declare const screenS: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
-/**
- * @return `@media screen and (min-width: 768) and (max-width: 1023px) { ...args }`
- */
-declare const screenM: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
-/**
- * @return `@media screen and (min-width: 1024px) and (max-width: 1279px) { ...args }`
- */
-declare const screenL: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
-/**
- * @return `@media screen and (min-width: 1280px) and (max-width: 1439px) { ...args }`
- */
-declare const screenXl: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
-/**
- * @return `@media screen and (max-width: 319px) { ...args }`
- */
-declare const screenMaxXxs: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
-/**
- * @return `@media screen and (max-width: 374px) { ...args }`
- */
-declare const screenMaxXs: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
-/**
- * @return `@media screen and (min-width: 375px) { ...args }`
- */
-declare const screenMinXs: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
-/**
- * @return `@media screen and (max-width: 767px) { ...args }`
- */
-declare const screenMaxS: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
-/**
- * @return `@media screen and (min-width: 768px) { ...args }`
- */
-declare const screenMinS: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
-/**
- * @return `@media screen and (max-width: 1023px) { ...args }`
- */
-declare const screenMaxM: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
-/**
- * @return `@media screen and (min-width: 1024px) { ...args }`
- */
-declare const screenMinM: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
-/**
- * @return `@media screen and (max-width: 1279px) { ...args }`
- */
-declare const screenMaxL: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
-/**
- * @return `@media screen and (min-width: 1280px) { ...args }`
- */
-declare const screenMinL: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
-/**
- * @return `@media screen and (max-width: 1439px) { ...args }`
- */
-declare const screenMaxXl: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
-/**
- * @return `@media screen and (min-width: 1440px) { ...args }`
- */
-declare const screenMinXl: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
-/**
- * @return `@media -webkit-min-device-pixel-ratio: 2 and (min-resolution: 192dpi) { ...args }`
- */
-declare const screenRetina: (args_0: TemplateStringsArray | CSSObject, args_1: SimpleInterpolation) => styled_components.FlattenSimpleInterpolation;
-
-interface VAlign {
-    vAlign?: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline';
+interface ThemeProviderProps {
+    theme: Partial<DefaultTheme> | ((topLevelTheme: DefaultTheme) => DefaultTheme);
+    children: React.ReactNode;
 }
-declare const vAlign: (vAlign: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline') => styled_components.FlattenSimpleInterpolation;
+declare function ThemeProvider(props: ThemeProviderProps): JSX.Element;
 
-declare function buildMediaQuery(value: number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean, property: string | ((_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null), screenQueryFunction: typeof screenXs, sizing: null | string, sizes?: Record<SizeLatin, number>): ReturnType<typeof css>;
+declare const defaultTheme: DefaultTheme;
+declare const motherLightTheme: DefaultTheme;
+declare const motherDarkTheme: DefaultTheme;
+declare const babyLightTheme: DefaultTheme;
+declare const babyDarkTheme: DefaultTheme;
+declare const teenLightTheme: DefaultTheme;
+declare const teenDarkTheme: DefaultTheme;
+declare const adultLightTheme: DefaultTheme;
+declare const adultDarkTheme: DefaultTheme;
 
-interface Display {
-    display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'table-cell' | 'inherit' | 'none';
+declare type Display = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'table-cell' | 'inherit' | 'none';
+interface DisplayProperty {
+    display?: Display;
 }
 
-declare enum IconNames {
-    book = "book",
-    blackBoard = "blackBoard",
-    burger = "burger",
-    eye = "eye",
-    email = "email",
-    sort = "sort",
-    unsort = "unsort",
-    person = "person",
-    diamond = "diamond",
-    diamondFilled = "diamondFilled",
-    diamondSolid = "diamondSolid",
-    infoInverse = "infoInverse",
-    list = "list",
-    login = "login",
-    logout = "logout",
-    fire = "fire",
-    camps = "camps",
-    cart = "cart",
-    clock = "clock",
-    clockFilled = "clockFilled",
-    courses = "courses",
-    discount = "discount",
-    externat = "externat",
-    headphones = "headphones",
-    page = "page",
-    priceTag = "priceTag",
-    phone = "phone",
-    prof = "prof",
-    star = "star",
-    settings = "settings",
-    student = "student",
-    target = "target",
-    textbook = "textbook",
-    trophy = "trophy",
-    message = "message",
-    wallet = "wallet",
-    edit = "edit",
-    copy = "copy",
-    print = "print",
-    objective = "objective",
-    present = "present",
-    coins = "coins",
-    calendar = "calendar",
-    calendar_simple = "calendar_simple",
-    chevronDown = "chevronDown",
-    chevronUp = "chevronUp",
-    chevronRight = "chevronRight",
-    chevronLeft = "chevronLeft",
-    cross = "cross",
-    dialog = "dialog",
-    dropDownArrow = "dropDownArrow",
-    externalLink = "externalLink",
-    file = "file",
-    fileBordered = "fileBordered",
-    lessons = "lessons",
-    pencil = "pencil",
-    phoneNoFill = "phoneNoFill",
-    radioChecked = "radioChecked",
-    radioNotChecked = "radioNotChecked",
-    search = "search",
-    tasks = "tasks",
-    tinyCross = "tinyCross",
-    sharpCross = "sharpCross",
-    plus = "plus",
-    plusThin = "plusThin",
-    play = "play",
-    reload = "reload",
-    checkCircle = "checkCircle",
-    info = "info",
-    check = "check",
-    home = "home",
-    questionFilled = "questionFilled",
-    document = "document",
-    cancel = "cancel",
-    playPause = "playPause",
-    video = "video"
-}
-declare type Icon$1 = React.FC<React.SVGProps<SVGSVGElement>> | (() => JSX.Element);
-declare const defaultIcons: Record<IconNames, Icon$1>;
-
-interface IconProps extends BaseProps, Color, VAlign, ResponsiveNamedProperty<'size'> {
-    /**
-     * Children react node
-     */
-    children?: React.ReactNode;
-    /**
-     * Name of default icon
-     */
-    name?: keyof typeof IconNames;
-    /**
-     * Object with icon's svg. Use for custom icon insertion with dangerouslySetInnerHTML
-     */
-    svg?: string;
-    /**
-     * Object with icon's svg. Use for custom icon insertion
-     */
-    icon?: React.ReactNode;
-    /**
-     * Show pointer cursor on hover?
-     */
-    pointer?: boolean;
-}
-/**
- * Расширен:
- * - [`BaseProps`](#/Миксины)
- * - [`VAlign`](#/Миксины)
- * - [`Color`](#/Миксины)
- * - [`Color<'fontColor'>`](#/Миксины)
- * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
- */
-declare function Icon(props: IconProps): JSX.Element;
-declare namespace Icon {
-    var displayName: string;
-}
-
-interface ActionBtnProps extends BaseProps, Display {
-    /** Icon name (for inner Icon component) */
-    icon?: keyof typeof IconNames;
-    disabled?: boolean;
-    active?: boolean;
-    onClick?(): void;
-    /**
-     * Children react node
-     */
-    children?: React.ReactNode;
-}
-/**
- * Расширен:
- * - [`BaseProps`](#/Миксины)
- * - [`Display`](#/Миксины)
- */
-declare function ActionBtn({ icon, disabled, onClick, children, className, active, style }: ActionBtnProps): JSX.Element;
-declare namespace ActionBtn {
-    var displayName: string;
-}
-
-interface AnchorProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {
+interface AnchorProps extends BaseProps, ColorProperty, ResponsiveNamedProperty<'size'>, DisplayProperty {
     /**
      * Custom CSS class name
      */
@@ -657,16 +759,16 @@ declare namespace Anchor {
 }
 
 declare type ButtonStaticSize = 'xl' | 'l' | 'm' | 's' | 'xs';
-declare type ButtonSize = ButtonStaticSize | ResponsiveProperty$1<`${number}rem` | number>;
-interface ButtonProps extends BaseProps$1, Display$1, Color$1, Color$1<'fontColor'>, ResponsiveNamedProperty$1<'padding'>, ResponsiveNamedProperty$1<'paddingTop'>, ResponsiveNamedProperty$1<'paddingRight'>, ResponsiveNamedProperty$1<'paddingBottom'>, ResponsiveNamedProperty$1<'paddingLeft'>, ResponsiveNamedProperty$1<'margin'>, ResponsiveNamedProperty$1<'marginTop'>, ResponsiveNamedProperty$1<'marginRight'>, ResponsiveNamedProperty$1<'marginBottom'>, ResponsiveNamedProperty$1<'marginLeft'>, ResponsiveNamedProperty$1<'fontSize'>, ResponsiveNamedProperty$1<'fluid', boolean>, ResponsiveNamedProperty$1<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>, ResponsiveNamedProperty$1<'height', 'l' | 'm' | 's' | 'xs' | number> {
+declare type ButtonSize = ButtonStaticSize | ResponsiveProperty<`${number}rem` | number>;
+interface ButtonProps extends BaseProps, 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$1;
+    as?: 'div' | 'span' | 'a' | 'button' | typeof Link | typeof Anchor;
     /** Button size */
     size?: ButtonSize;
     /** Button type attribute */
     type?: 'button' | 'submit' | 'reset';
     /** Button icons */
-    icon?: JSX.Element | [Nullable$1<JSX.Element>, Nullable$1<JSX.Element>];
+    icon?: JSX.Element | [Nullable<JSX.Element>, Nullable<JSX.Element>];
     /** Button success state */
     success?: boolean;
     /** Loading state */
@@ -695,7 +797,7 @@ interface ButtonProps extends BaseProps$1, Display$1, Color$1, Color$1<'fontColo
     /** Outline appearance */
     outline?: boolean;
     /** Content font weight */
-    fontWeight?: FontWeight$1;
+    fontWeight?: FontWeight;
     /** Associated form */
     form?: string;
     /** @preset {Default} Primary appearance */
@@ -733,8 +835,174 @@ interface ButtonProps extends BaseProps$1, Display$1, Color$1, Color$1<'fontColo
  */
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLElement>>;
 
+interface VAlign {
+    vAlign?: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline';
+}
+declare const vAlign: (vAlign: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline') => styled_components.FlattenSimpleInterpolation;
+
+declare enum IconNames {
+    book = "book",
+    blackBoard = "blackBoard",
+    burger = "burger",
+    eye = "eye",
+    email = "email",
+    sort = "sort",
+    unsort = "unsort",
+    person = "person",
+    diamond = "diamond",
+    diamondFilled = "diamondFilled",
+    diamondSolid = "diamondSolid",
+    infoInverse = "infoInverse",
+    list = "list",
+    login = "login",
+    logout = "logout",
+    fire = "fire",
+    camps = "camps",
+    cart = "cart",
+    clock = "clock",
+    clockFilled = "clockFilled",
+    courses = "courses",
+    discount = "discount",
+    externat = "externat",
+    headphones = "headphones",
+    page = "page",
+    priceTag = "priceTag",
+    phone = "phone",
+    prof = "prof",
+    star = "star",
+    settings = "settings",
+    student = "student",
+    target = "target",
+    textbook = "textbook",
+    trophy = "trophy",
+    message = "message",
+    wallet = "wallet",
+    edit = "edit",
+    copy = "copy",
+    print = "print",
+    objective = "objective",
+    present = "present",
+    coins = "coins",
+    calendar = "calendar",
+    calendar_simple = "calendar_simple",
+    chevronDown = "chevronDown",
+    chevronUp = "chevronUp",
+    chevronRight = "chevronRight",
+    chevronLeft = "chevronLeft",
+    cross = "cross",
+    dialog = "dialog",
+    dropDownArrow = "dropDownArrow",
+    externalLink = "externalLink",
+    file = "file",
+    fileBordered = "fileBordered",
+    lessons = "lessons",
+    pencil = "pencil",
+    phoneNoFill = "phoneNoFill",
+    radioChecked = "radioChecked",
+    radioNotChecked = "radioNotChecked",
+    search = "search",
+    tasks = "tasks",
+    tinyCross = "tinyCross",
+    sharpCross = "sharpCross",
+    plus = "plus",
+    plusThin = "plusThin",
+    play = "play",
+    reload = "reload",
+    checkCircle = "checkCircle",
+    info = "info",
+    check = "check",
+    home = "home",
+    questionFilled = "questionFilled",
+    document = "document",
+    cancel = "cancel",
+    playPause = "playPause",
+    video = "video"
+}
+declare type Icon$1 = React.FC<React.SVGProps<SVGSVGElement>> | (() => JSX.Element);
+declare const defaultIcons: Record<IconNames, Icon$1>;
+
+interface IconProps extends BaseProps, ColorProperty, VAlign, ResponsiveNamedProperty<'size'> {
+    /**
+     * Children react node
+     */
+    children?: React.ReactNode;
+    /**
+     * Name of default icon
+     */
+    name?: keyof typeof IconNames;
+    /**
+     * Object with icon's svg. Use for custom icon insertion with dangerouslySetInnerHTML
+     */
+    svg?: string;
+    /**
+     * Object with icon's svg. Use for custom icon insertion
+     */
+    icon?: React.ReactNode;
+    /**
+     * Show pointer cursor on hover?
+     */
+    pointer?: boolean;
+}
+/**
+ * Расширен:
+ * - [`BaseProps`](#/Миксины)
+ * - [`VAlign`](#/Миксины)
+ * - [`Color`](#/Миксины)
+ * - [`Color<'fontColor'>`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
+ */
+declare function Icon(props: IconProps): JSX.Element;
+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 Display$1, Color$1, ResponsiveNamedProperty$1<'size'>, BaseProps$1 {
+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 */
@@ -742,7 +1010,7 @@ interface TextProps extends Display$1, Color$1, ResponsiveNamedProperty$1<'size'
     /** Use predefined props with low priority */
     appearance?: TextAppearance;
     /** Custom sizes set */
-    sizes?: Record<SizeLatin$1, number>;
+    sizes?: Record<SizeLatin, number>;
     /** Sizing units */
     fontUnits?: string;
     /** Font family */
@@ -773,62 +1041,291 @@ interface TextComponent extends ForwardRefExoticComponent<PropsWithoutRef<TextPr
     Ellipse: typeof TextEllipse;
 }
 
-declare const Text: TextComponent;
+declare const Text: TextComponent;
+
+declare type AlertType = 'warning' | 'error' | 'info' | 'success';
+declare type AlertSize = keyof Pick<typeof SizeLatin, 'l' | 's'>;
+interface AlertProps extends BaseProps {
+    /** Text of the timer cancellation button */
+    cancelTimerText?: string | React.ReactNode;
+    /** Children react node */
+    children?: React.ReactNode;
+    /** Use a colorless background */
+    clear?: boolean;
+    /** This method is taken from react-toastify library */
+    closeToast?(): void;
+    /** Icon name (for inner Icon component) */
+    customIcon?: keyof typeof IconNames;
+    /** Any custom image (e.g.: img, svg, icon from @foxford/icon-pack) */
+    image?: React.ReactNode;
+    /** Use for tablet and mobile view */
+    isCompact?: boolean;
+    /** Display a hyperlink */
+    link?: {
+        content: string | React.ReactNode;
+        onClick(): void;
+    };
+    linkProps?: AnchorProps;
+    /** Use alert without icon */
+    noIcon?: boolean;
+    /** You can cancel the action if the timer has not expired yet */
+    onClickCancelTimer?(): void;
+    /** Display the action button */
+    primaryAction?: {
+        content: string | React.ReactNode;
+        onClick(): void;
+    };
+    primaryActionProps?: ButtonProps;
+    /** Display the second action button */
+    secondaryAction?: {
+        content: string | React.ReactNode;
+        onClick(): void;
+    };
+    secondaryActionProps?: ButtonProps;
+    /** Use this to change the appearance of the alert */
+    size?: AlertSize;
+    /** Use it when you need to move text to another line in alerts without a title */
+    textProps?: TextProps;
+    textWrap?: boolean;
+    /** It is used in alerts with a timer. Pass the value in seconds */
+    timer?: number;
+    /** Display a title */
+    title?: string;
+    titleProps?: TextProps;
+    type?: AlertType;
+    width?: ResponsiveProperty;
+}
+
+declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
+
+declare type ArrowStaticSize = 'l' | 'm' | 'xs';
+declare type ArrowSize = ArrowStaticSize | ResponsiveProperty<`${number}rem` | number>;
+interface ArrowProps extends BaseProps {
+    /** Square shape */
+    square?: boolean;
+    /** Used on colored background */
+    onColored?: boolean;
+    /** Size of button */
+    size?: ArrowSize;
+    /** Arrow points top */
+    top?: boolean;
+    /** Arrow points right */
+    right?: boolean;
+    /** Arrow points bottom */
+    bottom?: boolean;
+    /** Arrow points left */
+    left?: boolean;
+    /** Inverted colors */
+    inverse?: boolean;
+    /** Outlined appearance */
+    outline?: boolean;
+    /** Button disabled */
+    disabled?: boolean;
+    /** Click handler */
+    onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
+}
+
+/**
+ * Button with arrow icon
+ */
+declare const Arrow: react.ForwardRefExoticComponent<ArrowProps & react.RefAttributes<HTMLButtonElement>>;
+
+declare type CheckboxStaticSize = 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'xs' | 's' | 'm' | 'l' | 'xl';
+declare type CheckboxSize = CheckboxStaticSize | ResponsiveProperty<`${number}rem` | number>;
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'width' | 'value'>, BaseProps {
+    /** Checkbox value */
+    value?: string | number;
+    /** Checkbox size */
+    size?: CheckboxSize;
+    /** Display inline, default to true */
+    inline?: boolean;
+    /** Checkbox errored appearance */
+    error?: boolean;
+    /** Root label width 100% */
+    fluid?: boolean;
+    /** Root label width */
+    width?: ResponsiveProperty<number | string>;
+    /** Label content */
+    children?: React.ReactNode;
+    /** @preset {Brand} Checkbox success appearance */
+    success?: boolean;
+    /** @preset {Brand} Label with background */
+    background?: boolean;
+    /** @preset {Brand} Modifies appearance on colored background */
+    onColored?: boolean;
+    /** @deprecated Use children */
+    label?: string;
+}
+interface CheckboxGroupProps extends BaseProps {
+    inline?: boolean;
+    children: React.ReactNode;
+}
+interface CheckboxComponent extends ForwardRefExoticComponent<PropsWithoutRef<CheckboxProps> & RefAttributes<HTMLLabelElement>> {
+    Group: (props: CheckboxGroupProps) => JSX.Element;
+}
+
+declare const Checkbox: CheckboxComponent;
+
+declare type TextAreaHTMLAttributes = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'cols' | 'rows' | 'color'>;
+interface TextareaProps extends BaseProps, InputField, TextAreaHTMLAttributes {
+    /** Specifies the visible width of a text area */
+    cols?: number;
+    /** Specifies the visible number of lines in a text area */
+    rows?: number;
+    /** Specifies the visible max number of lines in a text area */
+    maxRows?: number;
+    /** Specifies the maximum number of characters allowed in the text area */
+    maxLength?: number;
+    /** On change handler */
+    onChange?(_event: React.ChangeEvent<HTMLTextAreaElement>): void;
+    /** Value */
+    value?: string;
+    /** Autosize for textarea */
+    autosize?: boolean;
+}
+
+declare const Textarea: {
+    (props: TextareaProps): JSX.Element;
+    displayName: string;
+};
 
-declare type AlertType = 'warning' | 'error' | 'info' | 'success';
-declare type AlertSize = keyof Pick<typeof SizeLatin$1, 'l' | 's'>;
-interface AlertProps extends BaseProps$1 {
-    /** Text of the timer cancellation button */
-    cancelTimerText?: string | React.ReactNode;
-    /** Children react node */
-    children?: React.ReactNode;
-    /** Use a colorless background */
-    clear?: boolean;
-    /** This method is taken from react-toastify library */
-    closeToast?(): void;
-    /** Icon name (for inner Icon component) */
-    customIcon?: keyof typeof IconNames;
-    /** Any custom image (e.g.: img, svg, icon from @foxford/icon-pack) */
-    image?: React.ReactNode;
-    /** Use for tablet and mobile view */
-    isCompact?: boolean;
-    /** Display a hyperlink */
-    link?: {
-        content: string | React.ReactNode;
-        onClick(): void;
+interface Theme {
+    breakpoints: Readonly<{
+        xl: number;
+        l: number;
+        m: number;
+        s: number;
+        xs: number;
+        xxs: number;
+    }>;
+    colors: Record<keyof typeof ColorNames, ColorValue>;
+    borderRadius: string;
+    textColor?: string;
+    fallbackColor?: string;
+    zIndex: {
+        modal: number;
+        tooltip: number;
     };
-    linkProps?: AnchorProps;
-    /** Use alert without icon */
-    noIcon?: boolean;
-    /** You can cancel the action if the timer has not expired yet */
-    onClickCancelTimer?(): void;
-    /** Display the action button */
-    primaryAction?: {
-        content: string | React.ReactNode;
-        onClick(): void;
+    classNamePrefix: string;
+    defaultInputControlsWidth: number | keyof typeof SizeInput | 'auto';
+    domain?: string;
+    utils?: {
+        relBuilder?: (_link?: string, _target?: string) => undefined | string;
     };
-    primaryActionProps?: ButtonProps;
-    /** Display the second action button */
-    secondaryAction?: {
-        content: string | React.ReactNode;
-        onClick(): void;
+    mode: ThemeMode;
+    preset: ThemePreset;
+    name: ThemeName;
+    components?: {
+        Alert?: AlertProps;
+        Arrow?: ArrowProps;
+        Button?: ButtonProps;
+        Checkbox?: CheckboxProps;
+        Textarea?: TextareaProps;
+        Text?: TextProps;
+        'Text.Heading'?: TextHeadingProps;
     };
-    secondaryActionProps?: ButtonProps;
-    /** Use this to change the appearance of the alert */
-    size?: AlertSize;
-    /** Use it when you need to move text to another line in alerts without a title */
-    textProps?: TextProps;
-    textWrap?: boolean;
-    /** It is used in alerts with a timer. Pass the value in seconds */
-    timer?: number;
-    /** Display a title */
-    title?: string;
-    titleProps?: TextProps;
-    type?: AlertType;
-    width?: ResponsiveProperty$1;
 }
 
-declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
+declare type StyledComponentProps = {
+    theme?: {
+        breakpoints?: typeof defaultTheme.breakpoints;
+    };
+};
+declare type MediaQueryParams = {
+    and?: string;
+    condition?: (_props: any) => boolean;
+};
+/**
+ * @return `@media screen and (min-width: 320px) and (max-width: 374px) { ...args }`
+ */
+declare const screenXs: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
+/**
+ * @return `@media screen and (min-width: 375px) and (max-width: 767px) { ...args }`
+ */
+declare const screenS: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
+/**
+ * @return `@media screen and (min-width: 768) and (max-width: 1023px) { ...args }`
+ */
+declare const screenM: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
+/**
+ * @return `@media screen and (min-width: 1024px) and (max-width: 1279px) { ...args }`
+ */
+declare const screenL: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
+/**
+ * @return `@media screen and (min-width: 1280px) and (max-width: 1439px) { ...args }`
+ */
+declare const screenXl: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
+/**
+ * @return `@media screen and (max-width: 319px) { ...args }`
+ */
+declare const screenMaxXxs: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
+/**
+ * @return `@media screen and (max-width: 374px) { ...args }`
+ */
+declare const screenMaxXs: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
+/**
+ * @return `@media screen and (min-width: 375px) { ...args }`
+ */
+declare const screenMinXs: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
+/**
+ * @return `@media screen and (max-width: 767px) { ...args }`
+ */
+declare const screenMaxS: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
+/**
+ * @return `@media screen and (min-width: 768px) { ...args }`
+ */
+declare const screenMinS: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
+/**
+ * @return `@media screen and (max-width: 1023px) { ...args }`
+ */
+declare const screenMaxM: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
+/**
+ * @return `@media screen and (min-width: 1024px) { ...args }`
+ */
+declare const screenMinM: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
+/**
+ * @return `@media screen and (max-width: 1279px) { ...args }`
+ */
+declare const screenMaxL: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
+/**
+ * @return `@media screen and (min-width: 1280px) { ...args }`
+ */
+declare const screenMinL: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
+/**
+ * @return `@media screen and (max-width: 1439px) { ...args }`
+ */
+declare const screenMaxXl: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
+/**
+ * @return `@media screen and (min-width: 1440px) { ...args }`
+ */
+declare const screenMinXl: (params?: MediaQueryParams) => (args_0: TemplateStringsArray | CSSObject, ...args_1: SimpleInterpolation[]) => (props: StyledComponentProps) => styled_components.FlattenSimpleInterpolation;
+/**
+ * @return `@media -webkit-min-device-pixel-ratio: 2 and (min-resolution: 192dpi) { ...args }`
+ */
+declare const screenRetina: (args_0: TemplateStringsArray | CSSObject, args_1: SimpleInterpolation) => styled_components.FlattenSimpleInterpolation;
+
+declare function buildMediaQuery(value: number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean, property: string | ((_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null), screenQueryFunction: typeof screenXs, sizing: null | string, sizes?: Record<SizeLatin, number>): ReturnType<typeof css>;
+
+interface ActionBtnProps extends BaseProps, DisplayProperty {
+    /** Icon name (for inner Icon component) */
+    icon?: keyof typeof IconNames;
+    disabled?: boolean;
+    active?: boolean;
+    onClick?(): void;
+    /**
+     * Children react node
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Расширен:
+ * - [`BaseProps`](#/Миксины)
+ * - [`Display`](#/Миксины)
+ */
+declare function ActionBtn({ icon, disabled, onClick, children, className, active, style }: ActionBtnProps): JSX.Element;
+declare namespace ActionBtn {
+    var displayName: string;
+}
 
 declare enum CurrencyCodes {
     ALL = "ALL",
@@ -949,7 +1446,7 @@ declare enum CurrencyCodes {
 }
 declare const CURRENCY_MAP: Readonly<Record<CurrencyCodes, string>>;
 
-interface AmountProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {
+interface AmountProps extends BaseProps, ColorProperty, ResponsiveNamedProperty<'size'>, DisplayProperty {
     /**
      * Value for amount
      */
@@ -1005,72 +1502,7 @@ declare class Amount extends PureComponent<AmountProps> {
     render(): JSX.Element;
 }
 
-declare type ArrowStaticSize = 'l' | 'm' | 'xs';
-declare type ArrowSize = ArrowStaticSize | ResponsiveProperty$1<`${number}rem` | number>;
-interface ArrowProps extends BaseProps$1 {
-    /** Square shape */
-    square?: boolean;
-    /** Used on colored background */
-    onColored?: boolean;
-    /** Size of button */
-    size?: ArrowSize;
-    /** Arrow points top */
-    top?: boolean;
-    /** Arrow points right */
-    right?: boolean;
-    /** Arrow points bottom */
-    bottom?: boolean;
-    /** Arrow points left */
-    left?: boolean;
-    /** Inverted colors */
-    inverse?: boolean;
-    /** Outlined appearance */
-    outline?: boolean;
-    /** Button disabled */
-    disabled?: boolean;
-    /** Click handler */
-    onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
-}
-
-/**
- * Button with arrow icon
- */
-declare const Arrow: react.ForwardRefExoticComponent<ArrowProps & react.RefAttributes<HTMLButtonElement>>;
-
-declare type ArrowBadgeSideShape = 'square' | 'tail' | 'arrow';
-declare type ArrowBadgeSize = 'xl' | 'l' | 'm' | 's';
-interface ArrowBadgeProps extends BaseProps, Color, Display {
-    /** Children react node */
-    children?: React.ReactNode;
-    content?: React.ReactNode;
-    /** Secondary appearance */
-    secondary?: boolean;
-    /** Third appearance */
-    third?: boolean;
-    /** Fourth appearance */
-    fourth?: boolean;
-    /** Small view */
-    small?: boolean;
-    /** Size */
-    size?: ArrowBadgeSize;
-    /** Left side shape */
-    leftShape?: ArrowBadgeSideShape;
-    /** Right side shape */
-    rightShape?: ArrowBadgeSideShape;
-}
-
-/**
- * Расширен:
- * - [`BaseProps`](#/Миксины)
- * - [`Color`](#/Миксины)
- * - [`Display`](#/Миксины)
- */
-declare function ArrowBadge({ children, content, className, display, ...restProps }: ArrowBadgeProps): JSX.Element;
-declare namespace ArrowBadge {
-    var displayName: string;
-}
-
-interface AvatarProps extends BaseProps, Color {
+interface AvatarProps extends BaseProps, ColorProperty {
     /**
      * Children react node
      */
@@ -1107,7 +1539,7 @@ declare class Avatar extends PureComponent<AvatarProps> {
     render(): JSX.Element;
 }
 
-interface BadgeProps extends BaseProps, Color, Display {
+interface BadgeProps extends BaseProps, ColorProperty, DisplayProperty {
     /**
      * Children react node
      */
@@ -1128,7 +1560,7 @@ declare namespace Badge {
     var displayName: string;
 }
 
-interface ContainerProps extends BaseProps, Display, Color {
+interface ContainerProps extends BaseProps, DisplayProperty, ColorProperty {
     /**
      * Primary content
      */
@@ -1244,7 +1676,7 @@ declare namespace Modal {
     var displayName: string;
 }
 
-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'> {
+interface SpacerProps extends BaseProps, DisplayProperty, 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
      */
@@ -1278,7 +1710,7 @@ declare namespace Spacer {
     var displayName: string;
 }
 
-interface PaperProps extends SpacerProps, Color, ResponsiveNamedProperty<'padding'> {
+interface PaperProps extends SpacerProps, ColorProperty, ResponsiveNamedProperty<'padding'> {
     /**
      * Set to true to generate a circlular paper container
      */
@@ -1311,7 +1743,7 @@ declare namespace Paper {
     var displayName: string;
 }
 
-interface ProgressSegmentedProps extends BaseProps, Color<'separatorColor'>, Color<'percentColor'> {
+interface ProgressSegmentedProps extends BaseProps, ColorProperty<'separatorColor'>, ColorProperty<'percentColor'> {
     /**
      * Current percent complete
      */
@@ -1351,7 +1783,7 @@ declare namespace ProgressSegmented {
     var displayName: string;
 }
 
-interface ProgressCircleProps extends BaseProps, Color<'resultColor'>, Color<'strokeBGColor'> {
+interface ProgressCircleProps extends BaseProps, ColorProperty<'resultColor'>, ColorProperty<'strokeBGColor'> {
     /**
      * status ['fail', 'success', 'started']
      */
@@ -1413,7 +1845,7 @@ declare class ProgressCircle extends PureComponent<typeof ProgressCircle.default
     render(): JSX.Element;
 }
 
-interface ProgressProps extends BaseProps, Color, Color<'backgroundColor'> {
+interface ProgressProps extends BaseProps, ColorProperty, ColorProperty<'backgroundColor'> {
     /**
      * Current percent complete
      */
@@ -1660,7 +2092,7 @@ declare const withThemeScrollable: react.ForwardRefExoticComponent<{
     theme?: DefaultTheme | undefined;
 }>;
 
-interface SectionProps extends BaseProps, Display, Color, ResponsiveNamedProperty<'padding'> {
+interface SectionProps extends BaseProps, DisplayProperty, ColorProperty, ResponsiveNamedProperty<'padding'> {
     /**
      * Paper with shadow
      */
@@ -1693,7 +2125,7 @@ declare namespace Section {
     var displayName: string;
 }
 
-interface SeparatorTextProps extends BaseProps, Color {
+interface SeparatorTextProps extends BaseProps, ColorProperty {
     /**
      * Children react node
      */
@@ -1701,7 +2133,7 @@ interface SeparatorTextProps extends BaseProps, Color {
 }
 declare function SeparatorText({ children, className, color, ...restProps }: SeparatorTextProps): JSX.Element;
 
-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'> {
+interface SeparatorProps extends BaseProps, ColorProperty, 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
      */
@@ -1765,7 +2197,7 @@ declare namespace Spinner {
     var displayName: string;
 }
 
-interface SwitcherProps extends BaseProps, Color<'color'>, Color<'inactiveColor'> {
+interface SwitcherProps extends BaseProps, ColorProperty<'color'>, ColorProperty<'inactiveColor'> {
     /**
      * Id for swithcer
      */
@@ -1814,7 +2246,7 @@ declare namespace Switcher {
     var displayName: string;
 }
 
-interface TabProps extends Color, Color<'borderColor'> {
+interface TabProps extends ColorProperty, ColorProperty<'borderColor'> {
     /**
      * An element type to render as (string or function).
      */
@@ -1850,7 +2282,7 @@ declare namespace TabsTab {
     };
 }
 
-interface TabsProps extends BaseProps, Color, Color<'borderColor'> {
+interface TabsProps extends BaseProps, ColorProperty, ColorProperty<'borderColor'> {
     /**
      * Primary content.
      */
@@ -1911,7 +2343,7 @@ declare namespace Tooltip {
     var displayName: string;
 }
 
-interface TagProps extends BaseProps, Display, Color, ResponsiveNamedProperty<'height'>, ResponsiveNamedProperty<'width'> {
+interface TagProps extends BaseProps, DisplayProperty, ColorProperty, ResponsiveNamedProperty<'height'>, ResponsiveNamedProperty<'width'> {
     as?: 'button' | 'div' | 'input' | 'label';
     /**
      * Field id
@@ -1997,12 +2429,12 @@ interface MultiLevelControls {
     cancel?: {
         content?: string;
         onClick?(): void;
-        color?: RGB | RGBA | HEX | keyof typeof ColorNames;
+        color?: Color;
     };
     confirm?: {
         content?: string;
         onClick?(): void;
-        color?: RGB | RGBA | HEX | keyof typeof ColorNames;
+        color?: Color;
     };
 }
 interface MultiLevelItem {
@@ -2127,7 +2559,7 @@ declare class ContextMenu extends PureComponent<ContextMenuProps, {
                     minWidth: number;
                     opacity: number;
                     position: string;
-                    transition: string;
+                    transition: string; /** Indicates if button is active (e.g. when context menu is open) */
                     visibility: string;
                     zIndex: number;
                 };
@@ -2141,19 +2573,19 @@ declare class ContextMenu extends PureComponent<ContextMenuProps, {
                     visibility: string;
                 };
                 floaterClosing: {
-                    opacity: number;
+                    opacity: number; /** On close menu callback  */
                     visibility: string;
                 };
                 floaterCentered: {
                     left: string;
-                    position: string;
+                    position: string; /** Content */
                     top: string;
-                    transform: string; /** Properties for inner Tooltip component */
+                    transform: string;
                 };
                 container: {
                     boxSizing: string;
                     borderRadius: number;
-                    border: string; /** Hide overlay for debug */
+                    border: string;
                     color: string;
                     backgroundColor: string;
                     minHeight: number;
@@ -2181,29 +2613,6 @@ declare class ContextMenu extends PureComponent<ContextMenuProps, {
     render(): JSX.Element;
 }
 
-declare type TextAreaHTMLAttributes = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'cols' | 'rows' | 'color'>;
-interface TextareaProps extends BaseProps$1, InputField$1, TextAreaHTMLAttributes {
-    /** Specifies the visible width of a text area */
-    cols?: number;
-    /** Specifies the visible number of lines in a text area */
-    rows?: number;
-    /** Specifies the visible max number of lines in a text area */
-    maxRows?: number;
-    /** Specifies the maximum number of characters allowed in the text area */
-    maxLength?: number;
-    /** On change handler */
-    onChange?(_event: React.ChangeEvent<HTMLTextAreaElement>): void;
-    /** Value */
-    value?: string;
-    /** Autosize for textarea */
-    autosize?: boolean;
-}
-
-declare const Textarea: {
-    (props: TextareaProps): JSX.Element;
-    displayName: string;
-};
-
 interface InputPhoneProps extends InputProps {
     /**
      * Settings for different country codes
@@ -2341,7 +2750,7 @@ interface RadioGroupProps extends BaseProps {
 declare function RadioGroup({ children, ...props }: RadioGroupProps): JSX.Element;
 
 declare type RadioInputHtmlAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'width'>;
-interface RadioProps extends BaseProps, Display, RadioInputHtmlAttributes {
+interface RadioProps extends BaseProps, DisplayProperty, RadioInputHtmlAttributes {
     /**
      * Field id
      */
@@ -2406,43 +2815,7 @@ declare namespace Radio {
     var displayName: string;
 }
 
-declare type CheckboxStaticSize = 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'xs' | 's' | 'm' | 'l' | 'xl';
-declare type CheckboxSize = CheckboxStaticSize | ResponsiveProperty$1<`${number}rem` | number>;
-interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'width' | 'value'>, BaseProps$1 {
-    /** Checkbox value */
-    value?: string | number;
-    /** Checkbox size */
-    size?: CheckboxSize;
-    /** Display inline, default to true */
-    inline?: boolean;
-    /** Checkbox errored appearance */
-    error?: boolean;
-    /** Root label width 100% */
-    fluid?: boolean;
-    /** Root label width */
-    width?: ResponsiveProperty$1<number | string>;
-    /** Label content */
-    children?: React.ReactNode;
-    /** @preset {Brand} Checkbox success appearance */
-    success?: boolean;
-    /** @preset {Brand} Label with background */
-    background?: boolean;
-    /** @preset {Brand} Modifies appearance on colored background */
-    onColored?: boolean;
-    /** @deprecated Use children */
-    label?: string;
-}
-interface CheckboxGroupProps extends BaseProps$1 {
-    inline?: boolean;
-    children: React.ReactNode;
-}
-interface CheckboxComponent extends ForwardRefExoticComponent<PropsWithoutRef<CheckboxProps> & RefAttributes<HTMLLabelElement>> {
-    Group: (props: CheckboxGroupProps) => JSX.Element;
-}
-
-declare const Checkbox: CheckboxComponent;
-
-interface SelectProps extends BaseProps, ReactSelectProps, Display {
+interface SelectProps extends BaseProps, ReactSelectProps, DisplayProperty {
     fluid?: boolean;
     error?: boolean;
     /**
@@ -2476,4 +2849,4 @@ declare namespace Select {
     var displayName: string;
 }
 
-export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Button, COUNTRY_DATA, CURRENCY_MAP, Checkbox, ColorNames, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FontWeight, HEX, INITIAL_MASK, Icon, Input, InputField, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Spacer, Spinner, Switcher, Tabs, Tag, Text, Textarea, 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, Avatar, Badge, BaseProps, Button, COUNTRY_DATA, CURRENCY_MAP, Checkbox, ColorNames, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FontWeight, HEX, INITIAL_MASK, Icon, Input, InputField, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, 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 };