profinansy-ui-lib 3.6.49 → 3.6.51

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

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = exports.NativeInput = exports.Container = exports.Element = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const animation_2 = require("../../../constants/animation/animation");
+const Typography_1 = require("../Typography");
+exports.Element = styled_components_1.default.span `
+  position: relative;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  height: ${(props) => (props.size === 'L' ? '20px' : '16px')};
+  min-width: ${(props) => (props.size === 'L' ? '20px' : '16px')};
+  width: ${(props) => (props.size === 'L' ? '20px' : '16px')};
+  background-color: ${(props) => props.theme.background.content};
+  border-radius: 50%;
+  border: 1.5px solid ${(props) => props.theme.stroke.secondary};
+  transition: ${() => `all 0.1s ${animation_2.AnimationFunctions.animation_1}`};
+  &::after {
+    content: '';
+    position: absolute;
+    display: none;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: ${(props) => (props.size === 'L' ? '10px' : '8px')};
+    height: ${(props) => (props.size === 'L' ? '10px' : '8px')};
+    border-radius: 50%;
+    background: ${(props) => props.theme.interactiveControls.brand};
+  }
+`;
+exports.Container = styled_components_1.default.label `
+  display: flex;
+  align-items: ${(props) => props.verticalAlign === 'start' ? 'flex-start' : 'center'};
+  justify-content: ${(props) => props.horizontalAlign === 'start' ? 'flex-start' : 'space-between'};
+  position: relative;
+  cursor: pointer;
+  max-width: 100%;
+  width: ${(props) => props.horizontalAlign === 'full' ? '100%' : 'fill-content'};
+  &:hover ${exports.Element} {
+    border-color: ${(props) => props.theme.interactiveControls.brand};
+  }
+`;
+exports.NativeInput = styled_components_1.default.input.attrs({ type: 'radio' }) `
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  &:checked {
+    ~ ${exports.Element} {
+      border-color: ${(props) => props.theme.interactiveControls.brand};
+      &:after {
+        display: block;
+      }
+    }
+  }
+`;
+exports.Text = (0, styled_components_1.default)(Typography_1.Typography) `
+  font-family: 'Manrope', sans-serif;
+  padding-left: ${(props) => (props.isTextLeft ? '0' : '8px')};
+  padding-right: ${(props) => (props.isTextLeft ? '8px' : '0')};
+  order: ${(props) => (props.isTextLeft ? -1 : 1)};
+  color: ${(props) => props.color || props.theme.text.primary};
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  & > div {
+    vertical-align: middle;
+    position: relative;
+    padding-left: 8px;
+    display: inline;
+  }
+`;
+//# sourceMappingURL=Radio.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.styled.js","sourceRoot":"","sources":["../../../../src/components/uikit/Radio/Radio.styled.ts"],"names":[],"mappings":";;;;;;AAAA,0EAAsC;AAEtC,sEAA2E;AAC3E,8CAA0C;AAE7B,QAAA,OAAO,GAAG,2BAAM,CAAC,IAAI,CAAqB;;;;;YAK3C,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;eAC9C,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;WACrD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;sBACtC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO;;wBAEvC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS;gBAC/C,GAAG,EAAE,CAAC,YAAY,8BAAkB,CAAC,WAAW,EAAE;;;;;;;;aAQrD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;cAC/C,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;;kBAE5C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAC,KAAK;;CAEjE,CAAA;AAEY,QAAA,SAAS,GAAG,2BAAM,CAAC,KAAK,CAGnC;;iBAEe,CAAC,KAAK,EAAE,EAAE,CACvB,KAAK,CAAC,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ;qBACxC,CAAC,KAAK,EAAE,EAAE,CAC3B,KAAK,CAAC,eAAe,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe;;;;WAI3D,CAAC,KAAK,EAAE,EAAE,CACjB,KAAK,CAAC,eAAe,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc;YAClD,eAAO;oBACC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAC,KAAK;;CAEnE,CAAA;AAEY,QAAA,WAAW,GAAG,2BAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAA;;;;;QAKxD,eAAO;sBACO,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAC,KAAK;;;;;;CAMrE,CAAA;AAEY,QAAA,IAAI,GAAG,IAAA,2BAAM,EAAC,uBAAU,CAAC,CAGpC;;kBAEgB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;mBAC1C,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;WACnD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;WACtC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;CAU5D,CAAA"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/uikit/Radio/index.ts"],"names":[],"mappings":";;;AAAA,iCAA+B;AAAtB,8FAAA,KAAK,OAAA"}

package/dist/components/uikit/SegmentControl/SegmentControl.js

@@ -0,0 +1,96 @@
+"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.SegmentControl = void 0;
+const react_1 = __importStar(require("react"));
+const Styled = __importStar(require("./SegmentControl.styled"));
+const ThemeProvider_1 = require("../../../theme/ThemeProvider");
+const styled_components_1 = require("styled-components");
+const theme_const_1 = require("../../../theme/theme.const");
+const SegmentControl_styled_1 = require("./SegmentControl.styled");
+const Counter_1 = require("../Counter");
+const SegmentControl = ({ style, options, onChange, selectedValue, size = 'S', type = 'primary', counterType, isFullWidth = false }) => {
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const [selector, setSelector] = (0, react_1.useState)({ left: 0, width: 0 });
+    const ref = (0, react_1.useRef)(null);
+    const { mode } = (0, ThemeProvider_1.useMode)();
+    const optionsFiltered = (0, react_1.useMemo)(() => options.filter((option) => !option.hidden), [options]);
+    (0, react_1.useEffect)(() => {
+        if (selectedValue) {
+            const index = optionsFiltered.findIndex((val) => val.value === selectedValue);
+            setActiveIndex(index);
+        }
+    }, [selectedValue]);
+    (0, react_1.useEffect)(() => {
+        if (!ref.current)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            getSelectorPosition(activeIndex);
+        });
+        resizeObserver.observe(ref.current);
+        return () => resizeObserver.disconnect();
+    }, [activeIndex]);
+    const handleClick = (value, evt, index) => {
+        setActiveIndex(index);
+        if (onChange) {
+            onChange(value, evt);
+        }
+    };
+    const getSelectorPosition = (index) => {
+        if (ref.current) {
+            const segmentElement = ref.current.querySelector(`[data-index="${index}"]`);
+            if (segmentElement) {
+                const segmentRect = ref.current.getBoundingClientRect();
+                const segmentItemRect = segmentElement.getBoundingClientRect();
+                const tabOffset = segmentItemRect.left - segmentRect.left;
+                const tabWidth = segmentItemRect.width;
+                setSelector({ left: tabOffset, width: tabWidth });
+            }
+        }
+    };
+    const hideDivider = (index) => {
+        return (activeIndex === index ||
+            activeIndex - 1 === index ||
+            optionsFiltered.length - 1 === index);
+    };
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_const_1.palette[mode] },
+        react_1.default.createElement(Styled.Container, { style: style, mode: type, isFullWidth: isFullWidth, ref: ref, size: size },
+            optionsFiltered.map((item, index) => {
+                const isHideDivider = hideDivider(index);
+                return (react_1.default.createElement(react_1.default.Fragment, { key: index },
+                    react_1.default.createElement(Styled.Item, { "data-index": index, size: size, mode: type, isActive: selectedValue === item.value, onClick: (e) => handleClick(item.value, e, index) },
+                        !!item.label && (react_1.default.createElement(Styled.Text, { variant: "caption-Medium", tag: "span" }, item.label)),
+                        item.icon ? (react_1.default.createElement(Styled.Icon, { isLabel: !!item.label }, item.icon)) : null,
+                        item.dataCount !== undefined && (react_1.default.createElement(Counter_1.Counter, { number: item.dataCount, type: counterType, style: {
+                                marginLeft: '4px',
+                                position: 'relative',
+                                zIndex: 2
+                            } }))),
+                    optionsFiltered.length - 1 !== index ? (react_1.default.createElement(Styled.Divider, { isHide: isHideDivider })) : null));
+            }),
+            selector.width ? (react_1.default.createElement(SegmentControl_styled_1.Selector, { mode: type, left: selector.left, width: selector.width })) : null)));
+};
+exports.SegmentControl = SegmentControl;
+//# sourceMappingURL=SegmentControl.js.map

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

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

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

@@ -0,0 +1,113 @@
+"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.SegmentControl = 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 Plus_svg_1 = __importDefault(require("../../../icons/Plus.svg"));
+const SegmentControl_1 = require("./SegmentControl");
+exports.default = {
+    title: 'Components/SegmentControl',
+    component: SegmentControl_1.SegmentControl,
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/yiCswWljV8KfikRKdjnnc7/Ui-kit-WEB?type=design&node-id=12439-33533&mode=dev'
+        }
+    }
+};
+const SegmentControl = () => {
+    const data = [
+        { label: 'Млн.', value: '1' },
+        { label: 'Млрд.', value: '2' },
+        { label: 'Label', value: '3' },
+        { label: 'Label', value: '4' }
+    ];
+    const dataWithCount = [
+        { label: 'Млн.', value: '1', dataCount: 3 },
+        { label: 'Млрд.', value: '2', dataCount: 3 },
+        { label: 'Label', value: '3', dataCount: 3 },
+        { label: 'Label', value: '4', dataCount: 3 }
+    ];
+    const dataWithIcon = [
+        { label: 'Млн.', value: '1', icon: react_1.default.createElement(Plus_svg_1.default, null) },
+        { label: 'Млрд.', value: '2', icon: react_1.default.createElement(Plus_svg_1.default, null) },
+        { value: '3', icon: react_1.default.createElement(Plus_svg_1.default, null) },
+        { value: '4', icon: react_1.default.createElement(Plus_svg_1.default, null) }
+    ];
+    const [value, setValues] = (0, react_1.useState)(data[0].value);
+    const [value2, setValues2] = (0, react_1.useState)(data[0].value);
+    const [value3, setValues3] = (0, react_1.useState)(data[0].value);
+    const [value4, setValues4] = (0, react_1.useState)(data[0].value);
+    const [value5, setValues5] = (0, react_1.useState)(data[0].value);
+    const [value6, setValues6] = (0, react_1.useState)(dataWithCount[0].value);
+    const [value7, setValues7] = (0, react_1.useState)(dataWithIcon[0].value);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StoryTitle_1.StoryTitle, { isBig: true }, "SegmentControl"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0421\u043B\u0443\u0436\u0438\u0442 \u0434\u043B\u044F \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u044F \u0440\u0430\u0437\u043B\u0438\u0447\u043D\u044B\u0445 \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u043E\u0432 \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F, \u0444\u0438\u043B\u044C\u0442\u0440\u043E\u0432 \u0438 \u0442\u0434." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(SegmentControl_1.SegmentControl, { options: data, selectedValue: value, onChange: (val) => setValues(val) })),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u0422\u0438\u043F\u044B SegmentControl"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "SegmentControls \u0438\u043C\u0435\u044E\u0442 \u0434\u0432\u0430 \u0442\u0438\u043F\u0430: <b>primary, content</b>. \u041F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u0441\u0442\u043E\u0438\u0442 \u0442\u0438\u043F <b>primary</b>." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement("div", { style: { display: 'flex', gap: '12px' } },
+                react_1.default.createElement(SegmentControl_1.SegmentControl, { size: "M", type: "primary", options: data, selectedValue: value2, onChange: (val) => setValues2(val) }),
+                react_1.default.createElement(SegmentControl_1.SegmentControl, { size: "M", type: "content", options: data, selectedValue: value3, onChange: (val) => setValues3(val) }))),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u0420\u0430\u0437\u043C\u0435\u0440 SegmentControl"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "SegmentControls \u0438\u043C\u0435\u044E\u0442 \u0434\u0432\u0430 \u0440\u0430\u0437\u043C\u0435\u0440\u0430: <b>M, S</b>. \u041F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u0441\u0442\u043E\u0438\u0442 \u0440\u0430\u0437\u043C\u0435\u0440 <b>S</b>." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement("div", { style: { display: 'flex', gap: '12px' } },
+                react_1.default.createElement(SegmentControl_1.SegmentControl, { options: data, selectedValue: value4, onChange: (val) => setValues4(val) }),
+                react_1.default.createElement(SegmentControl_1.SegmentControl, { size: "M", options: data, selectedValue: value5, onChange: (val) => setValues5(val) }))),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "Counter \u0432\u043D\u0443\u0442\u0440\u0438 SegmentControl"),
+        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>." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(SegmentControl_1.SegmentControl, { options: dataWithCount, selectedValue: value6, onChange: (val) => setValues6(val) })),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u0418\u043A\u043E\u043D\u043A\u0430 \u0432\u043D\u0443\u0442\u0440\u0438 SegmentControl"),
+        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 \u0438\u043A\u043E\u043D\u043A\u0443 \u0440\u044F\u0434\u043E\u043C \u0438\u043B\u0438 \u0432\u043C\u0435\u0441\u0442\u043E \u0442\u0435\u043A\u0441\u0442\u0430." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(SegmentControl_1.SegmentControl, { size: "M", options: dataWithIcon, selectedValue: value7, onChange: (val) => setValues7(val) })),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u0428\u0438\u0440\u0438\u043D\u0430 SegmentControl"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u041F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u0448\u0438\u0440\u0438\u043D\u0430 \u0440\u0430\u0432\u043D\u0430 \u0448\u0438\u0440\u0438\u043D\u0435 \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430, \u043D\u043E \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0435\u0435 \u0440\u0430\u0441\u0442\u044F\u043D\u0443\u0442\u044C \u043F\u0435\u0440\u0435\u0434\u0430\u0432 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E <b>isFullWidth</b>." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement("div", { style: { background: '#fff', width: '500px' } },
+                react_1.default.createElement(SegmentControl_1.SegmentControl, { isFullWidth: true, type: "content", options: data, selectedValue: value, onChange: (val) => setValues(val) }))),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u0421\u043A\u0440\u044B\u0442\u0438\u0435 \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u043D\u044B\u0445 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u0432 \u043F\u043E \u0443\u0441\u043B\u043E\u0432\u0438\u044E"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0415\u0441\u043B\u0438 \u0432\u0430\u043C \u043D\u0443\u0436\u043D\u043E \u043F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u043D\u044B\u0435 \u0442\u0430\u0431\u044B \u043F\u043E \u0443\u0441\u043B\u043E\u0432\u0438\u044E, \u0442\u043E \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0442\u044C \u043F\u043E\u043B\u0435 hidden \u0443 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430 \u043D\u0435\u0433\u043E \u0432 \u043F\u0440\u043E\u043F\u0441\u0435 options" }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement("div", { style: { background: '#fff', width: '500px' } },
+                react_1.default.createElement(SegmentControl_1.SegmentControl, { isFullWidth: true, type: "content", options: [
+                        { label: 'Млн.', value: '1' },
+                        { label: 'Млрд.', value: '2', hidden: true }
+                    ], selectedValue: value, onChange: (val) => setValues(val) })))));
+};
+exports.SegmentControl = SegmentControl;
+//# sourceMappingURL=SegmentControl.stories.js.map

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

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

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

@@ -0,0 +1,95 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = exports.Text = exports.Divider = exports.Item = exports.Selector = exports.Container = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const animation_2 = require("../../../constants/animation/animation");
+const Typography_1 = require("../Typography");
+exports.Container = styled_components_1.default.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 2px;
+  gap: 4px;
+  border-radius: 8px;
+  background: ${(props) => props.mode === 'primary'
+    ? props.theme.interactiveControls.secondary
+    : props.theme.interactiveControls.accent};
+  width: ${(props) => (props.isFullWidth ? '100%' : 'fit-content')};
+  height: fit-content;
+  max-height: ${(props) => (props.size === 'S' ? '28px' : '34px')};
+`;
+const getBackground = (type, theme) => {
+    if (type === 'primary') {
+        return theme.interactiveControls.accent;
+    }
+    return theme.interactiveControls.secondary;
+};
+exports.Selector = styled_components_1.default.div `
+  height: calc(100% - 4px);
+  display: inline-block;
+  position: absolute;
+  left: ${(props) => `${props.left}px`};
+  top: 2px;
+  width: ${(props) => `${props.width}px`};
+  z-index: 1;
+  border-radius: 7px;
+  transition-duration: 0.3s;
+  transition-timing-function: ${animation_2.AnimationFunctions.animation_1};
+  background: ${(props) => getBackground(props.mode, props.theme)};
+  border: ${(props) => `0.5px solid ${props.theme.stroke.secondary}`};
+  box-shadow: ${(props) => props.mode === 'content'
+    ? '0px 4px 8px -4px rgba(44, 44, 47, 0.18)'
+    : 'none'};
+`;
+exports.Item = styled_components_1.default.button `
+  font-family: 'Manrope', sans-serif;
+  border-radius: 7px;
+  height: ${(props) => (props.size === 'S' ? '24px' : '30px')};
+  padding: ${(props) => (props.size === 'S' ? '4px 12px' : '6px 12px')};
+  cursor: pointer;
+  border: 0.5px solid transparent;
+  background: transparent;
+  color: ${(props) => props.theme.text.primary};
+  flex: 1 1 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  &:disabled {
+    opacity: 0.6;
+  }
+`;
+exports.Divider = styled_components_1.default.span `
+  height: 18px;
+  width: 2px;
+  background: ${(props) => props.theme.stroke.primary};
+  border-radius: 6px;
+  opacity: ${(props) => (props.isHide ? '0' : '1')};
+  transition: opacity 0.3s ${animation_2.AnimationFunctions.animation_1};
+`;
+exports.Text = (0, styled_components_1.default)(Typography_1.Typography) `
+  position: relative;
+  z-index: 2;
+  cursor: pointer;
+  text-align: center;
+  white-space: nowrap;
+`;
+exports.Icon = styled_components_1.default.span `
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: ${(props) => (props.isLabel ? '4px' : '0px')};
+  position: relative;
+  z-index: 2;
+  & path {
+    fill: ${(props) => props.theme.icons.primary};
+  }
+`;
+//# sourceMappingURL=SegmentControl.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentControl.styled.js","sourceRoot":"","sources":["../../../../src/components/uikit/SegmentControl/SegmentControl.styled.ts"],"names":[],"mappings":";;;;;;AAAA,0EAAsC;AAMtC,sEAA2E;AAC3E,8CAA0C;AAE7B,QAAA,SAAS,GAAG,2BAAM,CAAC,GAAG,CAIjC;;;;;;;gBAOc,CAAC,KAAK,EAAE,EAAE,CACtB,KAAK,CAAC,IAAI,KAAK,SAAS;IACtB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAC,SAAS;IAC3C,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAC,MAAM;WACnC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC;;gBAElD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;CAChE,CAAA;AAED,MAAM,aAAa,GAAG,CAAC,IAAyB,EAAE,KAAa,EAAE,EAAE;IACjE,IAAI,IAAI,KAAK,SAAS,EAAE;QACtB,OAAO,KAAK,CAAC,mBAAmB,CAAC,MAAM,CAAA;KACxC;IACD,OAAO,KAAK,CAAC,mBAAmB,CAAC,SAAS,CAAA;AAC5C,CAAC,CAAA;AAEY,QAAA,QAAQ,GAAG,2BAAM,CAAC,GAAG,CAIhC;;;;UAIQ,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,IAAI,IAAI;;WAE3B,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,KAAK,IAAI;;;;gCAIR,8BAAkB,CAAC,WAAW;gBAC9C,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;YACrD,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;gBACpD,CAAC,KAAK,EAAE,EAAE,CACtB,KAAK,CAAC,IAAI,KAAK,SAAS;IACtB,CAAC,CAAC,yCAAyC;IAC3C,CAAC,CAAC,MAAM;CACb,CAAA;AAEY,QAAA,IAAI,GAAG,2BAAM,CAAC,MAAM,CAI/B;;;YAGU,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;aAChD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;;;;WAI3D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;;CAW7C,CAAA;AAEY,QAAA,OAAO,GAAG,2BAAM,CAAC,IAAI,CAAqB;;;gBAGvC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;;aAExC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;6BACrB,8BAAkB,CAAC,WAAW;CAC1D,CAAA;AAEY,QAAA,IAAI,GAAG,IAAA,2BAAM,EAAC,uBAAU,CAAC,CAAA;;;;;;CAMrC,CAAA;AAEY,QAAA,IAAI,GAAG,2BAAM,CAAC,IAAI,CAAsB;;;;;;iBAMpC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;;;;YAI/C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO;;CAE/C,CAAA"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/uikit/SegmentControl/index.ts"],"names":[],"mappings":";;;AAAA,mDAAiD;AAAxC,gHAAA,cAAc,OAAA"}

package/dist/components/uikit/Select/Select.js

@@ -0,0 +1,93 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectInput = void 0;
+const react_1 = __importStar(require("react"));
+const react_select_1 = __importDefault(require("react-select"));
+const Select_styled_1 = require("./Select.styled");
+const Select_utils_1 = require("./Select.utils");
+const ErrorText_1 = require("../ErrorText");
+const styled_components_1 = require("styled-components");
+const theme_const_1 = require("../../../theme/theme.const");
+const ThemeProvider_1 = require("../../../theme/ThemeProvider");
+const Styled = __importStar(require("./Select.styled"));
+const useClient_1 = require("../../../hooks/useClient");
+const SelectLoader_1 = require("./SelectLoader");
+const SelectInput = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
+    const { name, placeholder, options, value, error, disabled = false, isSeparator = false, isMulti = false, onChange, customOption, customValue, customMultiValue, hideSelectedOptions = false, closeMenuOnSelect = true, icon, isClearable = false, customPositionMenu } = props, other = __rest(props, ["name", "placeholder", "options", "value", "error", "disabled", "isSeparator", "isMulti", "onChange", "customOption", "customValue", "customMultiValue", "hideSelectedOptions", "closeMenuOnSelect", "icon", "isClearable", "customPositionMenu"]);
+    const refContainer = (0, react_1.useRef)(null);
+    const [currentValue, setCurrentValue] = (0, react_1.useState)(null);
+    const isClient = (0, useClient_1.useClient)();
+    // начальное значение
+    (0, react_1.useEffect)(() => {
+        if (isMulti) {
+            const values = currentValue === null || currentValue === void 0 ? void 0 : currentValue.map((item) => item.value);
+            if (options.length &&
+                (!values || JSON.stringify(values) !== JSON.stringify(value))) {
+                setCurrentValue((0, Select_utils_1.getCurrentValue)(isMulti, value, options));
+            }
+            return;
+        }
+        else {
+            if (options === null || options === void 0 ? void 0 : options.length) {
+                setCurrentValue((0, Select_utils_1.getCurrentValue)(isMulti, value, options));
+            }
+        }
+    }, [isMulti, value, options]);
+    const handleChange = (val, options) => {
+        setCurrentValue(val);
+        if (isMulti) {
+            onChange(val === null || val === void 0 ? void 0 : val.map((item) => item === null || item === void 0 ? void 0 : item.value), options.name);
+            return;
+        }
+        if (val) {
+            onChange(val === null || val === void 0 ? void 0 : val.value, options.name);
+        }
+        else {
+            onChange('', options.name);
+        }
+    };
+    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, { className: "select-container", ref: refContainer },
+            isClient ? (react_1.default.createElement(react_select_1.default, Object.assign({ ref: ref, name: name, isMulti: isMulti, isDisabled: disabled, value: currentValue, components: (0, Select_utils_1.getComponents)(isMulti, customOption, customValue, customMultiValue), onChange: handleChange, isError: !!error, hideSelectedOptions: hideSelectedOptions, closeMenuOnSelect: closeMenuOnSelect, isSeparator: isSeparator, placeholder: placeholder || '', styles: Select_styled_1.selectStyles, options: options, icon: icon, isClearable: isClearable, isSearchable: true, customPositionMenu: customPositionMenu, customTheme: theme_const_1.palette[mode] }, other))) : (react_1.default.createElement(SelectLoader_1.SelectLoader, null)),
+            !!error && typeof error !== 'boolean' ? (react_1.default.createElement(ErrorText_1.ErrorText, { text: error || '' })) : null)));
+}));
+exports.SelectInput = SelectInput;
+//# sourceMappingURL=Select.js.map

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

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