@hhgtech/hhg-components 1.29.419 → 1.29.420-beta-1

package/build/esm/index-a8f9b1c4.js

@@ -1,352 +0,0 @@
-import React__default, { useMemo, useState, useEffect } from 'react';
-import { u as useTranslations } from './index-0b3eda7a.js';
-import { getCookie } from './miscCookieHelper.js';
-import { C as CommonGAssets } from './index-3f06a39d.js';
-import { e as normalizeLinkSlash, n as normalizeLink } from './normalizeLink-89b3718a.js';
-import { theme } from './miscTheme.js';
-import { A as Avatar } from './index-b4a16d91.js';
-import { b as getTogetherUserPostsApiPath } from './index-21a14625.js';
-import { B as Button } from './index-733da889.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.dataPrivacy',
-                link: 'data-privacy',
-                disableLocale: [
-                    // 'id-ID',
-                    'vi-VN',
-                    'ms-MY',
-                    'km-KH',
-                    'en-PH',
-                    'th-TH',
-                    'my-MM',
-                    'zh-TW',
-                    'hi-IN',
-                    'tl-PH',
-                    // 'vi-VN_MB',
-                ],
-            },
-        ],
-    },
-    {
-        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/index-0603eb9d.js

@@ -1,270 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-e2c2a1ef.js');
-var React = require('react');
-var styled = require('@emotion/styled');
-var utils = require('./utils-f5379515.js');
-var miscTheme = require('./miscTheme.js');
-var index = require('./index-b45631a9.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const StyledInput = styled__default["default"].div `
-  position: relative;
-  width: 100%;
-
-  &[data-has-error] {
-    input {
-      border-color: ${miscTheme.theme.colors.red700};
-    }
-  }
-
-  input {
-    width: 100%;
-    padding: 12px 16px;
-    border: solid 1px ${miscTheme.theme.colors.gray200};
-    border-radius: ${miscTheme.theme.borderRadius};
-
-    &:active,
-    &:focus,
-    .focused & {
-      border-color: ${miscTheme.theme.colors.primaryBase};
-      box-shadow: 0px 0px 2px 2px ${miscTheme.theme.colors.primary200};
-    }
-
-    &:disabled {
-      background-color: ${miscTheme.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: ${miscTheme.theme.sizes.fwRegular};
-      ${utils.MediaQueries.mbDown} {
-        font-size: 22px;
-        line-height: 1.2;
-      }
-
-      ${utils.MediaQueries.mbUp} {
-        font-size: 26px;
-        line-height: 1.2;
-      }
-    }
-  }
-  &[data-size='md'] {
-    input {
-      font-weight: ${miscTheme.theme.sizes.fwRegular};
-      ${utils.MediaQueries.mbDown} {
-        font-size: 14px;
-        line-height: 1.2;
-      }
-
-      ${utils.MediaQueries.mbUp} {
-        font-size: 16px;
-        line-height: 1.2;
-      }
-    }
-  }
-  &[data-size='sm'] {
-    input {
-      font-weight: ${miscTheme.theme.sizes.fwRegular};
-      ${utils.MediaQueries.mbDown} {
-        font-size: 13px;
-        line-height: 1.5;
-      }
-
-      ${utils.MediaQueries.mbUp} {
-        font-size: 13px;
-        line-height: 1.5;
-      }
-    }
-  }
-`;
-
-/**
- * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
- */
-const PureInput = React__default["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 = tslib_es6.__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] = React.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["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["default"].createElement(index.Label, { size: "label2", htmlFor: name, className: "inputLabel" }, label)),
-        React__default["default"].createElement("div", { style: { position: 'relative' } },
-            CustomInput ? (CustomInput) : (React__default["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["default"].createElement(index.StyledDisplayIcon, { className: "displayIcon" }, DisplayIcon)),
-            ActionIcon && (React__default["default"].createElement(index.StyledActionIcon, { className: "actionIcon", onClick: handleOnActionClick }, ActionIcon))),
-        errorMessage && errorMessage.length > 0 && (React__default["default"].createElement(index.StyledErrorLabel, { className: "errorLabel" }, errorMessage))));
-});
-PureInput.displayName = 'PureInput';
-
-const StyledCheckbox = styled__default["default"].div `
-  display: flex;
-  cursor: pointer;
-
-  &[data-theme='marryBaby'] {
-    input {
-      width: 20px;
-      height: 20px;
-      border: 1.3px solid ${miscTheme.theme.mbColors.midGray};
-      border-radius: 9px;
-
-      cursor: inherit;
-      transition: border-color 0.4s, box-shadow 0.4s;
-
-      &:hover,
-      &:active {
-        border-color: ${miscTheme.theme.mbColors.cobalt};
-        box-shadow: 0 0 2px 2px ${miscTheme.theme.mbColors.cobalt};
-      }
-
-      &:focus-visible {
-        border: 2px solid ${miscTheme.theme.mbColors.cobalt};
-      }
-
-      &:checked {
-        border: 0;
-        background: ${miscTheme.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: ${miscTheme.theme.mbColors.gray};
-    }
-  }
-  input {
-    width: 20px;
-    height: 20px;
-    border: solid 1px ${miscTheme.theme.colors.gray500};
-    border-radius: 2px;
-
-    cursor: inherit;
-    transition: border-color 0.4s, box-shadow 0.4s;
-
-    &:hover,
-    &:active {
-      border-color: ${miscTheme.theme.colors.primaryBase};
-      box-shadow: 0 0 2px 2px ${miscTheme.theme.colors.primary200};
-    }
-
-    &:focus-visible {
-      border: 2px solid ${miscTheme.theme.colors.primaryActive};
-    }
-
-    &:checked {
-      border: 0;
-      background: ${miscTheme.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: ${miscTheme.theme.sizes.fwRegular};
-    width: calc(100% - 24px);
-    cursor: inherit;
-
-    ${utils.MediaQueries.mbDown} {
-      font-size: 14px;
-      line-height: 24px;
-    }
-
-    ${utils.MediaQueries.mbUp} {
-      font-size: 16px;
-      line-height: 22px;
-    }
-  }
-
-  &[data-is-rectangle] > input {
-    position: relative;
-    width: unset;
-    height: unset;
-    padding: 5px 12px;
-    border: 1px solid ${miscTheme.theme.colors.neutral100};
-    border-radius: 32px;
-
-    &::after {
-      color: ${miscTheme.theme.colors.gray800};
-      content: attr(data-label-text);
-      font-size: 13px;
-    }
-    &:checked {
-      border-color: ${miscTheme.theme.colors.primary50};
-      &::after {
-        color: ${miscTheme.theme.colors.primaryBase};
-      }
-    }
-    &:checked {
-      background: ${miscTheme.theme.colors.primary50};
-    }
-  }
-
-  &[data-disabled] {
-    color: ${miscTheme.theme.colors.gray300};
-    cursor: not-allowed;
-    input {
-      border-color: ${miscTheme.theme.colors.gray300};
-      &:hover {
-        border-color: ${miscTheme.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["default"].createElement(StyledCheckbox, { className: className, "data-disabled": isDisabled || undefined, "data-is-rectangle": isRectangle || undefined, "data-label-text": label, "data-theme": siteType },
-        React__default["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["default"].createElement("label", { htmlFor: `${name}-${value}` }, label)));
-};
-
-exports.Checkbox = Checkbox;
-exports.PureInput = PureInput;