@hhgtech/hhg-components 1.29.81 → 1.29.83

package/build/{index-dcbd8bf3.js → index-bd37f7ea.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
 var React = require('react');
-var theme = require('./theme-e4f7f487.js');
-var WhatsApp = require('./WhatsApp-82018096.js');
+var miscTheme = require('./miscTheme.js');
+var WhatsApp = require('./WhatsApp-19ca0437.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 const ArrowRightTail = (_a) => {
-    var { size = 24, color: colorInit = theme.theme.colors.gray600, useCurrentColor, isActive, activeColor = theme.theme.colors.primaryBase } = _a, rest = tslib_es6.__rest(_a, ["size", "color", "useCurrentColor", "isActive", "activeColor"]);
+    var { size = 24, color: colorInit = miscTheme.theme.colors.gray600, useCurrentColor, isActive, activeColor = miscTheme.theme.colors.primaryBase } = _a, rest = tslib_es6.__rest(_a, ["size", "color", "useCurrentColor", "isActive", "activeColor"]);
     const color = useCurrentColor
         ? 'currentColor'
         : isActive
@@ -22,7 +22,7 @@ const ArrowRightTail = (_a) => {
 };
 
 const Cart = (_a) => {
-    var { size = 24, color: colorInit = theme.theme.colors.gray600, useCurrentColor, isActive, isSolid, activeColor = theme.theme.colors.primaryBase } = _a, rest = tslib_es6.__rest(_a, ["size", "color", "useCurrentColor", "isActive", "isSolid", "activeColor"]);
+    var { size = 24, color: colorInit = miscTheme.theme.colors.gray600, useCurrentColor, isActive, isSolid, activeColor = miscTheme.theme.colors.primaryBase } = _a, rest = tslib_es6.__rest(_a, ["size", "color", "useCurrentColor", "isActive", "isSolid", "activeColor"]);
     const color = useCurrentColor
         ? 'currentColor'
         : isActive
@@ -35,7 +35,7 @@ const Cart = (_a) => {
 };
 
 const CartWithAdd = (_a) => {
-    var { size = 24, color: colorInit = theme.theme.colors.gray600, useCurrentColor, isActive, activeColor = theme.theme.colors.primaryBase } = _a, rest = tslib_es6.__rest(_a, ["size", "color", "useCurrentColor", "isActive", "activeColor"]);
+    var { size = 24, color: colorInit = miscTheme.theme.colors.gray600, useCurrentColor, isActive, activeColor = miscTheme.theme.colors.primaryBase } = _a, rest = tslib_es6.__rest(_a, ["size", "color", "useCurrentColor", "isActive", "activeColor"]);
     const color = useCurrentColor
         ? 'currentColor'
         : isActive
@@ -59,12 +59,12 @@ const Eye = (_a) => {
 };
 Eye.defaultProps = {
     size: 24,
-    color: theme.theme.colors.gray600,
-    activeColor: theme.theme.colors.primaryBase,
+    color: miscTheme.theme.colors.gray600,
+    activeColor: miscTheme.theme.colors.primaryBase,
 };
 
 const Share = (_a) => {
-    var { size = 24, color: colorInit = theme.theme.colors.gray600, useCurrentColor, activeColor = theme.theme.colors.primaryBase, isActive, isMarryBaby, isSolid = true } = _a, rest = tslib_es6.__rest(_a, ["size", "color", "useCurrentColor", "activeColor", "isActive", "isMarryBaby", "isSolid"]);
+    var { size = 24, color: colorInit = miscTheme.theme.colors.gray600, useCurrentColor, activeColor = miscTheme.theme.colors.primaryBase, isActive, isMarryBaby, isSolid = true } = _a, rest = tslib_es6.__rest(_a, ["size", "color", "useCurrentColor", "activeColor", "isActive", "isMarryBaby", "isSolid"]);
     const color = useCurrentColor
         ? 'currentColor'
         : isActive

package/build/index-be727078.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
+var React = require('react');
+var core = require('@mantine/core');
+require('./index-df9447b3.js');
+require('@mantine/dates');
+require('./index-617bff8c.js');
+require('./index-d91f52cc.js');
+require('./index-6e7aede8.js');
+require('./useMantineLocale-f9195d27.js');
+var index = require('./index-036fe55d.js');
+var index$1 = require('./index-8cb3f562.js');
+var useTranslations = require('./useTranslations-80687df4.js');
+require('@mantine/hooks');
+require('./utils-928b4701.js');
+require('./other-0edcc417.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var useStyles = core.createStyles((theme, { hasOnClickFn }) => {
+    return {
+        root: {
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: core.rem(16),
+        },
+        sponsorBox: {
+            display: 'flex',
+            gap: core.rem(12),
+            alignItems: 'center',
+            backgroundColor: theme.colors.neutral[0],
+            border: `1px solid ${theme.colors.neutral[1]}`,
+            borderRadius: core.rem(4),
+            padding: '4px 12px',
+            alignSelf: 'flex-start',
+        },
+        sponsorLogo: {
+            maxHeight: core.rem(32),
+        },
+        btn: {
+            minWidth: core.rem(180),
+            [theme.fn.largerThan('sm')]: {
+                alignSelf: 'flex-end',
+            },
+            visibility: hasOnClickFn ? 'visible' : 'hidden',
+        },
+    };
+});
+
+const BabyPoopForm = (_a) => {
+    var { babyPoopPage, onClickFindOut, currentUrl, sponsorLogo, btnProps, styles, classNames } = _a, props = tslib_es6.__rest(_a, ["babyPoopPage", "onClickFindOut", "currentUrl", "sponsorLogo", "btnProps", "styles", "classNames"]);
+    const { t } = useTranslations.useTranslations();
+    const { classes } = useStyles({ hasOnClickFn: Boolean(onClickFindOut) }, { name: 'BabyPoopForm', styles, classNames });
+    return (React__default["default"].createElement(core.Box, Object.assign({ className: classes.root }, props),
+        sponsorLogo && (React__default["default"].createElement(core.Box, { className: classes.sponsorBox },
+            React__default["default"].createElement(index.Text, { size: "p4" }, t('common.sponsoredBy')),
+            React__default["default"].createElement("img", { loading: "lazy", src: sponsorLogo, alt: "sponsor", className: classes.sponsorLogo }))),
+        React__default["default"].createElement(index.Text, { size: "p3", className: "description" }, babyPoopPage.description),
+        React__default["default"].createElement(index$1.Button, Object.assign({ className: classes.btn, onClick: onClickFindOut, dataEventCategory: "Health Tool", dataEventAction: "Baby Stool Inquiry", dataEventLabel: currentUrl }, btnProps), t('babyPoop.findOut'))));
+};
+
+exports.BabyPoopForm = BabyPoopForm;

package/build/{index-f28c47ce.js → index-cb1c7190.js}

@@ -4,7 +4,7 @@ var React = require('react');
 var dateFns = require('date-fns');
 var DayPickerInput = require('react-day-picker/DayPickerInput');
 var styled = require('@emotion/styled');
-var theme = require('./theme-e4f7f487.js');
+var miscTheme = require('./miscTheme.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -182,7 +182,7 @@ const StyledPickerContainer = styled__default["default"].div `
   .pickerOverlay {
     margin-top: 6px;
     background: white;
-    border-radius: ${theme.theme.borderRadius};
+    border-radius: ${miscTheme.theme.borderRadius};
     box-shadow: 0px 6px 12px rgba(67, 86, 100, 0.2);
   }
 
@@ -204,7 +204,7 @@ const StyledPickerContainer = styled__default["default"].div `
 
     .svg {
       cursor: pointer;
-      stroke: ${theme.theme.colors.gray800};
+      stroke: ${miscTheme.theme.colors.gray800};
     }
     .react-datepicker__day {
       width: 40px;
@@ -220,7 +220,7 @@ const StyledPickerContainer = styled__default["default"].div `
     }
 
     .react-datepicker__day {
-      font-weight: ${theme.theme.sizes.fwBold};
+      font-weight: ${miscTheme.theme.sizes.fwBold};
     }
 
     .react-datepicker__day--selected,
@@ -231,7 +231,7 @@ const StyledPickerContainer = styled__default["default"].div `
       height: 30px;
       margin: 4px;
       margin-bottom: -2px;
-      background: ${theme.theme.colors.primaryBase};
+      background: ${miscTheme.theme.colors.primaryBase};
       border-radius: 50%;
     }
 
@@ -248,12 +248,12 @@ const StyledPickerContainer = styled__default["default"].div `
         stroke: #262626;
       }
       select {
-        background: ${theme.theme.colors.neutral100};
+        background: ${miscTheme.theme.colors.neutral100};
         text-align: center;
         &:not(:last-child) {
           padding: 8px 10px;
           margin-right: 15px;
-          border-radius: ${theme.theme.borderRadius};
+          border-radius: ${miscTheme.theme.borderRadius};
         }
       }
     }
@@ -462,9 +462,9 @@ const StyledPickerContainer = styled__default["default"].div `
     ) {
     position: relative;
 
-    background-color: ${theme.theme.colors.primaryBase};
+    background-color: ${miscTheme.theme.colors.primaryBase};
     color: #f0f8ff;
-    font-weight: ${theme.theme.sizes.fwBold};
+    font-weight: ${miscTheme.theme.sizes.fwBold};
   }
 
   .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(
@@ -513,8 +513,8 @@ const StyledCaptionWrapper = styled__default["default"].form `
   & * {
     height: 46px;
     padding: 10px 10px;
-    background: ${theme.theme.colors.neutral100};
-    border-radius: ${theme.theme.borderRadius};
+    background: ${miscTheme.theme.colors.neutral100};
+    border-radius: ${miscTheme.theme.borderRadius};
   }
 `;
 

package/build/{index-f1f4fbb9.js → index-cb4ea8c9.js}

@@ -1,25 +1,27 @@
 'use strict';
 
 var React = require('react');
-var index$1 = require('./index-ba3797bb.js');
+var index$1 = require('./index-a73d7cb3.js');
 var dayjs = require('dayjs');
-var index$3 = require('./index-a86ea1b6.js');
-var index = require('./index-05f106c2.js');
+require('./index-617bff8c.js');
+var index = require('./index-df9447b3.js');
 var core = require('@mantine/core');
 require('@mantine/dates');
-require('./index-df5cd44b.js');
-require('./index-1efa7d84.js');
-require('./useMantineLocale-a4f0c61d.js');
-var index$2 = require('./index-d34cd464.js');
-require('./index-a7de42d1.js');
-var theme = require('./theme-e4f7f487.js');
-require('./translationsContext-39528d2f.js');
+require('./index-d91f52cc.js');
+require('./index-6e7aede8.js');
+require('./useMantineLocale-f9195d27.js');
+var index$2 = require('./index-036fe55d.js');
+require('./index-8cb3f562.js');
+require('./translationsContext-ade0df93.js');
 require('string-format');
 require('@mantine/hooks');
-var utils = require('./utils-524bda7c.js');
+var utils = require('./utils-928b4701.js');
+require('./other-0edcc417.js');
 var styled = require('@emotion/styled');
-var index$5 = require('./index-c225ef22.js');
-var index$4 = require('./index-fe7345fa.js');
+var miscTheme = require('./miscTheme.js');
+var constantsDomainLocales = require('./constantsDomainLocales.js');
+var index$4 = require('./index-92a816de.js');
+var index$3 = require('./index-66e789cf.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -64,7 +66,7 @@ const StyledFooter$1 = styled__default["default"].footer `
     height: 1px;
     border: none;
     margin: 16px 0 16px 0;
-    background: ${theme.theme.colors.neutral500};
+    background: ${miscTheme.theme.colors.neutral500};
     opacity: 0.1;
     outline: none;
   }
@@ -89,7 +91,7 @@ const StyledFooter$1 = styled__default["default"].footer `
     gap: 16px;
     padding-top: 8px;
     .copyright-content {
-      color: ${theme.theme.colors.neutral500};
+      color: ${miscTheme.theme.colors.neutral500};
       font-size: 12px;
     }
 
@@ -113,8 +115,8 @@ const StyledFooter$1 = styled__default["default"].footer `
     gap: 16px;
     align-items: center;
     padding: 19px 0;
-    border-top: 1px solid ${theme.theme.colors.neutral100}1a;
-    border-bottom: 1px solid ${theme.theme.colors.neutral100}1a;
+    border-top: 1px solid ${miscTheme.theme.colors.neutral100}1a;
+    border-bottom: 1px solid ${miscTheme.theme.colors.neutral100}1a;
     .flags {
       display: flex;
       gap: 12px;
@@ -170,8 +172,8 @@ const StyledFooter$1 = styled__default["default"].footer `
       > .footer-menu-column:first-child {
         grid-column-start: 1;
         grid-column-end: 3;
-        border-top: 1px solid ${theme.theme.colors.neutral100}1a;
-        border-bottom: 1px solid ${theme.theme.colors.neutral100}1a;
+        border-top: 1px solid ${miscTheme.theme.colors.neutral100}1a;
+        border-bottom: 1px solid ${miscTheme.theme.colors.neutral100}1a;
         > .footer-menu-link-wrapper {
           display: grid;
           grid-template-columns: repeat(2, 1fr);
@@ -239,7 +241,7 @@ const FooterMenuColumn = ({ title, items, locale, index: index$1, }) => {
     const { isMobile } = index.useScreenSize();
     return (React__default["default"].createElement("div", { className: "footer-menu-column" },
         title ? (React__default["default"].createElement(index$2.Text, { size: isMobile ? 's4' : 's3', className: "footer-menu-title", weight: isMobile ? 'regular' : 'semiBold', color: "neutral.6" }, title)) : null,
-        React__default["default"].createElement("div", { className: "footer-menu-link-wrapper" }, items === null || items === void 0 ? void 0 : items.map((informationLink, idx) => (React__default["default"].createElement(index$2.Text, { size: isMobile ? 'p3' : 'p4', as: "a", "data-event-category": "Footer", "data-event-action": informationLink.title, "data-event-label": `https://${index$3.domainLocales[locale]}${informationLink.url}`, className: "footer-menu-link", 
+        React__default["default"].createElement("div", { className: "footer-menu-link-wrapper" }, items === null || items === void 0 ? void 0 : items.map((informationLink, idx) => (React__default["default"].createElement(index$2.Text, { size: isMobile ? 'p3' : 'p4', as: "a", "data-event-category": "Footer", "data-event-action": informationLink.title, "data-event-label": `https://${constantsDomainLocales.domainLocales[locale]}${informationLink.url}`, className: "footer-menu-link", 
             // @ts-ignore
             href: informationLink.url, key: idx, color: "#fff", weight: isMobile && index$1 === 0 ? 'semiBold' : 'regular' }, informationLink.title))))));
 };
@@ -299,7 +301,7 @@ const StyledMenuContainer = styled__default["default"].div `
   justify-content: space-between;
   align-items: flex-start;
 
-  border-bottom: 1px solid ${theme.theme.colors.neutral200};
+  border-bottom: 1px solid ${miscTheme.theme.colors.neutral200};
 
   ${utils.MediaQueries.tdDown} {
     margin: auto 16px;
@@ -389,10 +391,10 @@ const MarryBabyFooter = ({ logoType = 'marryBaby', footerMenu, background, }) =>
         } },
         React__default["default"].createElement(index$1.Container, null,
             React__default["default"].createElement(StyledMenuContainer, null, menu === null || menu === void 0 ? void 0 : menu.map(({ menu_title, items }, idx) => (React__default["default"].createElement(StyledWrapMenuItem, { key: `mbf${idx}` },
-                React__default["default"].createElement(index$4.MarryBabyText, { className: "title", type: "subtitle-1", color: theme.theme.mbColors.pink }, menu_title), items === null || items === void 0 ? void 0 :
+                React__default["default"].createElement(index$3.MarryBabyText, { className: "title", type: "subtitle-1", color: miscTheme.theme.mbColors.pink }, menu_title), items === null || items === void 0 ? void 0 :
                 items.map(({ title, url }, id) => (React__default["default"].createElement("a", { "data-event-category": "Footer", "data-event-action": "Click", "data-event-label": `${url}`, className: "link", href: url, key: `footer-links-${id}` },
                     React__default["default"].createElement(StyledWrapItems, { key: `mbitem${id}` },
-                        React__default["default"].createElement(index$4.MarryBabyText, { type: "bodytext-2", color: theme.theme.mbColors.gray }, title)))))))))),
+                        React__default["default"].createElement(index$3.MarryBabyText, { type: "bodytext-2", color: miscTheme.theme.mbColors.gray }, title)))))))))),
         React__default["default"].createElement(index$1.Container, null,
             React__default["default"].createElement(StyledWrapInfo, null,
                 React__default["default"].createElement(core.Flex, { gap: '24px', sx: (theme) => ({
@@ -407,7 +409,7 @@ const MarryBabyFooter = ({ logoType = 'marryBaby', footerMenu, background, }) =>
                         },
                     }) },
                     React__default["default"].createElement(core.Stack, { spacing: '24px', className: "info-item" },
-                        React__default["default"].createElement(index$5.Logo, { className: "logo", type: logoType }),
+                        React__default["default"].createElement(index$4.Logo, { className: "logo", type: logoType }),
                         React__default["default"].createElement(index$2.Text, { size: "p4", as: "div" },
                             React__default["default"].createElement("div", { dangerouslySetInnerHTML: {
                                     __html: general === null || general === void 0 ? void 0 : general.content,