@hhgtech/hhg-components 1.29.82 → 1.29.83

package/build/{fixedBottomAdBlock-0129a006.js → fixedBottomAdBlock-026650fb.js}

@@ -2,48 +2,47 @@
 
 var React = require('react');
 var other = require('@hhgtech/icons/other');
-var index$4 = require('./index-64d8db08.js');
-var index$2 = require('./index-1fdf2f01.js');
-var index$3 = require('./index-54aeefca.js');
-var theme = require('./theme-be20929b.js');
-var tslib_es6 = require('./tslib.es6-bd3f8718.js');
+var index$4 = require('./index-6e7aede8.js');
+var index$2 = require('./index-036fe55d.js');
+var index$3 = require('./index-eddf350b.js');
+var miscTheme = require('./miscTheme.js');
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
 var core = require('@mantine/core');
 var innertext = require('innertext');
-var index$5 = require('./index-dff7ee1b.js');
+var index$5 = require('./index-df9447b3.js');
 require('@mantine/dates');
-var index$9 = require('./index-e3bbd009.js');
-var index$g = require('./index-1f3fc2e3.js');
-require('./useMantineLocale-0d63dfea.js');
-require('./index-3eb666e6.js');
-require('./translationsContext-00fdb62e.js');
+var index$9 = require('./index-617bff8c.js');
+require('./index-d91f52cc.js');
+require('./useMantineLocale-f9195d27.js');
+require('./index-8cb3f562.js');
+require('./translationsContext-ade0df93.js');
 require('string-format');
 require('@mantine/hooks');
-var utils = require('./utils-15a9772e.js');
-var index$6 = require('./index-4b7d4b5b.js');
+var utils = require('./utils-928b4701.js');
+require('./other-0edcc417.js');
+var index$6 = require('./index-7efbe5e3.js');
 var styled = require('@emotion/styled');
-var index$7 = require('./index-33432b02.js');
+var index$7 = require('./index-db6d4daf.js');
 var throttle = require('lodash/throttle');
-var index$8 = require('./index-a9bdf889.js');
+var index$8 = require('./index-92a816de.js');
 var react = require('@emotion/react');
 var parse = require('html-react-parser');
-var isProduction = require('./isProduction-20cd663d.js');
-var useTranslations = require('./useTranslations-685f989b.js');
-var index$a = require('./index-60f6d762.js');
-var index$b = require('./index-00a78d81.js');
-var dataTransform = require('./dataTransform-e39297c1.js');
-var defaultClassWrapper = require('./defaultClassWrapper-b7719693.js');
+var constantsDomainLocales = require('./constantsDomainLocales.js');
+var constantsIsProduction = require('./constantsIsProduction.js');
 var dateFns = require('date-fns');
-var useOutsideClick = require('./useOutsideClick-d95a32b6.js');
+var useOutsideClick = require('./useOutsideClick-960bf73b.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$c = require('./index-f222ee45.js');
-var index$d = require('./index-4bc690c9.js');
-var getSocialList = require('./getSocialList-8cc32f7c.js');
-var index$f = require('./index-7953fb8e.js');
-var index$e = require('./index-765ed75d.js');
+var index$a = require('./index-323d2766.js');
+var useTranslations = require('./useTranslations-80687df4.js');
+var index$b = require('./index-4ef9be86.js');
+var miscGetSocialList = require('./miscGetSocialList.js');
+var index$d = require('./index-6daafc7b.js');
+var index$c = require('./index-4b98362e.js');
 var uuid = require('uuid');
+var Locale = require('./Locale-0b86b849.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -77,13 +76,13 @@ const CardExpert = ({ isMobile, avatarImg, name, link, size = 'lg', specialty, }
         React__default["default"].createElement("div", { className: "author" },
             React__default["default"].createElement("div", { className: "expert-avatar", "data-size": size }, avatarImg),
             React__default["default"].createElement("div", { className: "expert", "data-is-disabled-url": !!!link }, isMobile ? (React__default["default"].createElement("a", { href: link }, size === 'lg' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(index$3.Heading, { tag: "h6", className: "expert__name", color: theme.theme.colors.gray600 }, name),
-                React__default["default"].createElement(index$2.Text, { color: theme.theme.colors.gray500, size: "p3", className: "specialty" }, specialty))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(index$3.Heading, { tag: "h6", className: "expert__name", color: theme.theme.colors.gray600 }, name))))) : (React__default["default"].createElement("a", { href: link }, size === 'lg' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(index$3.Heading, { tag: "h6", className: "expert__name", color: theme.theme.colors.gray600 }, name),
-                React__default["default"].createElement(index$2.Text, { color: theme.theme.colors.gray500, size: "p3", className: "specialty" }, specialty))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement("h6", { color: theme.theme.colors.gray600, className: `${styles$1.expertName} expert__name` }, name),
-                React__default["default"].createElement(index$2.Text, { color: theme.theme.colors.gray500, size: "p4", className: "specialty" }, specialty)))))))));
+                React__default["default"].createElement(index$3.Heading, { tag: "h6", className: "expert__name", color: miscTheme.theme.colors.gray600 }, name),
+                React__default["default"].createElement(index$2.Text, { color: miscTheme.theme.colors.gray500, size: "p3", className: "specialty" }, specialty))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(index$3.Heading, { tag: "h6", className: "expert__name", color: miscTheme.theme.colors.gray600 }, name))))) : (React__default["default"].createElement("a", { href: link }, size === 'lg' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(index$3.Heading, { tag: "h6", className: "expert__name", color: miscTheme.theme.colors.gray600 }, name),
+                React__default["default"].createElement(index$2.Text, { color: miscTheme.theme.colors.gray500, size: "p3", className: "specialty" }, specialty))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("h6", { color: miscTheme.theme.colors.gray600, className: `${styles$1.expertName} expert__name` }, name),
+                React__default["default"].createElement(index$2.Text, { color: miscTheme.theme.colors.gray500, size: "p4", className: "specialty" }, specialty)))))))));
 };
 
 const AffiliateIcon = React.memo(() => {
@@ -185,7 +184,7 @@ const _Horizontal = (_a) => {
 
 // MyComponent.styles.ts
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-var useStyles$4 = core.createStyles((_theme, {}) => ({
+var useStyles$1 = core.createStyles((_theme, {}) => ({
     // add all styles as usual
     root: {},
     image: {},
@@ -205,7 +204,7 @@ const _Vertical = (_a) => {
     // size = 'lg',
     classNames, styles, unstyled, className } = _a, rest = tslib_es6.__rest(_a, ["article", "author", "authorAvatar", "badge", "bannerImageWrapProps", "hideDescription", "isBookmarked", "onBookmark", "time", "tracking", "classNames", "styles", "unstyled", "className"]);
     const { isMobile } = index$5.useScreenSize();
-    const { classes, cx } = useStyles$4(
+    const { classes, cx } = useStyles$1(
     // First argument of useStyles is styles params
     {}, 
     // Second argument is responsible for styles api integration
@@ -273,9 +272,9 @@ const StyledCategoryCard = styled__default["default"].a `
   align-items: center;
   padding: 8px;
 
-  border: 1px solid ${theme.theme.colors.neutral100};
+  border: 1px solid ${miscTheme.theme.colors.neutral100};
   background-color: white;
-  border-radius: ${theme.theme.borderRadius};
+  border-radius: ${miscTheme.theme.borderRadius};
   box-shadow: 0px 5px 12px rgba(40, 74, 117, 0.08);
   cursor: pointer;
   text-decoration: none;
@@ -362,9 +361,9 @@ const CheckboxGroup = ({ name, values = [], onChanges, options = [], className,
 const StyledIconText = styled__default["default"].div `
   display: flex;
   align-items: center;
-  --font-weight-lg: ${theme.theme.sizes.fwBold};
-  --font-weight-md: ${theme.theme.sizes.fwRegular};
-  --font-weight-sm: ${theme.theme.sizes.fwRegular};
+  --font-weight-lg: ${miscTheme.theme.sizes.fwBold};
+  --font-weight-md: ${miscTheme.theme.sizes.fwRegular};
+  --font-weight-sm: ${miscTheme.theme.sizes.fwRegular};
 
   &[data-icon-position='left'] {
     & > *:first-child {
@@ -427,8 +426,8 @@ const StyledStep = styled__default["default"].div `
   top: 19px;
   width: 24px;
   height: 24px;
-  color: ${theme.theme.colors.white};
-  border: 2px solid ${theme.theme.colors.white};
+  color: ${miscTheme.theme.colors.white};
+  border: 2px solid ${miscTheme.theme.colors.white};
   border-radius: 50%;
   transform: translateY(-50%) translateX(-50%);
   display: flex;
@@ -436,13 +435,13 @@ const StyledStep = styled__default["default"].div `
   justify-content: center;
   cursor: pointer;
 
-  background-color: ${theme.theme.colors.white};
-  color: ${theme.theme.colors.gray300};
-  border: 1px solid ${theme.theme.colors.gray300};
+  background-color: ${miscTheme.theme.colors.white};
+  color: ${miscTheme.theme.colors.gray300};
+  border: 1px solid ${miscTheme.theme.colors.gray300};
 
   &[data-is-active='true'] {
-    background-color: ${theme.theme.colors.primaryBase};
-    color: ${theme.theme.colors.white};
+    background-color: ${miscTheme.theme.colors.primaryBase};
+    color: ${miscTheme.theme.colors.white};
     border: none;
   }
 `;
@@ -456,12 +455,12 @@ const StyledTrackContainer = styled__default["default"].div `
   }
 
   &[data-track-type='detail'][data-step-passed='true'] > div {
-    border: 1px solid ${theme.theme.colors.primaryBase};
+    border: 1px solid ${miscTheme.theme.colors.primaryBase};
     height: 0px;
   }
 
   &[data-track-type='detail'] > div {
-    border: 1px solid ${theme.theme.colors.gray200};
+    border: 1px solid ${miscTheme.theme.colors.gray200};
     height: 0px;
   }
 `;
@@ -470,19 +469,19 @@ const StyledTrack = styled__default["default"].div `
   height: 5px;
   align-self: center;
   border-radius: 4px;
-  background-color: ${theme.theme.colors.gray200};
+  background-color: ${miscTheme.theme.colors.gray200};
 `;
 const StyledStepLabel = styled__default["default"].div `
   position: absolute;
   top: 32px;
   min-width: 100px;
   text-align: center;
-  color: ${theme.theme.colors.gray500};
-  font-size: ${theme.theme.sizes.fsCaption2};
-  font-weight: ${theme.theme.sizes.fwBold};
+  color: ${miscTheme.theme.colors.gray500};
+  font-size: ${miscTheme.theme.sizes.fsCaption2};
+  font-weight: ${miscTheme.theme.sizes.fwBold};
 
   &[data-step-passed='true'] {
-    color: ${theme.theme.colors.gray800};
+    color: ${miscTheme.theme.colors.gray800};
   }
 `;
 const StyledBreadcrumbContainer = styled__default["default"].div `
@@ -492,9 +491,9 @@ const StyledBreadcrumbContainer = styled__default["default"].div `
 const StyledBreadcrumbWrapper = styled__default["default"].div `
   display: flex;
   align-items: center;
-  font-size: ${theme.theme.sizes.fsCaption2};
-  font-weight: ${theme.theme.sizes.fwBold};
-  color: ${theme.theme.colors.gray500};
+  font-size: ${miscTheme.theme.sizes.fsCaption2};
+  font-weight: ${miscTheme.theme.sizes.fwBold};
+  color: ${miscTheme.theme.colors.gray500};
   cursor: pointer;
 
   & > svg {
@@ -504,11 +503,11 @@ const StyledBreadcrumbWrapper = styled__default["default"].div `
   }
 
   & > svg > path {
-    stroke: ${theme.theme.colors.gray500};
+    stroke: ${miscTheme.theme.colors.gray500};
   }
 
   &[data-selected='true'] {
-    color: ${theme.theme.colors.primaryBase};
+    color: ${miscTheme.theme.colors.primaryBase};
   }
 `;
 const StyledDetailStep = styled__default["default"].div `
@@ -523,12 +522,12 @@ const StyledDetailStep = styled__default["default"].div `
   align-items: center;
 
   padding: 8px;
-  background-color: ${theme.theme.colors.white};
+  background-color: ${miscTheme.theme.colors.white};
 `;
 const StyledDetailStepIndicator = styled__default["default"].div `
   min-width: 24px;
   height: 24px;
-  border: 2px solid ${theme.theme.colors.white};
+  border: 2px solid ${miscTheme.theme.colors.white};
   border-radius: 50%;
   margin-right: 8px;
   display: flex;
@@ -536,14 +535,14 @@ const StyledDetailStepIndicator = styled__default["default"].div `
   justify-content: center;
   cursor: pointer;
 
-  background-color: ${theme.theme.colors.white};
-  color: ${theme.theme.colors.gray300};
-  border: 1px solid ${theme.theme.colors.gray300};
+  background-color: ${miscTheme.theme.colors.white};
+  color: ${miscTheme.theme.colors.gray300};
+  border: 1px solid ${miscTheme.theme.colors.gray300};
 
   &[data-is-active='true'] {
     border: none;
-    background-color: ${theme.theme.colors.primaryBase};
-    color: ${theme.theme.colors.white};
+    background-color: ${miscTheme.theme.colors.primaryBase};
+    color: ${miscTheme.theme.colors.white};
   }
 `;
 const StyledDetailStepIndicatorExternal = styled__default["default"].div `
@@ -557,26 +556,26 @@ const StyledDetailStepIndicatorExternal = styled__default["default"].div `
     margin-right: 8px;
 
     & > path {
-      stroke: ${theme.theme.colors.gray500};
+      stroke: ${miscTheme.theme.colors.gray500};
     }
   }
 `;
 const StyledDetailStepLabel = styled__default["default"].div `
-  color: ${theme.theme.colors.gray400};
-  font-size: ${theme.theme.sizes.fsCaption2};
-  font-weight: ${theme.theme.sizes.fwBold};
+  color: ${miscTheme.theme.colors.gray400};
+  font-size: ${miscTheme.theme.sizes.fsCaption2};
+  font-weight: ${miscTheme.theme.sizes.fwBold};
   margin-right: 8px;
   flex: 0 0 auto;
 
   &[data-step-passed='true'] {
-    color: ${theme.theme.colors.gray800};
+    color: ${miscTheme.theme.colors.gray800};
   }
 `;
 const StyledDetailStepDescription = styled__default["default"].div `
   position: absolute;
   top: 32px;
-  font-weight: ${theme.theme.sizes.fwRegular};
-  color: ${theme.theme.colors.gray400};
+  font-weight: ${miscTheme.theme.sizes.fwRegular};
+  color: ${miscTheme.theme.colors.gray400};
   padding-right: 16px;
 `;
 
@@ -676,7 +675,7 @@ const StyledSideMenu = styled__default["default"].div `
   width: var(--menu-width);
   height: 100vh;
   padding: var(--menu-spacing);
-  background-color: ${theme.theme.colors.neutral50};
+  background-color: ${miscTheme.theme.colors.neutral50};
   transition: ease-in-out 0.5s;
 
   &[data-is-collapsed] {
@@ -779,7 +778,7 @@ const StyledMenuLink = styled__default["default"].div `
   }
 
   &[data-is-link-active] {
-    background: ${theme.theme.colors.primaryBase};
+    background: ${miscTheme.theme.colors.primaryBase};
   }
 
   &[data-is-link-collapsed] {
@@ -857,7 +856,7 @@ const StyledScrollList = styled__default["default"].div `
           .line {
             width: 50%;
             height: 2px;
-            background-color: ${theme.theme.colors.gray600};
+            background-color: ${miscTheme.theme.colors.gray600};
           }
         }
       }
@@ -866,7 +865,7 @@ const StyledScrollList = styled__default["default"].div `
 
   .bullet-nav {
     position: absolute;
-    z-index: ${theme.theme.zIndexes.belowHeader};
+    z-index: ${miscTheme.theme.zIndexes.belowHeader};
     bottom: -30px;
     left: 50%;
     display: flex;
@@ -886,10 +885,10 @@ const StyledScrollList = styled__default["default"].div `
     transition: all 0.3s;
     &.active {
       &[data-scheme='hellosites'] {
-        background-color: ${theme.theme.colors.primary600};
+        background-color: ${miscTheme.theme.colors.primary600};
       }
       &[data-scheme='marrybaby'] {
-        background-color: ${theme.theme.mbColors.pink};
+        background-color: ${miscTheme.theme.mbColors.pink};
       }
     }
   }
@@ -929,7 +928,7 @@ const StyledScrollList = styled__default["default"].div `
       border-radius: 4px;
     }
     .image-block.active {
-      border-color: ${theme.theme.colors.primaryBase};
+      border-color: ${miscTheme.theme.colors.primaryBase};
     }
     img {
       height: 40px;
@@ -1286,7 +1285,7 @@ const ScrollList = ({ row = 2, column = 3, isDotsShown = true, isImageGallerySho
 };
 
 const StyledStatisticContainer = styled__default["default"].div `
-  border-radius: ${theme.theme.borderRadius};
+  border-radius: ${miscTheme.theme.borderRadius};
   ${(props) => props['data-is-in-card'] &&
     `
   padding: 12px; 
@@ -1302,17 +1301,17 @@ const StyledDot = styled__default["default"].div `
 const StyledDescriptionWrapper = styled__default["default"].div `
   display: flex;
   align-items: center;
-  color: ${theme.theme.colors.gray800};
-  font-size: ${theme.theme.sizes.fsParagraph4};
-  font-weight: ${theme.theme.sizes.fwRegular};
+  color: ${miscTheme.theme.colors.gray800};
+  font-size: ${miscTheme.theme.sizes.fsParagraph4};
+  font-weight: ${miscTheme.theme.sizes.fwRegular};
 `;
 const StyledStatisticNumberWrapper = styled__default["default"].div `
   display: flex;
   align-items: center;
   margin-top: 4px;
-  color: ${theme.theme.colors.gray800};
-  font-size: ${theme.theme.sizes.fsHeading2};
-  font-weight: ${theme.theme.sizes.fwSemiBold};
+  color: ${miscTheme.theme.colors.gray800};
+  font-size: ${miscTheme.theme.sizes.fsHeading2};
+  font-weight: ${miscTheme.theme.sizes.fwSemiBold};
 
   & > svg {
     width: 24px;
@@ -1322,8 +1321,8 @@ const StyledStatisticNumberWrapper = styled__default["default"].div `
 
   &[data-size='small'] {
     margin-left: 23px;
-    font-size: ${theme.theme.sizes.fsParagraph4};
-    font-weight: ${theme.theme.sizes.fwBold};
+    font-size: ${miscTheme.theme.sizes.fsParagraph4};
+    font-weight: ${miscTheme.theme.sizes.fwBold};
   }
 `;
 
@@ -1364,10 +1363,10 @@ const Cell = ({ children, className, style, textAlign, isTableHead, }) => {
 };
 
 const StyledTableRow = styled__default["default"].tr `
-  border-bottom: 1px solid ${theme.theme.colors.gray100};
+  border-bottom: 1px solid ${miscTheme.theme.colors.gray100};
 
   &[data-is-active='true'] {
-    background-color: ${theme.theme.colors.gray200};
+    background-color: ${miscTheme.theme.colors.gray200};
   }
 `;
 const Row = ({ children, className, style, isActive, onRowClicked, rowId, }) => {
@@ -1381,15 +1380,15 @@ const StyledTableHead = styled__default["default"].thead `
     padding: var(--vertical-spacing) var(--horizontal-spacing);
     text-align: left;
 
-    color: ${theme.theme.colors.gray500};
-    font-weight: ${theme.theme.sizes.fwBold};
+    color: ${miscTheme.theme.colors.gray500};
+    font-weight: ${miscTheme.theme.sizes.fwBold};
   }
   &[data-is-sticky] {
     th {
       position: sticky;
       top: 0;
       background: white;
-      border-bottom: 2px solid ${theme.theme.colors.gray200};
+      border-bottom: 2px solid ${miscTheme.theme.colors.gray200};
     }
   }
 `;
@@ -1402,16 +1401,16 @@ const StyledTableBody = styled__default["default"].tbody `
   position: relative;
   &[data-is-striped] {
     > tr:nth-child(odd) {
-      background-color: ${theme.theme.colors.neutral50};
+      background-color: ${miscTheme.theme.colors.neutral50};
     }
   }
   &[data-is-hoverable] {
     > tr:hover {
-      background-color: ${theme.theme.colors.neutral100};
+      background-color: ${miscTheme.theme.colors.neutral100};
     }
   }
 `;
-const Body$1 = ({ children, className, style, isHoverable, isStriped, }) => {
+const Body = ({ children, className, style, isHoverable, isStriped, }) => {
     return (React__default["default"].createElement(StyledTableBody, { className: className, style: style, "data-is-striped": isStriped || undefined, "data-is-hoverable": isHoverable || undefined }, children));
 };
 
@@ -1421,10 +1420,10 @@ var index = /*#__PURE__*/Object.freeze({
   Cell: Cell,
   Head: Head,
   Row: Row,
-  Body: Body$1
+  Body: Body
 });
 
-var useStyles$3 = core.createStyles((theme) => {
+var useStyles = core.createStyles((theme) => {
     const itemLabelRef = core.getStylesRef('itemLabel');
     return {
         root: {
@@ -1473,7 +1472,7 @@ var useStyles$3 = core.createStyles((theme) => {
  * @deprecated Consider to use mantine
  */
 const Tabs = ({ style, initialTab, tabContent, onChange, className, dataEventCategory, dataEventAction, dataEventLabel, id, styles, }) => {
-    const { classes, cx, theme } = useStyles$3(undefined, { name: 'Tabs', styles });
+    const { classes, cx, theme } = useStyles(undefined, { name: 'Tabs', styles });
     const [activeTab, setActiveTab] = React.useState(initialTab || 0);
     React.useEffect(() => {
         setActiveTab(initialTab);
@@ -1502,7 +1501,7 @@ const StyledFloatButtonGroupBackgroundPanel = styled__default["default"].div `
   position: fixed;
   bottom: 0;
   right: 0;
-  background-color: ${theme.theme.colors.white};
+  background-color: ${miscTheme.theme.colors.white};
   opacity: 0.83;
   transition: display ${TRANSITION_TIMING}ms linear;
 
@@ -1582,9 +1581,9 @@ const StyledFloatButtonGroupToggleIcon = styled__default["default"].div `
   transition: all 0.1s linear;
   -webkit-tap-highlight-color: transparent;
   [data-site-type='hb'] & {
-    background-color: ${theme.theme.colors.primaryBase};
+    background-color: ${miscTheme.theme.colors.primaryBase};
     &:hover {
-      background-color: ${theme.theme.colors.primaryHover};
+      background-color: ${miscTheme.theme.colors.primaryHover};
     }
   }
   [data-site-type='mb'] & {
@@ -1598,7 +1597,7 @@ const StyledFloatButtonGroupToggleIcon = styled__default["default"].div `
     content: '';
     width: 2px;
     height: 20px;
-    background-color: ${theme.theme.colors.white};
+    background-color: ${miscTheme.theme.colors.white};
     border-radius: 2px;
     position: absolute;
     top: 50%;
@@ -1610,7 +1609,7 @@ const StyledFloatButtonGroupToggleIcon = styled__default["default"].div `
     content: '';
     width: 20px;
     height: 2px;
-    background-color: ${theme.theme.colors.white};
+    background-color: ${miscTheme.theme.colors.white};
     border-radius: 2px;
     position: absolute;
     top: 50%;
@@ -1766,7 +1765,7 @@ const StyledFloatButtonGroupButtonIcon = styled__default["default"].div `
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: ${theme.theme.colors.white};
+  background-color: ${miscTheme.theme.colors.white};
 
   // zoom
   [data-animation-type='zoom'] & {
@@ -1845,12 +1844,12 @@ const StyledAcceptCardContainer = styled__default["default"].div `
     width: 100%;
   }
   &[data-theme='helloSites'] {
-    background: ${theme.theme.colors.secondaryBase};
+    background: ${miscTheme.theme.colors.secondaryBase};
     box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.1);
   }
   &[data-theme='marryBaby'] {
     border: none;
-    background: ${theme.theme.mbColors.pink};
+    background: ${miscTheme.theme.mbColors.pink};
     border-radius: 12px 12px 0 0;
   }
   &[data-is-open='false'] {
@@ -1870,7 +1869,7 @@ const StyledAcceptCardContainer = styled__default["default"].div `
 const StyledTitleSection = styled__default["default"].p `
   position: relative;
   padding-left: 24px;
-  color: ${theme.theme.colors.white};
+  color: ${miscTheme.theme.colors.white};
   font-size: 14px;
   font-weight: 600;
   line-height: 22px;
@@ -1889,12 +1888,12 @@ const StyledTitleSection = styled__default["default"].p `
 `;
 const StyledDescription = styled__default["default"].p `
   margin-top: 2px;
-  color: ${theme.theme.colors.white};
+  color: ${miscTheme.theme.colors.white};
   font-size: 12px;
   font-weight: 400;
   line-height: 18px;
   a {
-    color: ${theme.theme.colors.white};
+    color: ${miscTheme.theme.colors.white};
     text-decoration: none;
     text-decoration-line: underline;
   }
@@ -1907,16 +1906,16 @@ const StyledButtonGroup = styled__default["default"].div `
 `;
 const StyledAcceptButton = styled__default["default"].div `
   padding: 7px 28px;
-  background: ${theme.theme.colors.white};
-  border-radius: ${theme.theme.borderRadius};
-  color: ${theme.theme.colors.secondaryBase};
+  background: ${miscTheme.theme.colors.white};
+  border-radius: ${miscTheme.theme.borderRadius};
+  color: ${miscTheme.theme.colors.secondaryBase};
   cursor: pointer;
   font-size: 12px;
   font-weight: 600;
   line-height: 18px;
 `;
 const StyledPoliciesButton = styled__default["default"].a `
-  color: ${theme.theme.colors.white};
+  color: ${miscTheme.theme.colors.white};
   font-size: 12px;
   font-weight: 600;
   line-height: 22px;
@@ -1970,7 +1969,7 @@ const StyledMobileBottomNavigationIcon = styled__default["default"].div `
     font-weight: 500;
     font-size: 10px;
     line-height: 16px;
-    color: ${theme.theme.colors.gray600};
+    color: ${miscTheme.theme.colors.gray600};
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -2007,7 +2006,7 @@ const StyledMobileBottomNavigationIcon = styled__default["default"].div `
     min-width: 152px;
     height: 32px;
     /* Neutral/Neutral-50 */
-    background: ${theme.theme.colors.primary50};
+    background: ${miscTheme.theme.colors.primary50};
     border-radius: 20px;
     flex-grow: 1;
     .mobile-navigation-icon {
@@ -2018,13 +2017,13 @@ const StyledMobileBottomNavigationIcon = styled__default["default"].div `
     }
     .mobile-navigation-label {
       max-width: max-content;
-      color: ${theme.theme.colors.primaryBase};
+      color: ${miscTheme.theme.colors.primaryBase};
     }
   }
 
   &[data-is-active='true'] {
     .mobile-navigation-label {
-      color: ${theme.theme.colors.primaryBase};
+      color: ${miscTheme.theme.colors.primaryBase};
     }
   }
 
@@ -2045,7 +2044,7 @@ const StyledMobileBottomNavigation = styled__default["default"].div `
   height: 100%;
   align-items: center;
   justify-content: space-evenly;
-  background-color: ${theme.theme.colors.white};
+  background-color: ${miscTheme.theme.colors.white};
   @supports (padding-bottom: env(safe-area-inset-bottom)) {
     min-height: calc(56px + env(safe-area-inset-bottom));
     max-height: calc(56px + env(safe-area-inset-bottom));
@@ -2075,9 +2074,9 @@ const StyledBadge = styled__default["default"].span `
   position: absolute;
   left: 100%;
   transform: translate(-10px, calc(-50% + 3px));
-  background-color: ${theme.theme.colors.green800};
+  background-color: ${miscTheme.theme.colors.green800};
   border-radius: 32px;
-  border: 2px solid ${theme.theme.colors.white};
+  border: 2px solid ${miscTheme.theme.colors.white};
   padding: 1px 4px;
   display: flex;
   flex-direction: column;
@@ -2095,7 +2094,7 @@ styled__default["default"].div `
   top: 0;
   left: 0;
   height: 3px;
-  background-color: ${theme.theme.colors.primaryBase};
+  background-color: ${miscTheme.theme.colors.primaryBase};
   transition: width 150ms linear;
 `;
 styled__default["default"].div `
@@ -2109,7 +2108,7 @@ const MobileBottomNavigationIcon = (_a) => {
     return (React__default["default"].createElement(StyledMobileBottomNavigationIcon, Object.assign({ "data-is-special": isSpecial, "data-is-active": isActive, "data-is-disabled": disabled }, props),
         React__default["default"].createElement("div", { className: "mobile-navigation-icon", "data-no-label": !Boolean(label) },
             hasBadge && (React__default["default"].createElement(StyledBadge, { "data-no-label": !Boolean(label) },
-                React__default["default"].createElement(index$2.Text, { size: "s5", weight: "semiBold", color: isSpecial ? theme.theme.colors.primaryBase : theme.theme.colors.white }, badgeAmount))),
+                React__default["default"].createElement(index$2.Text, { size: "s5", weight: "semiBold", color: isSpecial ? miscTheme.theme.colors.primaryBase : miscTheme.theme.colors.white }, badgeAmount))),
             icon),
         label && React__default["default"].createElement("span", { className: "mobile-navigation-label" }, label)));
 };
@@ -2124,7 +2123,7 @@ MobileBottomNavigation.Icon = MobileBottomNavigationIcon;
 const SeoHead = ({ SEOData = {}, locale = 'vi-VN', routerPathname: pathname, routerQuery: query, nextHead: Head, siteType, seoCustom, userId, forcedCanonicalUrl, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const { totalPages, currentPage, SEOTitle = '', SEODescription = '', SEOImage, seoType, SEOImageWidth, SEOImageHeight, customMetaData = [], isIndexable = true, hasNoCanonical = false, } = SEOData;
-    const robotIndex = isIndexable && isProduction.isProduction
+    const robotIndex = isIndexable && constantsIsProduction.isProduction
         ? 'index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1'
         : 'noindex';
     // const { locale = 'vi-VN', pathname, query } = router
@@ -2137,7 +2136,7 @@ const SeoHead = ({ SEOData = {}, locale = 'vi-VN', routerPathname: pathname, rou
         }
     });
     const sL = locale || 'en-PH'; // standardized locale
-    const siteUrl = siteType === 'helloSites' ? index$9.domainLocales[sL] : 'www.marrybaby.vn';
+    const siteUrl = siteType === 'helloSites' ? constantsDomainLocales.domainLocales[sL] : 'www.marrybaby.vn';
     const hasSlash = newPath.endsWith('/') ? '' : '/';
     // TODO: remove or replace html-react-parser
     const metaData = React.useMemo(() => {
@@ -2262,380 +2261,6 @@ const SeoHead = ({ SEOData = {}, locale = 'vi-VN', routerPathname: pathname, rou
             } })) : null));
 };
 
-const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
-const StyledInnerClass = 'hhgcomp-toolbanner-inner';
-const StyledWrapper$1 = defaultClassWrapper.setDefaultClass(styled__default["default"].div `
-    position: relative;
-    width: 100%;
-    height: 100%;
-  `, 'hhgcomp-toolbanner-wrapper');
-const StyledContainer = styled__default["default"].div `
-  width: 100%;
-  a {
-    text-decoration: none;
-    color: inherit;
-  }
-
-  background-color: ${(props) => props['data-banner-color'] || index$5.themeColors.blue[1]};
-
-  &[data-site='marryBaby'] {
-    a {
-      text-decoration: underline;
-    }
-    ${utils.MediaQueries.mbDown} {
-      padding-bottom: 0;
-    }
-  }
-
-  ${utils.MediaQueries.tdDown} {
-    height: auto;
-    ${StyledWrapper$1.classSelector} {
-      .${StyledInnerClass} {
-        display: flex;
-        align-items: center;
-        ${utils.MediaQueries.mbDown} {
-          justify-content: space-between;
-        }
-        .${StyledIconContainerClass} {
-          position: relative;
-          right: -50px;
-          bottom: -20px;
-          width: 110px;
-          min-width: 0;
-          height: auto;
-          min-height: 0;
-          align-self: flex-end;
-          margin-bottom: -20px;
-          ${utils.MediaQueries.mbDown} {
-            right: unset;
-          }
-        }
-      }
-    }
-  }
-`;
-
-const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
-    link: '#',
-    reviewer: '',
-    date: '',
-}, icon, style, isPregTool, }) => {
-    const { t } = useTranslations.useTranslations();
-    const theme = core.useMantineTheme();
-    const isMarryBaby = theme.other.template === 'mb';
-    const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
-    const headingAs = 'h2';
-    const medicalReviewEle = (medicalReview === null || medicalReview === void 0 ? void 0 : medicalReview.reviewer) ? (React__default["default"].createElement(index$2.Text, { size: "label2", as: "div", className: "embedded-review", sx: {
-            a: {
-                textUnderlineOffset: '2px',
-                textDecoration: 'underline',
-            },
-        } },
-        React__default["default"].createElement("div", { dangerouslySetInnerHTML: {
-                __html: t('toolPage.toolReviewer', {
-                    expert_name: `<a href="${medicalReview.link}">${medicalReview.reviewer.trim()}</a>`,
-                    date: medicalReview.date,
-                }),
-            } }))) : null;
-    return (React__default["default"].createElement(StyledContainer, { className: className, style: style, "data-site": siteType, "data-banner-color": bannerColor ||
-            (isMarryBaby
-                ? theme.colors.mb[1]
-                : isPregTool
-                    ? theme.colors.pink[1]
-                    : theme.colors.blue[1]) },
-        React__default["default"].createElement(StyledWrapper$1, null,
-            React__default["default"].createElement(core.Flex, { gap: core.rem(24), align: 'center', justify: 'space-between', sx: { padding: core.rem(16), gap: core.rem(24), '.heading': {} } },
-                React__default["default"].createElement(core.Box, null,
-                    React__default["default"].createElement(index$2.Text, { size: isMarryBaby ? 'h4' : 'h3', as: headingAs, className: 'heading' }, heading),
-                    medicalReview && (React__default["default"].createElement(index$2.Text, { size: "n1", as: "div" }, medicalReviewEle))),
-                React__default["default"].createElement(core.Flex, { justify: 'center', align: 'center', sx: (theme) => ({
-                        width: core.rem(80),
-                        height: core.rem(80),
-                        borderRadius: isMarryBaby ? '24px' : '50%',
-                        backgroundColor: '#fff',
-                        flexShrink: 0,
-                        img: {
-                            maxWidth: core.rem(48),
-                            maxHeight: core.rem(48),
-                        },
-                        [theme.fn.smallerThan('sm')]: {
-                            width: core.rem(64),
-                            height: core.rem(64),
-                            img: {
-                                maxWidth: core.rem(40),
-                                maxHeight: core.rem(40),
-                            },
-                        },
-                    }) }, icon)))));
-};
-
-var useStyles$2 = core.createStyles(() => {
-    return {
-        root: {
-            borderTopLeftRadius: 'inherit',
-            borderTopRightRadius: 'inherit',
-        },
-    };
-});
-
-const CardWrapperContext = React.createContext({});
-
-const Banner = (_a) => {
-    var { styles, classNames, className } = _a, rest = tslib_es6.__rest(_a, ["styles", "classNames", "className"]);
-    const { classes, cx } = useStyles$2(undefined, {
-        name: 'HealthToolCardWrapper__Banner',
-        styles,
-        classNames,
-    });
-    const { isPregTool } = React.useContext(CardWrapperContext);
-    return (React__default["default"].createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, className: cx(className, classes.root) }, rest)));
-};
-
-var useStyles$1 = core.createStyles(() => {
-    return {
-        root: {
-            padding: core.rem(16),
-        },
-    };
-});
-
-const Body = (_a) => {
-    var { children, styles, classNames, className } = _a, rest = tslib_es6.__rest(_a, ["children", "styles", "classNames", "className"]);
-    const { classes, cx } = useStyles$1(undefined, {
-        name: 'HealthToolCardWrapper',
-        styles,
-        classNames,
-    });
-    return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, rest), children));
-};
-
-var useStyles = core.createStyles((theme, { isPregTool }) => {
-    const isMarryBaby = theme.other.template === 'mb';
-    return {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            borderRadius: core.rem(isMarryBaby ? 16 : 8),
-            backgroundColor: '#fff',
-            border: `1px solid ${isMarryBaby
-                ? theme.colors.mb[2]
-                : isPregTool
-                    ? theme.colors.pink[1]
-                    : theme.colors.blue[2]}`,
-        },
-        row: {
-            display: 'flex',
-            alignItems: 'stretch',
-            justifyContent: 'space-between',
-            gap: core.rem(16),
-        },
-        labelWrapper: {
-            flex: '1 1 0px',
-            display: 'flex',
-            alignItems: 'center',
-            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
-        },
-        label: {
-            fontSize: core.rem(14),
-            color: theme.colors.gray[6],
-        },
-        control: {
-            width: core.rem(180),
-            flexShrink: 1,
-            '&.error': {
-                'button, input': {
-                    borderColor: theme.colors.red[7],
-                },
-            },
-        },
-        radioLabel: {
-            fontSize: core.rem(16),
-        },
-        radioRoot: {
-            padding: `${core.rem(10)} 0`,
-            margin: 0,
-        },
-        bmiVal: {
-            display: 'inline-block',
-        },
-        inputWithUnit__wrapper: {
-            position: 'relative',
-        },
-        inputWithUnit__unit: {
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            paddingRight: core.rem(10),
-            display: 'flex',
-            alignItems: 'center',
-        },
-        inputWithUnit__unitText: {
-            color: theme.colors.gray[6],
-        },
-        inputWithUnit__input: {
-            input: {
-                paddingRight: core.rem(30),
-                '::-webkit-inner-spin-button': { '-webkit-appearance': 'none' },
-            },
-        },
-        submitBtn: {},
-        switchRoot: {
-            padding: '16px 0',
-        },
-    };
-});
-
-const _HealthToolCardWrapper = (_a) => {
-    var { children, styles, classNames, className, isPregTool } = _a, rest = tslib_es6.__rest(_a, ["children", "styles", "classNames", "className", "isPregTool"]);
-    const { classes, cx } = useStyles({ isPregTool }, {
-        name: 'HealthToolCardWrapper',
-        styles,
-        classNames,
-    });
-    return (React__default["default"].createElement(CardWrapperContext.Provider, { value: {
-            isPregTool,
-        } },
-        React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, rest), children)));
-};
-const HealthToolCardWrapper = _HealthToolCardWrapper;
-HealthToolCardWrapper.Body = Body;
-HealthToolCardWrapper.Banner = Banner;
-
-const DueDateCardEmbed = (_a) => {
-    var _b;
-    var { dueDatePageInfo, expertUrl, formProps } = _a, props = tslib_es6.__rest(_a, ["dueDatePageInfo", "expertUrl", "formProps"]);
-    const { t } = useTranslations.useTranslations();
-    return (React__default["default"].createElement(HealthToolCardWrapper, Object.assign({ isPregTool: true }, props),
-        React__default["default"].createElement(HealthToolCardWrapper.Banner, { color: "pink", icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (dueDatePageInfo === null || dueDatePageInfo === void 0 ? void 0 : dueDatePageInfo.featured_image) ||
-                    index$4.CommonGAssets.getAssetPath('health-tools/due-date-icon.svg'), loading: "lazy" }), heading: t('healthTools.dueDateCalculator'), medicalReview: {
-                link: expertUrl,
-                reviewer: (_b = dueDatePageInfo === null || dueDatePageInfo === void 0 ? void 0 : dueDatePageInfo.reviewed_by) === null || _b === void 0 ? void 0 : _b.display_name,
-                date: dueDatePageInfo === null || dueDatePageInfo === void 0 ? void 0 : dueDatePageInfo.reviewed_date,
-            } }),
-        React__default["default"].createElement(HealthToolCardWrapper.Body, null,
-            React__default["default"].createElement(index$a.DueDateForm, Object.assign({}, formProps)))));
-};
-
-const BMICardEmbed = (_a) => {
-    var _b, _c, _d;
-    var { bmiContent, bmiGenerated, bmiUnit, formProps } = _a, props = tslib_es6.__rest(_a, ["bmiContent", "bmiGenerated", "bmiUnit", "formProps"]);
-    const { t } = useTranslations.useTranslations();
-    return (React__default["default"].createElement(HealthToolCardWrapper, Object.assign({}, props),
-        React__default["default"].createElement(HealthToolCardWrapper.Banner, { icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.featured_image) ||
-                    index$4.CommonGAssets.getAssetPath('health-tools/bmi.svg'), loading: "lazy" }), heading: t('bmi.heading'), medicalReview: {
-                link: (_b = bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.reviewBy) === null || _b === void 0 ? void 0 : _b.link,
-                reviewer: (_c = bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.reviewBy) === null || _c === void 0 ? void 0 : _c.reviewer,
-                date: (_d = bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.reviewBy) === null || _d === void 0 ? void 0 : _d.date,
-            } }),
-        React__default["default"].createElement(HealthToolCardWrapper.Body, null,
-            React__default["default"].createElement(index$a.BmiForm, Object.assign({ bmiGenerated: bmiGenerated, bmiUnit: bmiUnit }, formProps)))));
-};
-
-const BabyGrowthCardEmbed = (_a) => {
-    var _b, _c, _d;
-    var { babyGrowthContent, formProps } = _a, props = tslib_es6.__rest(_a, ["babyGrowthContent", "formProps"]);
-    return (React__default["default"].createElement(HealthToolCardWrapper, Object.assign({}, props),
-        React__default["default"].createElement(HealthToolCardWrapper.Banner, { icon: React__default["default"].createElement("img", { className: "embedded-icon", alt: "health-tool-icon", src: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.featuredImage) ||
-                    index$4.CommonGAssets.getAssetPath('health-tools/toolsIconBabyGrowth.svg'), loading: "lazy" }), heading: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.title) || '', medicalReview: {
-                link: (_b = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _b === void 0 ? void 0 : _b.link,
-                reviewer: (_c = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _c === void 0 ? void 0 : _c.reviewer.trim(),
-                date: (_d = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _d === void 0 ? void 0 : _d.date,
-            } }),
-        React__default["default"].createElement(HealthToolCardWrapper.Body, null,
-            React__default["default"].createElement(index$b.BabyGrowthForm, Object.assign({}, formProps)))));
-};
-
-const BabyPoopEmbed = (_a) => {
-    var { babyPoopPage, formProps } = _a, props = tslib_es6.__rest(_a, ["babyPoopPage", "formProps"]);
-    const { reviewedBy, reviewedDate } = babyPoopPage || {};
-    return (React__default["default"].createElement(HealthToolCardWrapper, Object.assign({}, props),
-        React__default["default"].createElement(HealthToolCardWrapper.Banner, { icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: babyPoopPage === null || babyPoopPage === void 0 ? void 0 : babyPoopPage.featuredImage, loading: "lazy" }), heading: babyPoopPage.title, medicalReview: {
-                link: reviewedBy === null || reviewedBy === void 0 ? void 0 : reviewedBy.profileUrl,
-                reviewer: reviewedBy === null || reviewedBy === void 0 ? void 0 : reviewedBy.displayName,
-                date: reviewedDate,
-            } }),
-        React__default["default"].createElement(HealthToolCardWrapper.Body, null,
-            React__default["default"].createElement(index$a.BabyPoopForm, Object.assign({ babyPoopPage: babyPoopPage }, formProps)))));
-};
-
-const THRCardEmbed = (_a) => {
-    var _b, _c;
-    var { thrContent, formProps } = _a, props = tslib_es6.__rest(_a, ["thrContent", "formProps"]);
-    const { t } = useTranslations.useTranslations();
-    return (React__default["default"].createElement(HealthToolCardWrapper, Object.assign({}, props),
-        React__default["default"].createElement(HealthToolCardWrapper.Banner, { icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (thrContent === null || thrContent === void 0 ? void 0 : thrContent.featured_image) ||
-                    index$4.CommonGAssets.getAssetPath('health-tools/target-heart-rate-icon.svg'), loading: "lazy" }), heading: t('targetHearRate.heading'), medicalReview: ((_b = thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy) === null || _b === void 0 ? void 0 : _b.display_name)
-                ? {
-                    link: dataTransform.formatUserProfileUrl(thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy),
-                    reviewer: (_c = thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy) === null || _c === void 0 ? void 0 : _c.display_name,
-                    date: thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedDate,
-                }
-                : undefined }),
-        React__default["default"].createElement(HealthToolCardWrapper.Body, null,
-            React__default["default"].createElement(index$a.ThrForm, Object.assign({}, formProps)))));
-};
-
-const BMRCardEmbed = (_a) => {
-    var _b, _c, _d;
-    var { bmrContent, bmiGenerated, bmiUnit, formProps } = _a, props = tslib_es6.__rest(_a, ["bmrContent", "bmiGenerated", "bmiUnit", "formProps"]);
-    const { t } = useTranslations.useTranslations();
-    return (React__default["default"].createElement(HealthToolCardWrapper, Object.assign({}, props),
-        React__default["default"].createElement(HealthToolCardWrapper.Banner, { icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.featured_image) ||
-                    index$4.CommonGAssets.getAssetPath('health-tools/bmr.svg'), loading: "lazy" }), heading: t('bmr.heading'), medicalReview: {
-                link: (_b = bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.reviewBy) === null || _b === void 0 ? void 0 : _b.link,
-                reviewer: (_c = bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.reviewBy) === null || _c === void 0 ? void 0 : _c.reviewer,
-                date: (_d = bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.reviewBy) === null || _d === void 0 ? void 0 : _d.date,
-            } }),
-        React__default["default"].createElement(HealthToolCardWrapper.Body, null,
-            React__default["default"].createElement(index$a.BmiForm, Object.assign({ bmiGenerated: bmiGenerated, bmiUnit: bmiUnit }, formProps, { submitProps: Object.assign(Object.assign({}, formProps === null || formProps === void 0 ? void 0 : formProps.submitProps), { dataEventAction: 'BMR' }) })))));
-};
-
-const OvulationCardEmbed = (_a) => {
-    var _b;
-    var { ovulationPageInfo, expertUrl, formProps, isMobile } = _a, props = tslib_es6.__rest(_a, ["ovulationPageInfo", "expertUrl", "formProps", "isMobile"]);
-    const { t } = useTranslations.useTranslations();
-    return (React__default["default"].createElement(HealthToolCardWrapper, Object.assign({ isPregTool: true }, props),
-        React__default["default"].createElement(HealthToolCardWrapper.Banner, { icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.featured_image) ||
-                    index$4.CommonGAssets.getAssetPath('health-tools/ovulation-icon.svg'), loading: "lazy" }), heading: t('healthTools.ovulationCalculator'), medicalReview: {
-                link: expertUrl,
-                reviewer: (_b = ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.reviewed_by) === null || _b === void 0 ? void 0 : _b.display_name,
-                date: ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.reviewed_date,
-            } }),
-        React__default["default"].createElement(HealthToolCardWrapper.Body, null,
-            React__default["default"].createElement(index$a.OvulationForm, Object.assign({ isMobile: isMobile }, formProps)))));
-};
-
-const BabyVaccineCardEmbed = (_a) => {
-    var _b, _c, _d;
-    var { babyVaccineContent, formProps } = _a, props = tslib_es6.__rest(_a, ["babyVaccineContent", "formProps"]);
-    const { t } = useTranslations.useTranslations();
-    return (React__default["default"].createElement(HealthToolCardWrapper, Object.assign({}, props),
-        React__default["default"].createElement(HealthToolCardWrapper.Banner, { icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (babyVaccineContent === null || babyVaccineContent === void 0 ? void 0 : babyVaccineContent.featuredImage) ||
-                    index$4.CommonGAssets.getAssetPath('health-tools/baby-vaccine-icon.svg'), loading: "lazy" }), heading: t('babyVaccineTool.heading'), medicalReview: {
-                link: ((_b = babyVaccineContent === null || babyVaccineContent === void 0 ? void 0 : babyVaccineContent.reviewBy) === null || _b === void 0 ? void 0 : _b.link) || '',
-                reviewer: ((_c = babyVaccineContent === null || babyVaccineContent === void 0 ? void 0 : babyVaccineContent.reviewBy) === null || _c === void 0 ? void 0 : _c.reviewer) || '',
-                date: ((_d = babyVaccineContent === null || babyVaccineContent === void 0 ? void 0 : babyVaccineContent.reviewBy) === null || _d === void 0 ? void 0 : _d.date) || '',
-            } }),
-        React__default["default"].createElement(HealthToolCardWrapper.Body, null,
-            React__default["default"].createElement(index$a.BabyVaccineForm, Object.assign({}, formProps)))));
-};
-
-const PWGCardEmbed = (_a) => {
-    var _b;
-    var { pwgContent, formProps } = _a, props = tslib_es6.__rest(_a, ["pwgContent", "formProps"]);
-    const { t } = useTranslations.useTranslations();
-    return (React__default["default"].createElement(HealthToolCardWrapper, Object.assign({ isPregTool: true }, props),
-        React__default["default"].createElement(HealthToolCardWrapper.Banner, { icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.featuredImage) ||
-                    index$4.CommonGAssets.getAssetPath('health-tools/pwg-icon.svg'), loading: "lazy" }), heading: t('pregnancyWeightGain.heading'), medicalReview: {
-                link: dataTransform.formatUserProfileUrl(pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy),
-                reviewer: (_b = pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy) === null || _b === void 0 ? void 0 : _b.display_name,
-                date: pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedDate,
-            } }),
-        React__default["default"].createElement(HealthToolCardWrapper.Body, null,
-            React__default["default"].createElement(index$a.PWGForm, Object.assign({}, formProps)))));
-};
-
 const StyledCalendarWrapper$1 = styled__default["default"].div `
   flex: 1;
 `;
@@ -2678,7 +2303,7 @@ const StyledCalendarDayLabel = styled__default["default"].div `
   display: flex;
   justify-content: center;
   align-items: center;
-  color: 1px solid ${theme.theme.colors.gray800};
+  color: 1px solid ${miscTheme.theme.colors.gray800};
   font-weight: 300;
 `;
 const StyledCalendarMonthSeparator = styled__default["default"].div `
@@ -2691,7 +2316,7 @@ const StyledCalendarMonthSeparator = styled__default["default"].div `
     width: 1px;
     left: 50%;
     right: 50%;
-    background: ${theme.theme.colors.neutral100};
+    background: ${miscTheme.theme.colors.neutral100};
   }
 `;
 const StyledCalendarDaysWrapper = styled__default["default"].div `
@@ -2714,14 +2339,14 @@ const StyledCalendarDayNumberWrapper = styled__default["default"].div `
     opacity: 0.3;
   }
   &[data-in-range='true']:not([data-is-from='true'][data-is-to='true']) {
-    background-color: ${theme.theme.colors.gray100};
+    background-color: ${miscTheme.theme.colors.gray100};
   }
   &:before {
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
-    background-color: ${theme.theme.colors.gray100};
+    background-color: ${miscTheme.theme.colors.gray100};
   }
   &[data-is-from='true'][data-in-range='true'][data-is-to='false'] {
     background-color: transparent;
@@ -2761,23 +2386,23 @@ const StyledCalendarDayNumber = styled__default["default"].div `
     cursor: not-allowed;
   }
   line-height: 1;
-  color: 1px solid ${theme.theme.colors.gray800};
+  color: 1px solid ${miscTheme.theme.colors.gray800};
   [data-is-selected='true'] &,
   [data-is-today='true'] &,
   [data-is-selected='false']:hover & {
     border-radius: 32px;
   }
   [data-is-selected='true'] & {
-    background-color: ${theme.theme.colors.primaryBase};
+    background-color: ${miscTheme.theme.colors.primaryBase};
     color: white;
   }
   [data-is-selected='false']:hover & {
-    background-color: ${theme.theme.colors.primary50};
+    background-color: ${miscTheme.theme.colors.primary50};
   }
   [data-is-today='true'][data-is-selected='false'] & {
     background-color: transparent;
     border-radius: 32px;
-    border: 1px solid ${theme.theme.colors.primaryBase};
+    border: 1px solid ${miscTheme.theme.colors.primaryBase};
   }
 `;
 
@@ -2916,11 +2541,11 @@ range, setRange, onChange, goToPreviousMonth, goToNextMonth, minDate, maxDate, c
     }
     return (React__default["default"].createElement(StyledCalendarWrapper$1, { className: "calendar-wrapper" },
         React__default["default"].createElement(StyledCalendarHead, null,
-            React__default["default"].createElement(index$c.Button, { onClick: goToPreviousMonth, size: "md", color: "ghost", icon: React__default["default"].createElement("img", { src: index$4.CommonGAssets.getAssetPath('calendarArrowLeft.svg'), loading: "lazy" }) }),
+            React__default["default"].createElement(index$a.Button, { onClick: goToPreviousMonth, size: "md", color: "ghost", icon: React__default["default"].createElement("img", { src: index$4.CommonGAssets.getAssetPath('calendarArrowLeft.svg'), loading: "lazy" }) }),
             React__default["default"].createElement("div", { className: "calendar-month" },
                 monthLabel,
                 React__default["default"].createElement("strong", null, dateFns.format(date, 'yyyy'))),
-            React__default["default"].createElement(index$c.Button, { onClick: goToNextMonth, size: "md", color: "ghost", icon: React__default["default"].createElement("img", { src: index$4.CommonGAssets.getAssetPath('calendarArrowRight.svg'), loading: "lazy" }) })),
+            React__default["default"].createElement(index$a.Button, { onClick: goToNextMonth, size: "md", color: "ghost", icon: React__default["default"].createElement("img", { src: index$4.CommonGAssets.getAssetPath('calendarArrowRight.svg'), loading: "lazy" }) })),
         React__default["default"].createElement(StyledCalendarCellsWrapper, null,
             React__default["default"].createElement("div", null, renderWeekDays()),
             React__default["default"].createElement("div", null, renderMonth()))));
@@ -2944,11 +2569,11 @@ const StyledCalendarWrapper = styled__default["default"].div `
   top: 46px;
   left: 0;
   width: 684px;
-  border: 1px solid ${theme.theme.colors.gray200};
+  border: 1px solid ${miscTheme.theme.colors.gray200};
   filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04))
     drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.04))
     drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));
-  border-radius: ${theme.theme.borderRadius};
+  border-radius: ${miscTheme.theme.borderRadius};
   background-color: white;
   z-index: 100;
   padding-bottom: 16px;
@@ -3007,7 +2632,7 @@ var styles = {"breadcrumb":"WUqzfRb","separator":"MnVGtSY","textLink":"NclbhXQ"}
 const BreadcrumbItem = ({ LinkComponent, page, isLast, onChangePage, }) => {
     const { label, value, isDropdown, dropdownItems, dataEventCategory, dataEventAction, dataEventLabel, } = page;
     if (isDropdown) {
-        return (React__default["default"].createElement(index$d.Dropdown, { options: dropdownItems, placeholder: "...", id: "", placeholderIcon: null, onChange: onChangePage, className: "collapsed-breadcrumb" }));
+        return (React__default["default"].createElement(index$b.Dropdown, { options: dropdownItems, placeholder: "...", id: "", placeholderIcon: null, onChange: onChangePage, className: "collapsed-breadcrumb" }));
     }
     return (React__default["default"].createElement("div", { className: styles.textLink, title: typeof label !== 'string' ? value : label, "data-last": isLast }, LinkComponent && (React__default["default"].createElement(LinkComponent, { "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, href: value || '#' }, label))));
 };
@@ -3058,7 +2683,7 @@ const StyledShareContainer = styled__default["default"].div `
       padding: 8px;
 
       &:hover {
-        background-color: ${theme.theme.colors.neutral50};
+        background-color: ${miscTheme.theme.colors.neutral50};
       }
 
       svg {
@@ -3077,7 +2702,7 @@ const AttachIcon = () => {
 };
 const ShareContainer = ({ url, onCopied, locale, siteType, }) => {
     const { t } = useTranslations.useTranslations();
-    const socialList = getSocialList.getSocialList({ shareUrl: url || '', locale }).filter((s) => !s.allowedLocales || s.allowedLocales.includes(locale));
+    const socialList = miscGetSocialList.getSocialList({ shareUrl: url || '', locale }).filter((s) => !s.allowedLocales || s.allowedLocales.includes(locale));
     const copyToClipboard = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         var _a;
         yield ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText(url));
@@ -3091,13 +2716,13 @@ const ShareContainer = ({ url, onCopied, locale, siteType, }) => {
             return '';
     }, []);
     return (React__default["default"].createElement(StyledShareContainer, null,
-        React__default["default"].createElement(index$2.Text, { size: "p3", color: theme.theme.colors.gray800 }, t('shareContainer.title')),
+        React__default["default"].createElement(index$2.Text, { size: "p3", color: miscTheme.theme.colors.gray800 }, t('shareContainer.title')),
         React__default["default"].createElement("div", { className: "icon-group" },
             socialList.map((social, index) => (React__default["default"].createElement("a", { key: index, href: social.href, target: "_blank", rel: "noreferrer", "data-event-category": "Health Tool", "data-event-action": `Social Share - ${social.name}`, "data-event-label": currentUrl }, social.icon))),
-            React__default["default"].createElement(index$c.Button, { theme: siteType, size: "sm", type: "button", color: "tertiary", className: "share", style: {}, icon: React__default["default"].createElement(AttachIcon, null), onClick: copyToClipboard, "data-event-category": "Health Tool", "data-event-action": "Copy Link", "data-event-label": currentUrl }))));
+            React__default["default"].createElement(index$a.Button, { theme: siteType, size: "sm", type: "button", color: "tertiary", className: "share", style: {}, icon: React__default["default"].createElement(AttachIcon, null), onClick: copyToClipboard, "data-event-category": "Health Tool", "data-event-action": "Copy Link", "data-event-label": currentUrl }))));
 };
 
-const StyledShareDrawer = styled__default["default"](index$e.Drawer) `
+const StyledShareDrawer = styled__default["default"](index$c.Drawer) `
   padding-bottom: 24px;
   .share-container {
     display: flex;
@@ -3119,7 +2744,7 @@ const StyledShareDrawer = styled__default["default"](index$e.Drawer) `
     button {
       padding: 10px;
       &:hover {
-        background-color: ${theme.theme.colors.neutral50};
+        background-color: ${miscTheme.theme.colors.neutral50};
       }
     }
     svg {
@@ -3145,7 +2770,7 @@ const ShareDrawer = (_a) => {
         yield ((_b = navigator === null || navigator === void 0 ? void 0 : navigator.clipboard) === null || _b === void 0 ? void 0 : _b.writeText(url));
         onCopied === null || onCopied === void 0 ? void 0 : onCopied();
     }), [url, onCopied]);
-    const socialList = getSocialList.getSocialList({ shareUrl: url || '', locale }).filter((platform) => !platform.allowedLocales || platform.allowedLocales.includes(locale));
+    const socialList = miscGetSocialList.getSocialList({ shareUrl: url || '', locale }).filter((platform) => !platform.allowedLocales || platform.allowedLocales.includes(locale));
     React.useEffect(() => {
         if (open && navigator.share) {
             navigator
@@ -3168,13 +2793,13 @@ const ShareDrawer = (_a) => {
         return (React__default["default"].createElement(StyledShareDrawer, Object.assign({ title: t('share.title'), onClose: onClose, open: open, placement: "bottom" }, rest),
             React__default["default"].createElement("div", { className: "share-container" },
                 React__default["default"].createElement("div", { className: "icon-container" },
-                    React__default["default"].createElement(index$2.Text, { weight: "semiBold", size: "s3", color: theme.theme.colors.gray600 }, t('share.title')),
+                    React__default["default"].createElement(index$2.Text, { weight: "semiBold", size: "s3", color: miscTheme.theme.colors.gray600 }, t('share.title')),
                     React__default["default"].createElement("div", { className: "icon-group" }, socialList.map((social, index) => (React__default["default"].createElement("a", { key: index, href: social.href, target: "_blank", rel: "noreferrer" }, social.icon))))),
                 React__default["default"].createElement("div", { className: "link-container" },
-                    React__default["default"].createElement(index$2.Text, { weight: "semiBold", size: "s3", color: theme.theme.colors.gray600 }, t('share.copyLink')),
+                    React__default["default"].createElement(index$2.Text, { weight: "semiBold", size: "s3", color: miscTheme.theme.colors.gray600 }, t('share.copyLink')),
                     React__default["default"].createElement("div", { className: "input-group" },
-                        React__default["default"].createElement(index$f.Input, { name: "link", size: "md", value: url, isDisabled: true }),
-                        React__default["default"].createElement(index$c.Button, { size: "md", type: "button", color: "tertiary", icon: React__default["default"].createElement(CopyIcon, null), onClick: copyToClipboard }))))));
+                        React__default["default"].createElement(index$d.Input, { name: "link", size: "md", value: url, isDisabled: true }),
+                        React__default["default"].createElement(index$a.Button, { size: "md", type: "button", color: "tertiary", icon: React__default["default"].createElement(CopyIcon, null), onClick: copyToClipboard }))))));
     }
 };
 
@@ -3223,8 +2848,8 @@ const StyledAdContainer = styled__default["default"].div `
   margin-inline: auto;
   /* margin: 1rem auto; */
   &[data-no-wrapper='false'] {
-    border: 1px solid ${theme.theme.colors.neutral50};
-    background: ${theme.theme.colors.neutral50};
+    border: 1px solid ${miscTheme.theme.colors.neutral50};
+    background: ${miscTheme.theme.colors.neutral50};
   }
   &[data-no-wrapper='true'] {
     line-height: 0;
@@ -3251,12 +2876,12 @@ const StyledAdHeader = styled__default["default"].div `
     max-height: 12px;
   }
   &[data-header-bottom='true'] {
-    background: ${theme.theme.colors.neutral50};
+    background: ${miscTheme.theme.colors.neutral50};
   }
   span {
     font-size: 10px;
     line-height: 12px;
-    color: ${theme.theme.colors.gray400};
+    color: ${miscTheme.theme.colors.gray400};
     font-weight: 400;
   }
 `;
@@ -3332,7 +2957,7 @@ const DEFAULT_30S_AD_POS = [
 const ForwaredAdBlock = React.forwardRef(function InfinityAdBlock({ className, adUnitPath, size, divId, pos, sizeMapping, contentId, isHidden, hideIfHasSubot, isSticky, refreshInterval, // seconds
 customTargetings, style, adDefaultSize, noWrapper, showCloseBtn, onCloseAd, headerBottom, wrapperProps, locale, isMarryBaby, }, ref) {
     const defaultRefreshInterval = refreshInterval ||
-        (locale === index$g.LOCALE.Vietnam
+        (locale === Locale.LOCALE.Vietnam
             ? pos.some((p) => DEFAULT_30S_AD_POS.includes(p))
                 ? 30
                 : undefined
@@ -3488,25 +3113,17 @@ const FixedBottomAdBlock = ({ className, adUnitPath, divId, isMobile, contentId,
 exports.AdBlock = AdBlock;
 exports.ArticleCard = ArticleCard$1;
 exports.ArticleCard$1 = ArticleCard;
-exports.BMICardEmbed = BMICardEmbed;
-exports.BMRCardEmbed = BMRCardEmbed;
-exports.BabyGrowthCardEmbed = BabyGrowthCardEmbed;
-exports.BabyPoopEmbed = BabyPoopEmbed;
-exports.BabyVaccineCardEmbed = BabyVaccineCardEmbed;
 exports.Breadcrumbs = Breadcrumbs;
 exports.CategoryCard = CategoryCard;
 exports.CheckboxGroup = CheckboxGroup;
 exports.CookieAcceptConfirm = CookieAcceptConfirm;
 exports.DateRangePicker = DateRangePicker;
 exports.DoctorInfo = DoctorInfo;
-exports.DueDateCardEmbed = DueDateCardEmbed;
 exports.FixedBottomAdBlock = FixedBottomAdBlock;
 exports.FloatButtonGroup = FloatButtonGroup;
 exports.IconText = IconText;
 exports.MobileBottomNavigation = MobileBottomNavigation;
 exports.MobileBottomNavigationIcon = MobileBottomNavigationIcon;
-exports.OvulationCardEmbed = OvulationCardEmbed;
-exports.PWGCardEmbed = PWGCardEmbed;
 exports.ProgressBar = ProgressBar;
 exports.RadioGroup = RadioGroup;
 exports.ScrollList = ScrollList;
@@ -3514,8 +3131,6 @@ exports.SeoHead = SeoHead;
 exports.ShareContainer = ShareContainer;
 exports.ShareDrawer = ShareDrawer;
 exports.StatisticCard = StatisticCard;
-exports.THRCardEmbed = THRCardEmbed;
 exports.Tabs = Tabs;
-exports.ToolsBannerCard = ToolsBannerCard;
 exports.index = index$1;
 exports.index$1 = index;