@mindly/ui-components 8.0.0-alpha.38 → 8.0.0

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

@@ -1,73 +0,0 @@
-import styled from 'styled-components';
-export const CheckboxListWrapper = styled.ul `
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-
-  &.with-icon {
-    column-gap: 8px;
-    row-gap: 10px;
-  }
-
-  &.tag {
-    column-gap: 6px;
-    row-gap: 10px;
-  }
-
-  &.list {
-    flex-direction: column;
-    gap: 0;
-    margin: 0 -16px;
-
-    & label.list {
-      padding: 0 16px;
-    }
-  }
-`;
-export const ListMoreButton = styled.button `
-  outline: none;
-  background: transparent;
-  margin-top: 10px;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 14px;
-  color: #177590;
-  width: fit-content;
-  padding: 8px 0;
-  border: none;
-`;
-export const FullListWrapper = styled.ul `
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  padding: 0;
-  margin: 0 -16px 40px -16px;
-
-  & .list-group {
-    text-transform: uppercase;
-    background: #f7f8fb;
-    font-weight: 600;
-    font-size: 12px;
-    line-height: 14px;
-    color: #5b5b5b;
-    height: 48px;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid #eeeeee;
-    border-top: 4px solid #eeeeee;
-    padding: 0 16px;
-
-    &:first-child {
-      border-top: none;
-    }
-  }
-
-  & li {
-    & label.list {
-      padding: 0 16px;
-    }
-  }
-`;

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

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

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

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef, useEffect, useState, } from 'react';
-import { CheckboxLabel } from './CustomCheckbox.style';
-import { IonIcon } from '@ionic/react';
-import { checkmarkOutline } from 'ionicons/icons';
-export var CheckboxTypes;
-(function (CheckboxTypes) {
-    CheckboxTypes["WITH_ICON"] = "with-icon";
-    CheckboxTypes["TAG"] = "tag";
-    CheckboxTypes["LIST"] = "list";
-})(CheckboxTypes || (CheckboxTypes = {}));
-const CustomCheckbox = forwardRef(({ type, value, label, icon, name, className = '', defaultChecked = false, isCheckbox = true, onChange, }, ref) => {
-    const [checked, setChecked] = useState(defaultChecked);
-    useEffect(() => {
-        setChecked(defaultChecked);
-    }, [defaultChecked]);
-    const handleChange = (e) => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(e);
-        setChecked(e.target.checked);
-    };
-    return (_jsxs(CheckboxLabel, Object.assign({ className: `${type} ${className}` }, { children: [_jsx("input", { ref: ref, name: name, type: `${isCheckbox ? 'checkbox' : 'radio'}`, onChange: handleChange, value: value, checked: checked }), type === CheckboxTypes.WITH_ICON && icon, _jsx("span", Object.assign({ className: "checkbox-label" }, { children: label })), _jsx("span", Object.assign({ className: "checkmark" }, { children: type === CheckboxTypes.LIST && _jsx(IonIcon, { icon: checkmarkOutline }) }))] })));
-});
-CustomCheckbox.displayName = 'CustomCheckbox';
-export default React.memo(CustomCheckbox);

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

@@ -1,100 +0,0 @@
-import styled from 'styled-components';
-export const CheckboxLabel = styled.label `
-  position: relative;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-
-  & input {
-    position: absolute;
-    cursor: pointer;
-    width: 0;
-    height: 0;
-    opacity: 0;
-  }
-
-  & .checkbox-label {
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 14px;
-    color: #1d201f;
-    text-align: center;
-  }
-
-  &.with-icon {
-    padding: 0 10px;
-    width: 108px;
-    height: 89px;
-    flex-direction: column;
-    justify-content: center;
-    row-gap: 10px;
-  }
-
-  &.with-icon svg {
-    color: #1d201f;
-  }
-
-  &.tag {
-    padding: 8px 10px;
-    width: fit-content;
-  }
-
-  &.list {
-    width: 100%;
-    height: 46px;
-    justify-content: space-between;
-    border-bottom: 1px solid #eeeeee;
-  }
-
-  &.with-icon .checkmark,
-  &.tag .checkmark {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: #f2f4f7;
-    z-index: -1;
-  }
-
-  &.with-icon .checkmark {
-    width: 108px;
-    height: 89px;
-    border-radius: 10px;
-  }
-
-  &.tag .checkmark {
-    border-radius: 30px;
-    width: 100%;
-    height: 100%;
-  }
-
-  &.list .checkmark {
-    font-size: 24px;
-    color: #177590;
-    opacity: 0;
-  }
-
-  &.with-icon input:checked ~ .checkmark,
-  &.tag input:checked ~ .checkmark {
-    background: #177590;
-  }
-
-  &.list input:checked ~ .checkmark {
-    opacity: 1;
-  }
-
-  &.with-icon input:checked ~ .checkbox-label,
-  &.tag input:checked ~ .checkbox-label {
-    color: #ffffff;
-  }
-
-  &.with-icon input:checked ~ svg {
-    color: #ffffff;
-  }
-
-  &.list .checkbox-label {
-    font-size: 14px;
-    line-height: 16px;
-    color: #000000;
-  }
-`;

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

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

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

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { RadioButtonLabel } from './CustomRadioButton.style';
-const CustomRadioButton = forwardRef(({ label, name, value, checked, disabled, onChange }, ref) => {
-    return (_jsxs(RadioButtonLabel, { children: [_jsx("input", { ref: ref, type: "radio", name: name, value: value, disabled: disabled, onChange: onChange, checked: checked }), _jsxs("div", Object.assign({ className: 'radio-container' }, { children: [_jsx("span", Object.assign({ className: 'label' }, { children: label })), _jsx("span", { className: "checkmark" })] }))] }));
-});
-CustomRadioButton.displayName = 'CustomRadioButton';
-export default CustomRadioButton;

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

@@ -1,83 +0,0 @@
-import styled from 'styled-components';
-export const RadioButtonLabel = styled.label `
-  display: block;
-  position: relative;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  .radio-container {
-    padding: 14px 14px 14px 47px;
-    border: 1px solid #c1c1c1;
-    border-radius: 10px;
-  }
-
-  input:checked ~ .radio-container {
-    border: 1px solid #177590;
-  }
-
-  .label {
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    color: #1d201f;
-  }
-
-  input:checked ~ .radio-container .label {
-    color: #177590;
-  }
-
-  input:disabled ~ .radio-container {
-    border: 1px solid #c1c1c1;
-    background: #f8f8f8;
-    cursor: not-allowed;
-  }
-
-  input:disabled ~ .radio-container .label {
-    color: #c1c1c1;
-  }
-
-  .checkmark {
-    position: absolute;
-    top: 50%;
-    left: 15px;
-    height: 20px;
-    width: 20px;
-    border: 1px solid #c1c1c1;
-    border-radius: 50%;
-    transform: translateY(-50%);
-    transition: 0.2s;
-  }
-
-  input:checked ~ .radio-container .checkmark {
-    border: 2px solid #177590;
-  }
-
-  .checkmark:after {
-    content: '';
-    position: absolute;
-    display: none;
-    top: 50%;
-    left: 50%;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background: #177590;
-    transform: translate(-50%, -50%);
-    transition: 0.2s;
-  }
-
-  input:checked ~ .radio-container .checkmark:after {
-    display: block;
-  }
-`;

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

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

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

@@ -1,32 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useState, } from 'react';
-import { CustomSelectWrapper } from './CustomSelect.style';
-import { IonIcon } from '@ionic/react';
-import { chevronDownOutline } from 'ionicons/icons';
-const CustomSelect = React.forwardRef((_a, ref) => {
-    var { options, value = 'default', placeholder, isError, selectedBy = 'id', onChange } = _a, props = __rest(_a, ["options", "value", "placeholder", "isError", "selectedBy", "onChange"]);
-    const [isSelectedValue, setIsSelectedValue] = useState(false);
-    useEffect(() => {
-        value && value !== 'default'
-            ? setIsSelectedValue(true)
-            : setIsSelectedValue(false);
-    }, [value]);
-    const handleOnChange = useCallback((e) => {
-        e.target.value ? setIsSelectedValue(true) : setIsSelectedValue(false);
-        onChange === null || onChange === void 0 ? void 0 : onChange(e);
-    }, [onChange]);
-    return (_jsxs(CustomSelectWrapper, Object.assign({ className: `${isError ? 'error' : ''}` }, { children: [_jsxs("select", Object.assign({ className: `${isSelectedValue ? 'show-value' : 'show-placeholder'}`, ref: ref }, props, { onChange: handleOnChange, value: value }, { children: [placeholder && (_jsx("option", Object.assign({ disabled: true, value: "default", hidden: true }, { children: placeholder }))), options.map((o) => (_jsx("option", Object.assign({ value: o[selectedBy] }, { children: o.label }), o.id)))] })), _jsx(IonIcon, { icon: chevronDownOutline })] })));
-});
-CustomSelect.displayName = 'CustomSelect';
-export default React.memo(CustomSelect);

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

@@ -1,48 +0,0 @@
-import styled from 'styled-components';
-export const CustomSelectWrapper = styled.div `
-  position: relative;
-
-  & select {
-    outline: none;
-    appearance: none;
-    background-color: transparent;
-    border: 1px solid #e5e5e5;
-    border-radius: 4px;
-    padding: 14px 12px;
-    margin: 0;
-    width: 100%;
-    font-family: inherit;
-    cursor: inherit;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 17px;
-
-    &.show-value {
-      color: #1d201f;
-    }
-
-    &.show-placeholder {
-      color: #c1c1c1;
-    }
-
-    &::-ms-expand {
-      display: none;
-    }
-  }
-
-  & ion-icon {
-    position: absolute;
-    right: 11px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 24px;
-    color: #c1c1c1;
-    z-index: -1;
-  }
-
-  &.error {
-    & select {
-      border: 1px solid #c13e18;
-    }
-  }
-`;

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

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

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

@@ -1,30 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useState, } from 'react';
-import { TextareaWrapper } from './CustomTextarea.style';
-const CustomTextarea = React.forwardRef((_a, ref) => {
-    var { isError } = _a, props = __rest(_a, ["isError"]);
-    const [valueLength, setValueLength] = useState(0);
-    useEffect(() => {
-        var _a;
-        const val = props.value;
-        setValueLength((_a = val === null || val === void 0 ? void 0 : val.length) !== null && _a !== void 0 ? _a : 0);
-    }, [props.value]);
-    const handleChange = useCallback((e) => {
-        var _a;
-        (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    }, []);
-    return (_jsxs(TextareaWrapper, Object.assign({ className: `${isError ? 'error' : ''} ${props.maxLength ? 'with-counter' : ''}` }, { children: [!!props.maxLength && (_jsxs("div", Object.assign({ className: "textarea-length" }, { children: [valueLength, "/", props.maxLength] }))), _jsx("textarea", Object.assign({ ref: ref }, props, { onChange: handleChange }))] })));
-});
-CustomTextarea.displayName = 'CustomTextarea';
-export default React.memo(CustomTextarea);

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

@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-export const TextareaWrapper = styled.div `
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  & textarea {
-    outline: none;
-    width: 100%;
-    background: #ffffff;
-    border: 1px solid #e5e5e5;
-    border-radius: 4px;
-    resize: none;
-    padding: 10px 12px;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 16px;
-
-    &::placeholder {
-      color: #c1c1c1;
-    }
-  }
-
-  & .textarea-length {
-    font-weight: 400;
-    font-size: 10px;
-    color: #5b5b5b;
-    z-index: 10;
-    align-self: flex-end;
-  }
-
-  &.error {
-    & textarea {
-      border: 1px solid #c13e18;
-    }
-  }
-`;

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

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

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

@@ -1,48 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
-import { IonIcon } from '@ionic/react';
-import { closeOutline } from 'ionicons/icons';
-import { ImageInputCloseButton, ImageInputLabel, ImageInputLabelButton, ImageInputWrapper, } from './ImageInput.style';
-import { ReactComponent as VideoIcon } from './add-video.svg';
-import { ReactComponent as ImageIcon } from './add-image.svg';
-const ImageInput = forwardRef((_a, ref) => {
-    var { dimension = 110, buttonLabel, isRoundedImage = true, isCloseButton = false, onCloseClick, isVideoContent = false, isError, errorMessage, loadedFileValue, renderMediaAfterLoad = true, isFilledButton = true } = _a, props = __rest(_a, ["dimension", "buttonLabel", "isRoundedImage", "isCloseButton", "onCloseClick", "isVideoContent", "isError", "errorMessage", "loadedFileValue", "renderMediaAfterLoad", "isFilledButton"]);
-    const [loadedFile, setLoadedFile] = useState(loadedFileValue);
-    useEffect(() => {
-        loadedFileValue ? setLoadedFile(loadedFileValue) : setLoadedFile(null);
-    }, [loadedFileValue]);
-    const videoRef = useRef(null);
-    const onChangeHandler = useCallback((event) => {
-        var _a, _b;
-        if (!((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0])) {
-            return (props === null || props === void 0 ? void 0 : props.onChange) && props.onChange(event);
-        }
-        if (renderMediaAfterLoad) {
-            const reader = new FileReader();
-            reader.onload = () => {
-                setLoadedFile(reader.result);
-            };
-            reader.readAsDataURL(event.target.files[0]);
-        }
-        (props === null || props === void 0 ? void 0 : props.onChange) && props.onChange(event);
-        event.target.value = '';
-    }, [loadedFile, ref, renderMediaAfterLoad]);
-    return (_jsxs(ImageInputWrapper, { children: [_jsx("input", Object.assign({}, props, { type: 'file', ref: ref, onChange: onChangeHandler, hidden: true })), _jsxs(ImageInputLabel, Object.assign({ dimension: dimension, isImage: !!loadedFile, isRoundedImage: isRoundedImage, htmlFor: props.id, className: `${isError ? 'error' : ''}` }, { children: [loadedFile ? (isVideoContent ? (_jsx("video", { ref: videoRef, src: loadedFile, className: 'preview-video', autoPlay: true, muted: true, playsInline: true, controls: true })) : (_jsx("img", { src: loadedFile, alt: 'file', className: 'preview-image' }))) : isVideoContent ? (_jsx(VideoIcon, { className: 'icon' })) : (_jsx(ImageIcon, { className: 'icon' })), isCloseButton && loadedFile && (_jsx(ImageInputCloseButton, Object.assign({ onClick: (e) => {
-                            e.preventDefault();
-                            setLoadedFile(null);
-                            onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
-                        } }, { children: _jsx(IonIcon, { icon: closeOutline }) })))] })), isError && errorMessage && (_jsx("div", Object.assign({ className: 'error-message' }, { children: errorMessage }))), buttonLabel && (_jsx(ImageInputLabelButton, Object.assign({ htmlFor: props.id, className: `${isFilledButton ? 'filled-btn' : ''}` }, { children: buttonLabel })))] }));
-});
-ImageInput.displayName = 'ImageInput';
-export default ImageInput;

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

@@ -1,84 +0,0 @@
-import styled from 'styled-components';
-export const ImageInputWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  row-gap: 24px;
-  width: 100%;
-
-  & .error-message {
-    font-weight: 400;
-    font-size: 10px;
-    line-height: 14px;
-    color: #F24E1E;
-    margin-top: -20px;
-  }
-
-`;
-export const ImageInputLabel = styled.label `
-  position: relative;
-  width: ${(props) => props.isRoundedImage || !props.isImage ? `${props.dimension}px` : '95%'};
-  height: ${(props) => props.isRoundedImage || !props.isImage ? `${props.dimension}px` : 'auto'};
-
-  border-radius: ${(props) => props.isRoundedImage || !props.isImage ? '50%' : 0};
-  background: ${({ isImage }) => (isImage ? 'none' : '#f5f9ff')};
-  border: ${({ isImage }) => (isImage ? 'none' : '1.5px dashed #177590')};
-  color: #177590;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  & img,
-  video {
-    width: ${(props) => props.isRoundedImage ? `${props.dimension}px` : '95%'};
-    height: ${(props) => props.isRoundedImage ? `${props.dimension}px` : 'auto'};
-
-    border-radius: ${(props) => (props.isRoundedImage ? '50%' : '10px')};
-    object-fit: cover;
-  }
-
-  &.error {
-    color: #F24E1E;
-    background: #feeff1;
-    border: ${({ isImage }) => (isImage ? 'none' : '1.5px dashed #C13E18')};
-  }
-`;
-export const ImageInputLabelButton = styled.label `
-  display: block;
-  cursor: pointer;
-  border-radius: 10px;
-  width: 100%;
-  text-align: center;
-  font-weight: 600;
-  font-size: 14px;
-  padding: 16px;
-  border: 1px solid #177590;
-  color: #177590;
-
-  &.filled-btn {
-    border: none;
-    color: #ffffff;
-    background: #177590;
-  }
-
-`;
-export const ImageInputCloseButton = styled.button `
-  position: absolute;
-  outline: none;
-  right: -4px;
-  top: -12px;
-  width: 26px;
-  height: 26px;
-  font-size: 26px;
-  margin: 0;
-  padding: 0;
-  background: #ffffff;
-  border: 2px solid #177590;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #177590;
-  z-index: 10;
-`;

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

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

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

@@ -1,45 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { forwardRef, useCallback, useEffect, useState } from 'react';
-import { IonIcon } from '@ionic/react';
-import { closeOutline, cloudUploadOutline } from 'ionicons/icons';
-import { LineFileInputCloseBtn, LineFileInputImage, LineFileInputWrapper } from './LineFileInput.style';
-const LineFileInput = forwardRef((_a, ref) => {
-    var { title, subTitle, isError, loadedFileValue, onCloseClick, buttonLabel, renderMediaAfterLoad = true } = _a, props = __rest(_a, ["title", "subTitle", "isError", "loadedFileValue", "onCloseClick", "buttonLabel", "renderMediaAfterLoad"]);
-    const [loadedFile, setLoadedFile] = useState(loadedFileValue);
-    useEffect(() => {
-        loadedFileValue ? setLoadedFile(loadedFileValue) : setLoadedFile(null);
-    }, [loadedFileValue]);
-    const onChangeHandler = useCallback((event) => {
-        var _a, _b, _c, _d;
-        if (!((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0])) {
-            return (_c = props === null || props === void 0 ? void 0 : props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, event);
-        }
-        if (renderMediaAfterLoad) {
-            const reader = new FileReader();
-            reader.onload = () => {
-                setLoadedFile(reader.result);
-            };
-            reader.readAsDataURL(event.target.files[0]);
-        }
-        (_d = props === null || props === void 0 ? void 0 : props.onChange) === null || _d === void 0 ? void 0 : _d.call(props, event);
-        event.target.value = '';
-    }, [loadedFile, ref, renderMediaAfterLoad]);
-    return (_jsxs(LineFileInputWrapper, Object.assign({ className: isError ? 'error' : '' }, { children: [_jsx("input", Object.assign({ ref: ref, type: "file" }, props, { onChange: onChangeHandler, hidden: true })), loadedFile ? (_jsxs(LineFileInputImage, { children: [_jsx("img", { src: loadedFile, alt: "" }), _jsx(LineFileInputCloseBtn, Object.assign({ onClick: (e) => {
-                            e.preventDefault();
-                            setLoadedFile(null);
-                            onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
-                        }, type: "button" }, { children: _jsx(IonIcon, { icon: closeOutline }) })), buttonLabel && _jsx("label", Object.assign({ className: "change-label-btn", htmlFor: props.id }, { children: buttonLabel }))] })) : (_jsxs(_Fragment, { children: [_jsxs("label", Object.assign({ className: "input-label", htmlFor: props.id }, { children: [_jsx(IonIcon, { icon: cloudUploadOutline }), title] })), _jsx("span", Object.assign({ className: "input-subtitle" }, { children: subTitle }))] }))] })));
-});
-LineFileInput.displayName = 'LineFileInput';
-export default React.memo(LineFileInput);