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

package/dist/esm/lib/HorisontalCalendar/HorizontalCalendar.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+export type HorizontalCalendarProps = {
+    consultationDatesSeconds?: number[];
+    myNotesDatesSeconds?: number[];
+    toMeNotesDatesSeconds?: number[];
+    /**
+     * Days to be rendered. e.g. 15 - means 7 before today and 7 after today
+     */
+    daysToRender?: number;
+    value?: DayToRender | Date;
+    onChange?: (value: DayToRender) => void;
+    /**
+     * date from which a component should start coordinates.
+     * e.g. startFrom = "15.01.2022", daysToRender=5
+     * return ["13.02.2022", "14.01.2022", "15.01.2022", "16.01.2022", "17.01.2022"]
+     *
+     */
+    startFrom?: Date;
+    showSkeleton?: boolean;
+};
+declare enum DayOfWeek {
+    SUN = "\u041D\u0434",
+    MON = "\u041F\u043D",
+    TUE = "\u0412\u0442",
+    WED = "\u0421\u0440",
+    THU = "\u0427\u0442",
+    FRI = "\u041F\u0442",
+    SAT = "\u0421\u0431"
+}
+export type DayToRender = {
+    /**
+     * e.g. "2.2.122", "24.4.122"
+     */
+    shortDate: string;
+    dayOfMonth: number;
+    dayOfWeek: DayOfWeek;
+    date: Date;
+};
+export declare const HorizontalCalendar: React.FC<HorizontalCalendarProps>;
+export {};

package/dist/esm/lib/HorisontalCalendar/HorizontalCalendar.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import HorizontalCalendarStyled from './HorizontalCalendar.styled';
+import { IonSkeletonText, useIonViewDidEnter } from '@ionic/react';
+var DayOfWeek;
+(function (DayOfWeek) {
+    DayOfWeek["SUN"] = "\u041D\u0434";
+    DayOfWeek["MON"] = "\u041F\u043D";
+    DayOfWeek["TUE"] = "\u0412\u0442";
+    DayOfWeek["WED"] = "\u0421\u0440";
+    DayOfWeek["THU"] = "\u0427\u0442";
+    DayOfWeek["FRI"] = "\u041F\u0442";
+    DayOfWeek["SAT"] = "\u0421\u0431";
+})(DayOfWeek || (DayOfWeek = {}));
+function dateToDayOfWeek(date) {
+    const day = date.getDay();
+    switch (day) {
+        default:
+        case 0:
+            return DayOfWeek.SUN;
+        case 1:
+            return DayOfWeek.MON;
+        case 2:
+            return DayOfWeek.TUE;
+        case 3:
+            return DayOfWeek.WED;
+        case 4:
+            return DayOfWeek.THU;
+        case 5:
+            return DayOfWeek.FRI;
+        case 6:
+            return DayOfWeek.SAT;
+    }
+}
+function dateToShortDate(d) {
+    return d.toDateString();
+}
+const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;
+function getDaysToRender(daysToRender = 15, startFrom = new Date()) {
+    const daysAroundTodayCount = Math.floor(daysToRender / 2);
+    const days = [];
+    const startingDate = startFrom.valueOf() - (MILLISECONDS_IN_DAY * daysAroundTodayCount);
+    for (let i = 0, currentDate = startingDate; i < daysToRender; i++, currentDate += MILLISECONDS_IN_DAY) {
+        const date = new Date(currentDate);
+        days.push({
+            shortDate: dateToShortDate(date),
+            dayOfWeek: dateToDayOfWeek(date),
+            dayOfMonth: date.getDate(),
+            date: date,
+        });
+    }
+    return days;
+}
+function secondsToShortDate(seconds) {
+    const date = new Date(seconds * 1000);
+    return dateToShortDate(date);
+}
+function secondsArrayToShortDatesSet(secondsArray = []) {
+    if (!Array.isArray(secondsArray))
+        return new Set();
+    const shortDatesArray = secondsArray.map(sec => secondsToShortDate(sec));
+    const set = new Set(shortDatesArray);
+    return set;
+}
+export const HorizontalCalendar = (props) => {
+    var _a;
+    const dateNow = new Date();
+    const [daysToRender, setDaysToRender] = useState([]);
+    const currentShortDate = dateToShortDate(dateNow);
+    const todayRef = useRef(null);
+    const consultationsShortDatesSet = useMemo(() => {
+        return secondsArrayToShortDatesSet(props.consultationDatesSeconds);
+    }, [props.consultationDatesSeconds]);
+    const myNotesDatesSet = useMemo(() => {
+        return secondsArrayToShortDatesSet(props.myNotesDatesSeconds);
+    }, [props.myNotesDatesSeconds]);
+    const toMeNotesDatesSet = useMemo(() => {
+        return secondsArrayToShortDatesSet(props.toMeNotesDatesSeconds);
+    }, [props.toMeNotesDatesSeconds]);
+    useEffect(() => {
+        const toRender = getDaysToRender(props.daysToRender, props.startFrom);
+        setDaysToRender(toRender);
+    }, [props.daysToRender, dateNow.getDate(), props.startFrom]);
+    const scrollToSelectedDay = useCallback(() => {
+        var _a;
+        if (props.showSkeleton)
+            return;
+        if (!todayRef.current)
+            return;
+        (_a = todayRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+    }, [todayRef.current, props.showSkeleton]);
+    useEffect(() => {
+        scrollToSelectedDay();
+    }, [todayRef.current, props.showSkeleton]);
+    useEffect(() => {
+        // eslint-disable-next-line no-restricted-globals
+        const S = self;
+        const handler = () => {
+            scrollToSelectedDay();
+        };
+        S.addEventListener('calendar_scroll', handler);
+        return () => {
+            S.removeEventListener('calendar_scroll', handler);
+        };
+    }, []);
+    useIonViewDidEnter(scrollToSelectedDay);
+    const valueShortDate = props.value && (props.value instanceof Date ?
+        dateToShortDate(props.value)
+        : (_a = props.value) === null || _a === void 0 ? void 0 : _a.shortDate);
+    return (_jsx(HorizontalCalendarStyled, { children: _jsx("ul", { children: daysToRender.map(day => {
+                if (props.showSkeleton) {
+                    return (_jsx("li", { children: _jsxs("div", Object.assign({ className: "day skeleton" }, { children: [_jsx("div", Object.assign({ className: "title" }, { children: _jsx(IonSkeletonText, { className: "sk", animated: true }) })), _jsx("div", { className: "tags" }), _jsx("div", Object.assign({ className: "day-content" }, { children: _jsx(IonSkeletonText, { className: "sk", animated: true }) }))] })) }, day.shortDate));
+                }
+                const isToday = day.shortDate === currentShortDate;
+                const hasConsultations = consultationsShortDatesSet.has(day.shortDate);
+                const isSelected = props.value ? (valueShortDate === day.shortDate) : isToday;
+                const hasMyNote = myNotesDatesSet.has(day.shortDate);
+                const hasToMeNotes = toMeNotesDatesSet.has(day.shortDate);
+                const classList = [];
+                if (isSelected)
+                    classList.push('selected');
+                if (isToday)
+                    classList.push('today');
+                if (hasConsultations)
+                    classList.push('has-consultation');
+                if (hasMyNote)
+                    classList.push('has-my-note');
+                if (hasToMeNotes)
+                    classList.push('has-tome-notes');
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const attributes = {};
+                if (classList.length) {
+                    attributes.className = classList.join(' ');
+                }
+                return (_jsx("li", Object.assign({ onClick: () => {
+                        props.onChange && props.onChange(day);
+                    } }, attributes, { children: _jsxs("div", Object.assign({ className: "day", ref: isToday ? todayRef : null }, { children: [_jsx("div", Object.assign({ className: "title" }, { children: isToday ? 'Зараз' : day.dayOfWeek })), _jsx("div", Object.assign({ className: "tags" }, { children: _jsx("span", { className: "draw" }) })), _jsx("div", Object.assign({ className: "day-content" }, { children: day.dayOfMonth }))] })) }), day.shortDate));
+            }) }) }));
+};

package/dist/esm/lib/HorisontalCalendar/HorizontalCalendar.styled.d.ts

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

package/dist/esm/lib/HorisontalCalendar/HorizontalCalendar.styled.js

@@ -0,0 +1,115 @@
+import styled from 'styled-components';
+const HorizontalCalendarStyled = styled.div `
+  --contrastColor: #177590;
+  --highlightColor: #d6f2f9;
+  user-select: none;
+
+  ul {
+    list-style: none;
+    display: flex;
+    gap: 9px;
+    overflow: scroll;
+    width: 100%;
+    white-space: nowrap;
+    padding: 0;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    li {
+      display: inline-block;
+      height: 70px;
+      width: 44px;
+      border-radius: 8px;
+      padding: 6px;
+
+      .day {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        align-content: center;
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 700;
+
+        .title {
+          font-size: 10px;
+          line-height: 14px;
+          text-transform: uppercase;
+        }
+
+        .tags {
+          height: 11px;
+        }
+
+        .day-content {
+          font-size: 16px;
+          line-height: 16px;
+          height: 32px;
+          width: 32px;
+          border: 1px solid var(--contrastColor);
+          border-radius: 50%;
+          display: flex;
+          justify-content: center;
+          justify-items: center;
+          align-items: center;
+          align-content: center;
+        }
+      }
+
+      &.selected {
+        background-color: var(--highlightColor);
+      }
+
+      &.has-consultation .day .day-content {
+        background-color: var(--contrastColor);
+        color: #fff;
+      }
+
+      &.has-my-note .day .tags,
+      &.has-tome-notes .day .tags {
+        position: relative;
+
+        .draw {
+          position: absolute;
+          width: 5px;
+          height: 5px;
+          left: -2px;
+          top: 1px;
+          border-radius: 3px;
+          background: #177590;
+        }
+      }
+
+      &.has-tome-notes .day .tags .draw {
+        width: 15px;
+        left: -7px;
+      }
+
+      .day.skeleton {
+        .title .sk {
+          width: 15px;
+          height: 14px;
+          border-radius: 4px;
+        }
+
+        .tags {
+          height: 5px;
+        }
+
+        .day-content {
+          border: none;
+
+          .sk {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+  }
+`;
+export default HorizontalCalendarStyled;

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

@@ -0,0 +1 @@
+export * from './HorizontalCalendar';

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

@@ -0,0 +1 @@
+export * from './HorizontalCalendar';

package/dist/esm/lib/ImageWithFallback/ImageWithFallback.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function filterImgProps(props) {
+    const props2 = Object.assign({}, props);
+    delete props2.onErrorContent;
+    return props2;
+}
+const ImageWithFallback = (props) => {
+    const [hasError, setHasError] = useState(false);
+    const innerProps = filterImgProps(props);
+    useEffect(() => {
+        setHasError(false);
+    }, [props.src]);
+    const onErrorHandler = useCallback((e) => {
+        var _a;
+        setHasError(!!e);
+        (_a = props === null || props === void 0 ? void 0 : props.onError) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    }, []);
+    const onLoadHandler = useCallback((e) => {
+        var _a;
+        (_a = props === null || props === void 0 ? void 0 : props.onLoad) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    }, []);
+    if (hasError) {
+        return props.onErrorContent;
+    }
+    return (_jsx("img", Object.assign({}, innerProps, { onError: onErrorHandler, onLoad: onLoadHandler })));
+};
+export default ImageWithFallback;

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

@@ -1,7 +1,7 @@
-import React, { ReactElement, ReactText } from 'react';
+import React, { ReactElement } from 'react';
 import { CheckboxTypes } from '../CustomCheckbox/CustomCheckbox';
 export type CheckboxListItem = {
-    id: ReactText;
+    id: string;
     label?: string;
     name?: string;
     icon?: ReactElement;
@@ -14,8 +14,8 @@ export type CheckboxListCategory = {
 type CheckboxListProps = {
     type: CheckboxTypes;
     items: CheckboxListCategory[];
-    selected?: ReactText[];
-    onChange?: (selected: ReactText[]) => void;
+    selected?: string[];
+    onChange?: (selected: string[]) => void;
     name: string;
     moreLabel?: string;
     title?: string;

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import CustomCheckbox, { CheckboxTypes } from '../CustomCheckbox/CustomCheckbox';
+import { CheckboxListWrapper, FullListWrapper, ListMoreButton } from './CheckboxList.style';
+import { IonContent, IonModal } from '@ionic/react';
+import Container from '../../Container';
+import ChevronHeader from '../../ChevronHeader';
+import AppFooter from '../../AppFooter';
+import CustomButton from '../../CustomButton';
+const CheckboxList = ({ type, items, selected = [], name, onChange, moreLabel, title, className = '', selectedBy = 'id', translation, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedItems, setSelectedItems] = useState(selected);
+    useEffect(() => {
+        setSelectedItems(items
+            .map((c) => c.items.map((i) => i[selectedBy]))
+            .flat()
+            .filter((s) => selected === null || selected === void 0 ? void 0 : selected.includes(s)));
+    }, [selected, items, selectedBy]);
+    const allItemsCount = useMemo(() => items === null || items === void 0 ? void 0 : items.reduce((prev, c) => prev + c.items.length, 0), [items]);
+    const mainItems = useMemo(() => {
+        const itemsData = [];
+        items.forEach((c) => {
+            itemsData.push(...c.items.filter((i) => (!moreLabel ? true : i.isFavorite)), ...c.items.filter((i) => moreLabel && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(i[selectedBy])) && !i.isFavorite));
+        });
+        return itemsData;
+    }, [selectedItems, items, moreLabel, selectedBy]);
+    const onChangeHandler = useCallback((id, checked) => {
+        let selectedArr = [];
+        if (checked) {
+            selectedArr = [...selectedItems, id];
+        }
+        else {
+            selectedArr = [...selectedItems.filter((s) => s !== id)];
+        }
+        setSelectedItems(selectedArr);
+        onChange === null || onChange === void 0 ? void 0 : onChange(selectedArr);
+    }, [onChange, selectedItems]);
+    return (_jsxs(_Fragment, { children: [_jsx(CheckboxListWrapper, Object.assign({ className: `${type} ${className}` }, { children: mainItems.map((i) => (_jsx("li", { children: _jsx(CustomCheckbox, { type: type, name: name, value: i[selectedBy], label: i.label, icon: i.icon, defaultChecked: !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find((s) => s === i[selectedBy])), onChange: (e) => onChangeHandler(e.target.value, e.target.checked) }) }, i.id))) })), moreLabel && (_jsx(ListMoreButton, Object.assign({ onClick: () => setIsOpen(true), type: "button" }, { children: moreLabel }))), _jsxs(IonModal, Object.assign({ isOpen: isOpen, backdropDismiss: false, mode: "ios", onDidDismiss: () => setIsOpen(false) }, { children: [_jsx(ChevronHeader, { onClick: () => setIsOpen(false), title: title, subTitle: `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length} ${translation.from} ${allItemsCount}` }), _jsx(IonContent, { children: _jsx(Container, { children: _jsxs(FullListWrapper, { children: [_jsx("li", Object.assign({ className: "list-group" }, { children: translation.mostUsedText })), items.map((c) => c.items
+                                        .filter((i) => i.isFavorite)
+                                        .map((i) => (_jsx("li", { children: _jsx(CustomCheckbox, { type: CheckboxTypes.LIST, name: name, value: i[selectedBy], label: i.label, defaultChecked: !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find((s) => s === i[selectedBy])), onChange: (e) => onChangeHandler(e.target.value, e.target.checked) }) }, i.id)))), items.map((g) => (_jsxs(React.Fragment, { children: [_jsx("li", Object.assign({ className: "list-group" }, { children: g.name })), g.items
+                                                .filter((c) => !c.isFavorite)
+                                                .map((c) => (_jsx("li", { children: _jsx(CustomCheckbox, { type: CheckboxTypes.LIST, name: name, value: c[selectedBy], label: c.label, defaultChecked: !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find((s) => s === c[selectedBy])), onChange: (e) => onChangeHandler(e.target.value, e.target.checked) }) }, `${c.id}_modal`)))] }, g.name)))] }) }) }), _jsx(AppFooter, Object.assign({ style: { padding: '12px 0' } }, { children: _jsx(CustomButton, Object.assign({ buttonType: 'primary', onClick: () => setIsOpen(false) }, { children: translation.buttonText })) }))] }))] }));
+};
+export default React.memo(CheckboxList);

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

@@ -1,3 +1,4 @@
-export declare const CheckboxListWrapper: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const ListMoreButton: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const FullListWrapper: import("styled-components").StyledComponent<"ul", any, {}, never>;
+/// <reference types="react" />
+export declare const CheckboxListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const ListMoreButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const FullListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;

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

@@ -0,0 +1,73 @@
+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

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

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

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, ReactElement, ReactText } from 'react';
+import React, { ChangeEvent, ReactElement } from 'react';
 export declare enum CheckboxTypes {
     WITH_ICON = "with-icon",
     TAG = "tag",
@@ -6,7 +6,7 @@ export declare enum CheckboxTypes {
 }
 type CustomCheckboxProps = {
     type: CheckboxTypes;
-    value?: ReactText;
+    value?: string;
     label?: string;
     icon?: ReactElement;
     name?: string;
@@ -15,5 +15,5 @@ type CustomCheckboxProps = {
     isCheckbox?: boolean;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<CustomCheckboxProps & React.RefAttributes<HTMLInputElement>>>;
+declare const _default: React.NamedExoticComponent<CustomCheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;

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

@@ -0,0 +1,24 @@
+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.d.ts

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

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

@@ -0,0 +1,100 @@
+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

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

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

@@ -0,0 +1,8 @@
+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.d.ts

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