@hhgtech/hhg-components 1.29.79 → 1.29.81

package/build/esm/{index-49d819b7.js → index-cf6beac8.js}

@@ -1,19 +1,8 @@
 import React__default, { useRef, useState, useEffect } from 'react';
-import { I as Icon } from './index-ecb46439.js';
-import { u as useTranslations } from './useTranslations-b8c49c9b.js';
 import { format } from 'date-fns';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import styled from '@emotion/styled';
-import { t as theme } from './theme-eb1b39f6.js';
-
-var styles = {"loading":"tliWyii"};
-
-const Loading = ({ className, theme, hideText }) => {
-    const { t } = useTranslations();
-    return (React__default.createElement("div", { className: `${styles.loading} ${className}` },
-        React__default.createElement(Icon.Spinner, { isMarryBaby: theme === 'marryBaby' }),
-        !hideText && t('loading')));
-};
+import { t as theme } from './theme-f18c2351.js';
 
 const MONTHS_TRANSLATION = {
     'vi-VN': [
@@ -612,4 +601,4 @@ const DatePicker = ({ alignRight = true, placeholder, displayDateFormat, onChang
             }, format: displayDateFormat || defaultDateFormatString, formatDate: formatPickerDate, hideOnDayClick: isStatic ? false : true, placeholder: placeholder || '', onDayChange: handleDayChanged, showOverlay: isStatic })));
 };
 
-export { DatePicker as D, Loading as L };
+export { DatePicker as D };

package/build/esm/{index-ad5c69c9.js → index-d218b94e.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-efad16cf.js';
+import { _ as __rest } from './tslib.es6-761239c7.js';
 import React__default from 'react';
 import { Modal as Modal$1 } from '@mantine/core';
-import { g as useStyles } from './index-e2d856fc.js';
+import { g as useStyles } from './index-21eac858.js';
 
 const Modal = (_a) => {
     var { styles, classNames, transitionProps } = _a, rest = __rest(_a, ["styles", "classNames", "transitionProps"]);

package/build/esm/index-d6201fa4.js

@@ -0,0 +1,42 @@
+import React__default from 'react';
+import styled from '@emotion/styled';
+import { L as Label } from './index-16514f4d.js';
+import { t as theme } from './theme-f18c2351.js';
+
+const StyledTextArea = styled.div `
+  textarea {
+    width: 100%;
+    height: var(--textarea-height, 116px);
+    padding: 1rem;
+    border: 1px solid ${theme.colors.gray200};
+    border-radius: 6px;
+    color: ${theme.colors.gray800};
+    font-size: 14px;
+    resize: none;
+
+    &:focus {
+      box-shadow: 0px 0px 2px 2px #91caff;
+    }
+
+    &::placeholder {
+      color: ${theme.colors.gray500};
+    }
+
+    &:disabled {
+      background-color: ${theme.colors.neutral50};
+      cursor: not-allowed;
+    }
+  }
+`;
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const TextArea = React__default.forwardRef(({ height, placeholder, labelText, labelColor, id, name, onChange, value, className, onKeyPress, disabled = false, }, ref) => {
+    return (React__default.createElement(StyledTextArea, { className: className, style: { ['--textarea-height']: height || '116px' } },
+        labelText && (React__default.createElement(Label, { size: "label2", style: { color: labelColor || '#595959' }, htmlFor: id }, labelText)),
+        React__default.createElement("textarea", { name: name, ref: ref, placeholder: placeholder, id: id, onChange: (e) => onChange && onChange(e.target.value), 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onKeyPress: (e) => onKeyPress && onKeyPress(e), value: value, disabled: disabled })));
+});
+
+export { TextArea as T };

package/build/esm/index-e104ad21.js

@@ -0,0 +1,335 @@
+import React__default, { useMemo, useState, useEffect } from 'react';
+import { u as useTranslations } from './useTranslations-fbf6a6ab.js';
+import { g as getCookie } from './cookieHelper-73ce3871.js';
+import { C as CommonGAssets } from './index-78255d6c.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-d6f57223.js';
+import { t as theme } from './theme-f18c2351.js';
+import { A as Avatar } from './index-42ad7763.js';
+import { d as getTogetherUserPostsApiPath } from './index-2774583d.js';
+import { B as Button } from './index-1da2ca0b.js';
+
+const INTERNAL_CARD_URLS = {
+    myBooking: 'booking',
+    mySaved: 'saved',
+    myHealth: 'health',
+    myFamily: 'family',
+    myCommunity: 'my-communities',
+    // TODO: this is hardcoded for VN, need to adapt to dynamic slug depend on locale
+    eCom: '/shop/ho-so/quan-li-don-hang/',
+};
+
+var styles$4 = {"navHeader":"uJQBNNg","navAvatar":"TfG3dM5","navHeaderUserInfos":"aMtjFNf","navHeaderUserName":"cSz2RR-","navHeaderMyProfileButton":"GyFm00F"};
+
+function NavHeader({ userInfo, onClickMyProfileButton, themeName = 'helloSites', }) {
+    const { t } = useTranslations();
+    const nameFirstLetter = useMemo(() => {
+        const name = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.username);
+        if (name && name.length) {
+            return name[0].toUpperCase();
+        }
+        return 'A';
+    }, [userInfo === null || userInfo === void 0 ? void 0 : userInfo.username, userInfo === null || userInfo === void 0 ? void 0 : userInfo.name]);
+    const handleClickMyProfileButton = () => {
+        if (onClickMyProfileButton) {
+            onClickMyProfileButton();
+        }
+    };
+    return (React__default.createElement("div", { className: styles$4.navHeader, onClick: handleClickMyProfileButton },
+        React__default.createElement(Avatar, { className: styles$4.navAvatar, type: "rounded", size: "xl", avatarUrl: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, firstLetter: nameFirstLetter, backgroundColor: themeName === 'marryBaby'
+                ? theme.mbColors.pink
+                : theme.colors.secondaryBase }),
+        React__default.createElement("div", { className: styles$4.navHeaderUserInfos },
+            React__default.createElement("div", { className: styles$4.navHeaderUserName }, (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.username)),
+            React__default.createElement("div", { className: styles$4.navHeaderMyProfileButton, style: {
+                    '--bg-hellosites': `url(${CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-chevronRight.svg')})`,
+                    '--bg-marrybaby': `url(${CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-arrowRight.svg')})`,
+                } }, t('userProfile.nav.header.viewProfile')))));
+}
+
+var styles$3 = {"navigationCard":"fVk18fq","navigationCardLabel":"v8TCvUb","navigationCardIconWrapper":"mx7T4V3"};
+
+const iconBgColorMap = {
+    myHealth: theme.mbColors.toneYellow,
+    myCommunity: theme.mbColors.toneBlue,
+    mySaved: theme.mbColors.toneGreen,
+};
+// type CardIconUrlMap = IconUrlMap<UserProfileMenuCard>
+const cardIconUrlMap = {
+    helloSites: {
+        myBooking: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myBooking.svg'),
+        myCommunity: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myCommunity.svg'),
+        myFamily: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myFamily.svg'),
+        myHealth: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myHealth.svg'),
+        mySaved: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-mySaved.svg'),
+        eCom: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-eCom.svg'),
+    },
+    marryBaby: {
+        mySaved: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-mySaved.svg'),
+        myCommunity: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-myCommunity.svg'),
+        myHealth: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-myHealth.svg'),
+    },
+};
+const NavigationCard = ({ type, themeName, className, onClick = () => undefined, }) => {
+    const { t } = useTranslations();
+    const iconUrl = useMemo(() => {
+        var _a, _b;
+        return ((_b = (_a = cardIconUrlMap[themeName]) === null || _a === void 0 ? void 0 : _a[type]) === null || _b === void 0 ? void 0 : _b.call(_a)) || '';
+    }, [type, themeName]);
+    const iconBgColor = useMemo(() => {
+        if (themeName !== 'marryBaby') {
+            return 'transparent';
+        }
+        return iconBgColorMap[type];
+    }, [type, themeName]);
+    function handleCardClick() {
+        onClick(type);
+    }
+    return (React__default.createElement("div", { onClick: handleCardClick, className: `${styles$3.navigationCard} ${className}` },
+        React__default.createElement("div", { className: styles$3.navigationCardIconWrapper, style: {
+                backgroundColor: iconBgColor,
+                backgroundImage: `url("${iconUrl}")`,
+            } }),
+        React__default.createElement("h3", { className: styles$3.navigationCardLabel }, t(`userProfile.nav.card.${type}`))));
+};
+
+const navMenuItemsHelloSites = () => [
+    {
+        key: 'userProfile.nav.menu.accountSettings',
+        icon: CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-settingsWheel.svg'),
+        subMenu: [
+            // {
+            //   key: 'common.profileNavigator.newsletterSubscription',
+            //   link: 'subscriptions',
+            //   disableLocale: [
+            //     'id-ID',
+            //     'ms-MY',
+            //     'km-KH',
+            //     'en-PH',
+            //     'tl-PH',
+            //     'th-TH',
+            //     'my-MM',
+            //     'zh-TW',
+            //     'hi-IN',
+            //   ],
+            // },
+            {
+                key: 'userProfile.nav.menu.password',
+                link: 'password',
+            },
+            {
+                key: 'userProfile.nav.menu.disableAccount',
+                link: 'disable-account',
+                disableLocale: ['hi-IN'],
+            },
+        ],
+    },
+    {
+        key: 'userProfile.nav.menu.help',
+        icon: CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-helpCircle.svg'),
+        link: 'help',
+    },
+];
+const navMenuItemsMarryBaby = () => [
+    {
+        key: 'userProfile.nav.menu.password',
+        icon: CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-lock.svg'),
+        link: 'password',
+    },
+    {
+        key: 'userProfile.nav.menu.logout',
+        icon: CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-logOut.svg'),
+        link: 'logout',
+    },
+];
+
+var styles$2 = {"navMenu":"gn6HmGG","navMenuItem":"FCx8FEM","navMenuItemContent":"zMiRxaE","navMenuItemIcon":"lZ2Z9MQ","navMenuItemDropdown":"rwm-agG","navFooterSubMenu":"qMOscoq"};
+
+const NavMenu = ({ themeName, locale, onClickItem }) => {
+    const [openKey, setOpenKey] = useState('');
+    const navMenuItems = useMemo(() => themeName === 'marryBaby'
+        ? navMenuItemsMarryBaby()
+        : navMenuItemsHelloSites(), [themeName]);
+    function handleParentItemClick(item) {
+        if (item.subMenu) {
+            setOpenKey((k) => {
+                if (k) {
+                    return '';
+                }
+                return item.key;
+            });
+        }
+        else if (onClickItem) {
+            onClickItem(item);
+        }
+    }
+    return (React__default.createElement("div", { className: styles$2.navMenu }, navMenuItems.map((item) => (React__default.createElement(NavMenuItem, { key: item.key, item: item, openKey: openKey, onClickItem: handleParentItemClick, locale: locale })))));
+};
+const NavMenuItem = ({ item, openKey, onClickItem, locale, }) => {
+    var _a;
+    const { t } = useTranslations();
+    if ((_a = item.disableLocale) === null || _a === void 0 ? void 0 : _a.includes(locale)) {
+        return null;
+    }
+    return (React__default.createElement("div", { className: `${styles$2.navMenuItem} nav-menu-item`, "data-is-open": openKey === item.key, key: item.key, "data-has-submenu": !!item.subMenu },
+        React__default.createElement("div", { className: styles$2.navMenuItemContent, onClick: () => onClickItem(item) },
+            item.icon && (React__default.createElement("div", { className: styles$2.navMenuItemIcon, style: { backgroundImage: `url("${item.icon}")` } })),
+            t(item.key),
+            item.subMenu && (React__default.createElement("div", { className: styles$2.navMenuItemDropdown, style: {
+                    '--after-bg': `url(${CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-chevronDown.svg')})`,
+                } }))),
+        item.subMenu && (React__default.createElement("div", { className: styles$2.navFooterSubMenu }, item.subMenu.map((subItem) => (React__default.createElement(NavMenuItem, { key: subItem.key, item: subItem, openKey: openKey, onClickItem: onClickItem, locale: locale })))))));
+};
+
+var styles$1 = {"userNavScreen":"-AZt1au","navigationCardsWrapper":"IvSIfCI","navigationCard":"eahCJov","logoutButton":"XIyViFs"};
+
+var styles = {"userStats":"_4y-O0w3","wrapper":"kO8iNgD","header":"a1d4E10","headerIcon":"Tdguxxf","headerTitle":"-mOxsaU","headerPoints":"yPeDBNZ"};
+
+const rankIconUrlMap = {
+    helloSites: {
+        member: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-member.svg'),
+        ambassador: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-ambassador.svg'),
+        doctor: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-doctor.svg'),
+        expert: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-expert.svg'),
+        influencer: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-influencer.svg'),
+    },
+    marryBaby: {
+        member: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-member.svg'),
+        ambassador: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-ambassador.svg'),
+        doctor: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-doctor.svg'),
+        expert: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-expert.svg'),
+        influencer: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-influencer.svg'),
+    },
+};
+const UserStats = ({ themeName, rank = 'member', numberOfPosts = 0, }) => {
+    const { t } = useTranslations();
+    const iconUrl = useMemo(() => {
+        var _a, _b;
+        return ((_b = (_a = rankIconUrlMap[themeName]) === null || _a === void 0 ? void 0 : _a[rank]) === null || _b === void 0 ? void 0 : _b.call(_a)) || '';
+    }, [rank, themeName]);
+    return (React__default.createElement("div", { className: styles.userStats, "data-user-rank": rank },
+        React__default.createElement("div", { className: styles.wrapper },
+            React__default.createElement("div", { className: styles.header },
+                React__default.createElement("div", { className: styles.headerIcon, style: { backgroundImage: `url("${iconUrl}")` } }),
+                React__default.createElement("h3", { className: styles.headerTitle }, t(`userProfile.userRank.${rank}`)),
+                numberOfPosts > 0 && (React__default.createElement("p", { className: styles.headerPoints },
+                    numberOfPosts,
+                    " ",
+                    t('userProfile.nav.header.count.posts')))))));
+};
+
+const UserProfileNavigation = ({ SSO_URL, UP_BASEPATH = 'user', themeName = 'helloSites', cardUrls = INTERNAL_CARD_URLS, enableCare, enableTogether, enableEcom, enableMySaved, userInfo, togetherApiDomain, userPostsNumber, onClickNavigationCard, onClickMyProfileButton, onClickMenuItem, onClickLogout, isUserProfileNavigatorMenuHidden = false, isMyHealthEnabled = false, locale, }) => {
+    const { t } = useTranslations();
+    const [numberOfPosts, setNumberOfPosts] = useState(userPostsNumber || 0);
+    const isMarryBaby = themeName === 'marryBaby';
+    useEffect(() => {
+        if (userInfo && typeof userPostsNumber === 'undefined') {
+            const token = getCookie('hhg_user_token');
+            if (!!token) {
+                fetch(normalizeLinkSlash(getTogetherUserPostsApiPath(locale, isMarryBaby, togetherApiDomain)), {
+                    headers: {
+                        Authorization: `Bearer ${token}`,
+                    },
+                })
+                    .then((r) => r.json())
+                    .then((r) => {
+                    var _a, _b, _c;
+                    if ((r === null || r === void 0 ? void 0 : r.status) === 1 && ((_a = r === null || r === void 0 ? void 0 : r.data) === null || _a === void 0 ? void 0 : _a.pagination)) {
+                        setNumberOfPosts(((_c = (_b = r === null || r === void 0 ? void 0 : r.data) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.total_items) || 0);
+                    }
+                })
+                    .catch((err) => console.error('Error fetching post number', err));
+            }
+        }
+    }, [
+        locale,
+        userInfo !== null,
+        userPostsNumber,
+        togetherApiDomain,
+        isMarryBaby,
+    ]);
+    const cards = useMemo(() => {
+        let allCards;
+        if (isMarryBaby) {
+            allCards = ['myHealth', 'myCommunity', 'mySaved'];
+        }
+        else {
+            allCards = ['myHealth', 'mySaved', 'myBooking', 'myCommunity', 'eCom'];
+        }
+        return allCards.filter((cardType) => {
+            if (cardType === 'myBooking') {
+                return enableCare;
+            }
+            else if (cardType === 'myCommunity') {
+                return enableTogether;
+            }
+            else if (cardType === 'myHealth') {
+                return isMyHealthEnabled;
+            }
+            else if (cardType === 'eCom') {
+                return enableEcom;
+            }
+            else if (cardType === 'mySaved') {
+                return enableMySaved;
+            }
+            return true;
+        });
+    }, [isMarryBaby, isMyHealthEnabled]);
+    const logoutButton = useMemo(() => {
+        if (themeName === 'marryBaby') {
+            return null;
+        }
+        return (React__default.createElement(Button, { color: "tertiary", icon: React__default.createElement("img", { src: CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-logOut.svg'), width: 15, height: 15, loading: "lazy" }), size: "md", onClick: onClickLogout, className: styles$1.logoutButton }, t('userProfile.nav.menu.logout')));
+    }, [themeName]);
+    const push = (link) => {
+        if (link.startsWith('http') || link.startsWith('/')) {
+            // direct to external link
+            window.location.href = normalizeLink(link);
+        }
+        else if (SSO_URL) {
+            // relative link go to user profile
+            window.location.href = normalizeLink(`${SSO_URL}${UP_BASEPATH}/${link}`);
+        }
+    };
+    const handleClickMenuItem = (item) => {
+        if (item.link === 'logout' && onClickLogout) {
+            onClickLogout();
+        }
+        else if (item.link && !item.subMenu) {
+            if (onClickMenuItem) {
+                onClickMenuItem(item.link);
+            }
+            else {
+                push(item.link);
+            }
+        }
+    };
+    const handleClickCardItem = (item) => {
+        const url = cardUrls[item];
+        if (onClickNavigationCard) {
+            onClickNavigationCard(url);
+        }
+        else {
+            push(url);
+        }
+    };
+    const handleClickViewProfile = () => {
+        if (onClickMyProfileButton) {
+            onClickMyProfileButton();
+        }
+        else {
+            push('profile');
+        }
+    };
+    if (!userInfo) {
+        return null;
+    }
+    return (React__default.createElement("div", { className: styles$1.userNavScreen, "data-theme": themeName },
+        React__default.createElement(NavHeader, { userInfo: userInfo, themeName: themeName, onClickMyProfileButton: handleClickViewProfile }),
+        React__default.createElement(UserStats, { themeName: themeName, rank: "member", numberOfPosts: numberOfPosts }),
+        React__default.createElement("div", { className: styles$1.navigationCardsWrapper }, cards.map((cardType) => (React__default.createElement(NavigationCard, { className: styles$1.navigationCard, key: cardType, themeName: themeName, type: cardType, onClick: handleClickCardItem })))),
+        !isUserProfileNavigatorMenuHidden && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(NavMenu, { themeName: themeName, locale: locale, onClickItem: handleClickMenuItem }),
+            logoutButton))));
+};
+
+export { NavHeader as N, UserProfileNavigation as U, UserStats as a };

package/build/esm/index-e26514ee.js

@@ -0,0 +1,262 @@
+import { _ as __rest } from './tslib.es6-761239c7.js';
+import React__default, { useState } from 'react';
+import styled from '@emotion/styled';
+import { M as MediaQueries } from './utils-f8761b9d.js';
+import { t as theme } from './theme-f18c2351.js';
+import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-16514f4d.js';
+
+const StyledInput = styled.div `
+  position: relative;
+  width: 100%;
+
+  &[data-has-error] {
+    input {
+      border-color: ${theme.colors.red700};
+    }
+  }
+
+  input {
+    width: 100%;
+    padding: 12px 16px;
+    border: solid 1px ${theme.colors.gray200};
+    border-radius: ${theme.borderRadius};
+
+    &:active,
+    &:focus,
+    .focused & {
+      border-color: ${theme.colors.primaryBase};
+      box-shadow: 0px 0px 2px 2px ${theme.colors.primary200};
+    }
+
+    &:disabled {
+      background-color: ${theme.colors.gray100};
+      cursor: not-allowed;
+    }
+  }
+
+  &[data-has-action-icon] {
+    input {
+      padding: 12px 48px 12px 16px;
+    }
+  }
+  &[data-has-display-icon] {
+    input {
+      padding: 12px 16px 12px 48px;
+    }
+  }
+
+  &[data-has-action-icon][data-has-display-icon] {
+    input {
+      padding: 12px 48px;
+    }
+  }
+
+  &[data-size='lg'] {
+    input {
+      font-size: 16px;
+      font-weight: ${theme.sizes.fwRegular};
+      ${MediaQueries.mbDown} {
+        font-size: 22px;
+        line-height: 1.2;
+      }
+
+      ${MediaQueries.mbUp} {
+        font-size: 26px;
+        line-height: 1.2;
+      }
+    }
+  }
+  &[data-size='md'] {
+    input {
+      font-weight: ${theme.sizes.fwRegular};
+      ${MediaQueries.mbDown} {
+        font-size: 14px;
+        line-height: 1.2;
+      }
+
+      ${MediaQueries.mbUp} {
+        font-size: 16px;
+        line-height: 1.2;
+      }
+    }
+  }
+  &[data-size='sm'] {
+    input {
+      font-weight: ${theme.sizes.fwRegular};
+      ${MediaQueries.mbDown} {
+        font-size: 13px;
+        line-height: 1.5;
+      }
+
+      ${MediaQueries.mbUp} {
+        font-size: 13px;
+        line-height: 1.5;
+      }
+    }
+  }
+`;
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const PureInput = React__default.forwardRef((_a, ref) => {
+    var { name, errorMessage, autoComplete = 'off', defaultValue, actionIcon: ActionIcon, displayIcon: DisplayIcon, isDeleteAction, onActionClick, label, placeholder, className, onChange, onKeyPress, isDisabled, CustomInput, size, style, autoFocus, type = 'text', isNumerousKeyboard = false, onFocus, enterKeyHint, nativeOnChange } = _a, other = __rest(_a, ["name", "errorMessage", "autoComplete", "defaultValue", "actionIcon", "displayIcon", "isDeleteAction", "onActionClick", "label", "placeholder", "className", "onChange", "onKeyPress", "isDisabled", "CustomInput", "size", "style", "autoFocus", "type", "isNumerousKeyboard", "onFocus", "enterKeyHint", "nativeOnChange"]);
+    const [localValue, setLocalValue] = useState(defaultValue);
+    const handleOnChange = (v) => {
+        setLocalValue(v);
+        onChange(v);
+    };
+    const handleOnActionClick = () => {
+        var _a;
+        if (isDeleteAction) {
+            setLocalValue('');
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        onActionClick && onActionClick();
+    };
+    return (React__default.createElement(StyledInput, { "data-size": size, className: className, "data-has-action-icon": !!ActionIcon || undefined, "data-has-display-icon": !!DisplayIcon || undefined, "data-has-error": (errorMessage && errorMessage.length > 0) || undefined, style: style },
+        label && (React__default.createElement(Label, { size: "label2", htmlFor: name, className: "inputLabel" }, label)),
+        React__default.createElement("div", { style: { position: 'relative' } },
+            CustomInput ? (CustomInput) : (React__default.createElement("input", Object.assign({ id: name, name: name, placeholder: placeholder, onChange: nativeOnChange !== null && nativeOnChange !== void 0 ? nativeOnChange : ((e) => handleOnChange(e.target.value)), onKeyPress: onKeyPress, type: type, "aria-label": type, disabled: isDisabled, value: localValue, autoComplete: autoComplete, ref: ref, autoFocus: autoFocus, inputMode: isNumerousKeyboard || type === 'number' ? 'numeric' : type, pattern: isNumerousKeyboard ? '[0-9]*' : '.*', onFocus: onFocus, enterKeyHint: enterKeyHint }, other))),
+            DisplayIcon && (React__default.createElement(StyledDisplayIcon, { className: "displayIcon" }, DisplayIcon)),
+            ActionIcon && (React__default.createElement(StyledActionIcon, { className: "actionIcon", onClick: handleOnActionClick }, ActionIcon))),
+        errorMessage && errorMessage.length > 0 && (React__default.createElement(StyledErrorLabel, { className: "errorLabel" }, errorMessage))));
+});
+PureInput.displayName = 'PureInput';
+
+const StyledCheckbox = styled.div `
+  display: flex;
+  cursor: pointer;
+
+  &[data-theme='marryBaby'] {
+    input {
+      width: 20px;
+      height: 20px;
+      border: 1.3px solid ${theme.mbColors.midGray};
+      border-radius: 9px;
+
+      cursor: inherit;
+      transition: border-color 0.4s, box-shadow 0.4s;
+
+      &:hover,
+      &:active {
+        border-color: ${theme.mbColors.cobalt};
+        box-shadow: 0 0 2px 2px ${theme.mbColors.cobalt};
+      }
+
+      &:focus-visible {
+        border: 2px solid ${theme.mbColors.cobalt};
+      }
+
+      &:checked {
+        border: 0;
+        background: ${theme.mbColors.cobalt}
+          url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 4L3.45455 6L8 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
+          no-repeat center center;
+      }
+    }
+
+    label {
+      max-width: 15rem;
+      margin-left: 8px;
+      width: calc(100% - 24px);
+      cursor: inherit;
+      font-weight: 600;
+      font-size: 12px;
+      line-height: 20px;
+      letter-spacing: -0.2px;
+      color: ${theme.mbColors.gray};
+    }
+  }
+  input {
+    width: 20px;
+    height: 20px;
+    border: solid 1px ${theme.colors.gray500};
+    border-radius: 2px;
+
+    cursor: inherit;
+    transition: border-color 0.4s, box-shadow 0.4s;
+
+    &:hover,
+    &:active {
+      border-color: ${theme.colors.primaryBase};
+      box-shadow: 0 0 2px 2px ${theme.colors.primary200};
+    }
+
+    &:focus-visible {
+      border: 2px solid ${theme.colors.primaryActive};
+    }
+
+    &:checked {
+      border: 0;
+      background: ${theme.colors.primaryBase}
+        url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1L4.125 8L1 4.81819' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
+        no-repeat center center;
+    }
+  }
+
+  label {
+    max-width: 15rem;
+    margin-left: 8px;
+    font-weight: ${theme.sizes.fwRegular};
+    width: calc(100% - 24px);
+    cursor: inherit;
+
+    ${MediaQueries.mbDown} {
+      font-size: 14px;
+      line-height: 24px;
+    }
+
+    ${MediaQueries.mbUp} {
+      font-size: 16px;
+      line-height: 22px;
+    }
+  }
+
+  &[data-is-rectangle] > input {
+    position: relative;
+    width: unset;
+    height: unset;
+    padding: 5px 12px;
+    border: 1px solid ${theme.colors.neutral100};
+    border-radius: 32px;
+
+    &::after {
+      color: ${theme.colors.gray800};
+      content: attr(data-label-text);
+      font-size: 13px;
+    }
+    &:checked {
+      border-color: ${theme.colors.primary50};
+      &::after {
+        color: ${theme.colors.primaryBase};
+      }
+    }
+    &:checked {
+      background: ${theme.colors.primary50};
+    }
+  }
+
+  &[data-disabled] {
+    color: ${theme.colors.gray300};
+    cursor: not-allowed;
+    input {
+      border-color: ${theme.colors.gray300};
+      &:hover {
+        border-color: ${theme.colors.gray300};
+        box-shadow: none;
+      }
+    }
+  }
+`;
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Checkbox = ({ label, name, checked, className, isDisabled, onChange, value, isRectangle, inputDataTestId, siteType, }) => {
+    return (React__default.createElement(StyledCheckbox, { className: className, "data-disabled": isDisabled || undefined, "data-is-rectangle": isRectangle || undefined, "data-label-text": label, "data-theme": siteType },
+        React__default.createElement("input", { type: "checkbox", checked: checked, name: name, onChange: () => onChange(value, !checked), disabled: isDisabled, value: value, id: `${name}-${value}`, "data-label-text": label, "data-testid": inputDataTestId }),
+        !isRectangle && React__default.createElement("label", { htmlFor: `${name}-${value}` }, label)));
+};
+
+export { Checkbox as C, PureInput as P };