@hhgtech/hhg-components 1.29.500-beta-2 → 1.29.500-beta-4

package/build/esm/{index-5cc78b62.js → index-4eb0c445.js}

@@ -1,54 +1,56 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-bea8d7ce.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-7bca3b0f.js';
 import * as React from 'react';
 import React__default, { useRef, useState, useEffect, useImperativeHandle, useMemo, Fragment, useCallback, forwardRef, memo, createContext, useContext } from 'react';
-import { R as Radio, a as Carousel } from './index-abf57548.js';
-import { Stack, Group, createStyles, getStylesRef, Box, Badge, rem, Divider, clsx, Button as Button$2, AspectRatio, Grid } from '@mantine/core';
+import { R as Radio, a as Carousel } from './index-93bffdf2.js';
+import { Stack, Group, createStyles, getStylesRef, Box, Badge, rem, Divider, clsx, Button as Button$2, AspectRatio, Modal, Grid } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE_SPECS, F as FAVICONS } from './index-d7537411.js';
-import './index-9533e446.js';
-import { C as CommonGAssets } from './index-7da03926.js';
-import './index-b5fb218c.js';
-import { T as Text } from './index-f485352b.js';
-import { B as Button$1 } from './index-596d9f61.js';
-import './index-5783e827.js';
-import './index.styles-a42bb23d.js';
-import './translationsContext-8f354b67.js';
+import { L as LOCALE_SPECS, F as FAVICONS, Z as ZINDEX_SSO } from './index-94aa403c.js';
+import './index-34d565a2.js';
+import { C as CommonGAssets } from './index-61e78b1a.js';
+import './index-16413c5a.js';
+import { T as Text } from './index-717e6963.js';
+import { B as Button$1 } from './index-84fd862a.js';
+import './index-1338733a.js';
+import './index.styles-6efb573e.js';
+import './translationsContext-82f42174.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-3cf2fae9.js';
-import './index-cbd42af5.js';
-import { i as isInternalLink } from './index-d5bb9b6d.js';
+import { M as MediaQueries } from './utils-1a7cb8db.js';
+import './index-ebec975c.js';
+import { i as isInternalLink } from './index-02e125f0.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput, I as ImageWrapV2 } from './index-106dfb8b.js';
+import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput, I as ImageWrapV2 } from './index-54236f58.js';
 import { format, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
-import { L as Logo } from './index-d902d3f5.js';
+import { L as Logo } from './index-9138f188.js';
 import throttle from 'lodash/throttle';
 import parse from 'html-react-parser';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
-import { a as useOutsideClick } from './useOutsideClick-2fa59ce8.js';
+import { a as useOutsideClick } from './useOutsideClick-7e889853.js';
 import enUS from 'date-fns/locale/en-US';
 import id from 'date-fns/locale/id';
 import vi from 'date-fns/locale/vi';
 import zhTW from 'date-fns/locale/zh-TW';
-import { B as Button } from './index-e5318724.js';
-import { u as useScreenSize, I as ImageWrap } from './index-73aae057.js';
-import { u as useTranslations } from './index-53857337.js';
+import { B as Button } from './index-26a440ad.js';
+import { u as useScreenSize, I as ImageWrap } from './index-9aa46d65.js';
+import { u as useTranslations } from './index-4323b4a4.js';
 import classNames from 'classnames';
-import { D as Dropdown } from './index-5f3af48f.js';
+import { D as Dropdown } from './index-91b4b58b.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-09a8e8cd.js';
-import { D as Drawer } from './index-7cc369a9.js';
+import { I as Input } from './index-b5f98eec.js';
+import { D as Drawer } from './index-238ac487.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-685e2f0d.js';
+import { L as LOCALE } from './Locale-176fccdd.js';
 import { ArrowRight } from '@hhgtech/icons/arrow';
 import { MultiStar, Question } from '@hhgtech/icons/other';
 import Lottie from 'lottie-light-react';
-import { A as ArrowRightBlue } from './index-4c96460c.js';
-import { L as Loading } from './index-50d1b9a1.js';
+import { A as ArrowRightBlue } from './index-629e5b35.js';
+import { L as Loading } from './index-09fdd75e.js';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
+import { C as Close } from './Close-709508aa.js';
+import { useAnimationOffsetEffect } from '@mantine/carousel';
 
 const StarFull = (_a) => {
     var { color, stroke } = _a, props = __rest(_a, ["color", "stroke"]);
@@ -5412,6 +5414,9 @@ const ImageCarouselContainer = styled.div `
   }
 `;
 const StyledImageCarousel = styled(Carousel) `
+  height: 100%;
+  flex: 1;
+
   .mantine-Carousel-controls {
     padding-left: 4px;
     padding-right: 4px;
@@ -5425,6 +5430,7 @@ const StyledImageCarousel = styled(Carousel) `
     align-items: center;
     justify-content: center;
     opacity: 1;
+    width: auto;
 
     &:hover {
       background-color: #fff;
@@ -5522,6 +5528,377 @@ GeneralInfo.Container = GeneralInfoContainer;
 GeneralInfo.Image = ProductImage;
 GeneralInfo.Content = ProductContent;
 
+const GalleryLayout = styled.div `
+  max-width: 1128px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  height: 100%;
+
+  ${MediaQueries.mbUp} {
+    flex-direction: row;
+    /* height: auto; */
+    height: 100%;
+  }
+`;
+const GalleryMain = styled.div `
+  min-width: 0;
+  height: calc(100% - 108px);
+  width: 100%;
+  ${MediaQueries.mbUp} {
+    height: auto;
+    max-height: calc(100dvh - 10dvh);
+  }
+`;
+const GallerySidebar = styled.div `
+  width: 100%;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 412px;
+  padding: 64px 36px 24px 40px;
+`;
+const ThumbnailsGrid = styled.div `
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  padding: 16px;
+
+  scroll-padding: 0px 16px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  scrollbar-width: none;
+
+  ${MediaQueries.mbUp} {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+    overflow: visible;
+    scroll-snap-type: none;
+    padding: 0;
+  }
+`;
+const ThumbnailButton = styled.button `
+  border: 2px solid ${theme.colors.gray200};
+  border-radius: 0.5rem;
+  padding: 0;
+  background-color: transparent;
+  width: 72px;
+  height: 72px;
+  flex-shrink: 0;
+  overflow: hidden;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+  scroll-snap-align: start;
+
+  ${MediaQueries.mbUp} {
+    scroll-snap-align: unset;
+  }
+
+  &[data-active='true'] {
+    border-color: ${theme.colors.primaryBase};
+  }
+
+  &:hover {
+    border-color: ${theme.colors.primaryBase};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${theme.colors.primaryBase};
+    outline-offset: 2px;
+  }
+`;
+const LargeImageWrapper = styled.div `
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: ${theme.colors.neutral50};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${MediaQueries.mbUp} {
+    height: 100%;
+    aspect-ratio: 716 / 720;
+  }
+`;
+const MainGalleryImage = styled(ImageWrapV2) `
+  background-color: ${theme.colors.neutral50};
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+`;
+const EmptyState = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+  min-height: 240px;
+  text-align: center;
+`;
+const StyledModal = styled(Modal) `
+  .mantine-Modal-header {
+    padding: 12px 16px;
+    border-bottom: 1px solid #0000001a;
+  }
+
+  .mantine-Modal-close {
+    width: 24px;
+    height: 24px;
+    & > svg {
+      width: auto !important;
+      height: auto !important;
+    }
+  }
+  .mantine-Modal-title {
+    font-weight: 600;
+    font-size: 15px;
+    line-height: 24px;
+    letter-spacing: -0.3px;
+  }
+  .mantine-Modal-inner {
+    left: 0;
+  }
+
+  .mantine-Modal-content {
+    ${MediaQueries.mbDown} {
+      display: grid;
+      grid-template-rows: 48px calc(100% - 48px);
+      grid-template-columns: 100%;
+    }
+
+    ${MediaQueries.mbUp} {
+      border-radius: 12px;
+    }
+  }
+
+  .mantine-Modal-body {
+    height: 100%;
+    max-height: 100%;
+    padding: 0;
+  }
+
+  .closeModal {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    cursor: pointer;
+  }
+`;
+const StyledCarousel = styled(Carousel) `
+  height: 100%;
+
+  .mantine-Carousel-controls {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .mantine-Carousel-control {
+    background-color: #fff;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    opacity: 1;
+    width: auto;
+
+    &:hover {
+      background-color: #fff;
+    }
+
+    &:active {
+      background-color: #fff;
+    }
+
+    &[data-inactive] {
+      opacity: 0.5;
+      cursor: default;
+    }
+  }
+
+  .mantine-Carousel-indicators {
+    gap: 0.375rem;
+    bottom: 0.5rem;
+  }
+
+  .mantine-Carousel-indicator {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background-color: ${theme.colors.gray200};
+    opacity: 1;
+
+    &[data-active] {
+      background-color: ${theme.colors.black};
+    }
+  }
+`;
+
+const ModalGalleryContext = createContext(null);
+function useModalGalleryContext() {
+    const ctx = useContext(ModalGalleryContext);
+    if (!ctx)
+        throw new Error('useModalGalleryContext must be used within ModalGalleryProvider');
+    return ctx;
+}
+
+const TRANSITION_DURATION$1 = 200;
+function GalleryCarousel() {
+    const { galleryImages, altPrefix, backupSrc, isMobile, setActiveIndex, setEmbla, embla, initialSlide, } = useModalGalleryContext();
+    useAnimationOffsetEffect(embla, TRANSITION_DURATION$1);
+    const handleEmblaReady = (emblaApi) => {
+        setEmbla(emblaApi);
+    };
+    const handleSlideChange = (index) => {
+        setActiveIndex(index);
+    };
+    return (React__default.createElement(StyledCarousel, { align: "center", slideSize: "100%", withControls: galleryImages.length > 1 && !isMobile, withIndicators: false, dragFree: false, slideGap: 0, draggable: galleryImages.length > 1 && isMobile, getEmblaApi: handleEmblaReady, onSlideChange: handleSlideChange, loop: false, height: "100%", controlSize: 32, initialSlide: initialSlide }, galleryImages.map((imageUrl, index) => (React__default.createElement(Carousel.Slide, { key: `${imageUrl}-${index}` },
+        React__default.createElement(LargeImageWrapper, null,
+            React__default.createElement(MainGalleryImage, { src: imageUrl, alt: `${altPrefix} - ${index + 1}`, backupSrc: backupSrc })))))));
+}
+
+function GalleryThumbnails({ isMobile }) {
+    const { galleryImages, altPrefix, backupSrc, activeIndex, handleThumbnailClick, } = useModalGalleryContext();
+    const itemRefs = useRef([]);
+    useEffect(() => {
+        const activeItem = itemRefs.current[activeIndex];
+        if (activeItem && isMobile) {
+            activeItem.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'center',
+            });
+        }
+    }, [activeIndex, isMobile]);
+    return (React__default.createElement(ThumbnailsGrid, null, galleryImages.map((imageUrl, index) => (React__default.createElement(ThumbnailButton, { key: `${imageUrl}-${index}`, type: "button", "data-active": activeIndex === index, onClick: () => handleThumbnailClick(index), ref: (el) => (itemRefs.current[index] = el) },
+        React__default.createElement(CarouselImageItem, { src: imageUrl, alt: `${altPrefix} thumbnail - ${index + 1}`, backupSrc: backupSrc, width: 72 }))))));
+}
+
+function GalleryTitle({ isMobile }) {
+    const { generalInfo } = useModalGalleryContext();
+    // Mobile title is handled by Modal title prop
+    if (isMobile) {
+        return null;
+    }
+    if (typeof generalInfo.name === 'string') {
+        return (React__default.createElement(Text, { size: "h5", fw: 600, color: "gray1000", as: "h2" }, generalInfo.name));
+    }
+    return React__default.createElement(React__default.Fragment, null, generalInfo.name);
+}
+
+function ModalGalleryContent() {
+    const { galleryImages, isMobile } = useModalGalleryContext();
+    const hasImages = galleryImages.length > 0;
+    if (!hasImages) {
+        return (React__default.createElement(EmptyState, null,
+            React__default.createElement(GalleryTitle, { isMobile: isMobile }),
+            React__default.createElement(Text, { size: "p2", color: "gray600" }, "No images available.")));
+    }
+    return (React__default.createElement(GalleryLayout, null,
+        React__default.createElement(GalleryMain, null,
+            React__default.createElement(GalleryCarousel, null)),
+        !isMobile && (React__default.createElement(GallerySidebar, null,
+            React__default.createElement(GalleryTitle, { isMobile: isMobile }),
+            React__default.createElement(GalleryThumbnails, { isMobile: isMobile }))),
+        isMobile && React__default.createElement(GalleryThumbnails, { isMobile: isMobile })));
+}
+
+const clampIndex = (index, length) => {
+    if (!length || typeof index !== 'number')
+        return 0;
+    if (index < 0)
+        return 0;
+    if (index >= length)
+        return length - 1;
+    return index;
+};
+function useModalGallery({ generalInfo, imageCarousel = [], backupSrc, isMobile = false, initialSlide = 0, }) {
+    const galleryImages = useMemo(() => {
+        if (imageCarousel === null || imageCarousel === void 0 ? void 0 : imageCarousel.length)
+            return imageCarousel;
+        const fallbackImages = [generalInfo.banner, generalInfo.logo].filter((src) => Boolean(src));
+        return fallbackImages;
+    }, [generalInfo.banner, generalInfo.logo, imageCarousel]);
+    const [activeIndex, setActiveIndex] = useState(() => clampIndex(initialSlide, galleryImages.length));
+    const [embla, setEmbla] = useState(null);
+    useEffect(() => {
+        setActiveIndex(clampIndex(initialSlide, galleryImages.length));
+    }, [galleryImages.length, initialSlide]);
+    useEffect(() => {
+        if (!embla || !galleryImages.length)
+            return;
+        const current = embla.selectedScrollSnap();
+        if (current !== activeIndex) {
+            embla.scrollTo(activeIndex);
+        }
+    }, [activeIndex, embla, galleryImages.length]);
+    const altPrefix = generalInfo.altText ||
+        (typeof generalInfo.name === 'string' ? generalInfo.name : 'product image');
+    const handleThumbnailClick = useCallback((index) => {
+        setActiveIndex(index);
+        embla === null || embla === void 0 ? void 0 : embla.scrollTo(index);
+    }, [embla]);
+    return {
+        generalInfo,
+        imageCarousel,
+        backupSrc,
+        isMobile,
+        activeIndex,
+        embla,
+        altPrefix,
+        galleryImages,
+        setActiveIndex,
+        setEmbla,
+        handleThumbnailClick,
+    };
+}
+
+function ModalGalleryProvider({ generalInfo, imageCarousel = [], backupSrc, isMobile = false, initialSlide = 0, children, }) {
+    const galleryState = useModalGallery({
+        generalInfo,
+        imageCarousel,
+        backupSrc,
+        isMobile,
+        initialSlide,
+    });
+    const value = useMemo(() => (Object.assign(Object.assign({}, galleryState), { initialSlide })), [
+        galleryState.generalInfo,
+        galleryState.imageCarousel,
+        galleryState.backupSrc,
+        galleryState.isMobile,
+        galleryState.activeIndex,
+        galleryState.embla,
+        galleryState.altPrefix,
+        galleryState.galleryImages,
+        galleryState.handleThumbnailClick,
+    ]);
+    return (React__default.createElement(ModalGalleryContext.Provider, { value: value }, children));
+}
+
+const TRANSITION_DURATION = 200;
+function ModalGallery({ generalInfo, imageCarousel = [], backupSrc, isMobile = false, initialSlide = 0, isOpen = false, onOpenChange, modalProps = {}, title = 'Product gallery', }) {
+    const handleClose = () => {
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+    };
+    const modalTitle = isMobile ? title : undefined;
+    return (React__default.createElement(StyledModal, Object.assign({ opened: isOpen, onClose: handleClose, zIndex: ZINDEX_SSO, withCloseButton: isMobile, centered: true, size: "auto", fullScreen: isMobile, title: modalTitle }, modalProps, { transitionProps: Object.assign({ duration: TRANSITION_DURATION }, modalProps.transitionProps) }),
+        !isMobile && (React__default.createElement(Close, { onClick: handleClose, className: "closeModal", width: 24, height: 24, fill: "#212121" })),
+        React__default.createElement(ModalGalleryProvider, { generalInfo: generalInfo, imageCarousel: imageCarousel, backupSrc: backupSrc, initialSlide: initialSlide, isMobile: isMobile },
+            React__default.createElement(ModalGalleryContent, null))));
+}
+
 const StyledContainer$2 = styled.div `
   border-radius: 12px;
   padding: 0.875rem 0.75rem;
@@ -5728,4 +6105,4 @@ const AnsweredByDoctor = (props) => {
             React__default.createElement(Text, { size: "p3", weight: "semiBold", color: theme.colors.gray800 }, doctorName))));
 };
 
-export { AdBlock as A, Breadcrumbs as B, CategoryCard as C, DatePicker as D, FloatButtonGroup as F, GeneralInfo as G, HPVScreener as H, IconText as I, List as L, MAX_RATING as M, QuickFilter as Q, RadioGroup as R, ScrollList as S, Tabs as T, VoucherItem as V, WidgetChatbotAi as W, CheckboxGroup as a, StatisticCard as b, index as c, DoctorInfo as d, CookieAcceptConfirm as e, SeoHead as f, DateRangePicker as g, ShareContainer as h, index$1 as i, ShareDrawer as j, FixedBottomAdBlock as k, SummaryInfo as l, ListContext as m, useList as n, QuickFilterWrapLine as o, CardListItem as p, CertificateItem as q, RatingStars as r, RatingStarsInput as s, AnsweredByDoctor as t, useListContext as u, StarFull as v, StarHalf as w };
+export { AdBlock as A, Breadcrumbs as B, CategoryCard as C, DatePicker as D, FloatButtonGroup as F, GeneralInfo as G, HPVScreener as H, IconText as I, List as L, ModalGallery as M, QuickFilter as Q, RadioGroup as R, ScrollList as S, Tabs as T, VoucherItem as V, WidgetChatbotAi as W, CheckboxGroup as a, StatisticCard as b, index as c, DoctorInfo as d, CookieAcceptConfirm as e, SeoHead as f, DateRangePicker as g, ShareContainer as h, index$1 as i, ShareDrawer as j, FixedBottomAdBlock as k, SummaryInfo as l, ListContext as m, useList as n, QuickFilterWrapLine as o, CardListItem as p, useModalGalleryContext as q, ModalGalleryProvider as r, CertificateItem as s, RatingStars as t, useListContext as u, RatingStarsInput as v, MAX_RATING as w, AnsweredByDoctor as x, StarFull as y, StarHalf as z };

package/build/esm/{index-e060e846.js → index-4f845f39.js}

@@ -1,27 +1,27 @@
 import React__default from 'react';
-import { C as Container } from './index-5416427d.js';
+import { C as Container } from './index-1c059480.js';
 import dayjs from 'dayjs';
-import './index-d7537411.js';
-import './index-abf57548.js';
+import './index-94aa403c.js';
+import './index-93bffdf2.js';
 import { Flex, Stack, Box } from '@mantine/core';
 import '@mantine/dates';
-import './index-9533e446.js';
-import './index-7da03926.js';
-import './index-b5fb218c.js';
-import { T as Text } from './index-f485352b.js';
-import './index-596d9f61.js';
-import './index-5783e827.js';
-import './index.styles-a42bb23d.js';
-import './translationsContext-8f354b67.js';
+import './index-34d565a2.js';
+import './index-61e78b1a.js';
+import './index-16413c5a.js';
+import { T as Text } from './index-717e6963.js';
+import './index-84fd862a.js';
+import './index-1338733a.js';
+import './index.styles-6efb573e.js';
+import './translationsContext-82f42174.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-3cf2fae9.js';
-import './index-cbd42af5.js';
-import { u as useScreenSize } from './index-73aae057.js';
+import { M as MediaQueries } from './utils-1a7cb8db.js';
+import './index-ebec975c.js';
+import { u as useScreenSize } from './index-9aa46d65.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 import { domainLocales } from './constantsDomainLocales.js';
-import { L as Logo } from './index-d902d3f5.js';
-import { M as MarryBabyText } from './index-8ed83640.js';
+import { L as Logo } from './index-9138f188.js';
+import { M as MarryBabyText } from './index-e1aea64c.js';
 
 const StyledFooter$1 = styled.footer `
   background-color: #1b3250;

package/build/esm/{index-9a787391.js → index-518e4a88.js}

@@ -1,21 +1,21 @@
-import { _ as __rest } from './tslib.es6-bea8d7ce.js';
+import { _ as __rest } from './tslib.es6-7bca3b0f.js';
 import React__default, { useState, useRef, useMemo, useEffect } from 'react';
 import { BabyBoyMB, BabyGirlMB } from '@hhgtech/icons/other';
 import { createStyles, rem, Box, Flex } from '@mantine/core';
-import { R as Radio } from './index-abf57548.js';
+import { R as Radio } from './index-93bffdf2.js';
 import '@mantine/dates';
-import './index-d7537411.js';
-import './index-9533e446.js';
-import { C as CommonGAssets } from './index-7da03926.js';
-import './index-b5fb218c.js';
-import { T as Text } from './index-f485352b.js';
-import './index-596d9f61.js';
-import './index-5783e827.js';
-import './index.styles-a42bb23d.js';
-import { u as useTranslations } from './index-53857337.js';
+import './index-94aa403c.js';
+import './index-34d565a2.js';
+import { C as CommonGAssets } from './index-61e78b1a.js';
+import './index-16413c5a.js';
+import { T as Text } from './index-717e6963.js';
+import './index-84fd862a.js';
+import './index-1338733a.js';
+import './index.styles-6efb573e.js';
+import { u as useTranslations } from './index-4323b4a4.js';
 import '@mantine/hooks';
-import './utils-3cf2fae9.js';
-import './index-cbd42af5.js';
+import './utils-1a7cb8db.js';
+import './index-ebec975c.js';
 
 var useStyles = createStyles((theme, { type }) => {
     const isMarryBaby = theme.other.template === 'mb';

package/build/esm/{index-3fe3e987.js → index-5191573c.js}

@@ -1,12 +1,12 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-bea8d7ce.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-7bca3b0f.js';
 import React__default, { useState, useMemo, useCallback } from 'react';
-import { u as useTranslations } from './index-53857337.js';
+import { u as useTranslations } from './index-4323b4a4.js';
 import { createStyles } from '@mantine/core';
-import { P as PATHS } from './paths-f122ee31.js';
-import { L as LOCALIZED_SLUGS } from './constants-d5e32817.js';
-import { B as Button } from './index-596d9f61.js';
-import './index-d7537411.js';
-import { c as callApi, g as getCarePath } from './utils-636c6efd.js';
+import { P as PATHS } from './paths-207dd673.js';
+import { L as LOCALIZED_SLUGS } from './constants-f9dcd528.js';
+import { B as Button } from './index-84fd862a.js';
+import './index-94aa403c.js';
+import { c as callApi, g as getCarePath } from './utils-e6a88580.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
 

package/build/esm/{index-106dfb8b.js → index-54236f58.js}

@@ -1,24 +1,24 @@
 import * as React from 'react';
 import React__default, { useState, useMemo, useEffect, Fragment } from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-3cf2fae9.js';
+import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-1a7cb8db.js';
 import { theme } from './miscTheme.js';
-import { _ as __rest } from './tslib.es6-bea8d7ce.js';
-import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-09a8e8cd.js';
-import { I as Input } from './index-abf57548.js';
+import { _ as __rest } from './tslib.es6-7bca3b0f.js';
+import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-b5f98eec.js';
+import { I as Input } from './index-93bffdf2.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-d7537411.js';
-import './index-9533e446.js';
-import './index-7da03926.js';
-import './index-b5fb218c.js';
-import './index-f485352b.js';
-import './index-596d9f61.js';
-import './index-5783e827.js';
-import './index.styles-a42bb23d.js';
-import './translationsContext-8f354b67.js';
+import './index-94aa403c.js';
+import './index-34d565a2.js';
+import './index-61e78b1a.js';
+import './index-16413c5a.js';
+import './index-717e6963.js';
+import './index-84fd862a.js';
+import './index-1338733a.js';
+import './index.styles-6efb573e.js';
+import './translationsContext-82f42174.js';
 import '@mantine/hooks';
-import './index-cbd42af5.js';
+import './index-ebec975c.js';
 
 /* eslint-disable prettier/prettier */
 const Search2 = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 25", fill: "none" }, props),