@mindly/ui-components 5.98.16 → 5.98.18

package/dist/cjs/lib/SpecialistProfile/ReviewCard/ReviewCard.js

@@ -0,0 +1,47 @@
+"use strict";
+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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ReviewCard_style_1 = require("./ReviewCard.style");
+const luxon_1 = require("luxon");
+const Avatar_1 = require("../../Avatar");
+const Flag_1 = __importDefault(require("../../Flag"));
+const StarRating_1 = __importDefault(require("../../StarRating"));
+const Skeleton_1 = __importDefault(require("../../Skeleton"));
+const MAX_SYMBOLS_COUNT = 154;
+const ReviewCard = (_a) => {
+    var _b, _c, _d;
+    var { reviewText, reviewerFirstName, reviewerLastName, reviewerAvatar, reviewerCountry, reviewedAtInSeconds, starsCount, translations, onShowMoreButtonClick, showAllReview, type, loading, cutReview = true } = _a, props = __rest(_a, ["reviewText", "reviewerFirstName", "reviewerLastName", "reviewerAvatar", "reviewerCountry", "reviewedAtInSeconds", "starsCount", "translations", "onShowMoreButtonClick", "showAllReview", "type", "loading", "cutReview"]);
+    const formatReviewedDate = (0, react_1.useMemo)(() => {
+        if (!reviewedAtInSeconds)
+            return '';
+        const luxonDate = luxon_1.DateTime.fromSeconds(reviewedAtInSeconds);
+        return luxonDate
+            .setLocale((reviewerCountry !== null && reviewerCountry !== void 0 ? reviewerCountry : 'uk'))
+            .toRelative();
+    }, [reviewedAtInSeconds]);
+    if (showAllReview) {
+        return ((0, jsx_runtime_1.jsx)(ReviewCard_style_1.ReviewCardContainer, Object.assign({}, props, { showAllReview: !!showAllReview, type: type, cutReview: cutReview }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: 'show-all-reviews' }, { children: translations.showAllReviews })) })));
+    }
+    return !loading ? ((0, jsx_runtime_1.jsxs)(ReviewCard_style_1.ReviewCardContainer, Object.assign({}, props, { type: type, cutReview: cutReview }, { children: [(0, jsx_runtime_1.jsxs)(ReviewCard_style_1.ReviewerInfo, { children: [(0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { firstName: reviewerFirstName, src: reviewerAvatar, dimensions: 40 }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'text-info' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'name-container' }, { children: [(0, jsx_runtime_1.jsxs)("p", Object.assign({ className: 'title' }, { children: [reviewerFirstName && reviewerFirstName, ' ', reviewerLastName ? `${reviewerLastName[0]}.` : ''] })), reviewerCountry !== 'es' && ((0, jsx_runtime_1.jsx)(Flag_1.default, { name: reviewerCountry !== null && reviewerCountry !== void 0 ? reviewerCountry : 'uk', dimensions: 20 }))] })), !!formatReviewedDate && ((0, jsx_runtime_1.jsx)("p", Object.assign({ className: 'sub-title' }, { children: formatReviewedDate })))] }))] }), !!starsCount && (0, jsx_runtime_1.jsx)(StarRating_1.default, { averageStarsCount: starsCount }), (0, jsx_runtime_1.jsx)(ReviewCard_style_1.TextContainer, Object.assign({ cutReview: cutReview, showAllReview: ((_b = reviewText === null || reviewText === void 0 ? void 0 : reviewText.length) !== null && _b !== void 0 ? _b : 0) > MAX_SYMBOLS_COUNT && type === 'card' }, { children: type === 'card' && cutReview
+                    ? (reviewText === null || reviewText === void 0 ? void 0 : reviewText.slice(0, MAX_SYMBOLS_COUNT)) +
+                        (((_c = reviewText === null || reviewText === void 0 ? void 0 : reviewText.length) !== null && _c !== void 0 ? _c : 0) > MAX_SYMBOLS_COUNT ? '...' : '')
+                    : reviewText })), ((_d = reviewText === null || reviewText === void 0 ? void 0 : reviewText.length) !== null && _d !== void 0 ? _d : 0) > MAX_SYMBOLS_COUNT &&
+                type === 'card' &&
+                cutReview && ((0, jsx_runtime_1.jsx)(ReviewCard_style_1.ShowMoreButton, Object.assign({ onClick: onShowMoreButtonClick }, { children: translations.showMore })))] }))) : ((0, jsx_runtime_1.jsxs)(ReviewCard_style_1.ReviewCardContainer, Object.assign({}, props, { type: type, cutReview: cutReview }, { children: [(0, jsx_runtime_1.jsxs)(ReviewCard_style_1.ReviewerInfo, Object.assign({ style: { alignItems: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { widthPx: 40, heightPx: 40, style: { borderRadius: '50%' } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { widthPx: 150, heightPx: 32 })] })), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { heightPx: 86 })] })));
+};
+exports.default = ReviewCard;

package/dist/cjs/lib/SpecialistProfile/ReviewCard/ReviewCard.style.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowMoreButton = exports.TextContainer = exports.ReviewerInfo = exports.ReviewCardContainer = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.ReviewCardContainer = styled_components_1.default.div `
+  width: ${(props) => ((props === null || props === void 0 ? void 0 : props.type) === 'card' ? '290px' : '100%')};
+  height: ${(props) => !props.cutReview ? 'auto' : ((props === null || props === void 0 ? void 0 : props.type) === 'card' ? '221px' : 'auto')};
+
+  position: relative;
+
+  padding: ${(props) => ((props === null || props === void 0 ? void 0 : props.type) === 'card' ? '16px' : '16px 0px')};
+
+  background: ${(props) => (props.showAllReview ? '#F2F4F7' : 'transparent')};
+
+  ${(props) => (props === null || props === void 0 ? void 0 : props.type) === 'card'
+    ? 'border: 1px solid #eeeeee;'
+    : 'border-bottom: 1px solid #eeeeee;'}
+  border-radius: ${(props) => ((props === null || props === void 0 ? void 0 : props.type) === 'card' ? '10px' : '0px')};
+
+  display: flex;
+  flex-direction: column;
+  align-items: ${(props) => (props.showAllReview ? 'center' : 'flex-start')};
+  justify-content: ${(props) => (props.showAllReview ? 'center' : 'initial')};
+  gap: 10px;
+  cursor: ${(props) => (props.showAllReview ? 'pointer' : 'default')};
+
+  &:active {
+    background: ${(props) => (props.showAllReview ? '#dbdde0' : 'transparent')};
+  }
+
+  .show-all-reviews {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 16px;
+
+    display: flex;
+    align-items: center;
+    text-align: center;
+
+    color: #1d201f;
+  }
+`;
+exports.ReviewerInfo = styled_components_1.default.div `
+  display: flex;
+  gap: 10px;
+
+  .text-info {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    gap: 2px;
+    text-align: start;
+  }
+
+  .name-container {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .title {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 16px;
+    color: #1d201f;
+  }
+
+  .sub-title {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    color: #5b5b5b;
+  }
+`;
+exports.TextContainer = styled_components_1.default.div `
+  max-width: 100%;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  color: #1d201f;
+  text-align: start;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow: hidden;
+  max-height: ${(props) => !props.cutReview ? 'auto' : (props.showAllReview ? '90px' : '110px')};
+`;
+exports.ShowMoreButton = styled_components_1.default.button `
+  position: absolute;
+  bottom: 16px;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 16px;
+  color: #177590;
+  text-align: left;
+
+  cursor: pointer;
+  background: transparent;
+
+  padding: 0;
+  margin: 0;
+`;

package/dist/cjs/lib/SpecialistProfile/ReviewCard/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ReviewCard_1 = require("./ReviewCard");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ReviewCard_1).default; } });

package/dist/cjs/lib/SpecialistProfile/ReviewStatistics/ReviewStatistics.js

@@ -0,0 +1,30 @@
+"use strict";
+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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ReviewStatistics_style_1 = require("./ReviewStatistics.style");
+const index_1 = require("../../../index");
+const Skeleton_1 = __importDefault(require("../../Skeleton"));
+const ReviewStatistics = (_a) => {
+    var _b, _c;
+    var { averageStarsCount, countOfReviews, statistics, translations, loading } = _a, props = __rest(_a, ["averageStarsCount", "countOfReviews", "statistics", "translations", "loading"]);
+    const maxCountOfReviews = (0, react_1.useMemo)(() => Math.max(...Object.values(statistics)), [statistics]);
+    return !loading ? ((0, jsx_runtime_1.jsxs)(ReviewStatistics_style_1.ReviewStatisticsContainer, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsxs)(ReviewStatistics_style_1.AllReviewContainer, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ className: 'average-rating' }, { children: averageStarsCount.toFixed(1) })), (0, jsx_runtime_1.jsx)(index_1.StarRating, { averageStarsCount: averageStarsCount, translations: translations }), (0, jsx_runtime_1.jsxs)("p", Object.assign({ className: 'reviews-count' }, { children: [countOfReviews, ' ', (0, index_1.decOfNum)(countOfReviews, (_b = translations === null || translations === void 0 ? void 0 : translations.reviews) !== null && _b !== void 0 ? _b : [])] }))] }), !!((_c = Object.keys(statistics !== null && statistics !== void 0 ? statistics : {})) === null || _c === void 0 ? void 0 : _c.length) && ((0, jsx_runtime_1.jsx)(ReviewStatistics_style_1.ReviewProgressContainer, { children: Object.keys(statistics)
+                    .sort((a, b) => +b - +a)
+                    .map((key, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'row' }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: 'stars' }, { children: key })), (0, jsx_runtime_1.jsx)(ReviewStatistics_style_1.StyledProgressBar, { value: statistics[key] / maxCountOfReviews })] }), `${key}_${index}`))) }))] }))) : ((0, jsx_runtime_1.jsxs)(ReviewStatistics_style_1.ReviewStatisticsContainer, Object.assign({}, props, { style: { gap: '10px' } }, { children: [(0, jsx_runtime_1.jsx)(ReviewStatistics_style_1.AllReviewContainer, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { widthPx: 115, heightPx: 77 }) }), (0, jsx_runtime_1.jsx)(ReviewStatistics_style_1.ReviewProgressContainer, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { heightPx: 81 }) })] })));
+};
+exports.default = ReviewStatistics;

package/dist/cjs/lib/SpecialistProfile/ReviewStatistics/ReviewStatistics.style.js

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledProgressBar = exports.ReviewProgressContainer = exports.AllReviewContainer = exports.ReviewStatisticsContainer = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = require("@ionic/react");
+exports.ReviewStatisticsContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 50px;
+`;
+exports.AllReviewContainer = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+
+  .average-rating {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 28px;
+    line-height: 40px;
+    color: #1d201f;
+  }
+
+  .reviews-count {
+    margin-top: 10px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    color: #5b5b5b;
+  }
+`;
+exports.ReviewProgressContainer = styled_components_1.default.div `
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  align-items: center;
+  justify-content: center;
+
+  .row {
+    width: 100%;
+    display: flex;
+    gap: 20px;
+    align-items: center;
+
+    .stars {
+      width: 8px;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 14px;
+      color: #5b5b5b;
+    }
+  }
+`;
+exports.StyledProgressBar = (0, styled_components_1.default)(react_1.IonProgressBar) `
+  height: 4px;
+  border-radius: 10px;
+
+  &::part(progress) {
+    background: #f9de33;
+    border-radius: 5px;
+  }
+
+  &::part(track) {
+    background-color: #eeeeee;
+  }
+`;

package/dist/cjs/lib/SpecialistProfile/ReviewStatistics/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ReviewStatistics_1 = require("./ReviewStatistics");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ReviewStatistics_1).default; } });

package/dist/cjs/lib/SpecialistProfile/SpecialistAbout/SpecialistAbout.js

@@ -0,0 +1,62 @@
+"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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const Skeleton_1 = __importDefault(require("../../Skeleton/Skeleton"));
+const SpecialistAbout_style_1 = require("./SpecialistAbout.style");
+const CustomButton_1 = __importDefault(require("../../CustomButton"));
+const DEFAULT_LIMIT = 268;
+const SpecialistAbout = ({ text, limit, showLoading, moreLabel, hideLabel, }) => {
+    const realLimit = limit !== null && limit !== void 0 ? limit : DEFAULT_LIMIT;
+    const [viewAll, setViewAll] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        setViewAll(((_a = text === null || text === void 0 ? void 0 : text.length) !== null && _a !== void 0 ? _a : 0) <= realLimit);
+    }, [text === null || text === void 0 ? void 0 : text.length]);
+    const onClickButtonHandler = (0, react_1.useCallback)(() => {
+        setViewAll(!viewAll);
+    }, [viewAll]);
+    if (showLoading) {
+        return ((0, jsx_runtime_1.jsxs)(SpecialistAbout_style_1.StyleAboutSpecialistContainer, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '3px',
+                        marginBottom: '19px',
+                    } }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { heightPx: 13 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { heightPx: 13 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { widthPx: 71, heightPx: 13 })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '3px',
+                        marginBottom: '19px',
+                    } }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { heightPx: 13 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { heightPx: 13 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { heightPx: 13 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { heightPx: 13 })] })), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { heightPx: 40 })] }));
+    }
+    return text ? ((0, jsx_runtime_1.jsxs)(SpecialistAbout_style_1.StyleAboutSpecialistContainer, { children: [(0, jsx_runtime_1.jsx)("p", { dangerouslySetInnerHTML: {
+                    __html: viewAll ? text : text.substring(0, DEFAULT_LIMIT) + '...',
+                } }), text.length > realLimit && ((0, jsx_runtime_1.jsx)(CustomButton_1.default, Object.assign({ buttonType: 'accent-light-grey', onClick: onClickButtonHandler }, { children: (0, jsx_runtime_1.jsx)("h5", { children: !viewAll ? moreLabel : hideLabel }) })))] })) : null;
+};
+exports.default = react_1.default.memo(SpecialistAbout);

package/dist/cjs/lib/SpecialistProfile/SpecialistAbout/SpecialistAbout.style.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleAboutSpecialistContainer = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.StyleAboutSpecialistContainer = styled_components_1.default.div `
+  position: relative;
+
+  p {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 18px;
+
+    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;
+    }
+  }
+`;

package/dist/cjs/lib/SpecialistProfile/SpecialistAbout/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var SpecialistAbout_1 = require("./SpecialistAbout");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SpecialistAbout_1).default; } });

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SpecialistLangs_style_1 = require("./SpecialistLangs.style");
+const react_1 = require("@ionic/react");
+const lib2_1 = require("../../../lib2");
+const SpecialistLangs = ({ className, showLoader, langs, country, countryCode, titleLangs, titleCountry, }) => {
+    if (showLoader) {
+        return ((0, jsx_runtime_1.jsxs)(SpecialistLangs_style_1.SpecialistLangsWrapper, Object.assign({ className: className }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(react_1.IonSkeletonText, { style: {
+                                margin: '0 0 16px 0',
+                                width: '204px',
+                                height: '21px',
+                                borderRadius: '6px',
+                            }, animated: true }), (0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: "langs-list" }, { children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(react_1.IonSkeletonText, { style: {
+                                            margin: '0',
+                                            width: '111px',
+                                            height: '16px',
+                                            borderRadius: '6px',
+                                        }, animated: true }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(react_1.IonSkeletonText, { style: {
+                                            margin: '0',
+                                            width: '111px',
+                                            height: '16px',
+                                            borderRadius: '6px',
+                                        }, animated: true }) })] }))] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(react_1.IonSkeletonText, { style: {
+                                margin: '0 0 16px 0',
+                                width: '196px',
+                                height: '21px',
+                                borderRadius: '6px',
+                            }, animated: true }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "specialist-country" }, { children: [(0, jsx_runtime_1.jsx)(react_1.IonSkeletonText, { style: {
+                                        margin: '0',
+                                        width: '52px',
+                                        height: '16px',
+                                        borderRadius: '6px',
+                                    }, animated: true }), (0, jsx_runtime_1.jsx)(react_1.IonSkeletonText, { style: {
+                                        margin: '0',
+                                        width: '24px',
+                                        height: '16px',
+                                        borderRadius: '6px',
+                                    }, animated: true })] }))] })] })));
+    }
+    return ((0, jsx_runtime_1.jsxs)(SpecialistLangs_style_1.SpecialistLangsWrapper, Object.assign({ className: className }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", Object.assign({ className: "section-header" }, { children: titleLangs })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "langs-list" }, { children: langs.map((l, i) => ((0, jsx_runtime_1.jsx)("li", { children: l }, i))) }))] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", Object.assign({ className: "section-header" }, { children: titleCountry })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "specialist-country" }, { children: [country, " ", (0, jsx_runtime_1.jsx)(lib2_1.Flag_v2, { name: countryCode })] }))] })] })));
+};
+exports.default = SpecialistLangs;

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

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpecialistLangsWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.SpecialistLangsWrapper = styled_components_1.default.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/cjs/lib/SpecialistProfile/SpecialistLangs/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var SpecialistLangs_1 = require("./SpecialistLangs");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SpecialistLangs_1).default; } });

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

@@ -0,0 +1,29 @@
+"use strict";
+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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const SpecialistMatch_style_1 = require("./SpecialistMatch.style");
+const Skeleton_1 = __importDefault(require("../../Skeleton"));
+const icons_1 = require("ionicons/icons");
+const react_2 = require("@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 ? ((0, jsx_runtime_1.jsxs)(SpecialistMatch_style_1.SpecialistMatchContainer, Object.assign({ onClick: learnMoreClick }, props, { children: [(0, jsx_runtime_1.jsxs)("h2", { children: [specialistFirstName, " ", translations.matchYou] }), !!percentMatch && percentMatch > 0 && ((0, jsx_runtime_1.jsxs)(SpecialistMatch_style_1.StyledProgressBarContainer, { children: [(0, jsx_runtime_1.jsx)(SpecialistMatch_style_1.StyledProgressBar, { value: percentMatch / 100 }), (0, jsx_runtime_1.jsxs)(SpecialistMatch_style_1.StyledProgressBarPercent, Object.assign({ percentMatch: percentMatch !== null && percentMatch !== void 0 ? percentMatch : 0 }, { children: [percentMatch, "%"] }))] })), (0, jsx_runtime_1.jsxs)("p", { children: [translations.howWeMatchThis, " ", (0, jsx_runtime_1.jsx)(react_2.IonIcon, { icon: icons_1.informationCircle })] })] }))) : ((0, jsx_runtime_1.jsxs)(SpecialistMatch_style_1.SpecialistMatchContainer, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { style: { width: '80%' }, heightPx: 24 }), (0, jsx_runtime_1.jsx)(SpecialistMatch_style_1.StyledProgressBarContainer, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { heightPx: 35 }) }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { style: { width: '40%' }, heightPx: 16 })] }));
+};
+exports.default = react_1.default.memo(SpecialistMatch);

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

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledProgressBar = exports.StyledProgressBarPercent = exports.StyledProgressBarContainer = exports.SpecialistMatchContainer = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = require("@ionic/react");
+exports.SpecialistMatchContainer = styled_components_1.default.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;
+    }
+  }
+`;
+exports.StyledProgressBarContainer = styled_components_1.default.div `
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  width: 100%;
+  height: 35px;
+  position: relative;
+`;
+exports.StyledProgressBarPercent = styled_components_1.default.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%);
+`;
+exports.StyledProgressBar = (0, styled_components_1.default)(react_1.IonProgressBar) `
+  width: 100%;
+  height: 35px;
+  border-radius: 5px;
+
+  &::part(progress) {
+    background: #26b183;
+    border-radius: 5px;
+  }
+
+  &::part(track) {
+    background-color: #e8ecf2;
+  }
+`;

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var SpecialistMatch_1 = require("./SpecialistMatch");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SpecialistMatch_1).default; } });

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

@@ -0,0 +1,32 @@
+"use strict";
+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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const SpecialistStatistic_style_1 = require("./SpecialistStatistic.style");
+const utils_1 = require("../../Consultations/utils");
+const Skeleton_1 = __importDefault(require("../../Skeleton"));
+const react_2 = require("@ionic/react");
+const icons_1 = require("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 ((0, jsx_runtime_1.jsxs)(SpecialistStatistic_style_1.SpecialistStatisticContainer, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsxs)(SpecialistStatistic_style_1.SpecialistStatisticRow, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { widthPx: 30, heightPx: 30 }), (0, jsx_runtime_1.jsxs)(SpecialistStatistic_style_1.StyledTextContainer, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { widthPx: 138, heightPx: 20 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { style: { width: '70%' }, heightPx: 32 })] })] }), (0, jsx_runtime_1.jsxs)(SpecialistStatistic_style_1.SpecialistStatisticRow, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { widthPx: 30, heightPx: 30 }), (0, jsx_runtime_1.jsxs)(SpecialistStatistic_style_1.StyledTextContainer, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { widthPx: 138, heightPx: 20 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { style: { width: '70%' }, heightPx: 32 })] })] })] })));
+    }
+    return isSuperSpecialist ||
+        (countConsultationFor3Days && countConsultationFor3Days > 0) ? ((0, jsx_runtime_1.jsxs)(SpecialistStatistic_style_1.SpecialistStatisticContainer, Object.assign({}, props, { children: [!!isSuperSpecialist && ((0, jsx_runtime_1.jsxs)(SpecialistStatistic_style_1.SpecialistStatisticRow, Object.assign({ onClick: learnMoreClick, className: 'clickable' }, { children: [(0, jsx_runtime_1.jsx)("img", { src: superSpecialistIcon }), (0, jsx_runtime_1.jsxs)(SpecialistStatistic_style_1.StyledTextContainer, { children: [(0, jsx_runtime_1.jsx)("h4", { children: translations.superSpecialist }), (0, jsx_runtime_1.jsxs)("p", { children: [specialistFirstName, " ", specialistLastName[0], ".", ' ', translations.superSpecialistInfo, (0, jsx_runtime_1.jsxs)("span", { children: [translations.knowMore, " ", (0, jsx_runtime_1.jsx)(react_2.IonIcon, { icon: icons_1.informationCircle })] })] })] })] }))), !!countConsultationFor3Days && countConsultationFor3Days > 0 && ((0, jsx_runtime_1.jsxs)(SpecialistStatistic_style_1.SpecialistStatisticRow, { children: [(0, jsx_runtime_1.jsx)("img", { src: trendingUpIcon }), (0, jsx_runtime_1.jsxs)(SpecialistStatistic_style_1.StyledTextContainer, { children: [(0, jsx_runtime_1.jsx)("h4", { children: translations.popularSpecialist }), (0, jsx_runtime_1.jsxs)("p", { children: [countConsultationFor3Days, ' ', (0, utils_1.decOfNum)(countConsultationFor3Days, translations.sessions), ' ', translations.bookedSession] })] })] }))] }))) : null;
+};
+exports.default = react_1.default.memo(SpecialistStatistic);