profinansy-ui-lib 3.1.83 → 3.1.85

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/uikit/Switch/index.ts"],"names":[],"mappings":";;;AAAA,mCAAiC;AAAxB,gGAAA,MAAM,OAAA"}

package/dist/components/uikit/TabListCell/TabListCell.js

@@ -0,0 +1,46 @@
+"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.TabListCell = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./TabListCell.styled"));
+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 TabListCell = ({ listClass, styleTab = {}, styleList = {}, tabClass, options, size = 'S', selectedValue, onChange }) => {
+    const handleClick = (val, e) => {
+        if (onChange)
+            onChange(val, e);
+    };
+    const { mode } = (0, ThemeProvider_1.useMode)();
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_const_1.palette[mode] },
+        react_1.default.createElement(Styled.Container, { style: styleList, className: (0, classnames_1.default)('tabList-container', listClass) }, options.map((item) => (react_1.default.createElement(Styled.Tab, { size: size, style: styleTab, active: selectedValue === item.value, className: (0, classnames_1.default)('tabList-item', tabClass), key: item.value, onClick: (e) => handleClick(item.value, e) }, item.label))))));
+};
+exports.TabListCell = TabListCell;
+//# sourceMappingURL=TabListCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabListCell.js","sourceRoot":"","sources":["../../../../src/components/uikit/TabListCell/TabListCell.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAyC;AAGzC,6DAA8C;AAC9C,4DAAmC;AACnC,yDAAiD;AACjD,gEAAsD;AACtD,4DAAoD;AAEpD,MAAM,WAAW,GAAG,CAAC,EACnB,SAAS,EACT,QAAQ,GAAG,EAAE,EACb,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,GAAG,EACV,aAAa,EACb,QAAQ,EACU,EAAE,EAAE;IACtB,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,CAAgC,EAAE,EAAE;QACpE,IAAI,QAAQ;YAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;IAChC,CAAC,CAAA;IAED,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,uBAAO,GAAE,CAAA;IAE1B,OAAO,CACL,8BAAC,iCAAa,IAAC,KAAK,EAAE,qBAAO,CAAC,IAAI,CAAC;QACjC,8BAAC,MAAM,CAAC,SAAS,IACf,KAAK,EAAE,SAAS,EAChB,SAAS,EAAE,IAAA,oBAAU,EAAC,mBAAmB,EAAE,SAAS,CAAC,IAEpD,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACrB,8BAAC,MAAM,CAAC,GAAG,IACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC,KAAK,EACpC,SAAS,EAAE,IAAA,oBAAU,EAAC,cAAc,EAAE,QAAQ,CAAC,EAC/C,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,IAEzC,IAAI,CAAC,KAAK,CACA,CACd,CAAC,CACe,CACL,CACjB,CAAA;AACH,CAAC,CAAA;AAEQ,kCAAW"}

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

@@ -0,0 +1,59 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabListCell = void 0;
+const react_1 = __importStar(require("react"));
+const StoryDescription_1 = require("../storybook/StoryDescription/StoryDescription");
+const StoryExample_1 = require("../storybook/StoryExample/StoryExample");
+const StoryTitle_1 = require("../storybook/StoryTitle/StoryTitle");
+const TabListCell_1 = require("./TabListCell");
+exports.default = {
+    title: 'Components',
+    component: TabListCell_1.TabListCell
+};
+const TABS = [
+    { label: 'Option 1', value: 'Option 1' },
+    { label: 'Option 2', value: 'Option 2' },
+    { label: 'Option 3', value: 'Option 3' },
+    { label: 'Option 4', value: 'Option 4' }
+];
+const TabListCell = () => {
+    const [selected, setSelected] = (0, react_1.useState)(TABS[0].value);
+    const [selected1, setSelected1] = (0, react_1.useState)(TABS[0].value);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u0422\u0430\u0431\u044B"),
+        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 \u0442\u0430\u0431\u043E\u0432 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044E. \u041A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0437\u0430\u043D\u0438\u043C\u0430\u0435\u0442\n      100% \u0448\u0438\u0440\u0438\u043D\u044B \u0440\u043E\u0434\u0438\u0442\u0435\u043B\u044C\u0441\u043A\u043E\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430, \u0430 \u0442\u0430\u0431\u044B \u0440\u0430\u0441\u0442\u044F\u0433\u0438\u0432\u0430\u044E\u0442\u0441\u044F, \u0447\u0442\u043E\u0431\u044B \u0437\u0430\u043D\u0438\u043C\u0430\u0442\u044C \u043E\u0434\u0438\u043D\u0430\u043A\u043E\u0432\u043E\u0435 \u0440\u0430\u0441\u0441\u0442\u043E\u044F\u043D\u0438\u0435" }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(TabListCell_1.TabListCell, { options: TABS, selectedValue: selected, onChange: setSelected })),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u0420\u0430\u0437\u043C\u0435\u0440"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u041A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438\u043C\u0435\u0435\u0442 \u0442\u0440\u0438 \u0440\u0430\u0437\u043D\u044B\u0445 \u0440\u0430\u0437\u043C\u0435\u0440\u0430: L, M, S. \u041F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u0432\u044B\u0431\u0440\u0430\u043D \u0440\u0430\u0437\u043C\u0435\u0440 S." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 30 } },
+                react_1.default.createElement(TabListCell_1.TabListCell, { options: TABS, selectedValue: selected1, onChange: setSelected1, size: 'S' }),
+                react_1.default.createElement(TabListCell_1.TabListCell, { options: TABS, selectedValue: selected1, onChange: setSelected1, size: 'M' }),
+                react_1.default.createElement(TabListCell_1.TabListCell, { options: TABS, selectedValue: selected1, onChange: setSelected1, size: 'L' })))));
+};
+exports.TabListCell = TabListCell;
+//# sourceMappingURL=TabListCell.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabListCell.stories.js","sourceRoot":"","sources":["../../../../src/components/uikit/TabListCell/TabListCell.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AAEvC,qFAAiF;AACjF,yEAAqE;AACrE,mEAA+D;AAE/D,+CAAwD;AAExD,kBAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,yBAAS;CACrB,CAAA;AAED,MAAM,IAAI,GAAG;IACX,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;IACxC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;IACxC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;IACxC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;CACzC,CAAA;AAEM,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;IACvD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;IAEzD,OAAO,CACL;QACE,8BAAC,uBAAU,mCAAkB;QAC7B,8BAAC,mCAAgB,IACf,IAAI,EAAC,g6BAC0F,GAC/F;QACF,8BAAC,2BAAY;YACX,8BAAC,yBAAS,IACR,OAAO,EAAE,IAAI,EACb,aAAa,EAAE,QAAQ,EACvB,QAAQ,EAAE,WAAW,GACrB,CACW;QACf,8BAAC,uBAAU,+CAAoB;QAC/B,8BAAC,mCAAgB,IAAC,IAAI,EAAC,qVAA4E,GAAG;QACtG,8BAAC,2BAAY;YACX,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE;gBAC/D,8BAAC,yBAAS,IACR,OAAO,EAAE,IAAI,EACb,aAAa,EAAE,SAAS,EACxB,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAC,GAAG,GACR;gBACF,8BAAC,yBAAS,IACR,OAAO,EAAE,IAAI,EACb,aAAa,EAAE,SAAS,EACxB,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAC,GAAG,GACR;gBACF,8BAAC,yBAAS,IACR,OAAO,EAAE,IAAI,EACb,aAAa,EAAE,SAAS,EACxB,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAC,GAAG,GACR,CACE,CACO,CACd,CACJ,CAAA;AACH,CAAC,CAAA;AA5CY,QAAA,WAAW,eA4CvB"}

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

@@ -0,0 +1,70 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = exports.Container = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const getFontSize = (size) => {
+    if (size === 'S')
+        return '13px';
+    if (size === 'M')
+        return '15px';
+    return '17px';
+};
+const Container = styled_components_1.default.div `
+  display: flex;
+`;
+exports.Container = Container;
+const Tab = styled_components_1.default.button `
+  height: ${(props) => (props.size === 'S' ? '32px' : '40px')};
+  font-weight: ${(props) => (props.size === 'M' ? 400 : 500)};
+  font-size: ${(props) => getFontSize(props.size)};
+  line-height: ${(props) => (props.size === 'S' ? '16px' : '24px')};
+  flex: 1 1 0;
+  font-family: Manrope, sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 12px;
+  color: ${(props) => props.theme.text.primary};
+  cursor: pointer;
+  white-space: nowrap;
+  background: transparent;
+  border: none;
+  &:hover {
+    color: ${(props) => props.theme.text.accent};
+  }
+  ${(props) => props.active &&
+    (0, styled_components_1.css) `
+      color: ${(props) => props.theme.text.contrast};
+      background: ${(props) => props.theme.statesBackground.tabsActive};
+      border-radius: 8px;
+      &:hover {
+        background: ${(props) => props.theme.statesBackground.tabsActiveHover};
+        color: ${(props) => props.theme.text.contrast};
+      }
+    `}
+`;
+exports.Tab = Tab;
+//# sourceMappingURL=TabListCell.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabListCell.styled.js","sourceRoot":"","sources":["../../../../src/components/uikit/TabListCell/TabListCell.styled.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uEAA+C;AAG/C,MAAM,WAAW,GAAG,CAAC,IAAiB,EAAE,EAAE;IACxC,IAAI,IAAI,KAAK,GAAG;QAAE,OAAO,MAAM,CAAA;IAC/B,IAAI,IAAI,KAAK,GAAG;QAAE,OAAO,MAAM,CAAA;IAC/B,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,CAAA;;CAE3B,CAAA;AAkCQ,8BAAS;AAhClB,MAAM,GAAG,GAAG,2BAAM,CAAC,MAAM,CAAwC;YACrD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;iBAC5C,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;eAC7C,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC;iBAChC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;;;WAOvD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;aAMjC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM;;IAE3C,CAAC,KAAK,EAAE,EAAE,CACV,KAAK,CAAC,MAAM;IACZ,IAAA,uBAAG,EAAA;eACQ,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ;oBAC/B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC,UAAU;;;sBAGhD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC,eAAe;iBAC5D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ;;KAEhD;CACJ,CAAA;AAEmB,kBAAG"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/uikit/TabListCell/index.ts"],"names":[],"mappings":";;;AAAA,6CAA2C;AAAlC,0GAAA,WAAW,OAAA"}

package/dist/components/uikit/Tabs/Tabs.js

@@ -0,0 +1,98 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+const react_1 = __importStar(require("react"));
+const Styled = __importStar(require("./Tabs.styled"));
+const DragScroll_1 = require("../DragScroll");
+const Typography_1 = require("../Typography");
+const Counter_1 = require("../Counter");
+const ThemeProvider_1 = require("../../../theme/ThemeProvider");
+const theme_const_1 = require("../../../theme/theme.const");
+const styled_components_1 = require("styled-components");
+const Tabs = ({ style, onChange, options, selectedValue, indent = 16, counterType, classWrapper }) => {
+    const [line, setLine] = (0, react_1.useState)({ left: 0, width: 0 });
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (selectedValue && (options === null || options === void 0 ? void 0 : options.length)) {
+            const index = options.findIndex((val) => val.value === selectedValue);
+            getLinePosition(index);
+        }
+    }, [selectedValue, options]);
+    const handleClick = (value, evt, index) => {
+        if (onChange) {
+            onChange(value, evt);
+        }
+        scrollToTab(index);
+    };
+    const getLinePosition = (index) => {
+        if (ref.current && ref.current.children[index]) {
+            const tabElement = ref.current.children[index];
+            const tabsRect = ref.current.getBoundingClientRect();
+            const tabRect = tabElement.getBoundingClientRect();
+            const containerScrollLeft = ref.current.scrollLeft; // Смещение скролла контейнера
+            const tabOffset = tabRect.left - tabsRect.left + containerScrollLeft; // Учитываем смещение скролла
+            const tabWidth = tabRect.width;
+            setLine({ left: tabOffset, width: tabWidth });
+        }
+    };
+    const scrollToTab = (index) => {
+        if (ref.current && ref.current.children[index]) {
+            const selectedTab = ref.current.children[index];
+            const containerRect = ref.current.getBoundingClientRect();
+            const tabRect = selectedTab.getBoundingClientRect();
+            const offsetRight = tabRect.right - containerRect.right;
+            const offsetLeft = tabRect.left - containerRect.left;
+            if (offsetRight > 0) {
+                ref.current.scrollTo({
+                    left: ref.current.scrollLeft + offsetRight + 10,
+                    behavior: 'smooth'
+                });
+            }
+            else if (offsetLeft < 0) {
+                ref.current.scrollTo({
+                    left: ref.current.scrollLeft + offsetLeft - 10,
+                    behavior: 'smooth'
+                });
+            }
+        }
+    };
+    const { mode } = (0, ThemeProvider_1.useMode)();
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_const_1.palette[mode] },
+        react_1.default.createElement(Styled.Wrapper, { className: classWrapper },
+            react_1.default.createElement(DragScroll_1.DragScroll, null,
+                react_1.default.createElement(Styled.Container, { indent: indent, style: style, ref: ref },
+                    options.map((item, index) => (react_1.default.createElement(Styled.Button, { key: index, onClick: (evt) => handleClick(item.value, evt, index), isActive: selectedValue === item.value },
+                        react_1.default.createElement(Typography_1.Typography, { tag: "span", variant: "controls-Medium" }, item.label),
+                        item.dataCount !== undefined && (react_1.default.createElement(Counter_1.Counter, { number: item.dataCount, type: counterType, style: {
+                                marginLeft: '4px',
+                                background: selectedValue === item.value
+                                    ? theme_const_1.palette[mode].other.violet
+                                    : theme_const_1.palette[mode].other.gray
+                            } }))))),
+                    react_1.default.createElement(Styled.LineIndicator, { position: line.left, width: line.width }))))));
+};
+exports.Tabs = Tabs;
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../src/components/uikit/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsE;AACtE,sDAAuC;AAEvC,8CAA0C;AAC1C,8CAA0C;AAC1C,wCAAoC;AACpC,gEAAsD;AACtD,4DAAoD;AACpD,yDAAiD;AAEjD,MAAM,IAAI,GAAG,CAAC,EACZ,KAAK,EACL,QAAQ,EACR,OAAO,EACP,aAAa,EACb,MAAM,GAAG,EAAE,EACX,WAAW,EACX,YAAY,EACF,EAAE,EAAE;IACd,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAA;IACvD,MAAM,GAAG,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAA;IAExB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,aAAa,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,CAAA,EAAE;YACpC,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,aAAa,CAAC,CAAA;YACrE,eAAe,CAAC,KAAK,CAAC,CAAA;SACvB;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,CAAA;IAE5B,MAAM,WAAW,GAAG,CAClB,KAAa,EACb,GAAkC,EAClC,KAAa,EACb,EAAE;QACF,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;SACrB;QACD,WAAW,CAAC,KAAK,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,EAAE;QACxC,IAAI,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;YAC9C,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YAC9C,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAA;YACpD,MAAM,OAAO,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAA;YAClD,MAAM,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAAC,UAAU,CAAA,CAAC,8BAA8B;YACjF,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,GAAG,mBAAmB,CAAA,CAAC,6BAA6B;YAClG,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAA;YAC9B,OAAO,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAA;SAC9C;IACH,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;QACpC,IAAI,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;YAC9C,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YAC/C,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAA;YACzD,MAAM,OAAO,GAAG,WAAW,CAAC,qBAAqB,EAAE,CAAA;YACnD,MAAM,WAAW,GAAG,OAAO,CAAC,KAAK,GAAG,aAAa,CAAC,KAAK,CAAA;YACvD,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,CAAA;YACpD,IAAI,WAAW,GAAG,CAAC,EAAE;gBACnB,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC;oBACnB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,UAAU,GAAG,WAAW,GAAG,EAAE;oBAC/C,QAAQ,EAAE,QAAQ;iBACnB,CAAC,CAAA;aACH;iBAAM,IAAI,UAAU,GAAG,CAAC,EAAE;gBACzB,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC;oBACnB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,UAAU,GAAG,UAAU,GAAG,EAAE;oBAC9C,QAAQ,EAAE,QAAQ;iBACnB,CAAC,CAAA;aACH;SACF;IACH,CAAC,CAAA;IAED,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,uBAAO,GAAE,CAAA;IAE1B,OAAO,CACL,8BAAC,iCAAa,IAAC,KAAK,EAAE,qBAAO,CAAC,IAAI,CAAC;QACjC,8BAAC,MAAM,CAAC,OAAO,IAAC,SAAS,EAAE,YAAY;YACrC,8BAAC,uBAAU;gBACT,8BAAC,MAAM,CAAC,SAAS,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG;oBACrD,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,8BAAC,MAAM,CAAC,MAAM,IACZ,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,EACrD,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC,KAAK;wBAEtC,8BAAC,uBAAU,IAAC,GAAG,EAAC,MAAM,EAAC,OAAO,EAAC,iBAAiB,IAC7C,IAAI,CAAC,KAAK,CACA;wBACZ,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,CAC/B,8BAAC,iBAAO,IACN,MAAM,EAAE,IAAI,CAAC,SAAS,EACtB,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE;gCACL,UAAU,EAAE,KAAK;gCACjB,UAAU,EACR,aAAa,KAAK,IAAI,CAAC,KAAK;oCAC1B,CAAC,CAAC,qBAAO,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM;oCAC5B,CAAC,CAAC,qBAAO,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI;6BAC/B,GACD,CACH,CACa,CACjB,CAAC;oBACF,8BAAC,MAAM,CAAC,aAAa,IAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAC/C,CACR,CACE,CACH,CACjB,CAAA;AACH,CAAC,CAAA;AAEQ,oBAAI"}

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

@@ -0,0 +1,79 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+const react_1 = __importStar(require("react"));
+const StoryDescription_1 = require("../storybook/StoryDescription/StoryDescription");
+const StoryExample_1 = require("../storybook/StoryExample/StoryExample");
+const StoryTitle_1 = require("../storybook/StoryTitle/StoryTitle");
+const Tabs_1 = require("./Tabs");
+const Card_1 = require("../Card");
+exports.default = {
+    title: 'Components/Tabs',
+    component: Tabs_1.Tabs,
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/yiCswWljV8KfikRKdjnnc7/Ui-kit-WEB?type=design&node-id=13264-18262&mode=dev'
+        }
+    }
+};
+const Tabs = () => {
+    const data = [
+        { label: 'Акции', value: 'stock' },
+        { label: 'Облигации', value: 'bonds' },
+        { label: 'ETF', value: 'etfs' },
+        { label: 'Криптовалюта', value: 'crypto' },
+        { label: 'Индексы', value: 'index' },
+        { label: 'Валюта', value: 'currency' },
+        { label: 'Фьючерсы', value: 'futures' },
+        { label: 'Опционы', value: 'options' },
+        { label: 'Металлы', value: 'metals' }
+    ];
+    const dataWithCountCounter = [
+        { label: 'Акции', value: 'stock', dataCount: 1 },
+        { label: 'Облигации', value: 'bonds', dataCount: 25 },
+        { label: 'ETF', value: 'etfs', dataCount: 99 }
+    ];
+    const [value1, setValue1] = (0, react_1.useState)(data[0].value);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StoryTitle_1.StoryTitle, { isBig: true }, "Tabs"),
+        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\u044B\u0431\u043E\u0440\u0430 \u0440\u0435\u043D\u0434\u0430\u0440\u0438\u043D\u0433\u0430 \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u043D\u043E\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Tabs_1.Tabs, { options: data, selectedValue: value1, onChange: setValue1 })),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "Counter \u0432\u043D\u0443\u0442\u0440\u0438 Tabs"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043E\u0442\u043E\u0431\u0440\u0430\u0437\u0438\u0442\u044C \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u043D\u0430\u0439\u0434\u0435\u043D\u044B\u0445/\u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u0435\u043C\u044B\u0445 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u0432. \u0415\u0441\u043B\u0438 \u0432\u0430\u043C \u043D\u0430\u0434\u043E\n      \u043E\u0442\u043E\u0431\u0440\u0430\u0437\u0438\u0442\u044C \u0447\u0438\u0441\u043B\u043E \u0432 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0435 Counter, \u0442\u043E \u0434\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u043E \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0442\u044C \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E <b>counterType</b>. \u041F\u043E \u0443\u043C\u043E\u043B\u0447\u0435\u043D\u0438\u044E \u043E\u043D\u043E \u0440\u0430\u0432\u043D\u043E <b>brand</b>.\n      " }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Tabs_1.Tabs, { counterType: "brand", options: dataWithCountCounter, selectedValue: value1, onChange: setValue1 })),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u0421\u043A\u0440\u043E\u043B\u043B"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0415\u0441\u043B\u0438 \u0442\u0430\u0431\u044B \u043D\u0435 \u0432\u043B\u0435\u0437\u0430\u044E\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u043D\u0442, \u0442\u043E \u043E\u043D\u0438 \u0431\u0443\u0434\u0443\u0442 \u0441\u043A\u0440\u044B\u0430\u0442\u044C\u0441\u044F \u0437\u0430 \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u043E\u043C \u0438 \u0441\u043A\u0440\u043E\u043B\u0438\u0442\u044C\u0441\u044F. \u0414\u043B\u044F \u043B\u0443\u0447\u0448\u0435\u0433\u043E UX \u0432\u0430\u0448\u0438 \u0442\u0430\u0431\u044B \u0434\u043E\u043B\u0436\u043D\u044B \u043F\u043B\u043E\u0442\u043D\u043E\n      \u043F\u0440\u0438\u043C\u044B\u043A\u0430\u0442\u044C \u043A \u043A\u0440\u0430\u044F\u043C, \u0434\u043B\u044F \u044D\u0442\u043E\u0433\u043E \u0441\u0434\u0435\u043B\u0430\u043D\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E <b>indent</b>. \u041F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u043E\u043D\u043E \u0440\u0430\u0432\u043D\u043E 16 - \u0441\u0442\u0430\u043D\u0434\u0430\u0440\u0442\u043D\u043E\u0433\u043E \u043F\u0430\u0434\u0434\u0438\u043D\u0433\u0430 \u043A\u0430\u0440\u0442\u043E\u0447\u043A\u0438." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement("div", { style: { maxWidth: '600px' } },
+                react_1.default.createElement(Card_1.Card, { title: "\u0421\u043A\u0440\u043E\u043B\u043B" },
+                    react_1.default.createElement(Tabs_1.Tabs, { options: data, selectedValue: value1, onChange: setValue1 }))))));
+};
+exports.Tabs = Tabs;
+//# sourceMappingURL=Tabs.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/uikit/Tabs/Tabs.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AAEvC,qFAAiF;AACjF,yEAAqE;AACrE,mEAA+D;AAE/D,iCAA0C;AAC1C,kCAA8B;AAE9B,kBAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,WAAS;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,uGAAuG;SAC7G;KACF;CACF,CAAA;AAEM,MAAM,IAAI,GAAG,GAAG,EAAE;IACvB,MAAM,IAAI,GAAG;QACX,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QAClC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE;QACtC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE;QAC/B,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC1C,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;QACpC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE;QACtC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE;QACvC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACtC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE;KACtC,CAAA;IAED,MAAM,oBAAoB,GAAG;QAC3B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE;QAChD,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;QACrD,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE;KAC/C,CAAA;IAED,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;IAEnD,OAAO,CACL;QACE,8BAAC,uBAAU,IAAC,KAAK,EAAE,IAAI,WAAmB;QAC1C,8BAAC,mCAAgB,IAAC,IAAI,EAAC,uXAAsE,GAAG;QAChG,8BAAC,2BAAY;YACX,8BAAC,WAAS,IAAC,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,GAAI,CAC3D;QACf,8BAAC,uBAAU,4DAAiC;QAC5C,8BAAC,mCAAgB,IACf,IAAI,EAAC,o+BAEN,GACC;QACF,8BAAC,2BAAY;YACX,8BAAC,WAAS,IACR,WAAW,EAAC,OAAO,EACnB,OAAO,EAAE,oBAAoB,EAC7B,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,SAAS,GACnB,CACW;QACf,8BAAC,uBAAU,+CAAoB;QAC/B,8BAAC,mCAAgB,IACf,IAAI,EAAC,moCACkH,GACvH;QACF,8BAAC,2BAAY;YACX,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE;gBAC/B,8BAAC,WAAI,IAAC,KAAK,EAAC,sCAAQ;oBAClB,8BAAC,WAAS,IACR,OAAO,EAAE,IAAI,EACb,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,SAAS,GACnB,CACG,CACH,CACO,CACd,CACJ,CAAA;AACH,CAAC,CAAA;AA5DY,QAAA,IAAI,QA4DhB"}

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

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineIndicator = exports.Button = exports.Container = exports.Wrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const animation_2 = require("../../../constants/animation/animation");
+exports.Wrapper = styled_components_1.default.div `
+  max-width: 100%;
+`;
+exports.Container = styled_components_1.default.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  -ms-overflow-style: none; /* IE и Edge */
+  scrollbar-width: none; /* Firefox */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  padding-right: ${(props) => `${props.indent}px`};
+  margin-right: ${(props) => `-${props.indent}px`};
+  padding-left: ${(props) => `${props.indent}px`};
+  margin-left: ${(props) => `-${props.indent}px`};
+`;
+exports.Button = styled_components_1.default.button `
+  font-family: 'Manrope', sans-serif;
+  background: transparent;
+  outline: none;
+  border: none;
+  color: ${(props) => props.isActive ? props.theme.text.primary : props.theme.text.fourth};
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  gap: 4px;
+  align-items: center;
+  white-space: nowrap;
+  padding: 8px 0;
+  transition: ${() => `all 0.3s ${animation_2.AnimationFunctions.animation_1}`};
+  &:hover {
+    color: ${(props) => props.theme.text.primary};
+  }
+  &:disabled {
+    opacity: 0.6;
+    cursor: default;
+    pointer-events: none;
+  }
+`;
+exports.LineIndicator = styled_components_1.default.div `
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: ${(props) => `${props.width}px`};
+  height: 2px;
+  background: ${(props) => props.theme.stroke.accent};
+  transition: ${() => `all 0.3s ${animation_2.AnimationFunctions.animation_1}`};
+  will-change: transform;
+  transform: ${(props) => `translateX(${props.position}px)`};
+`;
+//# sourceMappingURL=Tabs.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.styled.js","sourceRoot":"","sources":["../../../../src/components/uikit/Tabs/Tabs.styled.ts"],"names":[],"mappings":";;;;;;AAAA,0EAAoE;AACpE,sEAA2E;AAE9D,QAAA,OAAO,GAAG,2BAAM,CAAC,GAAG,CAAA;;CAEhC,CAAA;AAEY,QAAA,SAAS,GAAG,2BAAM,CAAC,GAAG,CAEjC;;;;;;;;;;;;mBAYiB,CAAC,KAAoD,EAAE,EAAE,CACxE,GAAG,KAAK,CAAC,MAAM,IAAI;kBACL,CAAC,KAAoD,EAAE,EAAE,CACvE,IAAI,KAAK,CAAC,MAAM,IAAI;kBACN,CAAC,KAAoD,EAAE,EAAE,CACvE,GAAG,KAAK,CAAC,MAAM,IAAI;iBACN,CAAC,KAAoD,EAAE,EAAE,CACtE,IAAI,KAAK,CAAC,MAAM,IAAI;CACvB,CAAA;AAEY,QAAA,MAAM,GAAG,2BAAM,CAAC,MAAM,CAAuB;;;;;WAK/C,CAAC,KAAK,EAAE,EAAE,CACjB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM;;;;;;;;gBAQvD,GAAG,EAAE,CAAC,YAAY,8BAAkB,CAAC,WAAW,EAAE;;aAErD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;CAO/C,CAAA;AAEY,QAAA,aAAa,GAAG,2BAAM,CAAC,GAAG,CAAqC;;;;WAIjE,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,KAAK,IAAI;;gBAExB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;gBACpC,GAAG,EAAE,CAAC,YAAY,8BAAkB,CAAC,WAAW,EAAE;;eAEnD,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,KAAK,CAAC,QAAQ,KAAK;CAC1D,CAAA"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/uikit/Tabs/index.ts"],"names":[],"mappings":";;;AAAA,+BAA6B;AAApB,4FAAA,IAAI,OAAA"}

package/dist/components/uikit/TextButton/TextButton.const.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMode = exports.TextButtonSize = void 0;
+exports.TextButtonSize = {
+    M: {
+        fontWeight: 400,
+        fontSize: '14px',
+        lineHeight: '16px'
+    },
+    S: {
+        fontWeight: 400,
+        fontSize: '12px',
+        lineHeight: '16px'
+    }
+};
+const getMode = (theme) => {
+    return {
+        blue: {
+            default: {
+                color: theme.text.accent
+            },
+            hover: {
+                color: theme.text.accentSecondary
+            },
+            active: { color: theme.text.accent },
+            disabled: {
+                color: theme.text.tertiary
+            }
+        },
+        gray: {
+            default: {
+                color: theme.text.secondary
+            },
+            hover: {
+                color: theme.text.secondary
+            },
+            active: { color: theme.text.secondary },
+            disabled: {
+                color: theme.text.tertiary
+            }
+        }
+    };
+};
+exports.getMode = getMode;
+//# sourceMappingURL=TextButton.const.js.map

package/dist/components/uikit/TextButton/TextButton.const.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextButton.const.js","sourceRoot":"","sources":["../../../../src/components/uikit/TextButton/TextButton.const.ts"],"names":[],"mappings":";;;AAEa,QAAA,cAAc,GAAG;IAC5B,CAAC,EAAE;QACD,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,MAAM;KACnB;IACD,CAAC,EAAE;QACD,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,MAAM;KACnB;CACF,CAAA;AAEM,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE;IACvC,OAAO;QACL,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM;aACzB;YACD,KAAK,EAAE;gBACL,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,eAAe;aAClC;YACD,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE;YACpC,QAAQ,EAAE;gBACR,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,QAAQ;aAC3B;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS;aAC5B;YACD,KAAK,EAAE;gBACL,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS;aAC5B;YACD,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;YACvC,QAAQ,EAAE;gBACR,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,QAAQ;aAC3B;SACF;KACF,CAAA;AACH,CAAC,CAAA;AA3BY,QAAA,OAAO,WA2BnB"}

package/dist/components/uikit/TextButton/TextButton.js

@@ -0,0 +1,45 @@
+"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.TextButton = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./TextButton.styled"));
+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 TextButton = ({ type = 'button', mode = 'blue', size = 'M', text, style, onClick, className, iconLeft, iconRight, disabled }) => {
+    const { mode: theme } = (0, ThemeProvider_1.useMode)();
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_const_1.palette[theme] },
+        react_1.default.createElement(Styled.TextButton, { size: size, type: type, style: style, mode: mode, className: (0, classnames_1.default)('text-button', className), disabled: disabled, onClick: onClick },
+            iconLeft ? react_1.default.createElement(Styled.IconLeft, null, iconLeft) : null,
+            react_1.default.createElement("span", null, text),
+            iconRight ? react_1.default.createElement(Styled.IconRight, null, iconRight) : null)));
+};
+exports.TextButton = TextButton;
+//# sourceMappingURL=TextButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextButton.js","sourceRoot":"","sources":["../../../../src/components/uikit/TextButton/TextButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAyB;AACzB,4DAA6C;AAG7C,4DAAmC;AACnC,yDAAiD;AACjD,gEAAsD;AACtD,4DAAoD;AAEpD,MAAM,UAAU,GAAG,CAAC,EAClB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,GAAG,EACV,IAAI,EACJ,KAAK,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACI,EAAE,EAAE;IAChB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAO,GAAE,CAAA;IAEjC,OAAO,CACL,8BAAC,iCAAa,IAAC,KAAK,EAAE,qBAAO,CAAC,KAAK,CAAC;QAClC,8BAAC,MAAM,CAAC,UAAU,IAChB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,oBAAU,EAAC,aAAa,EAAE,SAAS,CAAC,EAC/C,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO;YAEf,QAAQ,CAAC,CAAC,CAAC,8BAAC,MAAM,CAAC,QAAQ,QAAE,QAAQ,CAAmB,CAAC,CAAC,CAAC,IAAI;YAChE,4CAAO,IAAI,CAAQ;YAClB,SAAS,CAAC,CAAC,CAAC,8BAAC,MAAM,CAAC,SAAS,QAAE,SAAS,CAAoB,CAAC,CAAC,CAAC,IAAI,CAClD,CACN,CACjB,CAAA;AACH,CAAC,CAAA;AAEQ,gCAAU"}