@mindly/ui-components 7.5.2 → 8.0.0-alpha.32

package/dist/cjs/lib/StarRating/StarRating.js

@@ -0,0 +1,28 @@
+"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_rating_1 = __importDefault(require("react-rating"));
+const utils_1 = require("../Consultations/utils");
+const StarRating_style_1 = require("./StarRating.style");
+const empty_start_icon_svg_1 = require(".//empty-start-icon.svg");
+const fill_star_icon_svg_1 = require(".//fill-star-icon.svg");
+const StarRating = (_a) => {
+    var _b;
+    var { averageStarsCount, countOfReviews, translations } = _a, props = __rest(_a, ["averageStarsCount", "countOfReviews", "translations"]);
+    return ((0, jsx_runtime_1.jsxs)(StarRating_style_1.RatingSection, { children: [(0, jsx_runtime_1.jsx)(react_rating_1.default, Object.assign({ fullSymbol: (0, jsx_runtime_1.jsx)(fill_star_icon_svg_1.ReactComponent, {}), emptySymbol: (0, jsx_runtime_1.jsx)(empty_start_icon_svg_1.ReactComponent, {}), fractions: 10, className: 'rating', readonly: true, initialRating: averageStarsCount }, props)), !!countOfReviews && ((0, jsx_runtime_1.jsxs)("p", { children: [countOfReviews, ' ', (0, utils_1.decOfNum)(countOfReviews, (_b = translations === null || translations === void 0 ? void 0 : translations.reviews) !== null && _b !== void 0 ? _b : [])] }))] }));
+};
+exports.default = StarRating;

package/dist/cjs/lib/StarRating/StarRating.style.d.ts

@@ -1 +1,2 @@
-export declare const RatingSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const RatingSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

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

package/dist/cjs/lib/StatisticsScroll/StatisticsScroll.js

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

package/dist/cjs/lib/StatisticsScroll/StatisticsScroll.style.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export declare const StyleSpecialistStatisticsContainer: import("styled-components").StyledComponent<import("react").FunctionComponent<import("react").RefAttributes<import("swiper/react").SwiperRef> & import("swiper/react").SwiperProps>, any, {}, never>;
+export declare const StyleSpecialistStatisticsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").RefAttributes<import("swiper/react").SwiperRef> & import("swiper/react").SwiperProps, never>> & string & Omit<import("react").FunctionComponent<import("react").RefAttributes<import("swiper/react").SwiperRef> & import("swiper/react").SwiperProps>, keyof import("react").Component<any, {}, any>>;
 type StyledContainerItemProps = {
     widthInPx?: number;
     leftGap?: number;
     rightGap?: number;
 };
-export declare const StyledContainerItem: import("styled-components").StyledComponent<import("react").FunctionComponent<import("swiper/react").SwiperSlideProps>, any, StyledContainerItemProps, never>;
+export declare const StyledContainerItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("swiper/react").SwiperSlideProps, StyledContainerItemProps>> & string & Omit<import("react").FunctionComponent<import("swiper/react").SwiperSlideProps>, keyof import("react").Component<any, {}, any>>;
 export {};

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

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledContainerItem = exports.StyleSpecialistStatisticsContainer = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = require("swiper/react");
+exports.StyleSpecialistStatisticsContainer = (0, styled_components_1.default)(react_1.Swiper) `
+  max-width: 100%;
+  width: 100%;
+  padding: 14px 16px !important;
+  border-top: 1px solid #eeeeee;
+  border-bottom: 1px solid #eeeeee;
+`;
+exports.StyledContainerItem = (0, styled_components_1.default)(react_1.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/cjs/lib/StatisticsScroll/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 StatisticsScroll_1 = require("./StatisticsScroll");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(StatisticsScroll_1).default; } });

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sessionCountDeclension = void 0;
+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 'сесії';
+};
+exports.sessionCountDeclension = sessionCountDeclension;

package/dist/cjs/lib/StatusTag/StatusTag.d.ts

@@ -0,0 +1,7 @@
+import React, { HTMLAttributes } from 'react';
+type StatusTagPropsType = {
+    dimension?: number;
+    tagColor?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const StatusTag: React.FC<StatusTagPropsType>;
+export default StatusTag;

package/dist/cjs/lib/StatusTag/StatusTag.js

@@ -0,0 +1,20 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const StatusTag_style_1 = require("./StatusTag.style");
+const StatusTag = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (0, jsx_runtime_1.jsx)(StatusTag_style_1.StatusTagContainer, Object.assign({ dimension: props.dimension, tagColor: props.tagColor }, props, { children: children }));
+};
+exports.default = StatusTag;

package/dist/cjs/lib/StatusTag/StatusTag.style.d.ts

@@ -0,0 +1,6 @@
+type StatusTagContainerPropsType = {
+    dimension?: number;
+    tagColor?: string;
+};
+export declare const StatusTagContainer: import("styled-components").StyledComponent<"div", any, StatusTagContainerPropsType, never>;
+export {};

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

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

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

package/dist/cjs/lib/StatusTag/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 StatusTag_1 = require("./StatusTag");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(StatusTag_1).default; } });

package/dist/cjs/lib/SuccessScreen/SuccessScreen.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SuccessScreen_style_1 = require("./SuccessScreen.style");
+const checkmark_done_svg_1 = require("./checkmark-done.svg");
+const SuccessScreen = ({ title, subTitle, btnTitle = 'Готово', onClick, }) => {
+    return ((0, jsx_runtime_1.jsx)(SuccessScreen_style_1.SuccessWrapper, { children: (0, jsx_runtime_1.jsxs)(SuccessScreen_style_1.SuccessContainer, { children: [(0, jsx_runtime_1.jsx)(checkmark_done_svg_1.ReactComponent, {}), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "success-title" }, { children: title })), subTitle && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "success-desc" }, { children: subTitle })), (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "success-btn", onClick: onClick }, { children: btnTitle }))] }) }));
+};
+exports.default = SuccessScreen;

package/dist/cjs/lib/SuccessScreen/SuccessScreen.style.d.ts

@@ -1,2 +1,3 @@
-export declare const SuccessWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SuccessContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const SuccessWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SuccessContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/cjs/lib/SuccessScreen/SuccessScreen.style.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuccessContainer = exports.SuccessWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = require("@ionic/react");
+const mindly_constants_1 = require("../Theme/mindly_constants");
+exports.SuccessWrapper = styled_components_1.default.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #26b183;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+`;
+exports.SuccessContainer = styled_components_1.default.div `
+  width: ${!(0, react_1.isPlatform)('desktop') ? '100%' : mindly_constants_1.maxContainerWidth};
+  display: flex;
+  flex-direction: column;
+  row-gap: 24px;
+
+  & .success-title {
+    font-weight: 600;
+    font-size: 20px;
+    color: #ffffff;
+    margin-top: -8px;
+  }
+
+  & .success-btn {
+    outline: none;
+    background: transparent;
+    border: 1px solid #ffffff;
+    border-radius: 10px;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 16px;
+    color: #ffffff;
+    padding: 15px;
+    width: 200px;
+  }
+
+  & .success-desc {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    color: #ffffff;
+    margin-top: -12px;
+  }
+`;

package/dist/cjs/lib/SuccessScreen/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 SuccessScreen_1 = require("./SuccessScreen");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SuccessScreen_1).default; } });

package/dist/cjs/lib/SwitchDeviceCard/ListItem/ListItem.js

@@ -0,0 +1,21 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("ionicons/icons");
+const ListItem_styled_1 = require("./ListItem.styled");
+const ListItem = (_a) => {
+    var { isActive, icon, label } = _a, props = __rest(_a, ["isActive", "icon", "label"]);
+    return ((0, jsx_runtime_1.jsxs)(ListItem_styled_1.StyledListItem, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(ListItem_styled_1.StyledListItemDeviceIcon, { icon: icon }), (0, jsx_runtime_1.jsx)("h2", { children: label !== null && label !== void 0 ? label : '' }), isActive && ((0, jsx_runtime_1.jsx)(ListItem_styled_1.StyledListItemDeviceIcon, { className: 'end', icon: icons_1.checkmark }))] })));
+};
+exports.default = ListItem;

package/dist/cjs/lib/SwitchDeviceCard/ListItem/ListItem.styled.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 export declare const StyledListItemDeviceIcon: any;
-export declare const StyledListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const StyledListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

package/dist/cjs/lib/SwitchDeviceCard/ListItem/ListItem.styled.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledListItem = exports.StyledListItemDeviceIcon = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = require("@ionic/react");
+exports.StyledListItemDeviceIcon = (0, styled_components_1.default)(react_1.IonIcon) `
+  min-width: 20px !important;
+  min-height: 20px !important;
+
+  &.end {
+    justify-self: end;
+  }
+`;
+exports.StyledListItem = styled_components_1.default.li `
+  padding: 20px 24px;
+
+  width: 100%;
+  height: 52px;
+
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+
+  display: flex;
+  gap: 12px;
+
+  align-items: center;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    cursor: pointer;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  h2 {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+
+    overflow: hidden;
+    color: white;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &.active {
+    & ion-icon {
+      color: #177590;
+    }
+
+    h2 {
+      color: #177590;
+    }
+  }
+
+  &.danger {
+    & ion-icon {
+      color: #ff0000;
+    }
+
+    h2 {
+      color: #ff0000;
+    }
+  }
+`;

package/dist/cjs/lib/SwitchDeviceCard/SwitchDeviceCard.js

@@ -0,0 +1,46 @@
+"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 icons_1 = require("ionicons/icons");
+const ListItem_1 = __importDefault(require("./ListItem/ListItem"));
+const SwitchDeviceCard_styled_1 = require("./SwitchDeviceCard.styled");
+const SwitchDeviceCard = (_a) => {
+    var { translations } = _a, props = __rest(_a, ["translations"]);
+    const availableDeviceList = (0, react_1.useMemo)(() => {
+        var _a;
+        const tempList = (_a = props.deviceList) === null || _a === void 0 ? void 0 : _a.map((el, index) => {
+            if (el.kind.includes('audiooutput'))
+                return null;
+            const isActive = !!props.activeDeviceID && el.deviceId === props.activeDeviceID;
+            const ionicIcon = el.kind.includes('audioinput')
+                ? icons_1.micOutline
+                : el.kind.includes('videoinput')
+                    ? icons_1.videocamOutline
+                    : undefined;
+            const fallbackText = `${props.deviceType === 'audio' ? translations.micro : translations.camera} ${index + 1}`;
+            return ((0, jsx_runtime_1.jsx)(ListItem_1.default, { className: isActive ? 'active ' : '', onClick: () => props.onClickDeviceHandler &&
+                    props.onClickDeviceHandler(el.deviceId), label: el.label.length ? el.label : fallbackText, icon: ionicIcon, isActive: isActive }, `${el.deviceId}_${index}`));
+        });
+        if (props.disableDeviceHandler && tempList) {
+            tempList.push((0, jsx_runtime_1.jsx)(ListItem_1.default, { className: `${props.isDisabled ? 'active' : ''} danger`, onClick: props.disableDeviceHandler, label: translations.offText, icon: props.deviceType === 'video' ? icons_1.videocamOffOutline : icons_1.micOffOutline, isActive: props.isDisabled }, 'disable_device'));
+        }
+        return tempList;
+    }, [props.activeDeviceID, props.onClickDeviceHandler]);
+    return ((0, jsx_runtime_1.jsxs)(SwitchDeviceCard_styled_1.StyledVideoCallSwitchDeviceContainer, { children: [props.heading && ((0, jsx_runtime_1.jsx)(SwitchDeviceCard_styled_1.StyledVideoCallSwitchDeviceHeading, { children: (0, jsx_runtime_1.jsx)("h2", { children: props.heading }) })), (0, jsx_runtime_1.jsx)(SwitchDeviceCard_styled_1.StyledVideoCallSwitchDeviceList, { children: availableDeviceList })] }));
+};
+exports.default = SwitchDeviceCard;

package/dist/cjs/lib/SwitchDeviceCard/SwitchDeviceCard.styled.d.ts

@@ -1,3 +1,4 @@
-export declare const StyledVideoCallSwitchDeviceContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledVideoCallSwitchDeviceHeading: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledVideoCallSwitchDeviceList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+/// <reference types="react" />
+export declare const StyledVideoCallSwitchDeviceContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledVideoCallSwitchDeviceHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledVideoCallSwitchDeviceList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;

package/dist/cjs/lib/SwitchDeviceCard/SwitchDeviceCard.styled.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledVideoCallSwitchDeviceList = exports.StyledVideoCallSwitchDeviceHeading = exports.StyledVideoCallSwitchDeviceContainer = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.StyledVideoCallSwitchDeviceContainer = styled_components_1.default.div `
+  background-color: #1d201f;
+  color: white;
+  width: auto;
+  height: auto;
+`;
+exports.StyledVideoCallSwitchDeviceHeading = styled_components_1.default.div `
+  height: 59px;
+
+  background-color: #2d3130;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  h2 {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+
+    color: white;
+  }
+`;
+exports.StyledVideoCallSwitchDeviceList = styled_components_1.default.ul `
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;

package/dist/cjs/lib/SwitchDeviceCard/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 SwitchDeviceCard_1 = require("./SwitchDeviceCard");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SwitchDeviceCard_1).default; } });

package/dist/cjs/lib/Tag/Tag.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const Tag: React.FC;
+declare const Tag: React.FC<React.PropsWithChildren>;
 export default Tag;

package/dist/cjs/lib/Tag/Tag.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Tag_style_1 = require("./Tag.style");
+const Tag = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)(Tag_style_1.TagContainer, { children: children });
+};
+exports.default = Tag;

package/dist/cjs/lib/Tag/Tag.style.d.ts

@@ -1 +1,2 @@
-export declare const TagContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const TagContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;