intelicoreact 1.5.32 → 1.5.34

package/dist/src/Atomic/FormElements/UserContacts/UserContact.test.js

@@ -0,0 +1,381 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _react1 = require("@testing-library/react");
+const _UserContacts = /*#__PURE__*/ _interop_require_default(require("./UserContacts"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function createTestProps(overrides = {}) {
+    return {
+        email: 'test@example.com',
+        phone: '+1234567890',
+        ...overrides
+    };
+}
+function mockResizeObserver() {
+    class ResizeObserverMock {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+    }
+    window.ResizeObserver = ResizeObserverMock;
+}
+function mockRefs(widths) {
+    const refs = {
+        mainRef: {
+            current: {
+                clientWidth: widths.main || 500
+            }
+        },
+        firstRef: {
+            current: {
+                clientWidth: widths.first || 100
+            }
+        },
+        secondRef: {
+            current: {
+                clientWidth: widths.second || 100
+            }
+        },
+        contactsRef: {
+            current: {
+                clientWidth: widths.contacts || 100
+            }
+        }
+    };
+    return refs;
+}
+describe('userContacts', ()=>{
+    const testEmail = 'test@example.com';
+    const testPhone = '+1234567890';
+    const defaultProps = {
+        email: testEmail,
+        phone: testPhone
+    };
+    it('renders without crashing', ()=>{
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+            ...defaultProps
+        }));
+        expect(_react1.screen.getByTestId('user-contacts')).toBeInTheDocument();
+    });
+    it('renders email and phone correctly', ()=>{
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+            ...defaultProps
+        }));
+        const emailLink = _react1.screen.getByText(`${testEmail},`);
+        const phoneLink = _react1.screen.getByText(testPhone);
+        expect(emailLink).toBeInTheDocument();
+        expect(phoneLink).toBeInTheDocument();
+        expect(emailLink.closest('a')).toHaveAttribute('href', `mailto:${testEmail}`);
+        expect(phoneLink.closest('a')).toHaveAttribute('href', `tel:${testPhone}`);
+    });
+    it('renders phone first when isFirstPhone is true', ()=>{
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+            ...defaultProps,
+            isFirstPhone: true
+        }));
+        const links = _react1.screen.getAllByRole('link');
+        expect(links[0]).toHaveAttribute('href', `tel:${testPhone}`);
+        expect(links[1]).toHaveAttribute('href', `mailto:${testEmail}`);
+    });
+    it('renders main contacts correctly', ()=>{
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+            ...defaultProps,
+            isDisputeContact: true,
+            isSalesContact: true
+        }));
+        expect(_react1.screen.getByText(/Dispute/)).toBeInTheDocument();
+        expect(_react1.screen.getByText(/Sales/)).toBeInTheDocument();
+    });
+    it('renders contacts with custom prefix and postfix', ()=>{
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+            ...defaultProps,
+            isDisputeContact: {
+                prefix: 'Primary',
+                postfix: 'Manager'
+            }
+        }));
+        expect(_react1.screen.getByText(/Primary Dispute Manager/)).toBeInTheDocument();
+    });
+    it('renders other contacts correctly', ()=>{
+        const otherContacts = [
+            'Support',
+            'Marketing'
+        ];
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+            ...defaultProps,
+            otherContacts: otherContacts
+        }));
+        otherContacts.forEach((contact)=>{
+            expect(_react1.screen.getByText(new RegExp(contact))).toBeInTheDocument();
+        });
+    });
+    it('uses custom translation function', ()=>{
+        const Lng = (value)=>`translated_${value}`;
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+            ...defaultProps,
+            Lng: Lng,
+            isDisputeContact: true
+        }));
+        expect(_react1.screen.getByText(/translated_Dispute/)).toBeInTheDocument();
+    });
+    it('renders with custom generalizing word', ()=>{
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+            ...defaultProps,
+            generalizingWord: "department",
+            isDisputeContact: true
+        }));
+        expect(_react1.screen.getByText(/department/)).toBeInTheDocument();
+    });
+    it('does not render generalizing word when isNotRenderGeneralizingWord is true', ()=>{
+        const { container } = (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+            ...defaultProps,
+            generalizingWord: "department",
+            isNotRenderGeneralizingWord: true,
+            isDisputeContact: true
+        }));
+        expect(container).not.toHaveTextContent(/department/);
+    });
+    it('handles empty props correctly', ()=>{
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {}));
+        expect(_react1.screen.getByTestId('user-contacts')).toBeEmptyDOMElement();
+    });
+    it('applies custom className correctly', ()=>{
+        const customClass = 'custom-class';
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+            ...defaultProps,
+            className: customClass
+        }));
+        expect(_react1.screen.getByTestId('user-contacts')).toHaveClass(customClass);
+    });
+    it('applies custom className correctly', ()=>{
+        const customClass = 'custom-class';
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+            ...defaultProps,
+            className: customClass
+        }));
+        expect(_react1.screen.getByTestId('user-contacts')).toHaveClass(customClass);
+    });
+    it('uses custom icons correctly', ()=>{
+        const CustomEmailIcon = ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                "data-testid": "custom-email-icon",
+                children: "📧"
+            });
+        const CustomPhoneIcon = ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                "data-testid": "custom-phone-icon",
+                children: "📞"
+            });
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+            ...defaultProps,
+            EmailIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(CustomEmailIcon, {}),
+            PhoneIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(CustomPhoneIcon, {}),
+            maxWidth: 100
+        }));
+        // Имитируем маленькую ширину для активации режима иконок
+        Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+            configurable: true,
+            value: 50
+        });
+    });
+    it('renders other contacts together with main contacts when isOtherTogetherMainContacts is true', ()=>{
+        const otherContacts = [
+            'Support'
+        ];
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+            ...defaultProps,
+            isDisputeContact: true,
+            otherContacts: otherContacts,
+            isOtherTogetherMainContacts: true
+        }));
+        const contactsContainer = _react1.screen.getByTestId('user-contacts');
+        expect(contactsContainer.textContent).toMatch(/Dispute.*Support/);
+    });
+    it('trims contact values correctly', ()=>{
+        const emailWithSpaces = ' test@example.com ';
+        const phoneWithSpaces = ' +1234567890 ';
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+            email: emailWithSpaces,
+            phone: phoneWithSpaces
+        }));
+        const emailLink = _react1.screen.getByText(`${emailWithSpaces.trim()} ,`);
+        const phoneLink = _react1.screen.getByText(phoneWithSpaces.trim());
+        expect(emailLink.closest('a')).toHaveAttribute('href', `mailto:${emailWithSpaces.trim()}`);
+        expect(phoneLink.closest('a')).toHaveAttribute('href', `tel:${phoneWithSpaces.trim()}`);
+    });
+    describe('layout behavior', ()=>{
+        beforeEach(()=>{
+            jest.useFakeTimers();
+        });
+        afterEach(()=>{
+            jest.useRealTimers();
+        });
+        it('switches to icon mode when content exceeds maxWidth', ()=>{
+            // Мокаем размеры элементов
+            const mockRefs = {
+                mainRef: {
+                    current: {
+                        clientWidth: 100
+                    }
+                },
+                firstRef: {
+                    current: {
+                        clientWidth: 40
+                    }
+                },
+                secondRef: {
+                    current: {
+                        clientWidth: 40
+                    }
+                },
+                contactsRef: {
+                    current: {
+                        clientWidth: 40
+                    }
+                }
+            };
+            jest.spyOn(_react.default, 'useRef').mockImplementation(()=>mockRefs.mainRef);
+            jest.spyOn(_react.default, 'useRef').mockImplementation(()=>mockRefs.firstRef);
+            jest.spyOn(_react.default, 'useRef').mockImplementation(()=>mockRefs.secondRef);
+            jest.spyOn(_react.default, 'useRef').mockImplementation(()=>mockRefs.contactsRef);
+            (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+                ...defaultProps,
+                maxWidth: 100
+            }));
+            jest.runAllTimers();
+        });
+    });
+    describe('main contacts combinations', ()=>{
+        it('renders all types of main contacts correctly', ()=>{
+            (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+                ...defaultProps,
+                isDisputeContact: true,
+                isSalesContact: true,
+                isAccountingContact: true,
+                isBusinessContact: true,
+                isTechnicalContact: true
+            }));
+            const contactTypes = [
+                'Dispute',
+                'Sales',
+                'Accounting',
+                'Business',
+                'Technical'
+            ];
+            contactTypes.forEach((type)=>{
+                expect(_react1.screen.getByText(new RegExp(type))).toBeInTheDocument();
+            });
+        });
+        it('handles complex prefix and postfix combinations', ()=>{
+            (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+                ...defaultProps,
+                isDisputeContact: {
+                    prefix: 'Senior',
+                    postfix: 'Manager'
+                },
+                isSalesContact: {
+                    prefix: 'Lead',
+                    postfix: 'Representative'
+                }
+            }));
+            expect(_react1.screen.getByText(/Senior Dispute Manager/)).toBeInTheDocument();
+            expect(_react1.screen.getByText(/Lead Sales Representative/)).toBeInTheDocument();
+        });
+    });
+    describe('userContacts', ()=>{
+        // Подготавливаем окружение перед каждым тестом
+        beforeEach(()=>{
+            mockResizeObserver();
+        });
+        it('renders with default test props', ()=>{
+            const props = createTestProps();
+            (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+                ...props
+            }));
+            expect(_react1.screen.getByTestId('user-contacts')).toBeInTheDocument();
+            expect(_react1.screen.getByText(`${props.email},`)).toBeInTheDocument();
+            expect(_react1.screen.getByText(props.phone)).toBeInTheDocument();
+        });
+        it('renders all contact types with prefixes', ()=>{
+            const props = createTestProps({
+                isDisputeContact: {
+                    prefix: 'Senior',
+                    postfix: 'Manager'
+                },
+                isSalesContact: {
+                    prefix: 'Lead',
+                    postfix: 'Representative'
+                },
+                isAccountingContact: true,
+                isBusinessContact: true,
+                isTechnicalContact: true
+            });
+            (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+                ...props
+            }));
+            expect(_react1.screen.getByText(/Senior Dispute Manager/)).toBeInTheDocument();
+            expect(_react1.screen.getByText(/Lead Sales Representative/)).toBeInTheDocument();
+            expect(_react1.screen.getByText(/Accounting/)).toBeInTheDocument();
+            expect(_react1.screen.getByText(/Business/)).toBeInTheDocument();
+            expect(_react1.screen.getByText(/Technical/)).toBeInTheDocument();
+        });
+        it('handles empty props gracefully', ()=>{
+            const props = createTestProps({
+                email: undefined,
+                phone: undefined
+            });
+            (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+                ...props
+            }));
+            expect(_react1.screen.getByTestId('user-contacts')).toBeEmptyDOMElement();
+        });
+        it('renders other contacts correctly', ()=>{
+            const props = createTestProps({
+                otherContacts: [
+                    'Support',
+                    'Marketing'
+                ],
+                isOtherTogetherMainContacts: true
+            });
+            (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+                ...props
+            }));
+            expect(_react1.screen.getByText(/Support/)).toBeInTheDocument();
+            expect(_react1.screen.getByText(/Marketing/)).toBeInTheDocument();
+        });
+        describe('layout behavior', ()=>{
+            beforeEach(()=>{
+                jest.useFakeTimers();
+            });
+            afterEach(()=>{
+                jest.useRealTimers();
+            });
+            it('updates layout on prop changes', ()=>{
+                const refs = mockRefs({
+                    main: 200,
+                    first: 50,
+                    second: 50,
+                    contacts: 50
+                });
+                jest.spyOn(_react.default, 'useRef').mockImplementationOnce(()=>refs.mainRef).mockImplementationOnce(()=>refs.firstRef).mockImplementationOnce(()=>refs.secondRef).mockImplementationOnce(()=>refs.contactsRef);
+                const { rerender } = (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+                    ...createTestProps()
+                }));
+                // Перерендер с новыми пропсами
+                rerender(/*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+                    ...createTestProps({
+                        email: 'new@test.com'
+                    })
+                }));
+                jest.runAllTimers();
+                // Проверяем, что компонент обновился с новым email
+                expect(_react1.screen.getByText('new@test.com,')).toBeInTheDocument();
+            });
+        });
+    });
+});

package/dist/src/Atomic/FormElements/UserContacts/UserContacts.interface.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/src/Atomic/FormElements/UserContacts/UserContacts.js

@@ -0,0 +1,188 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _CustomIcons = require("@/Molecular/CustomIcons");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+require("./UserContacts.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const RC = 'user-contacts';
+const UserContacts = (props)=>{
+    var _props_firstKey, _props_secondKey, _otherContacts_map;
+    const { testId = RC, className, email, phone, EmailIcon, PhoneIcon, isFirstPhone = false, maxWidth, isUseCommaSeparator = true, generalizingWord = 'contact', isNotRenderGeneralizingWord = false, Lng = (value)=>value, otherContacts = [], isOtherTogetherMainContacts = false, ...mainContacts } = props || {};
+    const mainContactsDescriptions = {
+        isDisputeContact: 'Dispute',
+        isSalesContact: 'Sales',
+        isAccountingContact: 'Accounting',
+        isBusinessContact: 'Business',
+        isTechnicalContact: 'Technical'
+    };
+    const getContact = (key)=>{
+        const contact = mainContacts[key];
+        const { prefix = '', postfix = '' } = typeof contact === 'object' ? contact : {};
+        return `${prefix ? `${Lng(prefix.toString())} ` : ''}${Lng(mainContactsDescriptions[key])}${postfix ? ` ${Lng(postfix.toString())}` : ''}`;
+    };
+    let mainContactsStructure = Object.keys(mainContacts).reduce((acc, key)=>mainContacts[key] && key in mainContactsDescriptions ? [
+            ...acc,
+            getContact(key)
+        ] : acc, []);
+    mainContactsStructure = isOtherTogetherMainContacts ? [
+        ...mainContactsStructure,
+        ...Array.isArray(otherContacts) ? otherContacts.map((contact)=>Lng(contact)) : []
+    ] : mainContactsStructure;
+    let mainContactsCount = mainContactsStructure.length;
+    let otherContactsCount = (otherContacts === null || otherContacts === void 0 ? void 0 : otherContacts.length) || 0;
+    const isContacts = Boolean(mainContactsCount) || Boolean(otherContactsCount);
+    const isMainContacts = Boolean(mainContactsCount);
+    const mainRef = (0, _react.useRef)(null);
+    const firstRef = (0, _react.useRef)(null);
+    const secondRef = (0, _react.useRef)(null);
+    const contactsRef = (0, _react.useRef)(null);
+    const [isIconMode, setIconMode] = (0, _react.useState)(false);
+    const [isRunTask, setIsRunTask] = (0, _react.useState)(null);
+    const getSeparator = (type)=>{
+        const separator = isUseCommaSeparator ? ', ' : ' ';
+        switch(type){
+            case 'main':
+                return mainContactsCount-- > 1 ? separator : '';
+            case 'other':
+                return otherContactsCount-- > 1 ? separator : '';
+            default:
+                return separator;
+        }
+    };
+    const firstKey = isFirstPhone ? 'phone' : 'email';
+    const secondKey = isFirstPhone ? 'email' : 'phone';
+    const getIcon = (key)=>{
+        switch(key){
+            case 'email':
+                return EmailIcon || /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomIcons.Email, {});
+            case 'phone':
+                return PhoneIcon || /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomIcons.Phone, {});
+            default:
+                return null;
+        }
+    };
+    const getProtocol = (key)=>{
+        switch(key){
+            case 'email':
+                return 'mailto:';
+            case 'phone':
+                return 'tel:';
+            default:
+                return 'https://';
+        }
+    };
+    const getClasses = (isFirst)=>(0, _classnames.default)('no-wrap', `${RC}__${isFirst ? firstKey : secondKey}`, {
+            [`${RC}__${isFirst ? firstKey : secondKey}_icon-mode`]: isIconMode
+        });
+    const checkWidth = ()=>{
+        if (mainRef.current && firstRef.current && secondRef.current && contactsRef.current) {
+            const measure = maxWidth || mainRef.current.clientWidth;
+            if (firstRef.current.clientWidth + secondRef.current.clientWidth + contactsRef.current.clientWidth > measure) {
+                setIconMode(true);
+            } else {
+                setIconMode(false);
+            }
+        }
+    };
+    (0, _react.useLayoutEffect)(checkWidth, [
+        isRunTask
+    ]);
+    (0, _react.useEffect)(()=>{
+        setIsRunTask({});
+        return ()=>setIconMode(false);
+    }, [
+        email,
+        phone,
+        JSON.stringify(mainContactsStructure),
+        Number(maxWidth)
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": testId,
+        ref: mainRef,
+        className: (0, _classnames.default)('j4', RC, className),
+        children: [
+            Boolean(props[firstKey]) && /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
+                ref: firstRef,
+                href: `${getProtocol(firstKey)}${(_props_firstKey = props[firstKey]) === null || _props_firstKey === void 0 ? void 0 : _props_firstKey.trim()}`,
+                target: "_blank",
+                rel: "noreferrer",
+                className: getClasses(true),
+                children: isIconMode ? getIcon(firstKey) : `${props[firstKey]}${props[secondKey] || isContacts ? getSeparator() : ''}`
+            }),
+            Boolean(props[secondKey]) && /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
+                ref: secondRef,
+                href: `${getProtocol(secondKey)}${(_props_secondKey = props[secondKey]) === null || _props_secondKey === void 0 ? void 0 : _props_secondKey.trim()}`,
+                target: "_blank",
+                rel: "noreferrer",
+                className: getClasses(false),
+                children: isIconMode ? getIcon(secondKey) : `${props[secondKey]}${isContacts ? getSeparator() : ''}`
+            }),
+            isContacts && /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                ref: contactsRef,
+                className: (0, _classnames.default)('no-wrap', `${RC}__contacts`),
+                children: [
+                    isMainContacts ? mainContactsStructure.map((contact)=>`${contact}${getSeparator('main')}`) : null,
+                    isMainContacts && generalizingWord && !isNotRenderGeneralizingWord ? ` ${Lng(generalizingWord)}` : '',
+                    isMainContacts && Boolean(otherContacts) && Boolean(otherContacts === null || otherContacts === void 0 ? void 0 : otherContacts.length) && !isOtherTogetherMainContacts ? getSeparator() : '',
+                    Boolean(otherContacts) && Boolean(otherContacts === null || otherContacts === void 0 ? void 0 : otherContacts.length) && !isOtherTogetherMainContacts ? otherContacts === null || otherContacts === void 0 ? void 0 : (_otherContacts_map = otherContacts.map) === null || _otherContacts_map === void 0 ? void 0 : _otherContacts_map.call(otherContacts, (contact)=>`${contact}${getSeparator('other')}`) : null
+                ]
+            })
+        ]
+    });
+};
+const _default = UserContacts;

package/dist/src/Atomic/FormElements/UserContacts/UserContacts.scss

@@ -0,0 +1,19 @@
+:root {
+  --user-contacts-margin-right: 5px;
+  --user-contacts-icon-mode-width: 16px;
+  --user-contacts-icon-mode-height: 16px;
+  --user-contacts-icon-mode-margin-right: 8px;
+}
+
+.user-contacts {
+  &__email,
+  &__phone {
+    margin-right: var(--user-contacts-margin-right);
+
+    &_icon-mode {
+      width: var(--user-contacts-icon-mode-width);
+      height: var(--user-contacts-icon-mode-height);
+      margin-right: var(--user-contacts-icon-mode-margin-right);
+    }
+  }
+}

package/dist/src/Atomic/FormElements/UserContacts/UserContacts.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    UserContactsTemplate: function() {
+        return UserContactsTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _UserContacts = /*#__PURE__*/ _interop_require_default(require("./UserContacts"));
+require("./partial/AnyOuterClass.scss");
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = {
+    title: 'Form Elements/UserContacts',
+    component: _UserContacts.default
+};
+const Template = (args)=>{
+    const { isIncludeOuterStyles, ...restArgs } = args;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+        className: isIncludeOuterStyles ? 'any-outer-class__user-contacts' : '',
+        ...restArgs
+    });
+};
+const UserContactsTemplate = Template.bind({});
+UserContactsTemplate.args = {
+    isIncludeOuterStyles: false,
+    email: 'vosnosdnonsjo@kvmsdv.com',
+    // email: 0,
+    phone: '1111-111-111',
+    // phone: 0,
+    isDisputeContact: false,
+    // isDisputeContact: { prefix: '', postfix: '' },
+    isSalesContact: false,
+    // isSalesContact: { prefix: '', postfix: '' },
+    isAccountingContact: false,
+    // isAccountingContact: { prefix: '', postfix: '' },
+    // isBusinessContact: false,
+    isBusinessContact: {
+        prefix: 'Primary',
+        postfix: ''
+    },
+    // isTechnicalContact: false,
+    isTechnicalContact: {
+        prefix: 'Primary',
+        postfix: 'Contact'
+    },
+    // otherContacts: ['My personal account manager'],
+    otherContacts: [
+        'Super',
+        'Any',
+        'View'
+    ],
+    isOtherTogetherMainContacts: false,
+    // generalizingWord: 'manager',
+    isNotRenderGeneralizingWord: false,
+    isFirstPhone: false,
+    isUseCommaSeparator: true,
+    maxWidth: 480
+};

package/dist/src/Atomic/FormElements/UserContacts/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _UserContacts = /*#__PURE__*/ _interop_require_default(require("./UserContacts"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = _UserContacts.default;