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

package/dist/esm/lib/Inputs/PasswordInput/PasswordInput.style.js

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+export const StyledPasswordContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+
+  height: 47px;
+
+  background: ${(props) => (props.isError ? '#FEEFF1' : '#ffffff')};
+  border: ${(props) => props.isError ? '1px solid #C13E18;' : '1px solid #e5e5e5'};
+  border-radius: 4px;
+
+  .show-password-icon {
+    cursor: pointer;
+    color: #5b5b5b;
+    font-size: 20px;
+    padding-right: 12px;
+  }
+`;
+export const StyledPasswordInput = styled.input `
+  width: 100%;
+  height: 100%;
+  padding: 10px 12px;
+  border: none;
+  caret-color: #177590;
+  background: ${(props) => (props.isError ? '#FEEFF1' : '#ffffff')};
+
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  color: #1d201f;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: #c1c1c1;
+  }
+`;
+export const ErrorMessage = styled.p `
+  margin-top: 6px;
+
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 14px;
+
+  color: #c13e18;
+`;

package/dist/esm/lib/Inputs/PasswordInput/index.js

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

package/dist/esm/lib/Inputs/TextInput/TextInput.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+declare const _default: React.NamedExoticComponent<{
     isError?: boolean | undefined;
     errorStyle?: "filled" | "unfilled" | undefined;
     type?: "number" | "text" | "email" | undefined;
-} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>>;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/dist/esm/lib/Inputs/TextInput/TextInput.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { StyledTextInput } from './TextInput.style';
+const TextInput = React.forwardRef((_a, ref) => {
+    var { isError, type = 'text' } = _a, props = __rest(_a, ["isError", "type"]);
+    return (_jsx(StyledTextInput, Object.assign({ className: `${isError ? 'error' : ''}` }, props, { type: type, ref: ref })));
+});
+TextInput.displayName = 'TextInput';
+export default React.memo(TextInput);

package/dist/esm/lib/Inputs/TextInput/TextInput.style.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 type StyledTextInputProps = {
     errorStyle?: 'filled' | 'unfilled';
 };
-export declare const StyledTextInput: import("styled-components").StyledComponent<"input", any, StyledTextInputProps, never>;
+export declare const StyledTextInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledTextInputProps>> & string;
 export {};

package/dist/esm/lib/Inputs/TextInput/TextInput.style.js

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+export const StyledTextInput = styled.input `
+  width: 100%;
+  height: 47px;
+  padding: 10px 12px;
+
+  background: #ffffff;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+
+  caret-color: #177590;
+
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  color: #1d201f;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+
+    color: #c1c1c1;
+  }
+
+  &.error {
+    border: 1px solid #F24E1E;
+    ${(props) => (props.errorStyle === 'filled' ? 'background: #feeff1;' : '')}
+  }
+
+  &[type=number]::-webkit-outer-spin-button,
+  &[type=number]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &[type=number] {
+    -moz-appearance: textfield;
+  }
+`;

package/dist/esm/lib/Inputs/TextInput/index.js

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

package/dist/esm/lib/Modal/Modal.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface ModalProps {
+    fullwidth?: boolean;
+    isOpen: boolean;
+    onDidDismiss: () => void;
+}
+declare const Modal: FC<ModalProps>;
+export default Modal;

package/dist/esm/lib/Modal/Modal.js

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

package/dist/esm/lib/Modal/Modal.style.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type ModalStyledProps = {
+    isFullWidth: boolean;
+};
+export declare const ModalStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@ionic/core/dist/types/components").JSX.IonModal & Pick<import("react").HTMLAttributes<HTMLIonModalElement>, "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("@ionic/react/dist/types/components/IonicReactProps").IonicReactProps & import("react").RefAttributes<HTMLIonModalElement>>, any, ModalStyledProps, never>;
+export {};

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

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { maxContainerWidth } from '../Theme/mindly_constants';
+import { IonModal } from '@ionic/react';
+export const ModalStyled = styled(IonModal) `
+  --max-width: ${({ isFullWidth }) => isFullWidth ? maxContainerWidth : '100%'};
+`;

package/dist/esm/lib/Modal/index.d.ts

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

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

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

package/dist/esm/lib/ModalCalendar/ModalCalendar.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import 'react-day-picker/dist/style.css';
+export type ModalCalendarProps = {
+    onDaySelected: (day: Date) => void;
+    consultationDays: Date[];
+    smileDays?: Date[];
+    noteDays?: Date[];
+    selectedDate?: Date;
+};
+export declare const ModalCalendar: React.FC<ModalCalendarProps>;

package/dist/esm/lib/ModalCalendar/ModalCalendar.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { ModalCalendarStyled, CustomDayWrapper, CustomDayStyled, DotStyled, NoteStyled, } from './ModalCalendar.styled';
+import { DayContent, DayPicker } from 'react-day-picker';
+import uk from 'date-fns/locale/uk';
+import 'react-day-picker/dist/style.css';
+export const ModalCalendar = (props) => {
+    var _a;
+    const [month, setMonth] = useState((_a = props.selectedDate) !== null && _a !== void 0 ? _a : new Date());
+    const modifiers = useMemo(() => {
+        var _a, _b, _c;
+        return {
+            hasConsultation: props.consultationDays,
+            selected: (_a = props.selectedDate) !== null && _a !== void 0 ? _a : new Date(),
+            hasSmile: (_b = props.smileDays) !== null && _b !== void 0 ? _b : [],
+            hasNote: (_c = props.noteDays) !== null && _c !== void 0 ? _c : [],
+        };
+    }, [props.consultationDays]);
+    return (_jsx(ModalCalendarStyled, { children: _jsx(DayPicker, { mode: "single", month: month, onMonthChange: setMonth, modifiers: modifiers, components: { DayContent: CustomDate }, locale: uk, onSelect: (day) => {
+                if (day) {
+                    const currentDate = new Date();
+                    day.setHours(currentDate.getHours());
+                    day.setMinutes(currentDate.getMinutes());
+                    day.setSeconds(currentDate.getSeconds());
+                    props.onDaySelected(day);
+                }
+            } }) }));
+};
+const CustomDate = (props) => {
+    return (_jsxs(CustomDayWrapper, Object.assign({ isActive: props.activeModifiers.selected }, { children: [props.activeModifiers.today && (_jsx("span", Object.assign({ className: "today-active" }, { children: "\u0437\u0430\u0440\u0430\u0437" }))), props.activeModifiers.hasSmile && !props.activeModifiers.hasNote && (_jsx(DotStyled, {})), props.activeModifiers.hasNote && _jsx(NoteStyled, {}), _jsx(CustomDayStyled, Object.assign({ isActive: props.activeModifiers.hasConsultation }, { children: _jsx(DayContent, Object.assign({}, props)) }))] })));
+};

package/dist/esm/lib/ModalCalendar/ModalCalendar.styled.d.ts

@@ -0,0 +1,12 @@
+export declare const ModalCalendarStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+type CustomDayWrapperProps = {
+    isActive?: boolean;
+};
+export declare const CustomDayWrapper: import("styled-components").StyledComponent<"div", any, CustomDayWrapperProps, never>;
+type CustomDayProps = {
+    isActive?: boolean;
+};
+export declare const CustomDayStyled: import("styled-components").StyledComponent<"div", any, CustomDayProps, never>;
+export declare const DotStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NoteStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

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

@@ -0,0 +1,110 @@
+import styled from 'styled-components';
+export const ModalCalendarStyled = styled.div `
+  --rdp-background-color: #fff;
+  --rdp-accent-color: none;
+  --rdp-outline: none;
+  --rdp-outline-selected: none;
+  --rdp-cell-size: 48px;
+  font-family: 'Inter', sans-serif;
+
+  & .rdp {
+    margin: 0;
+  }
+
+  & .rdp-month {
+    width: 100%;
+  }
+
+  & .rdp-table {
+    /* max-width: 100%;
+    width: 100%; */
+    td {
+      /* width: 44px; */
+      height: 70px;
+      text-align: center;
+      vertical-align: top;
+    }
+
+    th {
+      height: 20px;
+      text-align: center;
+      vertical-align: top;
+    }
+  }
+
+  & .rdp-caption {
+    margin-bottom: 24px;
+  }
+
+  & .rdp-head_cell span {
+    font-weight: 700;
+    font-size: 10px;
+    line-height: 14px;
+    color: #1d201f;
+  }
+
+  & button.rdp-day {
+    width: 44px;
+    height: 100%;
+    border: none;
+    border-radius: 0;
+  }
+
+  & .rdp-caption_label {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 32px;
+    color: #1d201f;
+    text-transform: capitalize;
+  }
+`;
+export const CustomDayWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: ${({ isActive }) => (isActive ? '#D6F2F9' : 'transparent')};
+  border-radius: 8px;
+  position: relative;
+  & span {
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+  }
+  & span.today-active {
+    display: inline-block;
+    font-weight: 700;
+    font-size: 10px;
+    line-height: 14px;
+    color: #1d201f;
+    text-transform: uppercase;
+    position: absolute;
+    top: 6px;
+  }
+`;
+export const CustomDayStyled = styled.div `
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: ${({ isActive }) => (isActive ? '#177590;' : 'transparent')};
+  color: ${({ isActive }) => (isActive ? '#fff' : '#1D201F')};
+  margin-bottom: 7px;
+  margin-top: 4px;
+`;
+export const DotStyled = styled.div `
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #177590;
+`;
+export const NoteStyled = styled.div `
+  width: 15px;
+  height: 4px;
+  background: #177590;
+  border-radius: 3px;
+`;

package/dist/esm/lib/PersonDateTimeCard/PersonDateTimeCard.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type PersonDateTimeCardProps = {
+    photoSrc?: string;
+    name: string;
+    dateTime: Date;
+};
+declare const _default: React.NamedExoticComponent<PersonDateTimeCardProps>;
+export default _default;

package/dist/esm/lib/PersonDateTimeCard/PersonDateTimeCard.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import PersonDateTimeCardStyled from './PersonDateTimeCard.styled';
+import { DateTime } from 'luxon';
+import { Avatar } from '../Avatar';
+const PersonDateTimeCard = (props) => {
+    const dt = DateTime.fromJSDate(props.dateTime);
+    const label = dt.setLocale('uk').toFormat('dd MMM ! HH:mm').replace('!', 'o');
+    return (_jsxs(PersonDateTimeCardStyled, { children: [_jsx(Avatar, { dimensions: 40, src: props.photoSrc, firstName: props.name, className: "person-avatar", withBorder: false }), _jsxs("div", Object.assign({ className: "right-part" }, { children: [_jsx("div", Object.assign({ className: "person-name" }, { children: props.name })), _jsx("div", Object.assign({ className: "date-time" }, { children: label }))] }))] }));
+};
+export default React.memo(PersonDateTimeCard);

package/dist/esm/lib/PersonDateTimeCard/PersonDateTimeCard.styled.d.ts

@@ -0,0 +1,2 @@
+declare const PersonDateTimeCardStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default PersonDateTimeCardStyled;

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

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+const PersonDateTimeCardStyled = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+  gap: 12px;
+
+  .person-name {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    color: #1d201f;
+  }
+
+  .date-time {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 14px;
+    color: #5b5b5b;
+  }
+
+  & .person-avatar {
+    font-weight: 600;
+    font-size: 13px;
+    line-height: 15px;
+    flex: 0 0 40px;
+  }
+`;
+export default PersonDateTimeCardStyled;

package/dist/esm/lib/ProgressBar/ProgressBar.js

@@ -0,0 +1,7 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ProgressBarWrapper } from './ProgressBar.style';
+const ProgressBar = ({ progress, loaderTitle = 'Завантаження файлу' }) => {
+    return (_jsxs(ProgressBarWrapper, Object.assign({ progress: progress * 3.6 }, { children: [_jsx("div", Object.assign({ className: "circular-progress" }, { children: _jsxs("span", Object.assign({ className: "progress-value" }, { children: [progress, "%"] })) })), _jsxs("div", Object.assign({ className: "progress-title" }, { children: [loaderTitle, "..."] }))] })));
+};
+export default React.memo(ProgressBar);

package/dist/esm/lib/ProgressBar/ProgressBar.style.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 type ProgressBarWrapperProps = {
     progress: number;
 };
-export declare const ProgressBarWrapper: import("styled-components").StyledComponent<"div", any, ProgressBarWrapperProps, never>;
+export declare const ProgressBarWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ProgressBarWrapperProps>> & string;
 export {};

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

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+export const ProgressBarWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 17px;
+
+  & .circular-progress {
+    position: relative;
+    width: 110px;
+    height: 110px;
+    border-radius: 50%;
+    background: conic-gradient(
+      #177590 ${({ progress }) => progress}deg,
+      #eeeeee 0deg
+    );
+    transition: all;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 104px;
+      height: 104px;
+      border-radius: 50%;
+      background: #ffffff;
+    }
+  }
+
+  & .progress-value {
+    position: relative;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 32px;
+    color: #1d201f;
+  }
+
+  & .progress-title {
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 14px;
+    color: #1d201f;
+  }
+`;

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

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

package/dist/esm/lib/Refresher/Refresher.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IonRefresher } from '@ionic/react';
+import { RefresherContentStyled } from './Refresher.style';
+const Refresher = ({ onIonRefresh, disabled }) => {
+    return (_jsx(IonRefresher, Object.assign({ slot: 'fixed', onIonRefresh: onIonRefresh, disabled: disabled }, { children: _jsx(RefresherContentStyled, { pullingIcon: null, refreshingSpinner: 'lines' }) })));
+};
+export default Refresher;

package/dist/esm/lib/Refresher/Refresher.style.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const RefresherContentStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@ionic/core/dist/types/components").JSX.IonRefresherContent & Pick<import("react").HTMLAttributes<HTMLIonRefresherContentElement>, "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("@ionic/react/dist/types/components/react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIonRefresherContentElement>>, any, {}, never>;
+export declare const RefresherContentStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@ionic/core/dist/types/components").JSX.IonRefresherContent & Omit<import("react").HTMLAttributes<HTMLIonRefresherContentElement>, "style"> & import("@ionic/react/dist/types/components/react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIonRefresherContentElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@ionic/core/dist/types/components").JSX.IonRefresherContent & Omit<import("react").HTMLAttributes<HTMLIonRefresherContentElement>, "style"> & import("@ionic/react/dist/types/components/react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIonRefresherContentElement>>, keyof import("react").Component<any, {}, any>>;

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { IonRefresherContent } from '@ionic/react';
+export const RefresherContentStyled = styled(IonRefresherContent) `
+  & ion-spinner {
+    color: #d8d8d8 !important;
+  }
+`;

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

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

package/dist/esm/lib/ReviewSwiperSection/ReviewSwiperSection.js

@@ -0,0 +1,32 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { isPlatform } from '@ionic/react';
+import { ReviewsHeadingContainer, ReviewSwiperContainer, ReviewSwiperSlide, ReviewSwiperSlider, } from './ReviewSwiperSection.style';
+import StarRating from '../StarRating';
+import ReviewCard from '../SpecialistProfile/ReviewCard';
+import CustomButton from '../CustomButton';
+import Skeleton from '../Skeleton';
+const ReviewSwiperSection = ({ reviews, loading, reviewsCount, averageRating, showAllReviewsHandler, specialistReviewsCountForShowing, translations, }) => {
+    var _a, _b;
+    const swiperRef = useRef(null);
+    if (((_b = ((_a = reviews === null || reviews === void 0 ? void 0 : reviews.length) !== null && _a !== void 0 ? _a : 0) < specialistReviewsCountForShowing) !== null && _b !== void 0 ? _b : reviewsCount < specialistReviewsCountForShowing) &&
+        !loading) {
+        return null;
+    }
+    return !loading ? (_jsxs(ReviewSwiperContainer, { children: [_jsxs(ReviewsHeadingContainer, { children: [_jsxs("h4", { children: [reviewsCount, " ", translations.reviews] }), _jsx(StarRating, { averageStarsCount: averageRating })] }), _jsxs(ReviewSwiperSlider, Object.assign({ ref: swiperRef, slidesPerView: isPlatform('android') || isPlatform('ios') ? 1.2 : 1.25, style: { marginBottom: '18px' }, spaceBetween: 14 }, { children: [reviews
+                        .slice(0, specialistReviewsCountForShowing)
+                        .map((review) => {
+                        var _a, _b, _c, _d, _e;
+                        return (_jsx(ReviewSwiperSlide, { children: _jsx(ReviewCard, { reviewerAvatar: (_a = review === null || review === void 0 ? void 0 : review.client_avatar) !== null && _a !== void 0 ? _a : '', reviewerFirstName: (_b = review === null || review === void 0 ? void 0 : review.client_first_name) !== null && _b !== void 0 ? _b : '', reviewerLastName: (_c = review === null || review === void 0 ? void 0 : review.client_last_name) !== null && _c !== void 0 ? _c : '', reviewerCountry: ((_d = review === null || review === void 0 ? void 0 : review.client_country) !== null && _d !== void 0 ? _d : 'uk'), reviewedAtInSeconds: review === null || review === void 0 ? void 0 : review.created_at, starsCount: review === null || review === void 0 ? void 0 : review.review_rating, reviewText: (_e = review === null || review === void 0 ? void 0 : review.text_of_review) !== null && _e !== void 0 ? _e : undefined, onShowMoreButtonClick: showAllReviewsHandler, type: 'card', translations: {
+                                    showMore: translations.showMore,
+                                    showAllReviews: translations.showAllReviews,
+                                } }) }, review.id));
+                    }), (reviews === null || reviews === void 0 ? void 0 : reviews.length) > specialistReviewsCountForShowing && (_jsx(ReviewSwiperSlide, { children: _jsx(ReviewCard, { showAllReview: true, reviewerAvatar: '', reviewerFirstName: '', reviewerLastName: '', starsCount: 5, type: 'card', onClick: showAllReviewsHandler, translations: {
+                                showMore: translations.showMore,
+                                showAllReviews: translations.showAllReviews,
+                            } }) }, 'last_id'))] })), (reviews === null || reviews === void 0 ? void 0 : reviews.length) > specialistReviewsCountForShowing && (_jsx(CustomButton, Object.assign({ buttonType: 'accent-light-grey', onClick: showAllReviewsHandler }, { children: translations.showAllReviews })))] })) : (_jsxs(ReviewSwiperContainer, { children: [_jsxs(ReviewsHeadingContainer, { children: [_jsx("h4", { children: _jsx(Skeleton, { widthPx: 100, heightPx: 24 }) }), _jsx(Skeleton, { widthPx: 81, heightPx: 17 })] }), _jsx(ReviewSwiperSlider, Object.assign({ ref: swiperRef, slidesPerView: isPlatform('android') || isPlatform('ios') ? 1.2 : 1.25, style: { marginBottom: '18px' } }, { children: Array.from({ length: 6 }).map((_, index) => (_jsx(ReviewSwiperSlide, { children: _jsx(ReviewCard, { loading: true, reviewerAvatar: '', reviewerFirstName: '', reviewerLastName: '', translations: {
+                            showMore: 'Показати більше',
+                            showAllReviews: 'Показати всі відгуки',
+                        }, starsCount: 5, type: 'card' }) }, index))) })), _jsx(Skeleton, { heightPx: 48, style: { borderRadius: '10px' } })] }));
+};
+export default ReviewSwiperSection;

package/dist/esm/lib/ReviewSwiperSection/ReviewSwiperSection.style.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const ReviewSwiperContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ReviewSwiperSlider: import("styled-components").StyledComponent<import("react").FunctionComponent<import("react").RefAttributes<import("swiper/react").SwiperRef> & import("swiper/react").SwiperProps>, any, {}, never>;
-export declare const ReviewSwiperSlide: import("styled-components").StyledComponent<import("react").FunctionComponent<import("swiper/react").SwiperSlideProps>, any, {}, never>;
-export declare const ReviewsHeadingContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ReviewSwiperContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ReviewSwiperSlider: 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>>;
+export declare const ReviewSwiperSlide: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("swiper/react").SwiperSlideProps, never>> & string & Omit<import("react").FunctionComponent<import("swiper/react").SwiperSlideProps>, keyof import("react").Component<any, {}, any>>;
+export declare const ReviewsHeadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+import { Swiper, SwiperSlide } from 'swiper/react';
+export const ReviewSwiperContainer = styled.div `
+  width: 100%;
+  padding: 20px 16px !important;
+
+  .swiper-slide {
+    justify-content: start;
+  }
+`;
+export const ReviewSwiperSlider = styled(Swiper) `
+  .swiper-wrapper {
+  }
+`;
+export const ReviewSwiperSlide = styled(SwiperSlide) ``;
+export const ReviewsHeadingContainer = styled.div `
+  display: flex;
+  gap: 10px;
+  align-items: center !important;
+
+  margin-bottom: 20px;
+  margin-top: 8px;
+
+  h4 {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 24px;
+
+    color: #1d201f;
+  }
+`;

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

@@ -0,0 +1,2 @@
+export { default } from './ReviewSwiperSection';
+export * from './types';

package/dist/esm/lib/ReviewSwiperSection/types.js

@@ -0,0 +1 @@
+export {};