@mindly/ui-components 5.98.16 → 5.98.18

package/dist/esm/lib/SpecialistProfile/SpecialistLangs/SpecialistLangs.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SpecialistLangsWrapper } from './SpecialistLangs.style';
+import { IonSkeletonText } from '@ionic/react';
+import { Flag_v2 as Flag } from '../../../lib2';
+const SpecialistLangs = ({ className, showLoader, langs, country, countryCode, titleLangs, titleCountry, }) => {
+    if (showLoader) {
+        return (_jsxs(SpecialistLangsWrapper, Object.assign({ className: className }, { children: [_jsxs("div", { children: [_jsx(IonSkeletonText, { style: {
+                                margin: '0 0 16px 0',
+                                width: '204px',
+                                height: '21px',
+                                borderRadius: '6px',
+                            }, animated: true }), _jsxs("ul", Object.assign({ className: "langs-list" }, { children: [_jsx("li", { children: _jsx(IonSkeletonText, { style: {
+                                            margin: '0',
+                                            width: '111px',
+                                            height: '16px',
+                                            borderRadius: '6px',
+                                        }, animated: true }) }), _jsx("li", { children: _jsx(IonSkeletonText, { style: {
+                                            margin: '0',
+                                            width: '111px',
+                                            height: '16px',
+                                            borderRadius: '6px',
+                                        }, animated: true }) })] }))] }), _jsxs("div", { children: [_jsx(IonSkeletonText, { style: {
+                                margin: '0 0 16px 0',
+                                width: '196px',
+                                height: '21px',
+                                borderRadius: '6px',
+                            }, animated: true }), _jsxs("div", Object.assign({ className: "specialist-country" }, { children: [_jsx(IonSkeletonText, { style: {
+                                        margin: '0',
+                                        width: '52px',
+                                        height: '16px',
+                                        borderRadius: '6px',
+                                    }, animated: true }), _jsx(IonSkeletonText, { style: {
+                                        margin: '0',
+                                        width: '24px',
+                                        height: '16px',
+                                        borderRadius: '6px',
+                                    }, animated: true })] }))] })] })));
+    }
+    return (_jsxs(SpecialistLangsWrapper, Object.assign({ className: className }, { children: [_jsxs("div", { children: [_jsx("h4", Object.assign({ className: "section-header" }, { children: titleLangs })), _jsx("ul", Object.assign({ className: "langs-list" }, { children: langs.map((l, i) => (_jsx("li", { children: l }, i))) }))] }), _jsxs("div", { children: [_jsx("h4", Object.assign({ className: "section-header" }, { children: titleCountry })), _jsxs("div", Object.assign({ className: "specialist-country" }, { children: [country, " ", _jsx(Flag, { name: countryCode })] }))] })] })));
+};
+export default SpecialistLangs;

package/dist/esm/lib/SpecialistProfile/SpecialistLangs/SpecialistLangs.style.js

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+export const SpecialistLangsWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  row-gap: 24px;
+
+  & .section-header {
+    margin-bottom: 16px;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 24px;
+    color: #1d201f;
+  }
+
+  & .langs-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+
+    & li {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 18px;
+      color: #1d201f;
+    }
+  }
+
+  & .specialist-country {
+    display: flex;
+    align-items: center;
+    column-gap: 10px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 18px;
+    color: #1d201f;
+  }
+`;

package/dist/esm/lib/SpecialistProfile/SpecialistLangs/index.js

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

package/dist/esm/lib/SpecialistProfile/SpecialistMatch/SpecialistMatch.js

@@ -0,0 +1,24 @@
+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 { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { SpecialistMatchContainer, StyledProgressBar, StyledProgressBarContainer, StyledProgressBarPercent, } from './SpecialistMatch.style';
+import Skeleton from '../../Skeleton';
+import { informationCircle } from 'ionicons/icons';
+import { IonIcon } from '@ionic/react';
+const SpecialistMatch = (_a) => {
+    var { specialistFirstName, percentMatch, learnMoreClick, translations, isLoading } = _a, props = __rest(_a, ["specialistFirstName", "percentMatch", "learnMoreClick", "translations", "isLoading"]);
+    if (!percentMatch && !isLoading)
+        return null;
+    return !isLoading ? (_jsxs(SpecialistMatchContainer, Object.assign({ onClick: learnMoreClick }, props, { children: [_jsxs("h2", { children: [specialistFirstName, " ", translations.matchYou] }), !!percentMatch && percentMatch > 0 && (_jsxs(StyledProgressBarContainer, { children: [_jsx(StyledProgressBar, { value: percentMatch / 100 }), _jsxs(StyledProgressBarPercent, Object.assign({ percentMatch: percentMatch !== null && percentMatch !== void 0 ? percentMatch : 0 }, { children: [percentMatch, "%"] }))] })), _jsxs("p", { children: [translations.howWeMatchThis, " ", _jsx(IonIcon, { icon: informationCircle })] })] }))) : (_jsxs(SpecialistMatchContainer, { children: [_jsx(Skeleton, { style: { width: '80%' }, heightPx: 24 }), _jsx(StyledProgressBarContainer, { children: _jsx(Skeleton, { heightPx: 35 }) }), _jsx(Skeleton, { style: { width: '40%' }, heightPx: 16 })] }));
+};
+export default React.memo(SpecialistMatch);

package/dist/esm/lib/SpecialistProfile/SpecialistMatch/SpecialistMatch.style.js

@@ -0,0 +1,67 @@
+import styled from 'styled-components';
+import { IonProgressBar } from '@ionic/react';
+export const SpecialistMatchContainer = styled.div `
+  padding: 0px 18px;
+  cursor: pointer;
+
+  h2 {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 24px;
+    color: #1d201f;
+  }
+
+  p {
+    cursor: pointer;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 16px;
+
+    color: #5b5b5b;
+    text-decoration: none;
+
+    ion-icon {
+      color: #5b5b5b;
+      font-size: 20px;
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+`;
+export const StyledProgressBarContainer = styled.div `
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  width: 100%;
+  height: 35px;
+  position: relative;
+`;
+export const StyledProgressBarPercent = styled.p `
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+
+  color: ${(props) => (props === null || props === void 0 ? void 0 : props.percentMatch) > 54 ? '#ffffff !important' : '#1d201f !important'};
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  transform: translate(-50%, -50%);
+`;
+export const StyledProgressBar = styled(IonProgressBar) `
+  width: 100%;
+  height: 35px;
+  border-radius: 5px;
+
+  &::part(progress) {
+    background: #26b183;
+    border-radius: 5px;
+  }
+
+  &::part(track) {
+    background-color: #e8ecf2;
+  }
+`;

package/dist/esm/lib/SpecialistProfile/SpecialistMatch/index.js

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

package/dist/esm/lib/SpecialistProfile/SpecialistStatistic/SpecialistStatistic.js

@@ -0,0 +1,27 @@
+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 from 'react';
+import { SpecialistStatisticContainer, SpecialistStatisticRow, StyledTextContainer, } from './SpecialistStatistic.style';
+import { decOfNum } from '../../Consultations/utils';
+import Skeleton from '../../Skeleton';
+import { IonIcon } from '@ionic/react';
+import { informationCircle } from 'ionicons/icons';
+const SpecialistStatistic = (_a) => {
+    var { learnMoreClick, countConsultationFor3Days, isSuperSpecialist, specialistFirstName, specialistLastName, isLoading, superSpecialistIcon, trendingUpIcon, translations } = _a, props = __rest(_a, ["learnMoreClick", "countConsultationFor3Days", "isSuperSpecialist", "specialistFirstName", "specialistLastName", "isLoading", "superSpecialistIcon", "trendingUpIcon", "translations"]);
+    if (isLoading) {
+        return (_jsxs(SpecialistStatisticContainer, Object.assign({}, props, { children: [_jsxs(SpecialistStatisticRow, { children: [_jsx(Skeleton, { widthPx: 30, heightPx: 30 }), _jsxs(StyledTextContainer, { children: [_jsx(Skeleton, { widthPx: 138, heightPx: 20 }), _jsx(Skeleton, { style: { width: '70%' }, heightPx: 32 })] })] }), _jsxs(SpecialistStatisticRow, { children: [_jsx(Skeleton, { widthPx: 30, heightPx: 30 }), _jsxs(StyledTextContainer, { children: [_jsx(Skeleton, { widthPx: 138, heightPx: 20 }), _jsx(Skeleton, { style: { width: '70%' }, heightPx: 32 })] })] })] })));
+    }
+    return isSuperSpecialist ||
+        (countConsultationFor3Days && countConsultationFor3Days > 0) ? (_jsxs(SpecialistStatisticContainer, Object.assign({}, props, { children: [!!isSuperSpecialist && (_jsxs(SpecialistStatisticRow, Object.assign({ onClick: learnMoreClick, className: 'clickable' }, { children: [_jsx("img", { src: superSpecialistIcon }), _jsxs(StyledTextContainer, { children: [_jsx("h4", { children: translations.superSpecialist }), _jsxs("p", { children: [specialistFirstName, " ", specialistLastName[0], ".", ' ', translations.superSpecialistInfo, _jsxs("span", { children: [translations.knowMore, " ", _jsx(IonIcon, { icon: informationCircle })] })] })] })] }))), !!countConsultationFor3Days && countConsultationFor3Days > 0 && (_jsxs(SpecialistStatisticRow, { children: [_jsx("img", { src: trendingUpIcon }), _jsxs(StyledTextContainer, { children: [_jsx("h4", { children: translations.popularSpecialist }), _jsxs("p", { children: [countConsultationFor3Days, ' ', decOfNum(countConsultationFor3Days, translations.sessions), ' ', translations.bookedSession] })] })] }))] }))) : null;
+};
+export default React.memo(SpecialistStatistic);

package/dist/esm/lib/SpecialistProfile/SpecialistStatistic/SpecialistStatistic.style.js

@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+export const SpecialistStatisticContainer = styled.div `
+  padding: 0px 18px;
+
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+export const SpecialistStatisticRow = styled.div `
+  display: flex;
+  gap: 16px;
+
+  img {
+    align-self: flex-start;
+  }
+
+  &.clickable {
+    cursor: pointer;
+  }
+`;
+export const StyledTextContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  h4 {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 20px;
+    display: flex;
+    align-items: center;
+    color: #1d201f;
+  }
+
+  p {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    color: #5b5b5b;
+
+    ion-icon {
+      color: #5b5b5b;
+      font-size: 20px;
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    span {
+      cursor: pointer;
+      font-style: normal;
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 16px;
+      color: #5b5b5b;
+      text-decoration: none;
+    }
+  }
+`;

package/dist/esm/lib/SpecialistProfile/SpecialistStatistic/index.js

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

package/dist/esm/lib/SpecialistProfile/WorkDirections/WorkDirections.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { StyledWorkDirectionContainer, StyledWorkDirectionsTagsContainer, } from './WorkDirections.style';
+import Tag from '../../Tag/Tag';
+import Skeleton from '../../Skeleton/Skeleton';
+import CustomButton from '../../CustomButton';
+const DEFAULT_LIMIT = 9;
+const WorkDirections = ({ showLoader, workDirections, limit, moreLabel, hideLabel, }) => {
+    var _a;
+    const realLimit = limit !== null && limit !== void 0 ? limit : DEFAULT_LIMIT;
+    const [viewAll, setViewAll] = useState(((_a = workDirections === null || workDirections === void 0 ? void 0 : workDirections.length) !== null && _a !== void 0 ? _a : 0) <= realLimit);
+    const tags = useMemo(() => {
+        if (!workDirections)
+            return null;
+        return workDirections.map((el, index) => (_jsx(Tag, { children: _jsx("p", Object.assign({ className: 'caption' }, { children: el })) }, `${el}_${index}`)));
+    }, [workDirections === null || workDirections === void 0 ? void 0 : workDirections.length]);
+    const showAll = useCallback(() => {
+        setViewAll(!viewAll);
+    }, [viewAll]);
+    useEffect(() => {
+        var _a;
+        setViewAll(((_a = workDirections === null || workDirections === void 0 ? void 0 : workDirections.length) !== null && _a !== void 0 ? _a : 0) <= realLimit);
+    }, [workDirections === null || workDirections === void 0 ? void 0 : workDirections.length]);
+    /**
+     * skeleton layout
+     */
+    if (showLoader) {
+        return (_jsx(StyledWorkDirectionContainer, { children: _jsxs(StyledWorkDirectionsTagsContainer, { children: [_jsx(Skeleton, { widthPx: 128, heightPx: 32, style: { borderRadius: '30px' } }), _jsx(Skeleton, { widthPx: 192, heightPx: 32, style: { borderRadius: '30px' } }), _jsx(Skeleton, { widthPx: 226, heightPx: 32, style: { borderRadius: '30px' } })] }) }));
+    }
+    return (workDirections === null || workDirections === void 0 ? void 0 : workDirections.length) ? (_jsxs(StyledWorkDirectionContainer, { children: [_jsx(StyledWorkDirectionsTagsContainer, { children: viewAll ? tags : tags === null || tags === void 0 ? void 0 : tags.slice(0, realLimit) }), workDirections.length > realLimit && (_jsx(CustomButton, Object.assign({ buttonType: 'accent-light-grey', onClick: showAll }, { children: _jsx("h5", { children: !viewAll ? moreLabel : hideLabel }) })))] })) : null;
+};
+export default React.memo(WorkDirections);

package/dist/esm/lib/SpecialistProfile/WorkDirections/WorkDirections.style.js

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+export const StyledWorkDirectionContainer = styled.div `
+  position: relative;
+
+  p.caption {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+
+    color: #5b5b5b;
+  }
+
+  button {
+    margin-top: 16px;
+    padding: 12px 24px;
+
+    min-width: 100%;
+    background-color: #f2f4f7;
+
+    border-radius: 10px;
+
+    h5 {
+      font-family: 'Inter';
+      font-style: normal;
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 16px;
+      color: #1d201f;
+    }
+  }
+`;
+export const StyledWorkDirectionsTagsContainer = styled.div `
+  max-width: 100%;
+  display: flex;
+  row-gap: 10px;
+  column-gap: 10px;
+  width: fit-content;
+  flex-wrap: wrap;
+`;

package/dist/esm/lib/SpecialistProfile/WorkDirections/index.js

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

package/dist/esm/lib/Spinner/Spinner.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SpinnerStyled } from './Spinner.styled';
+const Spinner = () => {
+    return _jsx(SpinnerStyled, { name: 'lines' });
+};
+export default Spinner;

package/dist/esm/lib/Spinner/Spinner.styled.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { IonSpinner } from '@ionic/react';
+export const SpinnerStyled = styled(IonSpinner) `
+  width: 49px;
+  height: 49px;
+  --color: #d8d8d8;
+`;

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

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

package/dist/esm/lib/StarRating/StarRating.js

@@ -0,0 +1,23 @@
+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 Rating from 'react-rating';
+import { decOfNum } from '../Consultations/utils';
+import { RatingSection } from './StarRating.style';
+import { ReactComponent as EmptyStarIcon } from './/empty-start-icon.svg';
+import { ReactComponent as FillStarIcon } from './/fill-star-icon.svg';
+const StarRating = (_a) => {
+    var _b;
+    var { averageStarsCount, countOfReviews, translations } = _a, props = __rest(_a, ["averageStarsCount", "countOfReviews", "translations"]);
+    return (_jsxs(RatingSection, { children: [_jsx(Rating, Object.assign({ fullSymbol: _jsx(FillStarIcon, {}), emptySymbol: _jsx(EmptyStarIcon, {}), fractions: 10, className: 'rating', readonly: true, initialRating: averageStarsCount }, props)), !!countOfReviews && (_jsxs("p", { children: [countOfReviews, ' ', decOfNum(countOfReviews, (_b = translations === null || translations === void 0 ? void 0 : translations.reviews) !== null && _b !== void 0 ? _b : [])] }))] }));
+};
+export default StarRating;

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

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+export const RatingSection = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  color: #5b5b5b;
+
+  p {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+  }
+
+  .rating {
+    display: flex !important;
+    gap: 4px;
+  }
+`;

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

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

package/dist/esm/lib/StatisticsScroll/StatisticsScroll.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyledContainerItem, StyleSpecialistStatisticsContainer, } from './StatisticsScroll.style';
+import { shieldCheckmark } from 'ionicons/icons';
+import { IonIcon } from '@ionic/react';
+import { decOfNum } from '../Consultations/utils';
+import Skeleton from '../Skeleton';
+const StatisticsScroll = ({ trust, activeClients, sessionDuration, sessionsCount, pricePerSession, priceCurrencySign, hoursOfPractice, yearOfExperience, showLoader, subscriptionBalance, subscriptionStatus, translations, }) => {
+    var _a, _b;
+    return (_jsx("div", { children: !showLoader ? (_jsxs(StyleSpecialistStatisticsContainer, Object.assign({ initialSlide: 0, slidesPerView: 'auto' }, { children: [trust && (_jsxs(StyledContainerItem, Object.assign({ className: 'gap-2px', leftGap: 0, widthInPx: 86, rightGap: 20 }, { children: [_jsx(IonIcon, { icon: shieldCheckmark }), _jsx("p", Object.assign({ className: 'caption' }, { children: translations === null || translations === void 0 ? void 0 : translations.checked }))] }))), typeof subscriptionStatus === 'boolean' && (_jsxs(StyledContainerItem, Object.assign({ widthInPx: 79, rightGap: 20 }, { children: [_jsx("h4", Object.assign({ className: subscriptionStatus ? 'green' : 'red' }, { children: translations === null || translations === void 0 ? void 0 : translations.active })), _jsx("p", { children: translations === null || translations === void 0 ? void 0 : translations.subscription })] }))), typeof subscriptionBalance === 'number' && (_jsxs(StyledContainerItem, Object.assign({ widthInPx: 49, rightGap: 20 }, { children: [_jsx("h4", { children: subscriptionBalance }), _jsx("p", { children: translations === null || translations === void 0 ? void 0 : translations.balance })] }))), typeof pricePerSession === 'number' && (_jsxs(StyledContainerItem, Object.assign({ widthInPx: 66, rightGap: 20 }, { children: [_jsx("h4", { children: `${pricePerSession.toLocaleString('uk-UK', {
+                                maximumFractionDigits: 2,
+                            })}${priceCurrencySign}` }), _jsx("p", { children: translations === null || translations === void 0 ? void 0 : translations.perSessions })] }), "session")), !!activeClients && (_jsxs(StyledContainerItem, Object.assign({ widthInPx: 53, rightGap: 20 }, { children: [_jsx("h4", { children: activeClients }), _jsx("p", { children: decOfNum(activeClients, (_a = translations === null || translations === void 0 ? void 0 : translations.clients) !== null && _a !== void 0 ? _a : []) })] }), "clients")), !!sessionsCount && (_jsxs(StyledContainerItem, Object.assign({ widthInPx: 52, rightGap: 20 }, { children: [_jsx("h4", { children: sessionsCount }), _jsx("p", { children: decOfNum(sessionsCount, (_b = translations === null || translations === void 0 ? void 0 : translations.sessions) !== null && _b !== void 0 ? _b : []) })] }), "session2")), typeof hoursOfPractice === 'number' && (_jsxs(StyledContainerItem, Object.assign({ widthInPx: 115, rightGap: 12 }, { children: [_jsxs("h4", { children: [hoursOfPractice.toLocaleString('uk-UK', {
+                                    maximumFractionDigits: 2,
+                                }), "+"] }), _jsx("p", { children: translations === null || translations === void 0 ? void 0 : translations.practice })] }), "hours")), typeof yearOfExperience === 'number' && (_jsxs(StyledContainerItem, Object.assign({ widthInPx: 130, rightGap: 10 }, { children: [_jsx("h4", { children: yearOfExperience }), _jsx("p", { children: translations === null || translations === void 0 ? void 0 : translations.experience })] }), "years")), typeof sessionDuration === 'number' && (_jsxs(StyledContainerItem, Object.assign({ widthInPx: 78 }, { children: [_jsxs("h4", { children: [sessionDuration, " ", translations === null || translations === void 0 ? void 0 : translations.minutes] }), _jsx("p", { children: translations === null || translations === void 0 ? void 0 : translations.perSession })] }), "duration"))] }), 'slider')) : (_jsxs("div", Object.assign({ style: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                borderTop: '1px solid #eeeeee',
+                borderBottom: '1px solid #eeeeee',
+                padding: '14px 16px',
+            } }, { children: [_jsx("div", Object.assign({ style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        flexDirection: 'column',
+                        marginRight: '10px',
+                    } }, { children: _jsx(Skeleton, { widthPx: 86, heightPx: 44 }) })), _jsx("div", Object.assign({ style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        flexDirection: 'column',
+                        marginRight: '10px',
+                    } }, { children: _jsx(Skeleton, { widthPx: 86, heightPx: 44 }) })), _jsx("div", Object.assign({ style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        flexDirection: 'column',
+                        marginRight: '10px',
+                    } }, { children: _jsx(Skeleton, { widthPx: 86, heightPx: 44 }) })), _jsx("div", Object.assign({ style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        flexDirection: 'column',
+                        marginRight: '10px',
+                    } }, { children: _jsx(Skeleton, { widthPx: 86, heightPx: 44 }) }))] }))) }));
+};
+export default StatisticsScroll;

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

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+import { Swiper, SwiperSlide } from 'swiper/react';
+export const StyleSpecialistStatisticsContainer = styled(Swiper) `
+  max-width: 100%;
+  width: 100%;
+  padding: 14px 16px !important;
+  border-top: 1px solid #eeeeee;
+  border-bottom: 1px solid #eeeeee;
+`;
+export const StyledContainerItem = styled(SwiperSlide) `
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+
+  flex-direction: column;
+
+  width: ${(props) => props.widthInPx ? `${props.widthInPx}px` : ''} !important;
+  margin-left: ${(props) => (props.leftGap ? `${props.leftGap}px` : '0px')};
+  margin-right: ${(props) => (props.rightGap ? `${props.rightGap}px` : '0px')};
+  gap: 8px;
+
+  text-align: center;
+
+  p {
+    flex-shrink: 0;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+
+    color: #5b5b5b;
+  }
+
+  h4 {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 16px;
+
+    color: #1d201f;
+
+    &.red {
+      color: #c13e18;
+    }
+
+    &.green {
+      color: #26b183;
+    }
+  }
+
+  &.gap-2px {
+    gap: 2px;
+  }
+
+  ion-icon {
+    width: 24px;
+    height: 24px;
+
+    color: #26b183;
+  }
+`;

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

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

package/dist/esm/lib/StatisticsScroll/utils.js

@@ -0,0 +1,12 @@
+export const sessionCountDeclension = (sessionCount) => {
+    const stringValue = sessionCount.toString();
+    const lastDigit = +stringValue[stringValue.length - 1];
+    if (lastDigit === 1 &&
+        stringValue.substring(stringValue.length - 2, stringValue.length) !== '11')
+        return 'сесію';
+    if (lastDigit > 1 && lastDigit < 5)
+        return 'сесії';
+    if (sessionCount > 5 || sessionCount === 0)
+        return 'сесій';
+    return 'сесії';
+};

package/dist/esm/lib/StatusTag/StatusTag.js

@@ -0,0 +1,18 @@
+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 } from "react/jsx-runtime";
+import { StatusTagContainer } from './StatusTag.style';
+const StatusTag = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return _jsx(StatusTagContainer, Object.assign({ dimension: props.dimension, tagColor: props.tagColor }, props, { children: children }));
+};
+export default StatusTag;

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

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+export const StatusTagContainer = styled.div `
+  width: auto;
+  height: ${props => props.dimension ? `${props.dimension}px` : '24px'};
+
+  white-space: nowrap;
+  
+  margin: 8px;
+
+  display: flex;
+  gap: 10px;
+  
+  align-items: center;
+
+  background-color: ${props => props.tagColor || '#ffffff'};
+  border-radius: 30px;
+  padding: 5px 10px;
+
+  ion-icon {
+    width: 14px;
+    height: 14px;
+
+    color: #1d201f;
+  }
+
+  h5,
+  h6,
+  p {
+    color: #1d201f;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 10px;
+  }
+`;

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

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

package/dist/esm/lib/SuccessScreen/SuccessScreen.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SuccessContainer, SuccessWrapper } from './SuccessScreen.style';
+import { ReactComponent as CheckIcon } from './checkmark-done.svg';
+const SuccessScreen = ({ title, subTitle, btnTitle = 'Готово', onClick, }) => {
+    return (_jsx(SuccessWrapper, { children: _jsxs(SuccessContainer, { children: [_jsx(CheckIcon, {}), _jsx("div", Object.assign({ className: "success-title" }, { children: title })), subTitle && _jsx("div", Object.assign({ className: "success-desc" }, { children: subTitle })), _jsx("button", Object.assign({ className: "success-btn", onClick: onClick }, { children: btnTitle }))] }) }));
+};
+export default SuccessScreen;