@mindly/ui-components 7.5.1 → 8.0.0-alpha.31

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

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagContainer = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.TagContainer = styled_components_1.default.div `
+  max-width: 100%;
+  height: 30px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background: #f2f4f7;
+  border-radius: 30px;
+
+  padding: 8px 10px;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  h7,
+  p,
+  a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;

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

package/dist/cjs/lib/Theme/mindly_constants.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.maxContainerWidth = exports.colorConstants = void 0;
+exports.colorConstants = {
+    primaryColor: '#177590',
+    secondaryColor: '#F0FBFF',
+    primaryTextColor: '#1D201F',
+    secondaryTextColor: '#5B5B5B',
+    AccentStrokeColor: '#EDEFF2',
+    AccentDisabledColor: '#C1C1C1',
+    AccentCrossColor: '#A31621',
+    AccentTickColor: '#478862',
+    AccentInputBgColor: '#F5F9FF',
+    AccentTabsBgColor: '#D6F2F9',
+    AccentCross: '#C13E18',
+    White: '#FFFFFF',
+    AccentAchieveBgNew: '#E7E7E7',
+    StrokeGray: '#F2F4F7',
+    AccentSurveyButton: '#E9F7FB',
+    AccentCancelActive: '#F5939A',
+    AccentActiveButtonBG: '#90D5E8',
+    AccentDivider: '#E5E5E5',
+    AccentGrayBlue: '#E8ECF2',
+};
+exports.maxContainerWidth = '410px';

package/dist/cjs/lib/Toast/Toast.js

@@ -0,0 +1,15 @@
+"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 Toast_style_1 = require("./Toast.style");
+const CustomButton_1 = __importDefault(require("../CustomButton"));
+const Toast = ({ position = 'bottom', positionOffset = 0, buttons, text, heading, }) => {
+    return ((0, jsx_runtime_1.jsxs)(Toast_style_1.ToastContainer, Object.assign({ position: position, positionOffset: positionOffset }, { children: [heading && (0, jsx_runtime_1.jsx)(Toast_style_1.ToastHeading, { children: heading }), (0, jsx_runtime_1.jsx)(Toast_style_1.ToastText, { children: text }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) && ((0, jsx_runtime_1.jsx)(Toast_style_1.ButtonsContainer, { children: buttons
+                    .filter((el) => !el.hide)
+                    .map((button, index) => ((0, jsx_runtime_1.jsx)(CustomButton_1.default, Object.assign({ buttonType: button.type === 'outlined' ? 'border-white' : 'white', onClick: button.handler, style: { fontSize: '12px', lineHeight: '14px' } }, { children: button.text }), index))) }))] })));
+};
+Toast.displayName = 'Toast';
+exports.default = Toast;

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

@@ -1,9 +1,10 @@
+/// <reference types="react" />
 type ToastContainerProps = {
     position?: 'top' | 'bottom';
     positionOffset?: number;
 };
-export declare const ToastContainer: import("styled-components").StyledComponent<"div", any, ToastContainerProps, never>;
-export declare const ToastHeading: import("styled-components").StyledComponent<"h1", any, {}, never>;
-export declare const ToastText: import("styled-components").StyledComponent<"h3", any, {}, never>;
-export declare const ButtonsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ToastContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ToastContainerProps>> & string;
+export declare const ToastHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const ToastText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const ButtonsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

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

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonsContainer = exports.ToastText = exports.ToastHeading = exports.ToastContainer = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.ToastContainer = styled_components_1.default.div `
+  position: absolute;
+
+  left: 50%;
+  transform: translate(-50%);
+
+  ${({ position = 'top', positionOffset }) => position === 'top'
+    ? `top: ${positionOffset
+        ? `calc(${positionOffset}px + var(--ion-safe-area-top))`
+        : '16px'};`
+    : ''}
+  ${({ position, positionOffset }) => position === 'bottom'
+    ? `bottom: ${positionOffset
+        ? `calc(${positionOffset}px + var(--ion-safe-area-bottom))`
+        : '16px'};`
+    : ''}
+
+  width: calc(100% - 32px);
+  max-width: 410px;
+  height: auto;
+  margin: auto;
+
+  background: #1d201f;
+  border-radius: 10px;
+
+  padding: 16px;
+
+  color: #ffffff;
+
+  animation-name: jump;
+  animation-duration: 500ms;
+  animation-fill-mode: forwards;
+
+  @keyframes jump {
+    0% {
+      ${({ position = 'top' }) => (position === 'top' ? `top: -30%;` : '')}
+      ${({ position }) => (position === 'bottom' ? `bottom: -30%;` : '')}
+    }
+    100% {
+      ${({ position = 'top', positionOffset }) => position === 'top'
+    ? `top: ${positionOffset
+        ? `calc(${positionOffset}px + var(--ion-safe-area-top))`
+        : '16px'};`
+    : ''}
+      ${({ position, positionOffset }) => position === 'bottom'
+    ? `bottom: ${positionOffset
+        ? `calc(${positionOffset}px + var(--ion-safe-area-bottom))`
+        : '16px'};`
+    : ''}
+    }
+  }
+`;
+exports.ToastHeading = styled_components_1.default.h1 `
+  margin-top: 0;
+  margin-bottom: 5px;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 24px;
+  /* identical to box height, or 133% */
+
+  /* accent/white */
+
+  color: #ffffff;
+`;
+exports.ToastText = styled_components_1.default.h3 `
+  margin: 0;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+
+  color: #ffffff;
+`;
+exports.ButtonsContainer = styled_components_1.default.div `
+  display: flex;
+  margin-top: 16px;
+  justify-content: space-between;
+  gap: 11px;
+`;

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

package/dist/cjs/lib/TooltipComponent/TooltipComponent.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@ionic/react");
+const icons_1 = require("ionicons/icons");
+const TooltipComponent_style_1 = require("./TooltipComponent.style");
+const TooltipComponent = ({ text, alignment, widthPx, makeVisible, dimension, icon = icons_1.helpOutline, className = '', }) => {
+    return ((0, jsx_runtime_1.jsxs)(TooltipComponent_style_1.TooltipWrapper, Object.assign({ className: `tooltip ${className}`, makeVisible: makeVisible, dimension: dimension }, { children: [(0, jsx_runtime_1.jsx)(react_1.IonIcon, { icon: icon }), (0, jsx_runtime_1.jsx)(TooltipComponent_style_1.TooltipContent, Object.assign({ className: "tooltiptext", alignment: alignment !== null && alignment !== void 0 ? alignment : 'center', widthPx: widthPx }, { children: text }))] })));
+};
+exports.TooltipComponent = TooltipComponent;

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

@@ -1,11 +1,12 @@
+/// <reference types="react" />
 type TooltipWrapperProps = {
     makeVisible?: boolean;
     dimension?: number;
 };
-export declare const TooltipWrapper: import("styled-components").StyledComponent<"div", any, TooltipWrapperProps, never>;
+export declare const TooltipWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TooltipWrapperProps>> & string;
 type TooltipContentType = {
     alignment: 'center' | 'center-left' | 'left' | 'center-right' | 'right';
     widthPx?: number;
 };
-export declare const TooltipContent: import("styled-components").StyledComponent<"div", any, TooltipContentType, never>;
+export declare const TooltipContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TooltipContentType>> & string;
 export {};

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

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipContent = exports.TooltipWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.TooltipWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #177590;
+  color: white;
+  border-radius: 50%;
+  font-size: ${(props) => props.dimension ? `calc(${props.dimension}px - 8px)` : '20px'};
+
+  position: relative;
+
+  width: ${(props) => (props.dimension ? `${props.dimension}px` : '28px')};
+  height: ${(props) => (props.dimension ? `${props.dimension}px` : '28px')};
+
+  .tooltiptext {
+    visibility: ${(props) => (props.makeVisible ? 'visible' : 'hidden')};
+  }
+
+  &:hover .tooltiptext {
+    visibility: visible;
+  }
+`;
+exports.TooltipContent = styled_components_1.default.div `
+  z-index: 21999;
+  visibility: hidden;
+  width: ${(props) => ((props === null || props === void 0 ? void 0 : props.widthPx) ? `${props.widthPx}px` : '220px')};
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  background-color: #5b5b5b;
+  color: #ffffff;
+  text-align: center;
+  border-radius: 4px;
+  padding: 10px;
+  position: absolute;
+  bottom: 115%;
+  left: 50%;
+  transform: ${({ alignment }) => alignment === 'right'
+    ? 'translateX(-91.7%)'
+    : alignment === 'center-right'
+        ? 'translateX(-62.3%)'
+        : alignment === 'center-left'
+            ? 'translateX(-30.2%)'
+            : alignment === 'left'
+                ? 'translateX(-7.3%)'
+                : 'translateX(-50%)'};
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    right: ${({ alignment }) => alignment === 'right'
+    ? '7.2%'
+    : alignment === 'center-right'
+        ? '36.2%'
+        : ''};
+    left: ${({ alignment }) => alignment === 'left'
+    ? '7.2%'
+    : alignment === 'center-left'
+        ? '36.2%'
+        : alignment === 'center'
+            ? '50%'
+            : ''};
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #5b5b5b transparent transparent transparent;
+  }
+`;

package/dist/cjs/lib/TooltipComponent/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var TooltipComponent_1 = require("./TooltipComponent");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return TooltipComponent_1.TooltipComponent; } });

package/dist/cjs/lib/UpdatesCard/UpdatesCard.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("ionicons/icons");
+const Button_1 = require("../../deprecated/button/Button");
+const UpdatesCard_styled_1 = require("./UpdatesCard.styled");
+const react_1 = require("@ionic/react");
+const UpdatesCard = ({ buttonHandler, closeHandler, buttonType, buttonText, disabledButton, text, }) => {
+    return ((0, jsx_runtime_1.jsxs)(UpdatesCard_styled_1.StyledUpdatePopupContent, { children: [(0, jsx_runtime_1.jsx)(react_1.IonIcon, { className: 'update-popup', icon: icons_1.checkmarkCircleOutline }), (0, jsx_runtime_1.jsxs)(UpdatesCard_styled_1.StyledUpdatePopupTextContainer, { children: [(0, jsx_runtime_1.jsx)("h4", { children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u0430 \u043D\u043E\u0432\u0430 \u0432\u0435\u0440\u0441\u0456\u044F" }), (0, jsx_runtime_1.jsx)("p", { children: text })] }), (buttonHandler || (buttonText === null || buttonText === void 0 ? void 0 : buttonText.length)) && ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ onClick: buttonHandler, buttonType: buttonType !== null && buttonType !== void 0 ? buttonType : 'primary', isDisabled: disabledButton !== null && disabledButton !== void 0 ? disabledButton : false }, { children: buttonText || 'Оновити' }))), closeHandler && ((0, jsx_runtime_1.jsx)(react_1.IonIcon, { className: 'close-icon', icon: icons_1.closeOutline, onClick: closeHandler }))] }));
+};
+exports.default = UpdatesCard;

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

@@ -1,2 +1,3 @@
-export declare const StyledUpdatePopupContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledUpdatePopupTextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const StyledUpdatePopupContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledUpdatePopupTextContainer: 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/UpdatesCard/UpdatesCard.styled.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledUpdatePopupTextContainer = exports.StyledUpdatePopupContent = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.StyledUpdatePopupContent = styled_components_1.default.div `
+  padding: 24px 16px 16px 16px;
+
+  --width: 343px;
+  --height: auto;
+
+  display: grid;
+  grid-template-columns: 18px 1fr;
+  grid-gap: 13px;
+
+  align-items: center;
+  justify-items: center;
+
+  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+
+  button {
+    grid-column-start: 1;
+    grid-column-end: 3;
+  }
+
+  .update-popup {
+    width: 18px;
+    height: 18px;
+
+    color: #478862;
+    align-self: start;
+
+    padding-top: 3px;
+  }
+
+  .close-icon {
+    width: 10.5px;
+    height: 10.5px;
+
+    padding: 13.5px;
+
+    position: absolute;
+
+    right: 0;
+    top: 0;
+
+    cursor: pointer;
+
+    color: black;
+  }
+`;
+exports.StyledUpdatePopupTextContainer = styled_components_1.default.div `
+  h4 {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    color: #478862;
+  }
+
+  p {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+
+    color: #5b5b5b;
+  }
+`;

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

package/dist/cjs/lib/UsersPsychologistScrollList/UserPsychologistScrollList.styled.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledScrollListSectionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSectionTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledScrollListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledScrollListPsychologist: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledScrollListPsychologistAvatar: import("styled-components").StyledComponent<"section", any, {}, never>;
+export declare const StyledScrollListPsychologistName: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/lib/UsersPsychologistScrollList/UserPsychologistScrollList.styled.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledScrollListPsychologistName = exports.StyledScrollListPsychologistAvatar = exports.StyledScrollListPsychologist = exports.StyledScrollListWrapper = exports.StyledSectionTitle = exports.StyledScrollListSectionWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.StyledScrollListSectionWrapper = styled_components_1.default.div `
+  @media (min-width: 1024px) {
+    grid-column: 1 / 3;
+  }
+
+  @media (max-width: 1024px) and (min-width: 600px) {
+    max-width: 452px;
+  }
+`;
+exports.StyledSectionTitle = styled_components_1.default.div `
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 32px;
+`;
+exports.StyledScrollListWrapper = styled_components_1.default.div `
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+exports.StyledScrollListPsychologist = styled_components_1.default.div `
+  min-width: max-content;
+  margin-right: 12px;
+  cursor: pointer;
+`;
+exports.StyledScrollListPsychologistAvatar = styled_components_1.default.section `
+  border: 1px solid #f2f4f7;
+  border-radius: 999px;
+  height: 72px;
+  width: 72px;
+  padding: 5px;
+  overflow: hidden !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .img {
+    border-radius: 99px;
+    max-width: max-content;
+    min-width: 62px;
+    width: 62px;
+    height: 62px;
+    user-select: none;
+  }
+`;
+exports.StyledScrollListPsychologistName = styled_components_1.default.div `
+  color: #1d201f;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+  text-align: center;
+`;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PsychologistType } from '../userAppTypes';
+export type UsersPsychologistScrollListPropsType = {
+    psychologistClickHandler: React.Dispatch<React.SetStateAction<{
+        isShow: boolean;
+        psychologist_id: string;
+    }>>;
+    usersPsychologists: Array<PsychologistType> | null;
+};
+export declare const UsersPsychologistScrollList: ({ psychologistClickHandler, usersPsychologists, }: UsersPsychologistScrollListPropsType) => JSX.Element | null;

package/dist/cjs/lib/UsersPsychologistScrollList/UsersPsychologistScrollList.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UsersPsychologistScrollList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@ionic/react");
+const UserPsychologistScrollList_styled_1 = require("./UserPsychologistScrollList.styled");
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+const UsersPsychologistScrollList = ({ psychologistClickHandler, usersPsychologists, }) => {
+    const [imageLoaded, setImageLoaded] = (0, react_1.useState)(false);
+    if (usersPsychologists && usersPsychologists.length) {
+        return ((0, jsx_runtime_1.jsx)(UserPsychologistScrollList_styled_1.StyledScrollListSectionWrapper, { children: (0, jsx_runtime_1.jsx)(UserPsychologistScrollList_styled_1.StyledScrollListWrapper, { children: usersPsychologists.map((psychologist) => ((0, jsx_runtime_1.jsxs)(UserPsychologistScrollList_styled_1.StyledScrollListPsychologist, Object.assign({ onClick: () => psychologistClickHandler({
+                        isShow: true,
+                        psychologist_id: psychologist.id,
+                    }) }, { children: [(0, jsx_runtime_1.jsxs)(UserPsychologistScrollList_styled_1.StyledScrollListPsychologistAvatar, { children: [(0, jsx_runtime_1.jsx)("img", { className: "img", src: psychologist.avatar, alt: psychologist.first_name, onLoad: () => setImageLoaded(true), style: { display: imageLoaded ? 'block' : 'none' } }), (0, jsx_runtime_1.jsx)(react_2.IonSkeletonText, { animated: true, className: "img", style: { display: imageLoaded ? 'none' : 'block' } })] }), (0, jsx_runtime_1.jsx)(UserPsychologistScrollList_styled_1.StyledScrollListPsychologistName, { children: psychologist.first_name })] }), `${psychologist.id}-scroll`))) }) }));
+    }
+    return null;
+};
+exports.UsersPsychologistScrollList = UsersPsychologistScrollList;

package/dist/cjs/lib/VideoBadge/VideoBadge.js

@@ -0,0 +1,25 @@
+"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 react_1 = require("@ionic/react");
+const icons_1 = require("ionicons/icons");
+const VideoBadge_style_1 = require("./VideoBadge.style");
+const luxon_1 = require("luxon");
+const VideoBadge = (_a) => {
+    var props = __rest(_a, []);
+    return ((0, jsx_runtime_1.jsxs)(VideoBadge_style_1.StyleVideoBadge, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(react_1.IonIcon, { icon: icons_1.play }), (0, jsx_runtime_1.jsx)("p", { children: luxon_1.Duration.fromObject({
+                    seconds: props.videoDurationSeconds,
+                }).toFormat('mm:ss') })] })));
+};
+exports.default = VideoBadge;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type StyleVideoBadgeProps = {
     widthPx?: number;
     heightPx?: number;
@@ -7,5 +8,5 @@ type StyleVideoBadgeProps = {
     positionBottom?: number;
     fontSizePx?: number;
 };
-export declare const StyleVideoBadge: import("styled-components").StyledComponent<"div", any, StyleVideoBadgeProps, never>;
+export declare const StyleVideoBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleVideoBadgeProps>> & string;
 export {};

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

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleVideoBadge = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.StyleVideoBadge = styled_components_1.default.div `
+  position: absolute;
+
+  bottom: ${(props) => (props === null || props === void 0 ? void 0 : props.positionBottom) ? `${props.positionBottom}px` : 'auto'};
+  right: ${(props) => (props === null || props === void 0 ? void 0 : props.positionRight) ? `${props.positionRight}px` : 'auto'};
+  top: ${(props) => ((props === null || props === void 0 ? void 0 : props.positionTop) ? `${props.positionTop}px` : 'auto')};
+  left: ${(props) => (props === null || props === void 0 ? void 0 : props.positionLeft) ? `${props.positionLeft}px` : 'auto'};
+
+  color: white;
+
+  p {
+    font-style: normal;
+    font-weight: 400;
+    font-size: ${(props) => (props === null || props === void 0 ? void 0 : props.fontSizePx) ? `${props.fontSizePx}px` : '10px'};
+    line-height: 14px;
+  }
+
+  ion-icon {
+    font-size: 14px !important;
+  }
+
+  width: ${(props) => ((props === null || props === void 0 ? void 0 : props.widthPx) ? `${props.widthPx}px` : '51px')};
+  height: ${(props) => ((props === null || props === void 0 ? void 0 : props.heightPx) ? `${props.heightPx}px` : '19px')};
+
+  background: #1d201f;
+  border-radius: 5px;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 1;
+  padding: 2px 5px;
+  gap: 5px;
+`;

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