profinansy-ui-lib 3.6.49 → 3.6.51

package/dist/components/uikit/TextWithPopup/TextWithPopup.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextWithPopup = void 0;
+const Popup_1 = require("../Popup");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Container = styled_components_1.default.span `
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 4px;
+`;
+// Компонент нужен для унифицированного решения, когда подсказка выстраивается за последним словом и переносится тоже только с последним словом
+const TextWithPopup = ({ text, hint }) => {
+    const { lastWord, newText } = (0, react_1.useMemo)(() => {
+        const words = text.split(' ');
+        const lastWord = words.pop();
+        return { lastWord, newText: words.join(' ') };
+    }, [text]);
+    return (react_1.default.createElement("span", null,
+        newText,
+        ' ',
+        react_1.default.createElement(Container, null,
+            lastWord,
+            react_1.default.createElement(Popup_1.Popup, Object.assign({}, hint)))));
+};
+exports.TextWithPopup = TextWithPopup;
+//# sourceMappingURL=TextWithPopup.js.map

package/dist/components/uikit/TextWithPopup/TextWithPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextWithPopup.js","sourceRoot":"","sources":["../../../../src/components/uikit/TextWithPopup/TextWithPopup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,oCAAgC;AAChC,+CAAsC;AACtC,0EAAsC;AAQtC,MAAM,SAAS,GAAG,2BAAM,CAAC,IAAI,CAAA;;;;;CAK5B,CAAA;AAED,+IAA+I;AAC/I,MAAM,aAAa,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAU,EAAE,EAAE;IAC/C,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACzC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAC7B,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,EAAE,CAAA;QAC5B,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/C,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,OAAO,CACL;QACG,OAAO;QAAE,GAAG;QACb,8BAAC,SAAS;YACP,QAAQ;YACT,8BAAC,aAAK,oBAAK,IAAI,EAAI,CACT,CACP,CACR,CAAA;AACH,CAAC,CAAA;AAEQ,sCAAa"}

package/dist/components/uikit/Textarea/Textarea.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = void 0;
+const react_1 = __importStar(require("react"));
+const Styled = __importStar(require("./Textarea.styled"));
+const ErrorText_1 = require("../ErrorText");
+const classnames_1 = __importDefault(require("classnames"));
+const styled_components_1 = require("styled-components");
+const ThemeProvider_1 = require("../../../theme/ThemeProvider");
+const theme_const_1 = require("../../../theme/theme.const");
+const Textarea = (0, react_1.forwardRef)(({ placeholder, name, error, maxLength, value, disabled, height = 132, resize = 'none', autoFocus, onChange, containerClass }, ref) => {
+    const [currentValue, setCurrentValue] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        setCurrentValue(value || '');
+    }, [value]);
+    const handlerChange = (evt) => {
+        setCurrentValue(evt.target.value);
+        onChange(evt.target.value, evt);
+    };
+    const { mode } = (0, ThemeProvider_1.useMode)();
+    const leftSymbols = maxLength - currentValue.length;
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_const_1.palette[mode] },
+        react_1.default.createElement(Styled.Container, { className: (0, classnames_1.default)('textarea-container', containerClass) },
+            react_1.default.createElement(Styled.Content, null,
+                react_1.default.createElement(Styled.Textarea, { ref: ref, autoFocus: autoFocus, disabled: disabled, maxLength: maxLength, value: currentValue, name: name, placeholder: placeholder || '', onChange: handlerChange, height: height, resize: resize, error: !!error }),
+                maxLength && (react_1.default.createElement(Styled.Length, { isFew: leftSymbols <= 30 }, leftSymbols))),
+            !!error && typeof error !== 'boolean' ? (react_1.default.createElement(ErrorText_1.ErrorText, { text: error || '' })) : null)));
+});
+exports.Textarea = Textarea;
+//# sourceMappingURL=Textarea.js.map

package/dist/components/uikit/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../src/components/uikit/Textarea/Textarea.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8D;AAC9D,0DAA2C;AAC3C,4CAAwC;AAGxC,4DAAmC;AACnC,yDAAiD;AACjD,gEAAsD;AACtD,4DAAoD;AAEpD,MAAM,QAAQ,GAAG,IAAA,kBAAU,EACzB,CACE,EACE,WAAW,EACX,IAAI,EACJ,KAAK,EACL,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,GAAG,GAAG,EACZ,MAAM,GAAG,MAAM,EACf,SAAS,EACT,QAAQ,EACR,cAAc,EACf,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAA;IAEpD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,eAAe,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,aAAa,GAAG,CAAC,GAA2C,EAAE,EAAE;QACpE,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QACjC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IACjC,CAAC,CAAA;IAED,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,uBAAO,GAAE,CAAA;IAE1B,MAAM,WAAW,GAAG,SAAS,GAAG,YAAY,CAAC,MAAM,CAAA;IAEnD,OAAO,CACL,8BAAC,iCAAa,IAAC,KAAK,EAAE,qBAAO,CAAC,IAAI,CAAC;QACjC,8BAAC,MAAM,CAAC,SAAS,IACf,SAAS,EAAE,IAAA,oBAAU,EAAC,oBAAoB,EAAE,cAAc,CAAC;YAE3D,8BAAC,MAAM,CAAC,OAAO;gBACb,8BAAC,MAAM,CAAC,QAAQ,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,IAAI,EAAE,EAC9B,QAAQ,EAAE,aAAa,EACvB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,CAAC,CAAC,KAAK,GACd;gBACD,SAAS,IAAI,CACZ,8BAAC,MAAM,CAAC,MAAM,IAAC,KAAK,EAAE,WAAW,IAAI,EAAE,IACpC,WAAW,CACE,CACjB,CACc;YAEhB,CAAC,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CACvC,8BAAC,qBAAS,IAAC,IAAI,EAAE,KAAK,IAAI,EAAE,GAAI,CACjC,CAAC,CAAC,CAAC,IAAI,CACS,CACL,CACjB,CAAA;AACH,CAAC,CACF,CAAA;AAEQ,4BAAQ"}

package/dist/components/uikit/Textarea/Textarea.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const StoryDescription_1 = require("../storybook/StoryDescription/StoryDescription");
+const StoryExample_1 = require("../storybook/StoryExample/StoryExample");
+const StoryTitle_1 = require("../storybook/StoryTitle/StoryTitle");
+const Textarea_1 = require("./Textarea");
+exports.default = {
+    title: 'Components/Textarea',
+    tags: ['autodocs'],
+    component: Textarea_1.Textarea
+};
+const Wrapper = styled_components_1.default.div `
+  & .textarea-container {
+    max-width: 340px;
+  }
+`;
+const Textarea = () => {
+    return (react_1.default.createElement(Wrapper, null,
+        react_1.default.createElement(StoryTitle_1.StoryTitle, { isBig: true }, "Textarea"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u041A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0434\u043B\u044F \u0432\u0432\u043E\u0434\u0430 \u0431\u043E\u043B\u044C\u0448\u0438\u0445 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u043C" }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Textarea_1.Textarea, { value: "", name: "test", onChange: null })),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u0421\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u044F"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "Textarea \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E" }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Textarea_1.Textarea, { name: "test", value: "", onChange: null })),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u041C\u043E\u0436\u0435\u0442\u0435 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044C \u0432\u044B\u0441\u043E\u0442\u0443 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430" }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Textarea_1.Textarea, { name: "test", value: "", onChange: null, height: 200 })),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u041C\u043E\u0436\u0435\u0442\u0435 \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0441\u0442\u044C resize \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430. \u041F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u043E\u0442\u043A\u043B\u044E\u0447\u0435\u043D\u043E" }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Textarea_1.Textarea, { name: "test", value: "", onChange: null, height: 200, resize: "both" })),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "Textarea \u0441 \u043F\u043B\u0435\u0439\u0441\u0445\u043E\u043B\u0434\u0435\u0440\u043E\u043C" }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Textarea_1.Textarea, { name: "test", value: "", placeholder: "Placeholder", onChange: null })),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "Textarea \u0441 \u043E\u0448\u0438\u0431\u043A\u043E\u0439 \u0431\u0435\u0437 \u0442\u0435\u043A\u0441\u0442\u0430 \u0438 \u0441 \u0442\u0435\u043A\u0441\u0442\u043E\u043C" }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 16
+                } },
+                react_1.default.createElement(Textarea_1.Textarea, { name: "test", value: "", error: true, onChange: null }),
+                react_1.default.createElement(Textarea_1.Textarea, { name: "test", value: "", error: "Something went wrong", onChange: null }))),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0417\u0430\u0434\u0438\u0437\u0435\u0439\u0431\u043B\u0435\u043D\u043D\u044B\u0439 textarea" }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Textarea_1.Textarea, { name: "test", value: "", disabled: true, placeholder: "\u0417\u0430\u0434\u0438\u0437\u0435\u0439\u0431\u043B\u0435\u043D\u043D\u044B\u0439 \u0438\u043D\u043F\u0443\u0442", onChange: null })),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "Textarea \u0441 \u043E\u0433\u0440\u0430\u043D\u0438\u0447\u0435\u043D\u0438\u0435\u043C \u043F\u043E \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432. \u0414\u043B\u044F \u043F\u0440\u0438\u043C\u0435\u0440\u0430: \u0442\u043E\u043B\u044C\u043A\u043E 100 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432" }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Textarea_1.Textarea, { name: "test", value: "", maxLength: 100, onChange: null }))));
+};
+exports.Textarea = Textarea;
+//# sourceMappingURL=Textarea.stories.js.map

package/dist/components/uikit/Textarea/Textarea.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.stories.js","sourceRoot":"","sources":["../../../../src/components/uikit/Textarea/Textarea.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AACzB,0EAAsC;AAEtC,qFAAiF;AACjF,yEAAqE;AACrE,mEAA+D;AAE/D,yCAAkD;AAElD,kBAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,SAAS,EAAE,mBAAS;CACrB,CAAA;AAED,MAAM,OAAO,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAIzB,CAAA;AAEM,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,OAAO,CACL,8BAAC,OAAO;QACN,8BAAC,uBAAU,IAAC,KAAK,EAAE,IAAI,eAAuB;QAC9C,8BAAC,mCAAgB,IAAC,IAAI,EAAC,yYAAyE,GAAG;QACnG,8BAAC,2BAAY;YACX,8BAAC,mBAAS,IAAC,KAAK,EAAC,EAAE,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,GAAI,CACrC;QACf,8BAAC,uBAAU,iEAAuB;QAClC,8BAAC,mCAAgB,IAAC,IAAI,EAAC,8EAAuB,GAAG;QACjD,8BAAC,2BAAY;YACX,8BAAC,mBAAS,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,EAAE,EAAC,QAAQ,EAAE,IAAI,GAAI,CACrC;QACf,8BAAC,mCAAgB,IAAC,IAAI,EAAC,yLAAmC,GAAG;QAC7D,8BAAC,2BAAY;YACX,8BAAC,mBAAS,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,EAAE,EAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,GAAI,CAClD;QACf,8BAAC,mCAAgB,IAAC,IAAI,EAAC,0VAAuE,GAAG;QACjG,8BAAC,2BAAY;YACX,8BAAC,mBAAS,IACR,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,EAAE,EACR,QAAQ,EAAE,IAAI,EACd,MAAM,EAAE,GAAG,EACX,MAAM,EAAC,MAAM,GACb,CACW;QACf,8BAAC,mCAAgB,IAAC,IAAI,EAAC,gGAA0B,GAAG;QACpD,8BAAC,2BAAY;YACX,8BAAC,mBAAS,IACR,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,EAAE,EACR,WAAW,EAAC,aAAa,EACzB,QAAQ,EAAE,IAAI,GACd,CACW;QACf,8BAAC,mCAAgB,IAAC,IAAI,EAAC,6KAA2C,GAAG;QACrE,8BAAC,2BAAY;YACX,uCACE,KAAK,EAAE;oBACL,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,QAAQ;oBACvB,GAAG,EAAE,EAAE;iBACR;gBAED,8BAAC,mBAAS,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,GAAI;gBAC/D,8BAAC,mBAAS,IACR,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,EAAE,EACR,KAAK,EAAC,sBAAsB,EAC5B,QAAQ,EAAE,IAAI,GACd,CACE,CACO;QACf,8BAAC,mCAAgB,IAAC,IAAI,EAAC,+FAAyB,GAAG;QACnD,8BAAC,2BAAY;YACX,8BAAC,mBAAS,IACR,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,EAAE,EACR,QAAQ,EAAE,IAAI,EACd,WAAW,EAAC,qHAAsB,EAClC,QAAQ,EAAE,IAAI,GACd,CACW;QACf,8BAAC,mCAAgB,IAAC,IAAI,EAAC,+WAAkF,GAAG;QAC5G,8BAAC,2BAAY;YACX,8BAAC,mBAAS,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,EAAE,EAAC,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,GAAI,CACrD,CACP,CACX,CAAA;AACH,CAAC,CAAA;AAtEY,QAAA,QAAQ,YAsEpB"}

package/dist/components/uikit/Textarea/Textarea.styled.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = exports.Length = exports.Content = exports.Container = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Scroll_1 = require("../../../styles/Scroll");
+exports.Container = styled_components_1.default.div `
+  width: 100%;
+`;
+exports.Content = styled_components_1.default.div `
+  position: relative;
+  width: 100%;
+`;
+exports.Length = styled_components_1.default.span `
+  position: absolute;
+  right: 12px;
+  padding: 0 2px;
+  background: ${(props) => props.theme.background.field};
+  border-radius: 4px;
+  bottom: 10px;
+  font-size: 13px;
+  line-height: 20px;
+  color: ${(props) => props.isFew ? props.theme.text.negative : props.theme.text.primary};
+`;
+exports.Textarea = styled_components_1.default.textarea `
+  font-family: Manrope, sans-serif;
+  font-size: 15px;
+  line-height: 20px;
+  color: ${(props) => props.theme.text.primary};
+  display: block;
+  width: 100%;
+  padding: 12px;
+  border-radius: 8px;
+  background: ${(props) => props.theme.background.field};
+  border: 0.8px solid
+    ${(props) => props.error ? props.theme.stroke.negative : props.theme.stroke.primary};
+  resize: ${(props) => props.resize};
+  height: ${(props) => props.height}px;
+  min-height: 42px;
+  &::placeholder {
+    color: ${(props) => props.theme.text.secondary};
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 20px;
+  }
+  ${Scroll_1.Scroll}
+  &:disabled {
+    border-color: ${(props) => props.theme.stroke.tertiary};
+    color: ${(props) => props.theme.text.secondary};
+  }
+  &:disabled::placeholder {
+    color: ${(props) => props.theme.text.secondary};
+  }
+  &:hover {
+    border-color: ${(props) => props.theme.stroke.secondary};
+  }
+  &:focus {
+    border-color: ${(props) => props.theme.stroke.accent};
+    outline: none;
+  }
+`;
+//# sourceMappingURL=Textarea.styled.js.map

package/dist/components/uikit/Textarea/Textarea.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.styled.js","sourceRoot":"","sources":["../../../../src/components/uikit/Textarea/Textarea.styled.ts"],"names":[],"mappings":";;;;;;AAAA,0EAAsC;AAGtC,mDAA+C;AAQlC,QAAA,SAAS,GAAG,2BAAM,CAAC,GAAG,CAAA;;CAElC,CAAA;AAEY,QAAA,OAAO,GAAG,2BAAM,CAAC,GAAG,CAAA;;;CAGhC,CAAA;AAEY,QAAA,MAAM,GAAG,2BAAM,CAAC,IAAI,CAAoB;;;;gBAIrC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK;;;;;WAK5C,CAAC,KAAK,EAAE,EAAE,CACjB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CACrE,CAAA;AAEY,QAAA,QAAQ,GAAG,2BAAM,CAAC,QAAQ,CAAQ;;;;WAIpC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;gBAK9B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK;;MAEjD,CAAC,KAAK,EAAE,EAAE,CACV,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;YAChE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM;YACvB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM;;;aAGtB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS;;;;;IAK9C,eAAM;;oBAEU,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;aAC7C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS;;;aAGrC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS;;;oBAG9B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS;;;oBAGvC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;CAGvD,CAAA"}

package/dist/components/uikit/Textarea/Textarea.typed.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Textarea.typed.js.map

package/dist/components/uikit/Textarea/Textarea.typed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.typed.js","sourceRoot":"","sources":["../../../../src/components/uikit/Textarea/Textarea.typed.ts"],"names":[],"mappings":""}

package/dist/components/uikit/Textarea/TextareaAutoSize.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextareaAutoSize = void 0;
+const react_1 = __importStar(require("react"));
+const Textarea_1 = require("./Textarea");
+const MIN_HEIGHT = 45;
+const TextareaAutoSize = (_a) => {
+    var { defaultHeight = MIN_HEIGHT, maxHeight = 200 } = _a, props = __rest(_a, ["defaultHeight", "maxHeight"]);
+    const textAreaRef = (0, react_1.useRef)(null);
+    const [textAreaHeight, setTextAreaHeight] = (0, react_1.useState)(defaultHeight);
+    (0, react_1.useEffect)(() => {
+        const resizeTextarea = () => {
+            if (textAreaRef.current) {
+                const scrollHeight = textAreaRef.current.scrollHeight;
+                setTextAreaHeight(Math.min(scrollHeight, maxHeight));
+            }
+        };
+        resizeTextarea();
+    }, [props.value, maxHeight, textAreaHeight]);
+    return react_1.default.createElement(Textarea_1.Textarea, Object.assign({ ref: textAreaRef, height: textAreaHeight }, props));
+};
+exports.TextareaAutoSize = TextareaAutoSize;
+//# sourceMappingURL=TextareaAutoSize.js.map

package/dist/components/uikit/Textarea/TextareaAutoSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaAutoSize.js","sourceRoot":"","sources":["../../../../src/components/uikit/Textarea/TextareaAutoSize.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0D;AAC1D,yCAAqC;AAQrC,MAAM,UAAU,GAAG,EAAE,CAAA;AAErB,MAAM,gBAAgB,GAAG,CAAC,EAIL,EAAE,EAAE;QAJC,EACxB,aAAa,GAAG,UAAU,EAC1B,SAAS,GAAG,GAAG,OAEI,EADhB,KAAK,cAHgB,8BAIzB,CADS;IAER,MAAM,WAAW,GAAG,IAAA,cAAM,EAA6B,IAAI,CAAC,CAAA;IAC5D,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,aAAa,CAAC,CAAA;IAEnE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,cAAc,GAAG,GAAG,EAAE;YAC1B,IAAI,WAAW,CAAC,OAAO,EAAE;gBACvB,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,YAAY,CAAA;gBACrD,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAA;aACrD;QACH,CAAC,CAAA;QAED,cAAc,EAAE,CAAA;IAClB,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAA;IAE5C,OAAO,8BAAC,mBAAQ,kBAAC,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,cAAc,IAAM,KAAK,EAAI,CAAA;AAC1E,CAAC,CAAA;AAEQ,4CAAgB"}

package/dist/components/uikit/Textarea/Text/320/260reaAutoSize.stories.js

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextareaAutoSize = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const StoryDescription_1 = require("../storybook/StoryDescription/StoryDescription");
+const StoryExample_1 = require("../storybook/StoryExample/StoryExample");
+const StoryTitle_1 = require("../storybook/StoryTitle/StoryTitle");
+const TextareaAutoSize_1 = require("./TextareaAutoSize");
+exports.default = {
+    title: 'Components/TextareaAutoSize',
+    component: TextareaAutoSize_1.TextareaAutoSize,
+    tags: ['autodocs']
+};
+const Wrapper = styled_components_1.default.div `
+  & .textarea-container {
+    max-width: 340px;
+  }
+`;
+const TextareaAutoSize = () => {
+    const [value, setValue] = (0, react_1.useState)('');
+    return (react_1.default.createElement(Wrapper, null,
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u041A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 TextareaAutoSize"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u041A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 TextareaAutoSize \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0434\u043B\u044F \u0430\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u0432\u044B\u0441\u043E\u0442\u044B \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043C\u043E\u0441\u0442\u0438 \u043E\u0442 \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E. \u041F\u0440\u0438\u043D\u0438\u043C\u0430\u0435\u0442 \u0442\u0430\u043A\u0438\u0435 \u0436\u0435 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430, \u043A\u0430\u043A \u0438 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 Textarea" }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(TextareaAutoSize_1.TextareaAutoSize, { value: value, name: "test", onChange: setValue }))));
+};
+exports.TextareaAutoSize = TextareaAutoSize;
+//# sourceMappingURL=Text%D0%B0reaAutoSize.stories.js.map

package/dist/components/uikit/Textarea/Text/320/260reaAutoSize.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextаreaAutoSize.stories.js","sourceRoot":"","sources":["../../../../src/components/uikit/Textarea/TextаreaAutoSize.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AACvC,0EAAsC;AAEtC,qFAAiF;AACjF,yEAAqE;AACrE,mEAA+D;AAE/D,yDAAkE;AAElE,kBAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,mCAAS;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAA;AAED,MAAM,OAAO,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAIzB,CAAA;AAEM,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAA;IAEtC,OAAO,CACL,8BAAC,OAAO;QACN,8BAAC,uBAAU,kFAAwC;QACnD,8BAAC,mCAAgB,IAAC,IAAI,EAAC,suBAAkK,GAAG;QAC5L,8BAAC,2BAAY;YACX,8BAAC,mCAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,QAAQ,GAAI,CAC9C,CACP,CACX,CAAA;AACH,CAAC,CAAA;AAZY,QAAA,gBAAgB,oBAY5B"}

package/dist/components/uikit/Textarea/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextareaAutoSize = exports.Textarea = void 0;
+var Textarea_1 = require("./Textarea");
+Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return Textarea_1.Textarea; } });
+var TextareaAutoSize_1 = require("./TextareaAutoSize");
+Object.defineProperty(exports, "TextareaAutoSize", { enumerable: true, get: function () { return TextareaAutoSize_1.TextareaAutoSize; } });
+//# sourceMappingURL=index.js.map

package/dist/components/uikit/Textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/uikit/Textarea/index.ts"],"names":[],"mappings":";;;AAAA,uCAAqC;AAA5B,oGAAA,QAAQ,OAAA;AACjB,uDAAqD;AAA5C,oHAAA,gBAAgB,OAAA"}

package/dist/components/uikit/Tooltip/Tooltip.js

@@ -0,0 +1,161 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = exports.TooltipContent = exports.TooltipTrigger = exports.useTooltip = void 0;
+const react_1 = __importStar(require("react"));
+const react_2 = require("@floating-ui/react");
+const ThemeProvider_1 = require("../../../theme/ThemeProvider");
+const styled_components_1 = require("styled-components");
+const theme_const_1 = require("../../../theme/theme.const");
+const zIndex_1 = require("../../../constants/zIndex");
+const Styled = __importStar(require("./Tooltip.styled"));
+function useTooltip({ placement = 'bottom', isHover = false, showArrow = true }) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const arrowRef = (0, react_1.useRef)(null);
+    const data = (0, react_2.useFloating)({
+        placement,
+        open,
+        onOpenChange: setOpen,
+        whileElementsMounted: react_2.autoUpdate,
+        middleware: [
+            (0, react_2.arrow)({
+                element: arrowRef
+            }),
+            (0, react_2.offset)(showArrow ? 10 : 4),
+            (0, react_2.flip)({
+                crossAxis: placement.includes('-'),
+                fallbackAxisSideDirection: 'end',
+                padding: 5
+            }),
+            (0, react_2.shift)({ padding: { top: 70, bottom: 10, left: 10, right: 10 } })
+        ]
+    });
+    (0, react_1.useEffect)(() => {
+        if (data.middlewareData.arrow &&
+            data.middlewareData.shift &&
+            arrowRef.current &&
+            showArrow) {
+            const { x, y } = data.middlewareData.arrow;
+            const position = context === null || context === void 0 ? void 0 : context.placement.split('-')[0];
+            const settings = {};
+            if (position === 'top' || position === 'bottom') {
+                settings.left = `${x - data.middlewareData.shift.x}px`;
+                if (position === 'top') {
+                    settings.bottom = '0px';
+                }
+                else {
+                    settings.top = '-13px';
+                }
+            }
+            if (position === 'left' || position === 'right') {
+                settings.top = `${y - data.middlewareData.shift.y}px`;
+                if (position === 'left') {
+                    settings.right = '0px';
+                }
+                else {
+                    settings.left = '-13px';
+                }
+            }
+            Object.assign(arrowRef.current.style, settings);
+        }
+    }, [data, showArrow]);
+    const context = data.context;
+    const hover = (0, react_2.useHover)(context, {
+        enabled: isHover,
+        handleClose: (0, react_2.safePolygon)(),
+        move: false,
+        delay: {
+            open: 300,
+            close: 0
+        }
+    });
+    const click = (0, react_2.useClick)(context, { enabled: !isHover });
+    const dismiss = (0, react_2.useDismiss)(context);
+    const role = (0, react_2.useRole)(context);
+    const interactions = (0, react_2.useInteractions)([dismiss, role, click, hover]);
+    return react_1.default.useMemo(() => (Object.assign(Object.assign({ arrowRef,
+        open,
+        setOpen }, interactions), data)), [open, setOpen, interactions, data, arrowRef]);
+}
+exports.useTooltip = useTooltip;
+const TooltipContext = react_1.default.createContext(null);
+const Tooltip = (_a) => {
+    var { children, width, height, zIndex, padding, styleContainer } = _a, props = __rest(_a, ["children", "width", "height", "zIndex", "padding", "styleContainer"]);
+    const popup = useTooltip(Object.assign({}, props));
+    return (react_1.default.createElement(TooltipContext.Provider, { value: popup },
+        react_1.default.createElement("div", { style: styleContainer, onClick: (e) => (props.isHover ? null : e.stopPropagation()) },
+            react_1.default.createElement(exports.TooltipTrigger, { targetElement: props.targetElement }),
+            react_1.default.createElement(exports.TooltipContent, { width: width, height: height, zIndex: zIndex, padding: padding, showArrow: props.showArrow }, children))));
+};
+exports.Tooltip = Tooltip;
+const TooltipTrigger = ({ targetElement }) => {
+    const context = (0, react_1.useContext)(TooltipContext);
+    const ref = (0, react_2.useMergeRefs)([context.refs.setReference]);
+    if (targetElement && react_1.default.isValidElement(targetElement)) {
+        return react_1.default.cloneElement(targetElement, context.getReferenceProps(Object.assign(Object.assign({ ref }, targetElement.props), { 'data-state': context.open ? 'open' : 'closed' })));
+    }
+    return null;
+};
+exports.TooltipTrigger = TooltipTrigger;
+const TooltipContent = ({ children, width, height, zIndex, padding, showArrow = true }) => {
+    const _a = (0, react_1.useContext)(TooltipContext), { context: floatingContext } = _a, context = __rest(_a, ["context"]);
+    const ref = (0, react_2.useMergeRefs)([context.refs.setFloating]);
+    const { mode } = (0, ThemeProvider_1.useMode)();
+    const { styles: transitionStyles } = (0, react_2.useTransitionStyles)(floatingContext, {
+        duration: {
+            open: 100,
+            close: 100
+        },
+        initial: {
+            opacity: 0,
+            transform: 'scale(0.8)'
+        }
+    });
+    if (!floatingContext.open)
+        return null;
+    return (react_1.default.createElement(react_2.FloatingPortal, null,
+        react_1.default.createElement(react_2.FloatingFocusManager, { context: floatingContext, modal: false },
+            react_1.default.createElement(Styled.Container, Object.assign({ ref: ref, style: Object.assign({ zIndex: zIndex ? zIndex : zIndex_1.zIndex.zIndex5 }, context.floatingStyles) }, context.getFloatingProps()),
+                react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_const_1.palette[mode] },
+                    react_1.default.createElement("div", { style: transitionStyles },
+                        react_1.default.createElement(Styled.Tooltip, { width: width, height: height, mode: mode },
+                            showArrow && (react_1.default.createElement(react_2.FloatingArrow, { ref: context.arrowRef, context: floatingContext, tipRadius: 2, stroke: mode === 'light'
+                                    ? '#f0f0f0'
+                                    : theme_const_1.palette[mode].stroke.contrast, strokeWidth: 1, fill: theme_const_1.palette[mode].background.field })),
+                            react_1.default.createElement(Styled.Content, { height: height, padding: padding }, children))))))));
+};
+exports.TooltipContent = TooltipContent;
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/uikit/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../src/components/uikit/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}

package/dist/components/uikit/Tooltip/Tooltip.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+const react_1 = __importDefault(require("react"));
+const Button_1 = require("../Button");
+const StoryDescription_1 = require("../storybook/StoryDescription/StoryDescription");
+const StoryExample_1 = require("../storybook/StoryExample/StoryExample");
+const StoryTitle_1 = require("../storybook/StoryTitle/StoryTitle");
+const Tooltip_1 = require("./Tooltip");
+exports.default = {
+    title: 'Components/Tooltip',
+    component: Tooltip_1.Tooltip,
+    tags: ['autodocs']
+};
+const Tooltip = () => {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(StoryTitle_1.StoryTitle, { isBig: true }, "Tooltip"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u041A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0434\u043B\u044F \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F \u0432\u044B\u043F\u0430\u0434\u0430\u0448\u043A\u0438 \u0441 \u043A\u0430\u043A\u0438\u043C-\u043B\u0438\u0431\u043E \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u043E\u043C. \u041A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435\n       \u043B\u043E\u0433\u0438\u043A\u0443 \u043F\u043E \u043E\u0442\u043A\u0440\u044B\u0442\u0438\u044E \u0432\u044B\u043F\u0430\u0434\u0430\u0448\u043A\u0438 \u043F\u043E targetElement. \u041F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u0448\u0438\u0440\u0438\u043D\u0430 \u0432\u044B\u043F\u0430\u0434\u0430\u0448\u043A\u0438 \u0440\u0430\u0432\u043D\u0430 240px, \u043D\u043E \u0432\u044B \u0435\u0435 \u043C\u043E\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u043B\u044E\u0431\u043E\u0439, \u043F\u0435\u0440\u0435\u0434\u0430\u0432\n       \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E <b>width</b>. \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0432\u044B\u043F\u0430\u0434\u0430\u0448\u043A\u0438 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u0440\u0430\u0432\u043D\u0430 448px, \u043D\u043E \u0432\u044B \u0435\u0435 \u043C\u043E\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u043B\u044E\u0431\u043E\u0439, \u043F\u0435\u0440\u0435\u0434\u0430\u0432\n       \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E <b>height</b>" }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Tooltip_1.Tooltip, { targetElement: react_1.default.createElement(Button_1.Button, { text: "Open tooltip" }), width: '300px', height: "100px" },
+                react_1.default.createElement("div", { style: { fontSize: '12px' } }, "Lorem Ipsum - \u044D\u0442\u043E \u0442\u0435\u043A\u0441\u0442-\"\u0440\u044B\u0431\u0430\", \u0447\u0430\u0441\u0442\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C\u044B\u0439 \u0432 \u043F\u0435\u0447\u0430\u0442\u0438 \u0438 \u0432\u044D\u0431-\u0434\u0438\u0437\u0430\u0439\u043D\u0435. Lorem Ipsum \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u0441\u0442\u0430\u043D\u0434\u0430\u0440\u0442\u043D\u043E\u0439 \"\u0440\u044B\u0431\u043E\u0439\" \u0434\u043B\u044F \u0442\u0435\u043A\u0441\u0442\u043E\u0432 \u043D\u0430 \u043B\u0430\u0442\u0438\u043D\u0438\u0446\u0435 \u0441 \u043D\u0430\u0447\u0430\u043B\u0430 XVI \u0432\u0435\u043A\u0430."))),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u041E\u0442\u043A\u0440\u044B\u0442\u0438\u0435 \u0442\u0443\u043B\u0442\u0438\u043F\u0430 \u043F\u043E \u0445\u043E\u0432\u0435\u0440\u0443"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0418\u0437\u043D\u0430\u0447\u0430\u043B\u044C\u043D\u043E \u0442\u0443\u043B\u0442\u0438\u043F \u043E\u0442\u043A\u0440\u044B\u0432\u0430\u0435\u0442\u0441\u044F \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E \u043A\u043B\u0438\u043A\u0443 \u043D\u0430 \u0442\u0430\u0440\u0433\u0435\u0442 \u044D\u043B\u0435\u043C\u0435\u043D\u0442. \u0415\u0441\u043B\u0438 \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C props <b>isHover</b>,\n          \u0442\u043E \u0442\u0443\u043B\u0442\u0438\u043F \u0431\u0443\u0434\u0435\u0442 \u043E\u0442\u043A\u0440\u044B\u0432\u0430\u0442\u044C\u0441\u044F \u043F\u043E \u0445\u043E\u0432\u0435\u0440\u0443 \u043D\u0430 \u0442\u0430\u0440\u0433\u0435\u0442 \u044D\u043B\u0435\u043C\u0435\u043D\u0442." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Tooltip_1.Tooltip, { targetElement: react_1.default.createElement(Button_1.Button, { text: "Open tooltip" }), width: '300px', height: "100px", isHover: true },
+                react_1.default.createElement("div", { style: { fontSize: '12px' } }, "Lorem Ipsum - \u044D\u0442\u043E \u0442\u0435\u043A\u0441\u0442-\"\u0440\u044B\u0431\u0430\", \u0447\u0430\u0441\u0442\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C\u044B\u0439 \u0432 \u043F\u0435\u0447\u0430\u0442\u0438 \u0438 \u0432\u044D\u0431-\u0434\u0438\u0437\u0430\u0439\u043D\u0435. Lorem Ipsum \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u0441\u0442\u0430\u043D\u0434\u0430\u0440\u0442\u043D\u043E\u0439 \"\u0440\u044B\u0431\u043E\u0439\" \u0434\u043B\u044F \u0442\u0435\u043A\u0441\u0442\u043E\u0432 \u043D\u0430 \u043B\u0430\u0442\u0438\u043D\u0438\u0446\u0435 \u0441 \u043D\u0430\u0447\u0430\u043B\u0430 XVI \u0432\u0435\u043A\u0430.")))));
+};
+exports.Tooltip = Tooltip;
+//# sourceMappingURL=Tooltip.stories.js.map

package/dist/components/uikit/Tooltip/Tooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.js","sourceRoot":"","sources":["../../../../src/components/uikit/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AAEzB,sCAAkC;AAClC,qFAAiF;AACjF,yEAAqE;AACrE,mEAA+D;AAE/D,uCAAgD;AAEhD,kBAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,iBAAS;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAA;AAEM,MAAM,OAAO,GAAG,GAAG,EAAE;IAC1B,OAAO,CACL;QACE,8BAAC,uBAAU,IAAC,KAAK,EAAE,IAAI,cAAsB;QAC7C,8BAAC,mCAAgB,IACf,IAAI,EAAC,krDAGiB,GACtB;QACF,8BAAC,2BAAY;YACX,8BAAC,iBAAS,IACR,aAAa,EAAE,8BAAC,eAAM,IAAC,IAAI,EAAC,cAAc,GAAG,EAC7C,KAAK,EAAE,OAAO,EACd,MAAM,EAAC,OAAO;gBAEd,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,uqBAI1B,CACI,CACC;QACf,8BAAC,uBAAU,wJAAwC;QACnD,8BAAC,mCAAgB,IACf,IAAI,EAAC,ouBACsD,GAC3D;QACF,8BAAC,2BAAY;YACX,8BAAC,iBAAS,IACR,aAAa,EAAE,8BAAC,eAAM,IAAC,IAAI,EAAC,cAAc,GAAG,EAC7C,KAAK,EAAE,OAAO,EACd,MAAM,EAAC,OAAO,EACd,OAAO,EAAE,IAAI;gBAEb,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,uqBAI1B,CACI,CACC,CACX,CACP,CAAA;AACH,CAAC,CAAA;AA5CY,QAAA,OAAO,WA4CnB"}