@hhgtech/hhg-components 1.29.449 → 1.29.450-beta-2

package/build/{index-683bbe3d.js → index-eab71b6f.js}

@@ -1,50 +1,49 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-5419417c.js');
 var React = require('react');
-var index$a = require('./index-fd836996.js');
-var index$8 = require('./index-c19368b2.js');
-var index$3 = require('./index-2d74352f.js');
-var normalizeLink = require('./normalizeLink-86036e79.js');
-var dataTransform = require('./dataTransform-7bc232fa.js');
+var index$8 = require('./index-0688b659.js');
+var index$3 = require('./index-16103686.js');
+var normalizeLink = require('./normalizeLink-c02a1a65.js');
+var dataTransform = require('./dataTransform-dc5cfb10.js');
 var core = require('@hhgtech/icons/core');
-require('./translationsContext-614f1792.js');
+require('./translationsContext-f94df6a5.js');
 var styled = require('@emotion/styled');
-var index = require('./index-7481f662.js');
+var index = require('./index-17b21000.js');
 var miscTheme = require('./miscTheme.js');
-var navigationProfileButton = require('./index-95d9672a.js');
+var navigationProfileButton = require('./index-cc94ce9e.js');
 var other = require('@hhgtech/icons/other');
 var core$1 = require('@mantine/core');
-var index$d = require('./index-b638dbe7.js');
+var index$d = require('./index-e957c78e.js');
 var throttle = require('lodash/throttle');
 require('@mantine/dates');
-var index$5 = require('./index-d7818ca5.js');
-require('./index-18acca73.js');
-var index$4 = require('./index-caaf6cac.js');
-var index$2 = require('./index-ce0a7efa.js');
-require('./index.styles-61ce234f.js');
+var index$a = require('./index-1b62cb12.js');
+var index$5 = require('./index-d1695010.js');
+require('./index-43f96b80.js');
+var index$4 = require('./index-564f1a13.js');
+var index$2 = require('./index-f104c324.js');
+require('./index-f190e9ee.js');
+require('./index.styles-547708ba.js');
 require('@mantine/hooks');
-require('./text-92a095cb.js');
-var utils = require('./utils-7bc80898.js');
-require('./index-511d3d6a.js');
-var constants = require('./constants-8581388f.js');
-var store = require('./store-fed68173.js');
-var constants$1 = require('./constants-ac33e489.js');
-var index$1 = require('./index-2f23d479.js');
-var index$7 = require('./index-08939d41.js');
-var index$6 = require('./index-eb299593.js');
-var useIsInit = require('./useIsInit-a4f3ec74.js');
+var utils = require('./utils-f7084704.js');
+require('./index-8d861879.js');
+var constants = require('./constants-2854ddd3.js');
+var store = require('./store-579d6680.js');
+var constants$1 = require('./constants-fbcee1c9.js');
+var index$1 = require('./index-d4d86d05.js');
+var index$7 = require('./index-c487ee7c.js');
+var index$6 = require('./index-fa9d4274.js');
+var useIsInit = require('./useIsInit-0dcba4ab.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
-var index$9 = require('./index-6e1934a1.js');
+var index$9 = require('./index-f95e1f56.js');
 var formatString = require('string-format');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var dayjs = require('dayjs');
 var relativeTime = require('dayjs/plugin/relativeTime');
-var index$b = require('./index-21dfe2bd.js');
-var index$c = require('./index-5cce06e2.js');
+var index$b = require('./index-df41dda6.js');
+var index$c = require('./index-a34f8a4d.js');
 var debounce = require('lodash/debounce');
-var Locale = require('./Locale-21703205.js');
-var core$2 = require('./core-e07f90f3.js');
+var core$2 = require('./core-0592a008.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -2673,7 +2672,7 @@ const getNavMenuContent = (locale) => tslib_es6.__awaiter(void 0, void 0, void 0
                 fetch(normalizeLink.normalizeLinkSlash(`${normalizeLink.getDiscoverApiDomain(locale)}/wp-json/api/spotlights?per_page=10&order_by=start_date${customLang ? '&' + customLang : ''}`)).then((res) => res.json()),
                 fetch(normalizeLink.normalizeLinkSlash(`${normalizeLink.getDiscoverApiDomain(locale)}/wp-json/api/${isMarryBaby ? 'health-tools' : 'healthtools'}${customLang ? '?' + customLang : ''}`)).then((res) => res.json()),
                 fetch(normalizeLink.normalizeLinkSlash(`${normalizeLink.getDiscoverApiDomain(locale)}/wp-json/api/${isMarryBaby ? 'health-tools' : 'healthtools'}/favorites${customLang ? '?' + customLang : ''}`)).then((res) => res.json()),
-                locale === Locale.LOCALE.Vietnam &&
+                index$3.VIDEO_LOCALES.includes(locale) &&
                     fetch(normalizeLink.normalizeLinkSlash(`${normalizeLink.getDiscoverApiDomain(locale)}/wp-json/api/video/navigation`)).then((res) => res.json()),
             ]);
             res.categories = {

package/build/{index-f8305dc1.js → index-ead33f03.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var utils = require('./utils-7bc80898.js');
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var utils = require('./utils-f7084704.js');
+var tslib_es6 = require('./tslib.es6-5419417c.js');
 var styled = require('@emotion/styled');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-d3ff96d5.js → index-eb2793be.js}

@@ -1,36 +1,36 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-5419417c.js');
 var React = require('react');
-var index$7 = require('./index-6e1934a1.js');
-var index$3 = require('./index-08939d41.js');
-var index = require('./index-2f23d479.js');
+var index$7 = require('./index-f95e1f56.js');
+var index$3 = require('./index-c487ee7c.js');
+var index = require('./index-d4d86d05.js');
 var innertext = require('innertext');
-var index$1 = require('./index-2b578109.js');
-var index$2 = require('./index-d7818ca5.js');
-var constants = require('./constants-ffa1b205.js');
+var index$1 = require('./index-e7df3e9b.js');
+var index$2 = require('./index-d1695010.js');
+var constants = require('./constants-0e4d3c20.js');
 var useTogetherAuthRequiredAction = require('./useTogetherAuthRequiredAction.js');
-var togetherComponentGlobalContext = require('./utils-623e143c.js');
-var treePopoverMenu = require('./treePopoverMenu-4e52e5d8.js');
+var togetherComponentGlobalContext = require('./utils-0013879c.js');
+var treePopoverMenu = require('./treePopoverMenu-ee2f680d.js');
 var styled = require('@emotion/styled');
-var utils = require('./utils-7bc80898.js');
+var utils = require('./utils-f7084704.js');
 var miscTheme = require('./miscTheme.js');
-var dataTransform = require('./dataTransform-7bc232fa.js');
+var dataTransform = require('./dataTransform-dc5cfb10.js');
 var togetherApiPaths = require('./togetherApiPaths.js');
-var index$9 = require('./index-413bc08c.js');
-var togetherMoleculesCardAuthor = require('./index-ba9ca44c.js');
-var togetherMoleculesProfileDetail = require('./index-df2c3b53.js');
-var togetherMoleculesPostImagePreview = require('./index-e033f570.js');
-var index$a = require('./index-ccdca7bf.js');
-var index$8 = require('./index-d672d3a2.js');
-require('./index-2d74352f.js');
+var index$9 = require('./index-0e605ed3.js');
+var togetherMoleculesCardAuthor = require('./index-0b2b3768.js');
+var togetherMoleculesProfileDetail = require('./index-24fb4948.js');
+var togetherMoleculesPostImagePreview = require('./index-fbeb2104.js');
+var index$a = require('./index-73089283.js');
+var index$8 = require('./index-f9127270.js');
+require('./index-16103686.js');
 var core$1 = require('@hhgtech/icons/core');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
-var index$6 = require('./index-b1020b33.js');
-var index$4 = require('./index-caaf6cac.js');
-var index$5 = require('./index-d1263a2e.js');
-var normalizeLink = require('./normalizeLink-86036e79.js');
+var index$6 = require('./index-03b7a6fb.js');
+var index$4 = require('./index-564f1a13.js');
+var index$5 = require('./index-53b33fa9.js');
+var normalizeLink = require('./normalizeLink-c02a1a65.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-60efda96.js → index-ec7747c5.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var styled = require('@emotion/styled');
-var utils = require('./utils-7bc80898.js');
+var utils = require('./utils-f7084704.js');
 var miscTheme = require('./miscTheme.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-ce0a7efa.js → index-f104c324.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-5419417c.js');
 var React = require('react');
 var core = require('@mantine/core');
-var shared = require('./shared-8aee16d5.js');
-var text = require('./text-92a095cb.js');
+var shared = require('./shared-df514938.js');
+var index = require('./index-f190e9ee.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -14,7 +14,7 @@ var useStyles = core.createStyles((_theme, _params) => {
     var _a, _b, _c, _d, _e, _f;
     const { other } = _theme;
     const { template } = other;
-    const { size, variant, skipHover, isError, isSuccess, color, children, theme: themeProp, customStylesType, } = _params;
+    const { size, variant, skipHover, withColorHover, isError, isSuccess, color, children, theme: themeProp, customStylesType, } = _params;
     const isMb = template === 'mb' || themeProp === 'marryBaby';
     const finalColor = color || (themeProp && isMb ? 'mb' : _theme.primaryColor);
     const isHexColor = finalColor.startsWith('#');
@@ -27,11 +27,13 @@ var useStyles = core.createStyles((_theme, _params) => {
     const hoverHexColor = isHexColor
         ? _theme.fn.darken(color, 0.05)
         : (_f = (_e = _theme.colors) === null || _e === void 0 ? void 0 : _e[finalColor]) === null || _f === void 0 ? void 0 : _f[_theme.fn.primaryShade() + 1];
-    const isLeadgen = customStylesType === text.CustomStylesType.LEADGEN;
+    const isLeadgen = customStylesType === index.CustomStylesType.LEADGEN;
     return {
-        root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ transition: `all ${shared.ANIMATION_DURATION} ease-in-out`, '&:focus': {
+        root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ transition: `all ${shared.ANIMATION_DURATION} ease-in-out`, '&:focus': {
                 outline: 'none',
-            } }, (!children && {
+            } }, (isLeadgen && {
+            borderRadius: 12,
+        })), (!children && {
             paddingLeft: '10px',
             paddingRight: '10px',
             '.mantine-Button-icon': {
@@ -40,23 +42,23 @@ var useStyles = core.createStyles((_theme, _params) => {
         })), (() => {
             switch (size) {
                 case 'xl':
-                    return Object.assign({ height: 56, fontWeight: isLeadgen ? text.FontWeight.halfBold : text.FontWeight.semiBold, fontSize: isLeadgen ? '15px' : isMb ? '14px' : '16px', lineHeight: '24px' }, (isLeadgen && {
+                    return Object.assign({ height: 56, fontWeight: isLeadgen ? index.FontWeight.halfBold : index.FontWeight.semiBold, fontSize: isLeadgen ? '15px' : isMb ? '14px' : '16px', lineHeight: '24px' }, (isLeadgen && {
                         letterSpacing: '-0.3px',
                     }));
                 case 'lg':
-                    return Object.assign({ height: 48, fontWeight: isLeadgen ? text.FontWeight.halfBold : text.FontWeight.semiBold, fontSize: isLeadgen ? '15px' : isMb ? '14px' : '16px', lineHeight: '24px' }, (isLeadgen && {
+                    return Object.assign({ height: 48, fontWeight: isLeadgen ? index.FontWeight.halfBold : index.FontWeight.semiBold, fontSize: isLeadgen ? '15px' : isMb ? '14px' : '16px', lineHeight: '24px' }, (isLeadgen && {
                         letterSpacing: '-0.3px',
                     }));
                 case 'md':
-                    return Object.assign({ height: 40, fontWeight: isLeadgen ? text.FontWeight.halfBold : text.FontWeight.semiBold, fontSize: isLeadgen ? '13px' : '14px', lineHeight: isLeadgen ? '20px' : '22px' }, (isLeadgen && {
+                    return Object.assign({ height: 40, fontWeight: isLeadgen ? index.FontWeight.halfBold : index.FontWeight.semiBold, fontSize: isLeadgen ? '13px' : '14px', lineHeight: isLeadgen ? '20px' : '22px' }, (isLeadgen && {
                         letterSpacing: '-0.3px',
                     }));
                 case 'sm':
-                    return Object.assign(Object.assign({ height: 32, fontWeight: isLeadgen ? text.FontWeight.halfBold : text.FontWeight.semiBold, fontSize: isLeadgen ? '11px' : isMb ? '12px' : '14px', lineHeight: isLeadgen ? '16px' : '22px' }, (isLeadgen && {
+                    return Object.assign(Object.assign({ height: 32, fontWeight: isLeadgen ? index.FontWeight.halfBold : index.FontWeight.semiBold, fontSize: isLeadgen ? '11px' : isMb ? '12px' : '14px', lineHeight: isLeadgen ? '16px' : '22px' }, (isLeadgen && {
                         letterSpacing: '-0.2px',
                     })), { paddingLeft: '16px', paddingRight: '16px' });
                 case 'xs':
-                    return Object.assign({ height: 24, fontWeight: isLeadgen ? text.FontWeight.halfBold : text.FontWeight.semiBold, fontSize: isLeadgen ? '11px' : '12px', lineHeight: isLeadgen ? '16px' : '18px', paddingLeft: '8px', paddingRight: '8px' }, (isLeadgen && {
+                    return Object.assign({ height: 24, fontWeight: isLeadgen ? index.FontWeight.halfBold : index.FontWeight.semiBold, fontSize: isLeadgen ? '11px' : '12px', lineHeight: isLeadgen ? '16px' : '18px', paddingLeft: '8px', paddingRight: '8px' }, (isLeadgen && {
                         letterSpacing: '-0.2px',
                     }));
             }
@@ -70,11 +72,17 @@ var useStyles = core.createStyles((_theme, _params) => {
                     }));
                 }
                 case 'secondary':
-                    return Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid ${hexColor}` }, (!skipHover && {
+                    return Object.assign(Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid ${hexColor}` }, (!skipHover && {
                         '&:hover': {
                             backgroundColor: hexColor50,
                             border: `1px solid ${hexColor}`,
                         },
+                    })), (withColorHover && {
+                        '&:hover': {
+                            backgroundColor: hexColor,
+                            border: `1px solid ${hexColor}`,
+                            color: '#fff',
+                        },
                     }));
                 case 'white':
                     return {
@@ -166,20 +174,22 @@ function filterObject(obj) {
 const Button = React.forwardRef((props, ref) => {
     var _a, _b;
     const theme = core.useMantineTheme();
-    const _c = Object.assign(Object.assign({}, (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.Button) === null || _b === void 0 ? void 0 : _b.defaultProps), filterObject(props)), { variant, size, color, skipHover, className, dataEventCategory, dataEventAction, dataEventLabel, children, theme: themeProp } = _c, rest = tslib_es6.__rest(_c, ["variant", "size", "color", "skipHover", "className", "dataEventCategory", "dataEventAction", "dataEventLabel", "children", "theme"]);
+    const _c = Object.assign(Object.assign({}, (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.Button) === null || _b === void 0 ? void 0 : _b.defaultProps), filterObject(props)), { variant, size, color, skipHover, withColorHover, className, dataEventCategory, dataEventAction, dataEventLabel, children, theme: themeProp, component } = _c, rest = tslib_es6.__rest(_c, ["variant", "size", "color", "skipHover", "withColorHover", "className", "dataEventCategory", "dataEventAction", "dataEventLabel", "children", "theme", "component"]);
     const isError = variant === 'error';
+    const variantStyle = index.useTemplateVariant();
     const { classes, cx } = useStyles({
         variant,
         size,
         color,
         skipHover,
+        withColorHover,
         isError,
         isSuccess: variant === 'success',
         children,
         theme: themeProp,
-        customStylesType: theme.other.customStyleType || text.CustomStylesType.NONE,
+        customStylesType: variantStyle,
     });
-    return (React__default["default"].createElement(core.Button, Object.assign({ className: cx(className, variant), classNames: {
+    return (React__default["default"].createElement(core.Button, Object.assign({ component: component, className: cx(className, variant), classNames: {
             root: classes.root,
             leftIcon: classes.leftIcon,
         }, variant: MAPPED_VARIANT[variant], "data-variant": variant, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, ref: ref, loaderProps: rest.disabled ? { color: 'currentColor' } : undefined }, rest), children));

package/build/index-f1503799.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-5419417c.js');
+var React = require('react');
+var core = require('@mantine/core');
+var index$1 = require('./index-43f96b80.js');
+var index = require('./index-f190e9ee.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const MantineProvider = (_a) => {
+    var { children, locale, template = 'hb', isNotifications = true, customStyleType = index.CustomStylesType.NONE } = _a, props = tslib_es6.__rest(_a, ["children", "locale", "template", "isNotifications", "customStyleType"]);
+    index$1.useMantineLocale(locale);
+    return (React__default["default"].createElement(core.MantineProvider, Object.assign({ theme: index$1.getMantineThemeOverride(locale, template, customStyleType) }, props),
+        React__default["default"].createElement(index.TemplateProvider, { variant: customStyleType },
+            children,
+            isNotifications && React__default["default"].createElement(index$1.NotificationsHandler, null))));
+};
+
+exports.MantineProvider = MantineProvider;

package/build/{text-92a095cb.js → index-f190e9ee.js}

@@ -1,6 +1,11 @@
 'use strict';
 
 var core = require('@mantine/core');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
 
 exports.CustomStylesType = void 0;
 (function (CustomStylesType) {
@@ -142,6 +147,8 @@ const GlobalTextStyle = {
             h6: [core.rem(16), core.rem(14)],
             title1: [core.rem(17), core.rem(17)],
             title2: [core.rem(15), core.rem(15)],
+            overline: [core.rem(11), core.rem(11)],
+            subText: [core.rem(10), core.rem(10)],
         },
         lineHeight: {
             base: [core.rem(24), core.rem(24)],
@@ -171,6 +178,8 @@ const GlobalTextStyle = {
             h6: [core.rem(24), core.rem(22)],
             title1: [core.rem(24), core.rem(24)],
             title2: [core.rem(24), core.rem(24)],
+            overline: [core.rem(12), core.rem(12)],
+            subText: [core.rem(12), core.rem(12)],
         },
         letterSpacing: {
             lg: [-0.2, 0],
@@ -196,6 +205,8 @@ const GlobalTextStyle = {
             n1: [-0.2, -0.2],
             title1: [-0.4, -0.4],
             title2: [-0.3, -0.3],
+            overline: [-0.2, -0.2],
+            subText: [-0.2, -0.2],
         },
         fontWeightBySize: {
             s1: exports.FontWeight.semiBold,
@@ -257,5 +268,13 @@ const GlobalTextStyleNew = (theme) => ({
     },
 });
 
+const TemplateContext = React.createContext(exports.CustomStylesType.NONE);
+const TemplateProvider = ({ variant = exports.CustomStylesType.NONE, children, }) => {
+    return (React__default["default"].createElement(TemplateContext.Provider, { value: variant }, children));
+};
+const useTemplateVariant = () => React.useContext(TemplateContext);
+
 exports.GlobalTextStyle = GlobalTextStyle;
 exports.GlobalTextStyleNew = GlobalTextStyleNew;
+exports.TemplateProvider = TemplateProvider;
+exports.useTemplateVariant = useTemplateVariant;

package/build/{index-1c8547ba.js → index-f44397c1.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index$1 = require('./index-d9dc3d04.js');
-var index = require('./index-2f23d479.js');
+var index$1 = require('./index-e42baefa.js');
+var index = require('./index-d4d86d05.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-6e1934a1.js → index-f95e1f56.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-5419417c.js');
 var React = require('react');
-var index = require('./index-ce0a7efa.js');
+var index = require('./index-f104c324.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-eb299593.js → index-fa9d4274.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-5419417c.js');
 var React = require('react');
 var core = require('@mantine/core');
 var miscTheme = require('./miscTheme.js');

package/build/{index-e033f570.js → index-fbeb2104.js}

@@ -1,14 +1,14 @@
 'use strict';
 
 var React = require('react');
-var index$2 = require('./index-08939d41.js');
-var utils = require('./utils-7bc80898.js');
-var index = require('./index-2f23d479.js');
-var togetherComponentGlobalContext = require('./utils-623e143c.js');
+var index$2 = require('./index-c487ee7c.js');
+var utils = require('./utils-f7084704.js');
+var index = require('./index-d4d86d05.js');
+var togetherComponentGlobalContext = require('./utils-0013879c.js');
 var core = require('@mantine/core');
-var index$1 = require('./index-caaf6cac.js');
+var index$1 = require('./index-564f1a13.js');
 var styled = require('@emotion/styled');
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-5419417c.js');
 var miscTheme = require('./miscTheme.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
 

package/build/{index-6ff83c58.js → index-ff52878c.js}

@@ -1,27 +1,28 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-5419417c.js');
 var React = require('react');
 var core = require('@mantine/core');
 var form = require('@mantine/form');
-var useHealthToolCache = require('./useHealthToolCache-dcb0cf9f.js');
-var index = require('./index-2f23d479.js');
-var constants$1 = require('./constants-ffa1b205.js');
-var index$2 = require('./index-7481f662.js');
+var useHealthToolCache = require('./useHealthToolCache-a193e63e.js');
+var index = require('./index-d4d86d05.js');
+var constants$1 = require('./constants-0e4d3c20.js');
+var index$2 = require('./index-17b21000.js');
 require('@mantine/dates');
-require('./index-2d74352f.js');
-require('./index-fd836996.js');
-require('./index-d7818ca5.js');
-require('./index-18acca73.js');
-require('./index-caaf6cac.js');
-require('./index-ce0a7efa.js');
-require('./index.styles-61ce234f.js');
+require('./index-16103686.js');
+require('./index-1b62cb12.js');
+require('./index-d1695010.js');
+require('./index-43f96b80.js');
+require('./index-564f1a13.js');
+require('./index-f104c324.js');
+require('./index-f190e9ee.js');
+require('./index.styles-547708ba.js');
 require('@mantine/hooks');
-require('./text-92a095cb.js');
-require('./utils-7bc80898.js');
-require('./index-511d3d6a.js');
-var index$1 = require('./index-5322f269.js');
-var constants = require('./constants-ab886302.js');
+require('./utils-f7084704.js');
+require('./index-8d861879.js');
+var context = require('./context-96eaea73.js');
+var index$1 = require('./index-5afa8feb.js');
+var constants = require('./constants-58ebf255.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -34,47 +35,61 @@ const DefaultForm = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     const { t, locale } = index.useTranslations();
     const { linkTool, form, submitProps } = React.useContext(PWGFormContext);
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     const theme = core.useMantineTheme();
     const isMarryBaby = theme.other.template === 'mb';
     return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: t('pregnancyWeightGain.weekInput'), min: constants.INPUT_RANGE.pregnantWeek.min, max: constants.INPUT_RANGE.pregnantWeek.max, placeholder: `${constants.INPUT_RANGE.pregnantWeek.min} - ${constants.INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek'))),
-        React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightBeforeInput'), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
-                content: '50',
-            }) }, form.getInputProps('lastWeight'))),
-        React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: t('pregnancyWeightGain.heightInput'), min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
-                content: '160',
-            }) }, form.getInputProps('height'))),
-        React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightInput'), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
-                content: '50',
-            }) }, form.getInputProps('weight'))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin'))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${constantsDomainLocales.domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: t('pregnancyWeightGain.weekInput'), min: constants.INPUT_RANGE.pregnantWeek.min, max: constants.INPUT_RANGE.pregnantWeek.max, placeholder: `${constants.INPUT_RANGE.pregnantWeek.min} - ${constants.INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek')))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightBeforeInput'), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }) }, form.getInputProps('lastWeight')))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: t('pregnancyWeightGain.heightInput'), min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '160',
+                }) }, form.getInputProps('height')))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightInput'), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }) }, form.getInputProps('weight')))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin')))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${constantsDomainLocales.domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: core.clsx('due-date-calculate-button', wrapperClasses.submitBtn) }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
 const InlineForm = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     const { t, locale } = index.useTranslations();
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     const { linkTool, form, submitProps } = React.useContext(PWGFormContext);
     const theme = core.useMantineTheme();
     const isMarryBaby = theme.other.template === 'mb';
     return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weekInput') },
-            React__default["default"].createElement(index$2.Input.Number, Object.assign({ min: constants.INPUT_RANGE.pregnantWeek.min, max: constants.INPUT_RANGE.pregnantWeek.max, placeholder: `${constants.INPUT_RANGE.pregnantWeek.min} - ${constants.INPUT_RANGE.pregnantWeek.max}`, rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('pwgForm.week')) }, form.getInputProps('pregnantWeek')))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightBeforeInput') },
-            React__default["default"].createElement(index$2.Input.Number, Object.assign({}, form.getInputProps('lastWeight'), { min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
-                    content: '50',
-                }), rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.heightInput') },
-            React__default["default"].createElement(index$2.Input.Number, Object.assign({}, form.getInputProps('height'), { min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
-                    content: '160',
-                }), rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) }))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightInput') },
-            React__default["default"].createElement(index$2.Input.Number, Object.assign({}, form.getInputProps('weight'), { min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
-                    content: '50',
-                }), rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.havingTwins'), width: 'none' },
-            React__default["default"].createElement(index$1.HealthToolFormWrapper.Switching, Object.assign({}, form.getInputProps('hasTwin')))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${constantsDomainLocales.domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weekInput') },
+                React__default["default"].createElement(index$2.Input.Number, Object.assign({ min: constants.INPUT_RANGE.pregnantWeek.min, max: constants.INPUT_RANGE.pregnantWeek.max, placeholder: `${constants.INPUT_RANGE.pregnantWeek.min} - ${constants.INPUT_RANGE.pregnantWeek.max}`, rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('pwgForm.week')) }, form.getInputProps('pregnantWeek'))))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightBeforeInput') },
+                React__default["default"].createElement(index$2.Input.Number, Object.assign({}, form.getInputProps('lastWeight'), { min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                        content: '50',
+                    }), rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.heightInput') },
+                React__default["default"].createElement(index$2.Input.Number, Object.assign({}, form.getInputProps('height'), { min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
+                        content: '160',
+                    }), rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightInput') },
+                React__default["default"].createElement(index$2.Input.Number, Object.assign({}, form.getInputProps('weight'), { min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                        content: '50',
+                    }), rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.havingTwins'), width: 'none' },
+                React__default["default"].createElement(index$1.HealthToolFormWrapper.Switching, Object.assign({}, form.getInputProps('hasTwin'))))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${constantsDomainLocales.domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: core.clsx('due-date-calculate-button', wrapperClasses.submitBtn) }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
 const MbLayout = (_a) => {