@hhgtech/hhg-components 1.29.371-beta-1 → 1.29.371

package/build/{index-4dcfebfb.js → index-b8e6bef9.js}

@@ -1,51 +1,51 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9dadba49.js');
+var tslib_es6 = require('./tslib.es6-138ffaff.js');
 var React = require('react');
-var index$9 = require('./index-9484bdb7.js');
-var index$7 = require('./index-f88a2e17.js');
-var index$2 = require('./index-2784aef4.js');
-var normalizeLink = require('./normalizeLink-3d60add3.js');
-var dataTransform = require('./dataTransform-1359b0bf.js');
+var index$9 = require('./index-6c13b501.js');
+var index$7 = require('./index-cff67767.js');
+var index$2 = require('./index-ecaef1d8.js');
+var normalizeLink = require('./normalizeLink-f075b2f2.js');
+var dataTransform = require('./dataTransform-e0804e7a.js');
 var core$1 = require('@hhgtech/icons/core');
+var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
-var index$d = require('./index-9c87413f.js');
-var index$4 = require('./index-cb1cce0f.js');
+var index$d = require('./index-38d5d806.js');
+var index$4 = require('./index-bdc3bacc.js');
 var throttle = require('lodash/throttle');
-var index$c = require('./index-0a4fd7ba.js');
+var index$c = require('./index-c58ea433.js');
 require('@mantine/dates');
-var index$3 = require('./index-20825409.js');
-require('./useMantineLocale-49173999.js');
-var index = require('./index-7614d9bd.js');
-var index$b = require('./index-c35fd147.js');
-require('./index.styles-248e239b.js');
-require('./translationsContext-93ca388c.js');
+var index$3 = require('./index-f0bc5c42.js');
+require('./useMantineLocale-6ce9ece4.js');
+var index = require('./index-4d438aef.js');
+var index$a = require('./index-e4be8a55.js');
+require('./index.styles-13b6e8be.js');
+require('./translationsContext-5634aceb.js');
 require('@mantine/hooks');
-var utils = require('./utils-0a613d40.js');
-require('./other-ef968661.js');
-require('./index-3a4449e3.js');
-var constants = require('./constants-a25e9f4b.js');
+var utils = require('./utils-1606e69b.js');
+require('./other-677461ab.js');
+require('./index-d09aa821.js');
+var constants = require('./constants-23b6f32c.js');
 var styled = require('@emotion/styled');
-var navigationProfileButton = require('./index-8c6f6424.js');
-var store = require('./store-524bf308.js');
-var index$1 = require('./index-c19f33ea.js');
-var togetherComponentGlobalContext = require('./utils-11ddac2e.js');
+var navigationProfileButton = require('./index-d533ad04.js');
+var store = require('./store-97cd2d27.js');
+var index$1 = require('./index-f780c6d7.js');
+var togetherComponentGlobalContext = require('./utils-c6f8b687.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
-var constants$1 = require('./constants-b68c6a30.js');
+var constants$1 = require('./constants-c15f043a.js');
 var miscTheme = require('./miscTheme.js');
-var index$6 = require('./index-9f1b20a4.js');
-var index$5 = require('./index-905f3bd7.js');
-var useIsInit = require('./useIsInit-016fa893.js');
+var index$6 = require('./index-f4078710.js');
+var index$5 = require('./index-4745b5f2.js');
+var useIsInit = require('./useIsInit-628ffe42.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
 var dayjs = require('dayjs');
 var relativeTime = require('dayjs/plugin/relativeTime');
-var index$8 = require('./index-63bb572d.js');
-var other = require('@hhgtech/icons/other');
+var index$8 = require('./index-673a8776.js');
 var formatString = require('string-format');
-var index$a = require('./index-61010415.js');
-var Locale = require('./Locale-c10909ec.js');
+var index$b = require('./index-460c845b.js');
 var debounce = require('lodash/debounce');
-var core$2 = require('./core-6dc93bba.js');
+var Locale = require('./Locale-23dce5ce.js');
+var core$2 = require('./core-0ceeed31.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -240,11 +240,10 @@ function HamburgerIcon({ siteType, enableSearch, className }) {
         React__default["default"].createElement("path", { d: "M3.35 15a.65.65 0 0 1 .65-.65h10a.65.65 0 1 1 0 1.3H4a.65.65 0 0 1-.65-.65m0-6A.65.65 0 0 1 4 8.35h16a.65.65 0 1 1 0 1.3H4A.65.65 0 0 1 3.35 9", fill: "#3E3F58" })));
 }
 
-// import { StyledMenuPopupWrapperClass } from '../../atoms/PopupWrapper/index.styled'
 const StyledMasterMenuContainer = styled__default["default"].div `
   position: fixed;
   z-index: 201;
-  top: calc(100% + 1px);
+  top: calc(100% - 1px);
   width: 100%;
   height: calc(100vh - var(--header-bottom));
   overflow-x: hidden;
@@ -258,20 +257,6 @@ const StyledMasterMenuContainer = styled__default["default"].div `
     position: unset;
   }
 `;
-// Desktop
-// export const StyledMenuPopupWrapper = styled.div`
-//   position: fixed;
-//   z-index: ${Z_INDEX.menuCategoryPopupWrapper};
-//   top: 69px;
-//   left: 0;
-//   width: 100%;
-//   height: 100%;
-//   align-items: center;
-//   background-color: transparent;
-//   &[data-is-display='false'] {
-//     display: none;
-//   }
-// `
 styled__default["default"].div `
   padding: 16px;
   padding-bottom: 12px;
@@ -300,6 +285,9 @@ const StyledWrapper = styled__default["default"].div `
     width: 0;
     display: none;
   }
+`;
+const StyleWrapperSearch = styled__default["default"].div `
+  padding: 0 16px;
 `;
 
 const Phone = (_a) => {
@@ -310,7 +298,6 @@ const Phone = (_a) => {
 
 const StyledItemGridLeft = styled__default["default"].div `
   padding-right: 1rem;
-  margin-top: 10px;
   background: #ffffff;
   padding: 5px 15px;
   ${utils.MediaQueries.mbUp} {
@@ -1553,13 +1540,13 @@ const VideoSpotlights = ({ spotlightsList = [], layout = 'default', }) => {
     return (React__default["default"].createElement(Spotlights, { title: t('home.navigator.menu.lastestVideos') }, spotlightsList.length !== 0 ? (React__default["default"].createElement(StyledContainerItems, null, spotlightsList === null || spotlightsList === void 0 ? void 0 : spotlightsList.slice(0, 4).map((video, index) => (React__default["default"].createElement(index$7.VideoItem, { key: index, data: Object.assign(Object.assign({}, video), { type: index$9.VideoType.SHORTS }), layout: layout === 'default' ? 'overlay' : 'horizon', redirectToLandingPage: true, dataEventCategory: "Hamburger Navigation", dataEventAction: `Video Click ${index + 1}` }))))) : (React__default["default"].createElement(SpotlightNoData, { title: t('home.navigator.menu.category.noDatas.title'), description: t('home.navigator.menu.category.noDatas.description'), link: `${statics.VIDEO_URL_FE}/`, cta: t('home.navigator.menu.category.noDatas.cta'), icon: index$3.CommonGAssets.getAssetPath('Spotlight.svg') }))));
 };
 
-const MenuServiceList = ({ closePopup, menuItems = [] }) => {
+const MenuServiceList = ({ closePopup, menuItems = [], projectType, isHomepage = false, }) => {
     var _a, _b;
-    const { 
-    // siteType,
-    ssrMenuContent: { categories, healthTools, care, together, ecom, videos }, activeMenuService, configs: { statics }, locale, } = React.useContext(NavigationContext);
+    const { siteType, ssrMenuContent: { categories, healthTools, care, together, ecom, videos }, activeMenuService, configs: { statics }, locale, } = React.useContext(NavigationContext);
     const { t } = index$4.useTranslations();
     return (React__default["default"].createElement(StyledMasterMenuContainer, { id: 'categories-menu' },
+        !isHomepage && (React__default["default"].createElement(StyleWrapperSearch, null,
+            React__default["default"].createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: false, isRedirectSearchPage: true }))),
         React__default["default"].createElement(StyledWrapper, null,
             React__default["default"].createElement(Categories, { UrlFE: statics.HOME_PAGE_URL, titleBtnViewMore: t('home.navigator.menuItem.allCategories'), menuItems: menuItems, headingTitle: t('home.navigator.menuItem.healthCategories'), onClosePopup: closePopup, activeItem: activeMenuService }),
             activeMenuService === 'categories' && (React__default["default"].createElement(CategorySpotlights, { spotlightsList: (categories === null || categories === void 0 ? void 0 : categories.spotlights) || [], hrefViewMore: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}/spotlight/` })),
@@ -1570,10 +1557,8 @@ const MenuServiceList = ({ closePopup, menuItems = [] }) => {
             activeMenuService === 'video' && (React__default["default"].createElement(VideoSpotlights, { spotlightsList: videos === null || videos === void 0 ? void 0 : videos.spotlights, layout: "stack" })))));
 };
 
-const HamburgerMenu = ({ menuItems }) => {
-    const { siteType,
-    // configs: { enableSearchBar },
-     } = React.useContext(NavigationContext);
+const HamburgerMenu = ({ menuItems, isHomepage, projectType }) => {
+    const { siteType } = React.useContext(NavigationContext);
     const { containerRef, onContainerFocus, onContainerBlur, onButtonMouseDown, onClose, } = navigationProfileButton.useCSSFocusPopupHelper();
     return (React__default["default"].createElement(DisplayWrapper, { mediaQueryKey: "mbDown" },
         React__default["default"].createElement("header", { className: styles$2.menuContainer },
@@ -1581,7 +1566,7 @@ const HamburgerMenu = ({ menuItems }) => {
                 React__default["default"].createElement("div", { className: styles$2.menuIconWrapper, onMouseDown: onButtonMouseDown, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": "Hamburger Navigation URL" },
                     React__default["default"].createElement(ClosePopupIcon, { className: "mobile-close-icon" }),
                     React__default["default"].createElement(HamburgerIcon, { siteType: siteType, enableSearch: false, className: "mobile-hamburger-icon" })),
-                React__default["default"].createElement(MenuServiceList, { menuItems: menuItems, closePopup: onClose })))));
+                React__default["default"].createElement(MenuServiceList, { menuItems: menuItems, isHomepage: isHomepage, projectType: projectType, closePopup: onClose })))));
 };
 
 const TOGETHER_PATHS = {
@@ -1768,6 +1753,13 @@ const StyledProfileNavGroup = styled__default["default"].div `
     margin-left: 0;
     gap: 8px;
   }
+
+  .ai-doctor-nav-item {
+    .ai-doctor-btn {
+      border-radius: 28px;
+      border: 1px solid ${miscTheme.theme.colors.neutral200};
+    }
+  }
 `;
 const StyledWrapMenuItems = styled__default["default"].div `
   display: flex;
@@ -1778,7 +1770,19 @@ const StyledWrapMenuItems = styled__default["default"].div `
   }
 `;
 const StyleWrapperNavigtionSearch = styled__default["default"].div `
-  padding: 0 12px 6px;
+  padding: 0 16px 6px;
+`;
+const StyleButtonAiChat = styled__default["default"](index$a.Button) `
+  border-radius: 28px;
+  border: 1px solid ${miscTheme.theme.colors.neutral200};
+  ${utils.MediaQueries.mbDown} {
+    padding: 0px 12px 0px 10px;
+    height: 36px;
+    color: ${miscTheme.theme.colors.gray900};
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 22px;
+  }
 `;
 
 const InitialCart = () => (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", width: "512", height: "512", style: {
@@ -2034,10 +2038,10 @@ const BtnClosePopup = ({ onClosePopup }) => {
 
 const PopupWrapper = ({ onClosePopup, isDisplay, children, isNavMenu, hideCloseBtn, }) => {
     return (React__default["default"].createElement("div", { className: "hhgcomp-navigation-popupwrapper-menuwrapper top-menu-health-tools", "data-is-display": !!isDisplay, "data-is-nav-menu": !!isNavMenu },
-        React__default["default"].createElement(index$a.Container, { className: "hhgcomp-navigation-popupwrapper-menuwrapper-child" },
+        React__default["default"].createElement(index$b.Container, { className: "hhgcomp-navigation-popupwrapper-menuwrapper-child" },
             !hideCloseBtn && (React__default["default"].createElement("div", { className: styles.container },
                 React__default["default"].createElement(BtnClosePopup, { onClosePopup: onClosePopup }))),
-            React__default["default"].createElement(index$a.Container, { className: styles.gridContainer }, children))));
+            React__default["default"].createElement(index$b.Container, { className: styles.gridContainer }, children))));
 };
 
 const MenuCareList = ({ careSpecialties = [], isOpen, onClose, spotlights = [], }) => {
@@ -2153,7 +2157,7 @@ const ItemNavButton = ({ item, color = 'blue' }) => {
                 });
             }
             if (item.id === 'care') {
-                Promise.resolve().then(function () { return require('./doctor-3eb066c0.js'); }).then((data) => {
+                Promise.resolve().then(function () { return require('./doctor-4a45ea00.js'); }).then((data) => {
                     if (data === null || data === void 0 ? void 0 : data.default)
                         setIconJson(() => data.default);
                 });
@@ -2183,7 +2187,7 @@ const ItemNavButton = ({ item, color = 'blue' }) => {
                 background: 'transparent',
             };
     return (React__default["default"].createElement(Tag, { tabIndex: 0, href: item.link, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, className: styles$1.itemNavButton, ref: containerRef },
-        React__default["default"].createElement(index$b.Button, { variant: "light", leftIcon: Lottie && iconJson ? (linkOnly ? (React__default["default"].createElement(Lottie, { animationData: iconJson, loop: true, autoplay: true, style: {
+        React__default["default"].createElement(index$a.Button, { variant: "light", leftIcon: Lottie && iconJson ? (linkOnly ? (React__default["default"].createElement(Lottie, { animationData: iconJson, loop: true, autoplay: true, style: {
                     width: 28,
                     height: 28,
                 } })) : (React__default["default"].createElement("a", { href: normalizeLink.normalizeLinkSlash(item.link + '/') },
@@ -2239,7 +2243,7 @@ const StyleInput = styled__default["default"](index$c.Input) `
   }
 `;
 
-const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, }) => {
+const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, isRedirectSearchPage = false, }) => {
     const { locale, configs: { statics }, siteType, } = React.useContext(NavigationContext);
     const [keyword, setKeyword] = React.useState('');
     const [eventCategoryTracking, setEventCategoryTracking] = React.useState('Search From Another Page');
@@ -2275,7 +2279,7 @@ const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, })
             setKeyword(searchValue);
         }
     }, []);
-    return isMobile && !isHomepage ? (React__default["default"].createElement(index$b.Button, { variant: "tertiary", style: {
+    return isMobile && !isHomepage ? (React__default["default"].createElement(index$a.Button, { variant: "tertiary", style: {
             padding: '6px',
         }, size: "sm", onClick: () => {
             goToSearchPage('');
@@ -2292,12 +2296,12 @@ const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, })
             }), onChange: setKeyword, value: keyword, onKeyDown: (e) => e.key === 'Enter' &&
             goToSearchPage(e.target.value), type: "search", onFocus: (e) => {
             e.preventDefault();
-            if (isMobile && isHomepage) {
+            if ((isMobile && isHomepage) || isRedirectSearchPage) {
                 goToSearchPage('');
             }
         }, rightSection: keyword ? (React__default["default"].createElement("div", { className: "close-icon-wrapper", onClick: () => setKeyword(''), "data-event-category": "Search Page", "data-event-action": "Delete Search" },
             React__default["default"].createElement(core$1.Close, { size: 17, color: miscTheme.theme.colors.white }))) : (''), icon: React__default["default"].createElement("a", { "data-event-category": "Search Button", "data-event-action": "Click", className: "search-icon-btn", onClick: () => {
-                if (isMobile && isHomepage) {
+                if ((isMobile && isHomepage) || isRedirectSearchPage) {
                     goToSearchPage('');
                 }
             } },
@@ -2308,10 +2312,10 @@ const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, })
 };
 
 const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent, subHead, projectType, }) => {
-    var _a;
+    var _a, _b;
     const { siteType, isMobile = false, locale, sitewideBanner, sitewideBannerShown = true, sponsorComponent, isHomepage = false, onBookingClick, currentUrl, onLoginClick, cartNumber, 
     // ssrMenuContent: { categories, healthTools, care, together },
-    configs: { statics, enableNavCareBooking, enableSearchBar,
+    configs: { statics, enableNavCareBooking, enableSearchBar, enableNavChatbotAi, enableAppIntroPage,
     // enableNavVideo,
     // enableNavCare,
     // enableProfileMyHealth,
@@ -2325,7 +2329,6 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
     const { t } = index$4.useTranslations();
     const { SSO_URL, HOME_PAGE_URL } = statics;
     const isSponsored = !!sponsorComponent;
-    const enableAppIntroPage = React.useMemo(() => locale === Locale.LOCALE.Vietnam && siteType === 'helloSites', [locale]);
     const [isCollapsed, setIsCollapsed] = React.useState(false);
     const scrollY = React.useRef(47);
     const headerRef = React.useRef(null);
@@ -2384,7 +2387,7 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
         sitewideBanner,
         React__default["default"].createElement(StyledHeader, { "data-site-type": siteType },
             React__default["default"].createElement(StyledLeftGroup, { "data-site-type": siteType },
-                isMobile && React__default["default"].createElement(HamburgerMenu, { menuItems: menuItems }),
+                isMobile && (React__default["default"].createElement(HamburgerMenu, { menuItems: menuItems, isHomepage: isHomepage, projectType: projectType })),
                 logoComponent || (React__default["default"].createElement("a", { style: {
                         flexShrink: 0,
                     }, href: HOME_PAGE_URL },
@@ -2395,9 +2398,6 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                 !isMobile && (React__default["default"].createElement(React__default["default"].Fragment, null, siteType === 'marryBaby' ? (React__default["default"].createElement(NavigationMenu, { menuItems: menuItems })) : (enableSearchBar && (React__default["default"].createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile })))))),
             React__default["default"].createElement(StyledRightGroup, { "data-site-type": siteType },
                 !isMobile && siteType !== 'marryBaby' && (React__default["default"].createElement(NavigationMenu, { menuItems: menuItems.filter((m) => m.id !== 'ecom' && m.id !== 'care') })),
-                (isMobile || siteType === 'marryBaby') &&
-                    enableSearchBar &&
-                    !isHomepage && (React__default["default"].createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile })),
                 React__default["default"].createElement(StyledProfileNavGroup, null,
                     !isMobile && (React__default["default"].createElement(React__default["default"].Fragment, null,
                         ecomNavItem ? (React__default["default"].createElement(ItemNavButton, { item: ecomNavItem, color: 'transparent' })) : null,
@@ -2408,8 +2408,8 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                             [theme.fn.largerThan('sm')]: {
                                 order: 10,
                             },
-                        }) },
-                        React__default["default"].createElement(index$b.Button, { variant: "primary", size: isMobile ? 'sm' : 'md', leftIcon: React__default["default"].createElement(core$1.Download, { size: 20, color: "currentColor" }), styles: (theme) => ({
+                        }), className: "download-app-nav-item" },
+                        React__default["default"].createElement(index$a.Button, { variant: "primary", size: isMobile ? 'sm' : 'md', leftIcon: React__default["default"].createElement(core$1.Download, { size: 20, color: "currentColor" }), styles: (theme) => ({
                                 root: {
                                     [theme.fn.smallerThan('sm')]: {
                                         paddingLeft: 8,
@@ -2425,6 +2425,10 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                             ? 'home.navigator.app'
                             : 'home.navigator.downloadApp')))),
                     languageMenu,
+                    enableNavChatbotAi && (React__default["default"].createElement(core.Box, { component: "a", href: `${normalizeLink.getCurrentBaseUrl(locale)}/ai-doctor`, "data-event-category": "Chatbot AI", "data-event-action": "Open", "data-event-label": "Hamburger Navigation", className: "ai-doctor-nav-item" },
+                        React__default["default"].createElement(StyleButtonAiChat, { variant: "tertiary", leftIcon: React__default["default"].createElement(other.ChatAi, { size: 18, color: "#2F8AF2" }), size: "md", className: "ai-doctor-btn" }, (_b = index$2.LOCALE_SPECS[locale]) === null || _b === void 0 ? void 0 :
+                            _b.SITE_NAME,
+                            " AI"))),
                     React__default["default"].createElement(navigationProfileButton.NavigationProfileButton, { userInfo: userInfo, siteType: siteType, onLoginClick: onLoginClick || goToLogin, 
                         // SSO_URL={normalizeLink(statics.SSO_URL)}
                         currentUrl: currentUrl, onLogout: onLogout, isLoading: isUserLoading, locale: locale, enableAppIntroPage: enableAppIntroPage, isMobile: isMobile }),
@@ -2449,8 +2453,8 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
             : null,
         subHead && subHead));
 };
-const NavigtionSearch = ({ siteType, projectType, isMobile = false, isHomepage = false, }) => (React__default["default"].createElement(DisplayWrapper, { mediaQueryKey: "mbUp", className: `${siteType === 'marryBaby' ? 'marry-baby' : ''} ${isHomepage ? 'block-show' : ''}` },
-    React__default["default"].createElement(SearchInput, { id: "desktop", projectType: projectType, isMobile: isMobile, isHomepage: isHomepage })));
+const NavigtionSearch = ({ siteType, projectType, isMobile = false, isHomepage = false, isRedirectSearchPage = false, }) => (React__default["default"].createElement(DisplayWrapper, { mediaQueryKey: "mbUp", className: `${siteType === 'marryBaby' ? 'marry-baby' : ''} ${isHomepage ? 'block-show' : ''}` },
+    React__default["default"].createElement(SearchInput, { id: "desktop", projectType: projectType, isMobile: isMobile, isHomepage: isHomepage, isRedirectSearchPage: isRedirectSearchPage })));
 const NavigationMenu = ({ menuItems }) => {
     const { siteType, locale, ssrMenuContent: { categories, healthTools, care, together, videos }, } = React.useContext(NavigationContext);
     return (React__default["default"].createElement(DisplayWrapper, { mediaQueryKey: "mbUp", style: { height: '100%' } },

package/build/{index-cb1cce0f.js → index-bdc3bacc.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var translationsContext = require('./translationsContext-93ca388c.js');
+var translationsContext = require('./translationsContext-5634aceb.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/build/{index-bd7482d9.js → index-c176a8cd.js}

@@ -1,23 +1,23 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9dadba49.js');
+var tslib_es6 = require('./tslib.es6-138ffaff.js');
 var React = require('react');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
-var index$2 = require('./index-0a4fd7ba.js');
+var index$2 = require('./index-c58ea433.js');
 require('@mantine/dates');
-require('./index-2784aef4.js');
-require('./index-9484bdb7.js');
-var index$1 = require('./index-20825409.js');
-require('./useMantineLocale-49173999.js');
-var index$3 = require('./index-7614d9bd.js');
-require('./index-c35fd147.js');
-require('./index.styles-248e239b.js');
-var index = require('./index-cb1cce0f.js');
+require('./index-ecaef1d8.js');
+require('./index-6c13b501.js');
+var index$1 = require('./index-f0bc5c42.js');
+require('./useMantineLocale-6ce9ece4.js');
+var index$3 = require('./index-4d438aef.js');
+require('./index-e4be8a55.js');
+require('./index.styles-13b6e8be.js');
+var index = require('./index-bdc3bacc.js');
 require('@mantine/hooks');
-require('./utils-0a613d40.js');
-require('./other-ef968661.js');
-require('./index-3a4449e3.js');
+require('./utils-1606e69b.js');
+require('./other-677461ab.js');
+require('./index-d09aa821.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-065caaac.js → index-c3ef55be.js}

@@ -3,8 +3,8 @@
 var React = require('react');
 var miscTheme = require('./miscTheme.js');
 var styled = require('@emotion/styled');
-var index = require('./index-0f3dc287.js');
-var index$1 = require('./index-d9c7521d.js');
+var index = require('./index-f534c2f7.js');
+var index$1 = require('./index-ccb56315.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-0a4fd7ba.js → index-c58ea433.js}

@@ -1,24 +1,24 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9dadba49.js');
+var tslib_es6 = require('./tslib.es6-138ffaff.js');
 var React = require('react');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
 var hooks = require('@mantine/hooks');
-var index$2 = require('./index-20825409.js');
-var useScreenSize = require('./useScreenSize-1eb9ed8c.js');
+var index$2 = require('./index-f0bc5c42.js');
+var useScreenSize = require('./useScreenSize-d6cfd256.js');
 var styled = require('@emotion/styled');
 var carousel = require('@mantine/carousel');
-var index$3 = require('./index-7614d9bd.js');
-require('./index-9484bdb7.js');
+var index$3 = require('./index-4d438aef.js');
+require('./index-6c13b501.js');
 var miscTheme = require('./miscTheme.js');
-var utils = require('./utils-0a613d40.js');
-var useMantineLocale = require('./useMantineLocale-49173999.js');
-var index = require('./index-2784aef4.js');
-var index$1 = require('./index-c35fd147.js');
-var Locale = require('./Locale-c10909ec.js');
+var utils = require('./utils-1606e69b.js');
+var useMantineLocale = require('./useMantineLocale-6ce9ece4.js');
+var index = require('./index-ecaef1d8.js');
+var index$1 = require('./index-e4be8a55.js');
+var Locale = require('./Locale-23dce5ce.js');
 var cn = require('classnames');
-var useUniqueId = require('./useUniqueId-76486840.js');
+var useUniqueId = require('./useUniqueId-9945fa7a.js');
 var constantsSite = require('./constantsSite.js');
 var core$1 = require('@hhgtech/icons/core');
 
@@ -1384,32 +1384,9 @@ const CaretDown = (props) => (React__namespace.createElement("svg", Object.assig
     React__namespace.createElement("path", { d: "M4.81428 7.53044L7.64065 10.3568C7.83849 10.5546 8.15877 10.5546 8.3561 10.3568L11.1825 7.53044C11.5012 7.21168 11.2756 6.66675 10.8247 6.66675H5.172C4.72118 6.66675 4.49552 7.21168 4.81428 7.53044Z" })));
 
 const PhoneForwardRef = (props, ref) => {
-    const { isError, defaultCountry, countries = countriesDefault, countryCallingCodeEditable = false, defaultValue, value: valueProps, onChange: onChangeProps, flagComponent: flagComponentProps, arrowComponent: arrowComponentProps, className } = props, inputProps = tslib_es6.__rest(props, ["isError", "defaultCountry", "countries", "countryCallingCodeEditable", "defaultValue", "value", "onChange", "flagComponent", "arrowComponent", "className"]);
+    const { isError, defaultCountry, countries = countriesDefault, countryCallingCodeEditable = false, defaultValue, value: valueProps, onChange: onChangeProps, className } = props, inputProps = tslib_es6.__rest(props, ["isError", "defaultCountry", "countries", "countryCallingCodeEditable", "defaultValue", "value", "onChange", "className"]);
     const [value, setValue] = React.useState(defaultValue || valueProps);
     const [PhoneInputUtils, setPhoneInputUtils] = React.useState(null);
-    const flagComponent = React.useCallback((props) => {
-        if (!PhoneInputUtils) {
-            return;
-        }
-        if (flagComponentProps) {
-            return flagComponentProps(props);
-        }
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { country, countryName, flagUrl } = props, restProps = tslib_es6.__rest(props, ["country", "countryName", "flagUrl"]);
-        const callingCode = country
-            ? `+${PhoneInputUtils.getCountryCallingCode(country)}`
-            : '';
-        return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
-            React__namespace["default"].createElement(Flag, Object.assign({ country: country, title: countryName }, restProps)),
-            React__namespace["default"].createElement("span", { className: cn__default["default"](styles.callingCode, 'PhoneInputCountryIconCallingCode') }, callingCode)));
-    }, [flagComponentProps, PhoneInputUtils]);
-    const arrowComponent = React.useCallback(() => {
-        if (arrowComponentProps) {
-            return arrowComponentProps();
-        }
-        return (React__namespace["default"].createElement("div", { className: cn__default["default"](styles.arrowSelect, 'PhoneInputArrowContainer') },
-            React__namespace["default"].createElement(CaretDown, null)));
-    }, [arrowComponentProps]);
     const onChange = (val) => {
         setValue(val);
         onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(val);
@@ -1429,7 +1406,21 @@ const PhoneForwardRef = (props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     , Object.assign({ 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ref: ref, defaultValue: defaultValue, value: value, onChange: onChange, countries: countries, defaultCountry: defaultCountry, countryCallingCodeEditable: countryCallingCodeEditable, displayInitialValueAsLocalNumber: true, className: cn__default["default"](styles.phoneInput, { isError, [styles.error]: isError }, className), flagUrl: undefined, flagComponent: flagComponent, countrySelectProps: { arrowComponent } }, inputProps)));
+        ref: ref, defaultValue: defaultValue, value: value, onChange: onChange, countries: countries, defaultCountry: defaultCountry, countryCallingCodeEditable: countryCallingCodeEditable, displayInitialValueAsLocalNumber: true, className: cn__default["default"](styles.phoneInput, { isError, [styles.error]: isError }, className), flagUrl: undefined, flagComponent: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { country, countryName, flagUrl } = props, restProps = tslib_es6.__rest(props, ["country", "countryName", "flagUrl"]);
+            const callingCode = country
+                ? `+${PhoneInputUtils.getCountryCallingCode(country)}`
+                : '';
+            return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
+                React__namespace["default"].createElement(Flag, Object.assign({ country: country, title: countryName }, restProps)),
+                React__namespace["default"].createElement("span", { className: cn__default["default"](styles.callingCode, 'PhoneInputCountryIconCallingCode') }, callingCode)));
+        }, countrySelectProps: {
+            arrowComponent: () => {
+                return (React__namespace["default"].createElement("div", { className: cn__default["default"](styles.arrowSelect, 'PhoneInputArrowContainer') },
+                    React__namespace["default"].createElement(CaretDown, null)));
+            },
+        } }, inputProps)));
 };
 const Phone = React.forwardRef(PhoneForwardRef);
 

package/build/{index-d49a87a2.js → index-c86a7a5e.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-c35fd147.js');
+var index = require('./index-e4be8a55.js');
 var styled = require('@emotion/styled');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-aa889988.js → index-c951bf18.js}

@@ -1,27 +1,27 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9dadba49.js');
+var tslib_es6 = require('./tslib.es6-138ffaff.js');
 var React = require('react');
 var core = require('@mantine/core');
 var form = require('@mantine/form');
-var index$3 = require('./index-0a4fd7ba.js');
-var index$4 = require('./index-0b5713f1.js');
-var index$5 = require('./index-7614d9bd.js');
-require('./index-c35fd147.js');
-require('./index.styles-248e239b.js');
-var index = require('./index-cb1cce0f.js');
+var index$3 = require('./index-c58ea433.js');
+var index$4 = require('./index-3550236c.js');
+var index$5 = require('./index-4d438aef.js');
+require('./index-e4be8a55.js');
+require('./index.styles-13b6e8be.js');
+var index = require('./index-bdc3bacc.js');
 require('@mantine/hooks');
-require('./useMantineLocale-49173999.js');
-require('./index-9484bdb7.js');
-require('./index-20825409.js');
-require('./utils-0a613d40.js');
-require('./index-2784aef4.js');
-require('./other-ef968661.js');
-require('./index-3a4449e3.js');
-var constants = require('./constants-7cea9386.js');
-var index$1 = require('./index-f12bb349.js');
-var index$2 = require('./index-bd7482d9.js');
-var Locale = require('./Locale-c10909ec.js');
+require('./useMantineLocale-6ce9ece4.js');
+require('./index-6c13b501.js');
+require('./index-f0bc5c42.js');
+require('./utils-1606e69b.js');
+require('./index-ecaef1d8.js');
+require('./other-677461ab.js');
+require('./index-d09aa821.js');
+var constants = require('./constants-22dca8dd.js');
+var index$1 = require('./index-4c3bd443.js');
+var index$2 = require('./index-c176a8cd.js');
+var Locale = require('./Locale-23dce5ce.js');
 var other = require('@hhgtech/icons/other');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-d9c7521d.js → index-ccb56315.js}

@@ -1,22 +1,22 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9dadba49.js');
+var tslib_es6 = require('./tslib.es6-138ffaff.js');
 var React = require('react');
-require('./index-0a4fd7ba.js');
+require('./index-c58ea433.js');
 require('@mantine/core');
 require('@mantine/dates');
-require('./index-2784aef4.js');
-require('./index-9484bdb7.js');
-require('./index-20825409.js');
-require('./useMantineLocale-49173999.js');
-var index = require('./index-7614d9bd.js');
-require('./index-c35fd147.js');
-require('./index.styles-248e239b.js');
-require('./translationsContext-93ca388c.js');
+require('./index-ecaef1d8.js');
+require('./index-6c13b501.js');
+require('./index-f0bc5c42.js');
+require('./useMantineLocale-6ce9ece4.js');
+var index = require('./index-4d438aef.js');
+require('./index-e4be8a55.js');
+require('./index.styles-13b6e8be.js');
+require('./translationsContext-5634aceb.js');
 require('@mantine/hooks');
-require('./utils-0a613d40.js');
-require('./other-ef968661.js');
-require('./index-3a4449e3.js');
+require('./utils-1606e69b.js');
+require('./other-677461ab.js');
+require('./index-d09aa821.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-7fc147de.js → index-cd6eedda.js}

@@ -2,12 +2,12 @@
 
 var React = require('react');
 var core = require('@mantine/core');
-var utils = require('./utils-0a613d40.js');
+var utils = require('./utils-1606e69b.js');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var animation = require('./animation-9fae6f63.js');
-var index = require('./index-7614d9bd.js');
+var animation = require('./animation-a0995558.js');
+var index = require('./index-4d438aef.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }