@hhgtech/hhg-components 1.29.463 → 1.29.465-beta-1

package/build/{index-c2b791fb.js → index-606a9b67.js}

@@ -1,52 +1,53 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-2a7f6478.js');
+var tslib_es6 = require('./tslib.es6-137c0b64.js');
 var React = require('react');
-var index$5 = require('./index-78049e60.js');
+var index$5 = require('./index-ecb509ca.js');
 var core = require('@mantine/core');
 require('@mantine/dates');
-var index$7 = require('./index-87a530ee.js');
-require('./index-67ffe444.js');
-var index$b = require('./index-2748b151.js');
-require('./index-a92d3727.js');
-var index$3 = require('./index-8614189c.js');
-var index$f = require('./index-23982b49.js');
-require('./index-d27221b2.js');
-require('./index.styles-4c56e238.js');
-require('./translationsContext-0ef78f44.js');
+var index$7 = require('./index-04433a04.js');
+require('./index-c79def65.js');
+var index$b = require('./index-9b53927d.js');
+require('./index-333d205f.js');
+var index$3 = require('./index-4ed7015a.js');
+var index$f = require('./index-2195740a.js');
+require('./index-c712231f.js');
+require('./index.styles-db7a690e.js');
+require('./translationsContext-94f086a7.js');
 require('@mantine/hooks');
-var utils = require('./utils-ce601c7f.js');
-require('./index-f2932b05.js');
-var index$2 = require('./index-f3ef45e8.js');
+var utils = require('./utils-17630f75.js');
+require('./index-70d13c86.js');
+var index$2 = require('./index-3190e4ca.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index$4 = require('./index-41da5de8.js');
+var index$4 = require('./index-b73ada07.js');
 var dateFns = require('date-fns');
 var DayPickerInput = require('react-day-picker/DayPickerInput');
-var index$6 = require('./index-637cf7fc.js');
+var index$6 = require('./index-20f7d39d.js');
 var throttle = require('lodash/throttle');
 var parse = require('html-react-parser');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var constantsIsProduction = require('./constantsIsProduction.js');
-var useOutsideClick = require('./useOutsideClick-60ceb667.js');
+var useOutsideClick = require('./useOutsideClick-8feadf62.js');
 var enUS = require('date-fns/locale/en-US');
 var id = require('date-fns/locale/id');
 var vi = require('date-fns/locale/vi');
 var zhTW = require('date-fns/locale/zh-TW');
-var index$a = require('./index-48f74d27.js');
-var index$8 = require('./index-6364bbad.js');
-var index$9 = require('./index-20e4c98d.js');
-var index$c = require('./index-6c18da4a.js');
+var index$a = require('./index-625ba208.js');
+var index$8 = require('./index-2dfe8be0.js');
+var index$9 = require('./index-b8f32fae.js');
+var classNames = require('classnames');
+var index$c = require('./index-2596efb9.js');
 var miscGetSocialList = require('./miscGetSocialList.js');
-var index$e = require('./index-e574292b.js');
-var index$d = require('./index-65670179.js');
+var index$e = require('./index-a5149a38.js');
+var index$d = require('./index-7829f25f.js');
 var uuid = require('uuid');
-var Locale = require('./Locale-5ade2442.js');
+var Locale = require('./Locale-34b26ec5.js');
 var arrow = require('@hhgtech/icons/arrow');
 var other = require('@hhgtech/icons/other');
 var Lottie = require('lottie-light-react');
-var index$g = require('./index-d2745db4.js');
-var index$h = require('./index-e7c0a5bc.js');
+var index$g = require('./index-f0590bea.js');
+var index$h = require('./index-17cbe8f0.js');
 var get = require('lodash/get');
 var debounce = require('lodash/debounce');
 
@@ -79,6 +80,7 @@ var enUS__default = /*#__PURE__*/_interopDefault(enUS);
 var id__default = /*#__PURE__*/_interopDefault(id);
 var vi__default = /*#__PURE__*/_interopDefault(vi);
 var zhTW__default = /*#__PURE__*/_interopDefault(zhTW);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var Lottie__default = /*#__PURE__*/_interopDefault(Lottie);
 var get__default = /*#__PURE__*/_interopDefault(get);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
@@ -2633,12 +2635,12 @@ function DateRangePicker({ inputSize = 'md', name = 'date-range-picker', value,
 
 var styles = {"breadcrumb":"WUqzfRb","separator":"MnVGtSY","textLink":"NclbhXQ"};
 
-const BreadcrumbItem = ({ LinkComponent, page, isLast, onChangePage, }) => {
+const BreadcrumbItem = ({ LinkComponent, page, isLast, onChangePage, className, }) => {
     const { label, value, isDropdown, dropdownItems, dataEventCategory, dataEventAction, dataEventLabel, } = page;
     if (isDropdown) {
         return (React__namespace["default"].createElement(index$c.Dropdown, { options: dropdownItems, placeholder: "...", id: "", placeholderIcon: null, onChange: onChangePage, className: "collapsed-breadcrumb" }));
     }
-    return (React__namespace["default"].createElement("div", { className: styles.textLink, title: typeof label !== 'string' ? value : label, "data-last": isLast }, LinkComponent && (React__namespace["default"].createElement(LinkComponent, { "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, href: value || '#' }, label))));
+    return (React__namespace["default"].createElement("div", { className: classNames__default["default"](styles.textLink, className), title: typeof label !== 'string' ? value : label, "data-last": isLast }, LinkComponent && (React__namespace["default"].createElement(LinkComponent, { "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, href: value || '#' }, label))));
 };
 /**
  * @deprecated
@@ -2657,12 +2659,12 @@ const Breadcrumbs = ({ className, pages, size, LinkComponent = 'a', onChangePage
         return item;
     })
         .filter(Boolean), [pages]);
-    return (React__namespace["default"].createElement("div", { "data-size": size, className: `${styles.breadcrumb} ${className || ''}` }, mappedList.map((page, index) => {
+    return (React__namespace["default"].createElement("div", { "data-size": size, className: classNames__default["default"](`${styles.breadcrumb} ${className || ''}`, 'breadcrumbs') }, mappedList.map((page, index) => {
         const isLast = index + 1 === mappedList.length;
         return (React__namespace["default"].createElement(React.Fragment, { key: index },
             React__namespace["default"].createElement(BreadcrumbItem, { LinkComponent: LinkComponent, page: page, isLast: isLast, onChangePage: onChangePage }),
             !isLast &&
-                (page.separator || separator || (React__namespace["default"].createElement("div", { className: styles.separator, "data-size": size })))));
+                (page.separator || separator || (React__namespace["default"].createElement("div", { className: classNames__default["default"](styles.separator, 'breadcrumbs-separator'), "data-size": size })))));
     })));
 };
 
@@ -4812,7 +4814,7 @@ const HPVScreener = ({ onClick, className, style, image, }) => {
                     React__namespace["default"].createElement(index$g.ArrowRightBlue, { style: { width: '0.5rem', height: '0.5rem' } }))))));
 };
 
-const StyledHorizontalContainer = styled__default["default"].div `
+const StyledTwoItemHorizontalContainer = styled__default["default"].div `
   display: grid;
   grid-template-columns: 1fr 2px 1fr;
   column-gap: ${core.rem(16)};
@@ -4826,11 +4828,16 @@ const StyledVerticalContainer = styled__default["default"].div `
     grid-column: 1 / span 2;
   }
 `;
+const StyledHorizontalContainer = styled__default["default"].div `
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+`;
 const StyledVerticalContent = styled__default["default"].div `
   display: flex;
   flex-direction: column;
   gap: ${core.rem(2)};
-  align-items: ${({ layout }) => (layout === 'vertical' ? 'left' : 'center')};
+  align-items: ${({ align }) => align};
 `;
 const StyledTitle$1 = styled__default["default"].div `
   font-size: ${core.rem(15)};
@@ -4845,23 +4852,22 @@ const StyledDescription$1 = styled__default["default"].div `
   font-size: ${core.rem(13)};
 `;
 
-const SummaryInfo = ({ infoItems, className, layout = 'vertical', }) => {
-    const isHorizontalLayout = layout === 'horizontal';
-    const StyledContainer = isHorizontalLayout
-        ? StyledHorizontalContainer
-        : StyledVerticalContainer;
-    return (React__namespace["default"].createElement(StyledContainer, { className: className }, infoItems.map((item) => {
-        const lenOfInfoItems = infoItems.length;
-        if (lenOfInfoItems > 2 &&
-            lenOfInfoItems % 2 !== 0 &&
-            item.id === infoItems[lenOfInfoItems - 1].id) {
-            item.cssItem = 'span-2';
+const SummaryInfo = ({ infoItems, className, layout = 'vertical', align = 'start', }) => {
+    const StyledContainer = React.useMemo(() => {
+        if (layout === 'two-item-horizontal') {
+            return StyledTwoItemHorizontalContainer;
+        }
+        if (layout === 'horizontal') {
+            return StyledHorizontalContainer;
         }
+        return StyledVerticalContainer;
+    }, [layout]);
+    return (React__namespace["default"].createElement(StyledContainer, { className: className }, infoItems.map((item) => {
         return (React__namespace["default"].createElement(React__namespace["default"].Fragment, { key: item.id },
-            React__namespace["default"].createElement(StyledVerticalContent, { layout: layout, className: item.cssItem },
-                React__namespace["default"].createElement(StyledTitle$1, null, item.title),
-                React__namespace["default"].createElement(StyledDescription$1, null, item.description)),
-            isHorizontalLayout && (React__namespace["default"].createElement(core.Divider, { className: item.cssItem, sx: {
+            React__namespace["default"].createElement(StyledVerticalContent, { align: align, className: classNames__default["default"](item.cssItem, 'flex-1') },
+                React__namespace["default"].createElement(StyledTitle$1, { className: 'summary-title' }, item.title),
+                React__namespace["default"].createElement(StyledDescription$1, { className: 'summary-description' }, item.description)),
+            layout === 'two-item-horizontal' && (React__namespace["default"].createElement(core.Divider, { className: item.cssItem, sx: {
                     borderColor: '#0000001a',
                     height: '75%',
                     alignSelf: 'center',
@@ -5383,10 +5389,29 @@ styled__default["default"].div `
   }
 `;
 const GeneralInfoContainer = styled__default["default"].div `
-  background-color: #fff;
-`;
+  ${utils.MediaQueries.mbUp} {
+    display: flex;
+    gap: 1.5rem;
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    overflow: hidden;
+  }
 
+  #product-image-section {
+    ${utils.MediaQueries.mbUp} {
+      width: 336px;
+    }
+  }
+  background-color: #fff;
+`;
 const ProductImage = styled__default["default"](index$4.ImageWrapV2) `
+  ${utils.MediaQueries.mbUp} {
+    width: 336px;
+    aspect-ratio: 1/1;
+    object-fit: cover;
+    border-radius: 0.5rem;
+  }
+
   width: 100%;
   object-fit: contain;
   object-position: center;
@@ -5394,37 +5419,35 @@ const ProductImage = styled__default["default"](index$4.ImageWrapV2) `
 `;
 const ProductContent = styled__default["default"].div `
   padding: 1.5rem 1rem;
+  ${utils.MediaQueries.mbUp} {
+    padding: 0;
+    flex: 1;
+    overflow: hidden;
+  }
 
   .description {
     margin-top: 0.5rem;
   }
-`;
-const ProductTitle = styled__default["default"].h1 `
-  font-size: 1.375rem;
-  font-weight: 600;
-  line-height: 1.75rem;
-  color: #111111;
-`;
-const ProductDescription = styled__default["default"].p `
-  font-size: 0.8125rem;
-  line-height: 1.25rem;
-  font-weight: 400;
-  color: ${miscTheme.theme.colors.gray700};
-`;
-function GeneralInfo({ generalInfo, backupSrc, className, contentClassName, bannerProps = {}, children, }) {
+
+  .product-info {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+`;
+
+function GeneralInfo({ generalInfo, backupSrc, className, contentClassName, bannerProps = {}, imagesSelect, children, isMobile = false, }) {
     return (React__namespace["default"].createElement(GeneralInfoContainer, { className: className },
-        React__namespace["default"].createElement(ProductImage, Object.assign({ backupSrc: backupSrc, src: generalInfo.banner || generalInfo.logo, alt: "product" }, bannerProps)),
+        React__namespace["default"].createElement("div", { id: "product-image-section" }, imagesSelect ? (imagesSelect) : (React__namespace["default"].createElement(ProductImage, Object.assign({ backupSrc: backupSrc, src: generalInfo.banner || generalInfo.logo, alt: "product" }, bannerProps)))),
         React__namespace["default"].createElement(ProductContent, { className: contentClassName },
-            React__namespace["default"].createElement("div", null,
-                React__namespace["default"].createElement(ProductTitle, null, generalInfo.name),
-                generalInfo.description && (React__namespace["default"].createElement(ProductDescription, { className: "description" }, generalInfo.description))),
+            React__namespace["default"].createElement("div", { className: "product-info" },
+                React__namespace["default"].createElement(index$3.Text, { size: "h3", fw: 600, color: "gray1000" }, generalInfo.name),
+                generalInfo.description && (React__namespace["default"].createElement(index$3.Text, { size: isMobile ? 'p3' : 'p1', color: "gray700" }, generalInfo.description))),
             children)));
 }
 GeneralInfo.Container = GeneralInfoContainer;
 GeneralInfo.Image = ProductImage;
-GeneralInfo.Content = ProductContent;
-GeneralInfo.Title = ProductTitle;
-GeneralInfo.Description = ProductDescription;
+GeneralInfo.Content = ProductContent;
 
 const StyledContainer$2 = styled__default["default"].div `
   border-radius: 12px;
@@ -5575,7 +5598,8 @@ const RatingStars = ({ value, max = MAX_RATING, onChange, readOnly = false, }) =
             return starComponent(starValue, true);
         }
         if (diff >= HALF_STAR_THRESHOLD) {
-            return React__namespace["default"].createElement(StarHalf, { key: `star-${index}` });
+            return (React__namespace["default"].createElement("div", { key: `star-${index}` },
+                React__namespace["default"].createElement(StarHalf, null)));
         }
         return starComponent(starValue, false);
     })));

package/build/{index-5c8a3647.js → index-60b68c15.js}

@@ -1,24 +1,24 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-2a7f6478.js');
+var tslib_es6 = require('./tslib.es6-137c0b64.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index$2 = require('./index-78049e60.js');
+var index$2 = require('./index-ecb509ca.js');
 require('@mantine/dates');
-var index = require('./index-87a530ee.js');
-require('./index-67ffe444.js');
-require('./index-2748b151.js');
-require('./index-a92d3727.js');
-require('./index-8614189c.js');
-require('./index-23982b49.js');
-require('./index-d27221b2.js');
-require('./index.styles-4c56e238.js');
-var index$1 = require('./index-20e4c98d.js');
+var index = require('./index-04433a04.js');
+require('./index-c79def65.js');
+require('./index-9b53927d.js');
+require('./index-333d205f.js');
+require('./index-4ed7015a.js');
+require('./index-2195740a.js');
+require('./index-c712231f.js');
+require('./index.styles-db7a690e.js');
+var index$1 = require('./index-b8f32fae.js');
 require('@mantine/hooks');
-require('./utils-ce601c7f.js');
-require('./index-f2932b05.js');
-var utils = require('./utils-d37a69e7.js');
-var Locale = require('./Locale-5ade2442.js');
+require('./utils-17630f75.js');
+require('./index-70d13c86.js');
+var utils = require('./utils-f65eff99.js');
+var Locale = require('./Locale-34b26ec5.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-48f74d27.js → index-625ba208.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-2a7f6478.js');
+var tslib_es6 = require('./tslib.es6-137c0b64.js');
 var React = require('react');
-var index = require('./index-23982b49.js');
+var index = require('./index-2195740a.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-cf109e9d.js → index-65439c31.js}

@@ -1,34 +1,35 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-20e4c98d.js');
+var index = require('./index-b8f32fae.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$2 = require('./index-2748b151.js');
-var normalizeLink = require('./normalizeLink-97c0ec76.js');
+var index$2 = require('./index-9b53927d.js');
+var normalizeLink = require('./normalizeLink-8353600a.js');
 var miscTheme = require('./miscTheme.js');
-var index$1 = require('./index-2f174126.js');
-var index$3 = require('./index-693ef471.js');
-var index$4 = require('./index-48f74d27.js');
-var types = require('./types-844b912e.js');
+var index$1 = require('./index-8aca6226.js');
+var index$3 = require('./index-ceb56efb.js');
+var index$4 = require('./index-625ba208.js');
+var types = require('./types-d15f2729.js');
 var styled = require('@emotion/styled');
+var utils = require('./utils-17630f75.js');
+var core = require('@mantine/core');
 var api = require('@react-google-maps/api');
-var cn = require('classnames');
-var index$5 = require('./index-87a530ee.js');
-var constants = require('./constants-f1dc0434.js');
-var index$6 = require('./index-d8148572.js');
-var localizeNumberFormat = require('./localizeNumberFormat-799e9f30.js');
-var tslib_es6 = require('./tslib.es6-2a7f6478.js');
+var classNames = require('classnames');
+var index$5 = require('./index-04433a04.js');
+var constants = require('./constants-9013b671.js');
+var index$6 = require('./index-c52c7219.js');
+var localizeNumberFormat = require('./localizeNumberFormat-e084eae6.js');
+var tslib_es6 = require('./tslib.es6-137c0b64.js');
 var hooks = require('@mantine/hooks');
-var core = require('@mantine/core');
-var index$9 = require('./index-9ce3cf84.js');
+var index$9 = require('./index-5301650d.js');
 var PhoneInputBase = require('react-phone-number-input');
-var index$8 = require('./index-78049e60.js');
-var index$b = require('./index-d27221b2.js');
-var index$7 = require('./index-23982b49.js');
-var index$c = require('./index-a92d3727.js');
-var index$a = require('./index-8614189c.js');
-var index$d = require('./index-6364bbad.js');
-var index$e = require('./index-d2745db4.js');
+var index$8 = require('./index-ecb509ca.js');
+var index$b = require('./index-c712231f.js');
+var index$7 = require('./index-2195740a.js');
+var index$c = require('./index-333d205f.js');
+var index$a = require('./index-4ed7015a.js');
+var index$d = require('./index-2dfe8be0.js');
+var index$e = require('./index-f0590bea.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -52,7 +53,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
-var cn__default = /*#__PURE__*/_interopDefault(cn);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 
 /* eslint-disable prettier/prettier */
 const Check = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 81 80", fill: "none" }, props),
@@ -470,18 +471,42 @@ const UserProfileNavigation = ({ SSO_URL, UP_BASEPATH = 'user', themeName = 'hel
 };
 
 const StyledOpeningHour = styled__default["default"].div `
-  color: #111111;
+  ${utils.MediaQueries.mbUp} {
+    margin: 0;
+  }
+
+  color: ${miscTheme.theme.colors.gray1000};
   margin-bottom: 1rem;
   .txt-body-1 {
     font-size: 0.8125rem;
     line-height: 1.25rem;
+    ${utils.MediaQueries.mbUp} {
+      font-size: 0.9375rem;
+      line-height: 1.5rem;
+      color: ${miscTheme.theme.colors.gray700};
+    }
   }
   .txt-body-2 {
     font-size: 0.9375rem;
     line-height: 1.5rem;
+    padding: 0.75rem 0 0;
+    font-weight: 500;
+    ${utils.MediaQueries.mbUp} {
+      padding: 0;
+      font-weight: 600;
+    }
+  }
+
+  .txt-hours {
+    font-weight: 500;
+    color: ${miscTheme.theme.colors.gray1000};
   }
 `;
 const StyledFormatDataBox = styled__default["default"].div `
+  ${utils.MediaQueries.mbUp} {
+    padding: 8px 0;
+    gap: 4px;
+  }
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -529,13 +554,10 @@ function OpeningHours({ workingTimes }) {
         });
     }, [workingTimes]);
     return (React__namespace["default"].createElement(StyledOpeningHour, null,
-        React__namespace["default"].createElement("div", { className: "txt-body-2", style: {
-                padding: '0.75rem 0',
-                fontWeight: 500,
-            } }, t('detail.openHours')),
-        React__namespace["default"].createElement("div", null, formatData.map((item, index) => (React__namespace["default"].createElement(StyledFormatDataBox, { className: "txt-body-1", key: index },
+        React__namespace["default"].createElement("div", { className: "txt-body-2" }, t('detail.openHours')),
+        React__namespace["default"].createElement("div", { className: "opening-hours-container" }, formatData.map((item, index) => (React__namespace["default"].createElement(StyledFormatDataBox, { className: "txt-body-1", key: index },
             React__namespace["default"].createElement("div", null, item === null || item === void 0 ? void 0 : item.day),
-            React__namespace["default"].createElement("div", { style: { fontWeight: 500 } }, item === null || item === void 0 ? void 0 : item.value)))))));
+            React__namespace["default"].createElement("div", { className: "txt-hours" }, item === null || item === void 0 ? void 0 : item.value)))))));
 }
 
 const getHospitalUrl = (locale, hospital) => {
@@ -690,14 +712,14 @@ const Map = (props) => {
             ? 0
             : mapCard.current.clientHeight + 'px',
     };
-    return (React__namespace["default"].createElement(StyledOMap, { className: cn__default["default"](className), style: mapHeight, "data-has-card": !hasNoCard || undefined, "data-has-floating-card": isCardFloating || undefined },
+    return (React__namespace["default"].createElement(StyledOMap, { className: classNames__default["default"](className), style: mapHeight, "data-has-card": !hasNoCard || undefined, "data-has-floating-card": isCardFloating || undefined },
         React__namespace["default"].createElement("div", { className: "map" },
             isUsingEmbedMap ? (React__namespace["default"].createElement("iframe", { width: width, height: height, style: {
                     border: 0,
                 }, className: "aspect-ratio-map", loading: "lazy", allowFullScreen: true, src: `https://www.google.com/maps/embed/v1/place?key=${googleMapKey}&q=${hospital.latitude},${hospital.longitude}&zoom=14` })) : (React__namespace["default"].createElement(api.LoadScript, { googleMapsApiKey: googleMapKey || '' },
                 React__namespace["default"].createElement(api.GoogleMap, { mapContainerClassName: 'map', center: center, zoom: 14, onLoad: onLoad, options: mapOptions },
                     React__namespace["default"].createElement(api.Marker, { position: center })))),
-            !hasNoCard ? (React__namespace["default"].createElement(StyledCard$1, { className: cn__default["default"]('map-card'), "data-is-full-width": isFullWidth || undefined, ref: mapCard },
+            !hasNoCard ? (React__namespace["default"].createElement(StyledCard$1, { className: classNames__default["default"]('map-card'), "data-is-full-width": isFullWidth || undefined, ref: mapCard },
                 React__namespace["default"].createElement(StyledHospitalTitle, { href: `${index$5.basePath}${getHospitalUrl(locale, hospital)}` },
                     React__namespace["default"].createElement(index$6.Text, { size: "s2", type: "semiBold" }, hospitalName)),
                 React__namespace["default"].createElement(StyledHospitalMoreInfo, null,
@@ -724,18 +746,32 @@ const Email = (props) => (React__namespace.createElement("svg", Object.assign({
 
 // import { ThemeProps } from '@hhgtech/hhg-components'
 const StyledClinicInfo = styled__default["default"].div `
+  ${utils.MediaQueries.mbUp} {
+    display: flex;
+    gap: ${core.rem(24)};
+    padding: 0 ${core.rem(24)} ${core.rem(24)};
+  }
+
   color: #111111;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
+  padding: 0 ${core.rem(16)} ${core.rem(16)};
 
   .name {
+    ${utils.MediaQueries.mbUp} {
+      font-weight: 600;
+    }
+
     font-size: 0.9375rem;
     line-height: 1.5rem;
     font-weight: 500;
   }
 
   address {
+    ${utils.MediaQueries.mbUp} {
+      font-size: 0.9375rem;
+      line-height: 1.5rem;
+      font-style: normal;
+    }
+
     font-size: 0.8125rem;
     line-height: 1.25rem;
     font-weight: 400;
@@ -764,6 +800,10 @@ const StyledMap = styled__default["default"](Map) `
     --mapCardHeight: --cardHeight;
   }
   iframe {
+    ${utils.MediaQueries.mbUp} {
+      width: ${core.rem(180)};
+      height: ${core.rem(180)};
+    }
     border-radius: 12px;
     overflow: hidden;
   }
@@ -777,6 +817,22 @@ const StyledEmailIcon = styled__default["default"](Email) `
   height: 1rem;
 `;
 const StyledContainer = styled__default["default"].div `
+  ${utils.MediaQueries.mbUp} {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  .clinic-content {
+    display: flex;
+    flex-direction: column;
+    ${utils.MediaQueries.mbUp} {
+      gap: 8px;
+    }
+    gap: 12px;
+  }
+
   padding-top: 1rem;
   padding-bottom: 1rem;
   padding-left: 4.5px;
@@ -798,6 +854,13 @@ const StyledDistanceTag$1 = styled__default["default"](index$1.DistanceTag) `
 const StyledContact = styled__default["default"].div `
   display: flex;
   gap: 4px;
+  flex-direction: column;
+  ${utils.MediaQueries.mbUp} {
+    flex-direction: row;
+  }
+  .contact-item {
+    width: fit-content;
+  }
 `;
 
 function ClinicInfo(props) {
@@ -813,21 +876,22 @@ function ClinicInfo(props) {
     return (React__namespace["default"].createElement(StyledClinicInfo, null,
         React__namespace["default"].createElement(StyledMap, { dataEventAction: dataEventAction, dataEventCategory: dataEventCategory, dataEventLabel: dataEventLabel, googleMapKey: googleMapKey, hasNoCard: true, hospital: hospital, locale: locale, isLoggedIn: isLoggedIn, isFullWidth: true, height: 220, className: "panel-map", onPhoneHospital: onPhoneHospital }),
         React__namespace["default"].createElement(StyledContainer, null,
-            React__namespace["default"].createElement("div", { className: "name" }, hospitalInfo.name),
-            React__namespace["default"].createElement(StyledFlexBox, null,
-                React__namespace["default"].createElement("address", null, hospitalInfo.address),
-                distance && (React__namespace["default"].createElement("div", { style: {
-                        flexShrink: 0,
-                    } },
-                    React__namespace["default"].createElement(StyledDistanceTag$1, { value: `${distance} km` })))),
-            React__namespace["default"].createElement(StyledContact, null,
-                hospitalInfo.phone && (React__namespace["default"].createElement("div", { className: "contact-item" },
-                    React__namespace["default"].createElement(StyledMobileIcon, null),
-                    React__namespace["default"].createElement("a", { href: `tel:${hospitalInfo.phone}` }, localizeNumberFormat.formatPhoneNumber(hospitalInfo.phone)))),
-                hospitalInfo.email && (React__namespace["default"].createElement("div", { className: "contact-item" },
-                    React__namespace["default"].createElement(StyledEmailIcon, null),
-                    React__namespace["default"].createElement("a", { href: `mailto:${hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.email}` }, hospitalInfo.email))))),
-        hospitalInfo.working_times && (React__namespace["default"].createElement(OpeningHours, { workingTimes: hospitalInfo.working_times }))));
+            React__namespace["default"].createElement("div", { className: "clinic-content" },
+                React__namespace["default"].createElement("div", { className: "name" }, hospitalInfo.name),
+                React__namespace["default"].createElement(StyledFlexBox, null,
+                    React__namespace["default"].createElement("address", null, hospitalInfo.address),
+                    distance && (React__namespace["default"].createElement("div", { style: {
+                            flexShrink: 0,
+                        } },
+                        React__namespace["default"].createElement(StyledDistanceTag$1, { value: `${distance} km` })))),
+                React__namespace["default"].createElement(StyledContact, null,
+                    hospitalInfo.phone && (React__namespace["default"].createElement("div", { className: "contact-item" },
+                        React__namespace["default"].createElement(StyledMobileIcon, null),
+                        React__namespace["default"].createElement("a", { href: `tel:${hospitalInfo.phone}` }, localizeNumberFormat.formatPhoneNumber(hospitalInfo.phone)))),
+                    hospitalInfo.email && (React__namespace["default"].createElement("div", { className: "contact-item" },
+                        React__namespace["default"].createElement(StyledEmailIcon, null),
+                        React__namespace["default"].createElement("a", { href: `mailto:${hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.email}` }, hospitalInfo.email))))),
+            hospitalInfo.working_times && (React__namespace["default"].createElement(OpeningHours, { workingTimes: hospitalInfo.working_times })))));
 }
 
 const StyledCollectPhoneForm = styled__default["default"].div `
@@ -1175,7 +1239,7 @@ function HospitalInfo({ hospitalInfo, distance, className, }) {
             hospitalInfo.working_times && isOpened !== null && (React__namespace["default"].createElement("div", { className: "hospitalStatus", "data-is-opened": isOpened },
                 React__namespace["default"].createElement(StyledClockIcon, null),
                 React__namespace["default"].createElement(index$a.Text, { size: "p3", weight: "regular", color: "inherit" }, t(isOpened ? 'hospital.status.opening' : 'hospital.status.closed')))),
-            distance && (React__namespace["default"].createElement(StyledDistanceTag, { className: cn__default["default"]({
+            distance && (React__namespace["default"].createElement(StyledDistanceTag, { className: classNames__default["default"]({
                     distanceTag: hospitalInfo.working_times === null,
                 }), value: `${distance} km` }))),
         React__namespace["default"].createElement(StyledArrowRightIcon, null)));
@@ -1226,7 +1290,7 @@ const StyledInsuranceList = styled__default["default"](index$e.InsuranceList) `
 function ProductInsuranceInfo({ hospitalInfo, isMobile = false, }) {
     const { t } = index.useTranslations();
     const isSupportPayment = (hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.accepted_payments) && hospitalInfo.accepted_payments.length > 0;
-    return (React__namespace["default"].createElement(StyledInsuranceContainer, null,
+    return (React__namespace["default"].createElement(StyledInsuranceContainer, { id: "insurance-container" },
         React__namespace["default"].createElement("div", null,
             React__namespace["default"].createElement("h3", { className: "txt-body-2" }, t('common.insurance')),
             React__namespace["default"].createElement("p", { className: "txt-body-1" }, t('common.insuranceIntro')),

package/build/{index-d60aa343.js → index-6acd0140.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-2a7f6478.js');
+var tslib_es6 = require('./tslib.es6-137c0b64.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index_styles = require('./index.styles-4c56e238.js');
+var index_styles = require('./index.styles-db7a690e.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }