@mindly/ui-components 5.98.17 → 5.98.18

package/dist/esm/lib/AgoraMediaPlayer/AgoraMediaPlayer.js

@@ -0,0 +1,41 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef } from 'react';
+import { AgoraMediaControlsWrapper, AgoraMediaFallbackName, AgoraMediaNoVideoWrapper, AgoraMediaPlayerWrapper, AgoraMediaWrapper, ControlItemWrapper, ControlsWrapper, } from './AgoraMediaPlayer.style';
+import NetworkQualityComponent from './NetworkQuality/NetworkQualityComponent';
+import { IonIcon } from '@ionic/react';
+import { micOffOutline, videocamOffOutline } from 'ionicons/icons';
+import { Avatar } from '../Avatar';
+const AgoraMediaPlayer = (_a) => {
+    var { fullwidth = false, cameraTrack, audioTrack, isVideoTrackMuted, isAudioTrackMuted, networkQuality, fallbackAvatar, fallbackAvatarDimensions = 72, fallbackName, showControls, isScreenSharing = false } = _a, props = __rest(_a, ["fullwidth", "cameraTrack", "audioTrack", "isVideoTrackMuted", "isAudioTrackMuted", "networkQuality", "fallbackAvatar", "fallbackAvatarDimensions", "fallbackName", "showControls", "isScreenSharing"]);
+    const localVideoContainer = useRef(null);
+    useEffect(() => {
+        if (!(localVideoContainer === null || localVideoContainer === void 0 ? void 0 : localVideoContainer.current))
+            return;
+        if (cameraTrack) {
+            cameraTrack.play(localVideoContainer.current, {
+                fit: fullwidth ? 'contain' : 'cover',
+            });
+        }
+    }, [localVideoContainer === null || localVideoContainer === void 0 ? void 0 : localVideoContainer.current, cameraTrack]);
+    useEffect(() => {
+        if (audioTrack)
+            audioTrack.play();
+    }, [localVideoContainer]);
+    return (_jsxs(AgoraMediaWrapper, { children: [localVideoContainer &&
+                (typeof isVideoTrackMuted !== 'undefined' && !isVideoTrackMuted ? (_jsx(AgoraMediaPlayerWrapper, Object.assign({ fullwidth: fullwidth, ref: localVideoContainer }, props))) : (_jsxs(AgoraMediaNoVideoWrapper, Object.assign({ fullwidth: fullwidth }, { children: [_jsx(Avatar, { dimensions: fallbackAvatarDimensions, src: fallbackAvatar, firstName: fallbackName }), fullwidth && (_jsx(AgoraMediaFallbackName, { children: fallbackName }))] })))), !isScreenSharing && (_jsx(AgoraMediaControlsWrapper, Object.assign({ isStatusData: Boolean(!isVideoTrackMuted &&
+                    !isAudioTrackMuted &&
+                    fullwidth &&
+                    showControls) }, { children: isVideoTrackMuted || isAudioTrackMuted ? (_jsxs(ControlsWrapper, { children: [isVideoTrackMuted && (_jsx(ControlItemWrapper, { children: _jsx(IonIcon, { icon: videocamOffOutline }) })), isAudioTrackMuted && (_jsx(ControlItemWrapper, { children: _jsx(IonIcon, { icon: micOffOutline }) }))] })) : (_jsx(NetworkQualityComponent, { fullScreen: fullwidth, networkQuality: networkQuality, showingAdditionalInfo: fullwidth && showControls })) })))] }));
+};
+export default React.memo(AgoraMediaPlayer);

package/dist/esm/lib/AgoraMediaPlayer/AgoraMediaPlayer.style.js

@@ -0,0 +1,57 @@
+import styled from 'styled-components';
+export const AgoraMediaWrapper = styled.div `
+  position: relative;
+  width: 100%;
+  height: 100%;
+`;
+export const AgoraMediaPlayerWrapper = styled.div `
+  width: 100%;
+  height: 100%;
+
+  & > div {
+    background: ${({ fullwidth }) => fullwidth ? 'rgba(48, 48, 48, 0.55)' : 'none'} !important;
+
+    border-radius: ${({ fullwidth }) => (fullwidth ? '10px' : 'none')};
+  }
+
+  & video {
+    border-radius: 10px;
+  }
+`;
+export const AgoraMediaNoVideoWrapper = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+`;
+export const AgoraMediaFallbackName = styled.div `
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  font-size: 18px;
+  line-height: 24px;
+  color: #ffffff;
+`;
+export const AgoraMediaControlsWrapper = styled.div `
+  position: absolute;
+  top: ${(props) => (props.isStatusData ? '6px' : '11px')};
+  right: ${(props) => (props.isStatusData ? '6px' : '11px')};
+`;
+export const ControlsWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  column-gap: 6px;
+`;
+export const ControlItemWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 18px;
+  width: 25px;
+  height: 25px;
+  background: #1d201f;
+  border-radius: 50%;
+`;

package/dist/esm/lib/AgoraMediaPlayer/NetworkQuality/NetworkQualityComponent.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getNetworkCssInformation } from './utilts';
+import { StyledNetworkQualityComponent, StyledNetworkQualityComponentContainer, StyledNetworkQualityTextContainer, } from './NetworkQualityComponents.style';
+const NetworkQualityComponent = (props) => {
+    var _a;
+    const networkCssInfo = getNetworkCssInformation((_a = props.networkQuality) !== null && _a !== void 0 ? _a : 0);
+    return (_jsxs(StyledNetworkQualityComponentContainer, Object.assign({ fullScreen: !!props.fullScreen, showingAdditionalInfo: props.showingAdditionalInfo }, { children: [props.showingAdditionalInfo && (_jsx(StyledNetworkQualityTextContainer, { children: _jsx("p", { children: networkCssInfo.hint }) })), _jsx(StyledNetworkQualityComponent, { color: networkCssInfo.color, icon: networkCssInfo.icon })] })));
+};
+export default NetworkQualityComponent;

package/dist/esm/lib/AgoraMediaPlayer/NetworkQuality/NetworkQualityComponents.style.js

@@ -0,0 +1,31 @@
+import { IonIcon } from '@ionic/react';
+import styled from 'styled-components';
+export const StyledNetworkQualityComponentContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  border-radius: 3px;
+
+  color: #ffffff !important;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  padding: ${(props) => props.fullScreen && props.showingAdditionalInfo ? '5px 5px 5px 10px' : '0'};
+`;
+export const StyledNetworkQualityComponent = styled(IonIcon) `
+  width: 13px;
+  height: 13px;
+
+  padding: 3px;
+
+  border-radius: 3px;
+
+  background-color: ${(props) => { var _a; return (_a = props.color) !== null && _a !== void 0 ? _a : '#7E7D78'; }};
+`;
+export const StyledNetworkQualityTextContainer = styled.div `
+  line-height: 0;
+
+  p {
+    color: white;
+  }
+`;

package/dist/esm/lib/AgoraMediaPlayer/NetworkQuality/utilts.js

@@ -0,0 +1,49 @@
+import { cellular, close, helpOutline } from 'ionicons/icons';
+export const getNetworkCssInformation = (networkQualityNumber) => {
+    switch (networkQualityNumber) {
+        case 1:
+            return {
+                color: '#26B183',
+                hint: 'Інтернет стабільний',
+                icon: cellular,
+            };
+        case 2:
+            return {
+                color: '#177590',
+                hint: 'Інтернет стабільний',
+                additionalHint: 'Але бітрейт нижчий за оптимальний',
+                icon: cellular,
+            };
+        case 3:
+            return {
+                color: '#F8AE1A',
+                hint: 'Інтернет нестабільний',
+                icon: cellular,
+            };
+        case 4:
+            return {
+                color: '#F8752B',
+                hint: 'Інтернет нестабільний',
+                additionalHint: "Зв'язок може зникати",
+                icon: cellular,
+            };
+        case 5:
+            return {
+                color: '#C13E18',
+                hint: 'Інтернет дуже поганий',
+                icon: cellular,
+            };
+        case 6:
+            return {
+                color: '#1D201F',
+                hint: 'Інтернет підключення відсутнє',
+                icon: close,
+            };
+        default:
+            return {
+                color: '#7E7D78',
+                hint: 'Неможливо встановити якість інтернету',
+                icon: helpOutline,
+            };
+    }
+};

package/dist/esm/lib/AgoraMediaPlayer/index.js

@@ -0,0 +1 @@
+export { default } from './AgoraMediaPlayer';

package/dist/esm/lib/AppFooter/AppFooter.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AppFooterContainer, AppFooterToolbar } from './AppFooter.style';
+import { isPlatform } from '@ionic/react';
+const AppFooter = ({ fullwidth = false, style, className, children, }) => {
+    return (_jsx(AppFooterContainer, Object.assign({ style: style, className: className }, { children: _jsx(AppFooterToolbar, Object.assign({ isNotMobile: !fullwidth && (isPlatform('desktop') || isPlatform('tablet')) }, { children: children })) })));
+};
+export default AppFooter;

package/dist/esm/lib/AppFooter/AppFooter.style.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { IonFooter, IonToolbar } from '@ionic/react';
+import { maxContainerWidth } from '../Theme/mindly_constants';
+export const AppFooterContainer = styled(IonFooter) `
+  background: #ffffff;
+  display: flex;
+  justify-content: center;
+  border-top: 1px solid #f2f2f2;
+  box-shadow: 0px;
+
+  &::before {
+    display: none;
+  }
+`;
+export const AppFooterToolbar = styled(IonToolbar) `
+  position: relative;
+  max-width: ${({ isNotMobile }) => (isNotMobile ? maxContainerWidth : '100%')};
+  --background: #fff;
+  --border-color: #f2f2f2;
+  --border-width: 0 0 0 !important;
+  --padding-bottom: 0;
+  --padding-end: 16px;
+  --padding-start: 16px;
+  --padding-top: 0;
+`;

package/dist/esm/lib/AppFooter/index.js

@@ -0,0 +1 @@
+export { default } from './AppFooter';

package/dist/esm/lib/AppHeader/AppHeader.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AppHeaderContainer, AppHeaderToolbar } from './AppHeader.style';
+import { isPlatform } from '@ionic/react';
+const AppHeader = ({ fullwidth = false, className, children }) => {
+    return (_jsx(AppHeaderContainer, Object.assign({ className: className }, { children: _jsx(AppHeaderToolbar, Object.assign({ isNotMobile: !fullwidth && (isPlatform('desktop') || isPlatform('tablet')) }, { children: children })) })));
+};
+export default AppHeader;

package/dist/esm/lib/AppHeader/AppHeader.style.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import { IonHeader, IonToolbar } from '@ionic/react';
+import { maxContainerWidth } from '../Theme/mindly_constants';
+export const AppHeaderContainer = styled(IonHeader) `
+  background: #ffffff;
+  box-shadow: none;
+  display: flex;
+  justify-content: center;
+
+  &::after {
+    background-image: none !important;
+  }
+`;
+export const AppHeaderToolbar = styled(IonToolbar) `
+  max-width: ${({ isNotMobile }) => (isNotMobile ? maxContainerWidth : '100%')};
+  --padding-bottom: 0;
+  --padding-end: 16px;
+  --padding-start: 16px;
+  --padding-top: 0;
+  --background: #fff;
+  --border-width: 0 !important;
+  --border-style: none;
+
+  .buttons-first-slot {
+    margin: 0;
+  }
+
+  .buttons-last-slot {
+    margin: 0;
+  }
+`;

package/dist/esm/lib/AppHeader/index.js

@@ -0,0 +1 @@
+export { default } from './AppHeader';

package/dist/esm/lib/Avatar/Avatar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import { AvatarWrapper } from './Avatar.style';
+import ImageWithFallback from '../ImageWithFallback/ImageWithFallback';
+import { IonSkeletonText } from '@ionic/react';
+import { ReactComponent as EmptyAvatarIcon } from './no-avatar.svg';
+export const Avatar = memo(({ src = '', dimensions = 56, width, height, borderRadius, style = {}, className = '', withBorder = false, onClick, }) => {
+    const [isLoading, setIsLoading] = useState(true);
+    const imageFallback = _jsx(EmptyAvatarIcon, { className: 'empty-icon' });
+    if (src) {
+        return (_jsxs(AvatarWrapper, Object.assign({ dimensions: dimensions, style: style, className: className, withBorder: withBorder, borderRadius: borderRadius, width: width, height: height, onClick: onClick, isLoading: isLoading }, { children: [_jsx(IonSkeletonText, { animated: true, style: {
+                        margin: 0,
+                        width: `${width ? width - 8 : dimensions - 8}px`,
+                        height: `${height ? height - 8 : dimensions - 8}px`,
+                        display: isLoading ? 'block' : 'none',
+                        borderRadius: `${borderRadius ? borderRadius : '50%'}`,
+                        flexShrink: 0,
+                    } }), _jsx(ImageWithFallback, { src: src, onErrorContent: imageFallback, onError: () => setIsLoading(false), onLoad: () => setIsLoading(false), style: { display: isLoading ? 'none' : 'block' } })] })));
+    }
+    return (_jsx(AvatarWrapper, Object.assign({ dimensions: dimensions, style: style, className: className, withBorder: withBorder, borderRadius: borderRadius, width: width, height: height, onClick: onClick, isLoading: false }, { children: imageFallback })));
+});
+Avatar.displayName = 'Avatar';

package/dist/esm/lib/Avatar/Avatar.style.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+export const AvatarWrapper = styled.div `
+  width: ${({ dimensions, width }) => (width ? width : dimensions)}px;
+  height: ${({ dimensions, height }) => (height ? height : dimensions)}px;
+  border-radius: ${({ borderRadius }) => (borderRadius ? borderRadius : '50%')};
+  overflow: hidden;
+  flex: 0 0 ${({ dimensions }) => dimensions}px;
+  border: ${({ withBorder }) => (withBorder ? '1px solid #D6F2F9' : 'none')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ isLoading }) => isLoading ? 'transparent' : '#177590'};
+
+  & img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: ${({ borderRadius }) => borderRadius ? borderRadius : '50%'};
+  }
+
+  & .empty-icon {
+    width: 57%;
+    color: #fff;
+  }
+`;

package/dist/esm/lib/Avatar/index.js

@@ -0,0 +1 @@
+export * from './Avatar';

package/dist/esm/lib/Booking/BookingScheduleTime/BookingScheduleTime.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { BookingScheduleButton, BookingScheduleWrapper, } from './BookingScheduleTime.style';
+import { IonSkeletonText } from '@ionic/react';
+const BookingScheduleTime = ({ variant = 'booking', items, onClick, isLoading = false, }) => {
+    if (isLoading) {
+        return (_jsx(BookingScheduleWrapper, { children: new Array(8).fill('').map((i, index) => (_jsx("li", { children: _jsx(IonSkeletonText, { style: {
+                        width: '100%',
+                        height: '48px',
+                        borderRadius: '4px',
+                        margin: '0',
+                        flexShrink: 0,
+                    }, animated: true }) }, index))) }));
+    }
+    return (_jsx(BookingScheduleWrapper, { children: items.map((item, index) => (_jsx("li", { children: _jsx(BookingScheduleButton, Object.assign({ onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(index, typeof item === 'string' ? item : item.title), className: `${variant} ${typeof item !== 'string' && (item === null || item === void 0 ? void 0 : item.active) ? 'active' : ''}` }, { children: typeof item === 'string' ? item : item.title })) }, index))) }));
+};
+export default React.memo(BookingScheduleTime);

package/dist/esm/lib/Booking/BookingScheduleTime/BookingScheduleTime.style.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+export const BookingScheduleWrapper = styled.ul `
+  list-style: none;
+  padding: 0;
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: 13px;
+  margin: 0;
+`;
+export const BookingScheduleButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  width: 100%;
+  height: 48px;
+
+  &.booking {
+    background: #d6f2f9;
+    color: #177590;
+  }
+
+  &.schedule {
+    border: 1px solid #e5e5e5;
+    color: #1d201f;
+    background: transparent;
+    text-decoration-line: line-through;
+  }
+
+  &:active,
+  &.active {
+    background: #177590;
+    color: #ffffff;
+    text-decoration-line: none;
+    border: none;
+  }
+`;

package/dist/esm/lib/Booking/BookingScheduleTime/index.js

@@ -0,0 +1 @@
+export { default } from './BookingScheduleTime';

package/dist/esm/lib/Booking/BookingSpecialistInfo/BookingSpecialistInfo.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { IonSkeletonText } from '@ionic/react';
+import { Avatar } from '../../Avatar';
+import { SpecialistInfoContainer, SpecialistInfoContainerSubTitle, SpecialistInfoContainerTitle, } from './BookingSpecialistInfo.style';
+const BookingSpecialistInfo = ({ name, title, subtitle, avatar, isLoading, }) => {
+    return !isLoading ? (_jsxs(SpecialistInfoContainer, { children: [_jsxs("div", { children: [_jsx(SpecialistInfoContainerTitle, { children: title }), _jsx(SpecialistInfoContainerSubTitle, { children: subtitle })] }), _jsx(Avatar, { dimensions: 62, src: avatar, firstName: name })] })) : (_jsxs(SpecialistInfoContainer, { children: [_jsxs("div", { children: [_jsx(IonSkeletonText, { style: {
+                            width: '129px',
+                            height: '14px',
+                            borderRadius: '4px',
+                            margin: '0 0 8px 0',
+                        }, animated: true }), _jsx(IonSkeletonText, { style: {
+                            width: '209px',
+                            height: '12px',
+                            borderRadius: '4px',
+                            margin: '0 0 4px 0',
+                        }, animated: true }), _jsx(IonSkeletonText, { style: {
+                            width: '146px',
+                            height: '12px',
+                            borderRadius: '4px',
+                            margin: '0',
+                        }, animated: true })] }), _jsx(IonSkeletonText, { style: {
+                    width: '72px',
+                    height: '72px',
+                    borderRadius: '50%',
+                    margin: '0',
+                    flexShrink: 0,
+                }, animated: true })] }));
+};
+export default React.memo(BookingSpecialistInfo);

package/dist/esm/lib/Booking/BookingSpecialistInfo/BookingSpecialistInfo.style.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+export const SpecialistInfoContainer = styled.div `
+  display: flex;
+  column-gap: 40px;
+  align-items: center;
+  justify-content: space-between;
+`;
+export const SpecialistInfoContainerTitle = styled.div `
+  font-style: normal;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 20px;
+  color: #1d201f;
+  margin-bottom: 4px;
+`;
+export const SpecialistInfoContainerSubTitle = styled.div `
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  color: #5b5b5b;
+`;

package/dist/esm/lib/Booking/BookingSpecialistInfo/index.js

@@ -0,0 +1 @@
+export { default } from './BookingSpecialistInfo';

package/dist/esm/lib/BrowserNotSupport/NotSupportModal.js

@@ -0,0 +1,21 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IonIcon } from '@ionic/react';
+import { alertCircleOutline, closeOutline } from 'ionicons/icons';
+import { StyledNotSupportModal, StyledNotSupportModalContainer, StyleRedBlock, StyleTextBlock, } from './NotSupportModal.style';
+import { Button } from '../../deprecated/button/Button';
+const NotSupportModal = (_a) => {
+    var { closeModal, redText, mainText, buttonLink, type = 'danger', title, translations } = _a, props = __rest(_a, ["closeModal", "redText", "mainText", "buttonLink", "type", "title", "translations"]);
+    return (_jsx(StyledNotSupportModal, Object.assign({}, props, { children: _jsxs(StyledNotSupportModalContainer, { children: [_jsxs("div", Object.assign({ className: `attention-block ${type === 'primary' && 'primary'}` }, { children: [_jsx(IonIcon, { icon: alertCircleOutline, color: 'red' }), _jsx("h1", { children: title !== null && title !== void 0 ? title : translations.attention })] })), redText && _jsx(StyleRedBlock, { children: redText }), mainText && (_jsx(StyleTextBlock, Object.assign({ className: `${type === 'primary' && 'primary-text'}` }, { children: mainText }))), type !== 'primary' && (_jsx("a", Object.assign({ href: buttonLink !== null && buttonLink !== void 0 ? buttonLink : 'https://www.google.com/chrome/', target: '_blank', rel: "noreferrer" }, { children: _jsx(Button, Object.assign({ buttonType: "primary", isDisabled: false }, { children: translations.downloadChromeText })) }))), _jsx("button", Object.assign({ className: `ok-button ${type === 'primary' && 'primary-btn'}`, onClick: closeModal }, { children: translations.buttonText })), _jsx(IonIcon, { className: 'close-button', icon: closeOutline, onClick: closeModal })] }) })));
+};
+export default NotSupportModal;

package/dist/esm/lib/BrowserNotSupport/NotSupportModal.style.js

@@ -0,0 +1,124 @@
+import styled from 'styled-components';
+import { IonModal } from '@ionic/react';
+export const StyledNotSupportModal = styled(IonModal) `
+  padding: 0 18px;
+
+  &::part(content) {
+    max-width: 440px;
+    height: auto;
+    border-radius: 8px;
+  }
+`;
+export const StyledNotSupportModalContainer = styled.div `
+  max-width: 100%;
+  height: 100%;
+  position: relative;
+  color: black;
+  padding: 20px 24px;
+
+  .ok-button {
+    width: 100%;
+    height: 40px;
+    padding: 12px 24px;
+    margin-top: 10px;
+    border: 1px solid #177590;
+    border-radius: 4px;
+    background-color: white;
+
+    color: #1d201f;
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 16px;
+  }
+
+  .primary-btn {
+    border-radius: 8px;
+    background: #177590;
+    color: #ffffff;
+    margin-top: 0;
+  }
+
+  p {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  .attention-block {
+    color: #c13e18;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    h1 {
+      font-style: normal;
+      font-weight: 600;
+      font-size: 24px;
+      line-height: 32px;
+    }
+  }
+
+  .primary {
+    color: #177590;
+  }
+
+  .close-button {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    transition: 200ms ease-out;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  ion-icon {
+    width: 24px;
+    height: 24px;
+  }
+`;
+export const StyleRedBlock = styled.div `
+  margin-top: 25px;
+
+  background-color: rgba(242, 78, 30, 0.08);
+  border-radius: 10px;
+
+  color: #c13e18;
+
+  max-width: 400px;
+  height: auto;
+
+  padding: 5px 10px;
+
+  b {
+    font-weight: 700;
+  }
+`;
+export const StyleTextBlock = styled.div `
+  margin-top: 25px;
+  margin-bottom: 25px;
+  color: #5b5b5b;
+
+  b {
+    font-weight: 700;
+  }
+
+  &.primary-text p {
+    font-size: 14px;
+  }
+
+  &.primary-text img {
+    display: block;
+    margin: 14px auto 6px auto;
+  }
+
+  &.primary-text {
+    margin-top: 14px;
+    margin-bottom: 14px;
+  }
+`;

package/dist/esm/lib/BrowserNotSupport/index.js

@@ -0,0 +1 @@
+export { default } from './NotSupportModal';

package/dist/esm/lib/ChangeLangModal/ChangeLangModal.js

@@ -0,0 +1,26 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import { ChangeLangContent, ChangeLangWrapper, LanguagesListWrapper } from './ChangeLangModal.style';
+import { IonIcon } from '@ionic/react';
+import { checkmarkOutline, closeOutline } from 'ionicons/icons';
+import Flag from '../Flag';
+export const LanguagesList = ({ selected, onSelect, }) => (_jsxs(LanguagesListWrapper, { children: [_jsxs("li", Object.assign({ className: `${selected === 'pl' ? 'active' : ''}`, onClick: () => onSelect('pl') }, { children: [_jsxs("div", Object.assign({ className: "lang-info" }, { children: [_jsx(Flag, { name: "pl", dimensions: 22 }), "Polski"] })), selected === 'pl' && _jsx(IonIcon, { icon: checkmarkOutline })] })), _jsxs("li", Object.assign({ className: `${selected === 'uk' ? 'active' : ''}`, onClick: () => onSelect('uk') }, { children: [_jsxs("div", Object.assign({ className: "lang-info" }, { children: [_jsx(Flag, { name: "ua", dimensions: 22 }), "\u0423\u043A\u0440\u0430\u0457\u043D\u0441\u044C\u043A\u0430"] })), selected === 'uk' && _jsx(IonIcon, { icon: checkmarkOutline })] }))] }));
+const ChangeLangModal = ({ title, selected, isOpen, onSelect, onModalClose, }) => {
+    const modalRef = useRef(null);
+    const handleModalClose = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (!modalRef.current)
+            return;
+        yield modalRef.current.dismiss();
+    }), [modalRef]);
+    return (_jsx(ChangeLangWrapper, Object.assign({ ref: modalRef, isOpen: isOpen, initialBreakpoint: 1, breakpoints: [0, 1], mode: "ios", onIonModalDidDismiss: onModalClose, swipeToClose: true }, { children: _jsxs(ChangeLangContent, { children: [_jsxs("div", Object.assign({ className: "lang-modal-header" }, { children: [_jsx("h3", Object.assign({ className: "modal-title" }, { children: title })), _jsx("button", Object.assign({ className: "close-button", onClick: handleModalClose }, { children: _jsx(IonIcon, { icon: closeOutline }) }))] })), _jsx(LanguagesList, { selected: selected, onSelect: onSelect })] }) })));
+};
+export default ChangeLangModal;