@hhgtech/hhg-components 1.29.447 → 1.29.449-beta-1

package/build/{index-dc205198.js → index-01c0a05b.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
-var index = require('./index-38b56ca0.js');
-var index$1 = require('./index-505b1d6d.js');
+var index = require('./index-2d80a747.js');
+var index$1 = require('./index-ecaaab9e.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-f4721ca5.js → index-01cebc79.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
 var core = require('@mantine/core');
 var vaul = require('vaul');
 var styled = require('@emotion/styled');
-var index = require('./index-12319903.js');
+var index = require('./index-b319bb8a.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-19db08d3.js → index-03e93370.js}

@@ -1,21 +1,21 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-505b1d6d.js');
+var index = require('./index-ecaaab9e.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var utils = require('./utils-3ea8ef9f.js');
+var utils = require('./utils-b1545b34.js');
 var core = require('@mantine/core');
 var hooks = require('@mantine/hooks');
-var index$1 = require('./index-6a961c75.js');
-var index$2 = require('./index-230f438f.js');
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
-var index$3 = require('./index-df85eb4f.js');
+var index$1 = require('./index-649e1c7c.js');
+var index$2 = require('./index-9f5fbdee.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
+var index$3 = require('./index-c49a7688.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
 var flattenChildren = require('react-keyed-flatten-children');
-var index$4 = require('./index-a79cb92d.js');
-var Close = require('./Close-0e7526fe.js');
-var index$5 = require('./index-a85ac47f.js');
+var index$4 = require('./index-5d92a0b0.js');
+var Close = require('./Close-2eba22a3.js');
+var index$5 = require('./index-11edad6f.js');
 var carousel = require('@mantine/carousel');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-915e37e3.js → index-068b060a.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-56eb0cbb.js');
-var togetherComponentGlobalContext = require('./utils-9137d090.js');
+var index = require('./index-dfc3ed82.js');
+var togetherComponentGlobalContext = require('./utils-14ecb205.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
 

package/build/{index-a85ac47f.js → index-11edad6f.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var translationsContext = require('./translationsContext-69b4e29c.js');
+var translationsContext = require('./translationsContext-70cebab7.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/build/{index-f63bff2e.js → index-11f81884.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var core = require('@mantine/core');
-var text = require('./text-e637affa.js');
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var index$1 = require('./index-4b72550f.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
 var hooks = require('@mantine/hooks');
 var react = require('@emotion/react');
@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 var useTextStyles = core.createStyles((theme) => {
-    return text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN];
+    return index$1.GlobalTextStyleNew(theme)[index$1.CustomStylesType.LEADGEN];
 });
 
 const TextFieldContext = React.createContext({});

package/build/{index-d6d389d5.js → index-1258816e.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index_styles = require('./index.styles-c7f5e0dc.js');
+var index_styles = require('./index.styles-80bf0384.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-de070f76.js → index-1349469d.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index$1 = require('./index-de177d58.js');
-var index = require('./index-a85ac47f.js');
+var index$1 = require('./index-e308e687.js');
+var index = require('./index-11edad6f.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-ef2aecbb.js → index-16cd11ae.js}

@@ -1,36 +1,36 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
-var index$7 = require('./index-56eb0cbb.js');
-var index$3 = require('./index-a79cb92d.js');
-var index = require('./index-a85ac47f.js');
+var index$7 = require('./index-dfc3ed82.js');
+var index$3 = require('./index-5d92a0b0.js');
+var index = require('./index-11edad6f.js');
 var innertext = require('innertext');
-var index$1 = require('./index-a20d76a9.js');
-var index$2 = require('./index-4a27456a.js');
-var constants = require('./constants-e8cf502b.js');
+var index$1 = require('./index-50747a82.js');
+var index$2 = require('./index-e04d610b.js');
+var constants = require('./constants-5d23f649.js');
 var useTogetherAuthRequiredAction = require('./useTogetherAuthRequiredAction.js');
-var togetherComponentGlobalContext = require('./utils-9137d090.js');
-var treePopoverMenu = require('./treePopoverMenu-f2a3f062.js');
+var togetherComponentGlobalContext = require('./utils-14ecb205.js');
+var treePopoverMenu = require('./treePopoverMenu-3f12a45a.js');
 var styled = require('@emotion/styled');
-var utils = require('./utils-3ea8ef9f.js');
+var utils = require('./utils-b1545b34.js');
 var miscTheme = require('./miscTheme.js');
-var dataTransform = require('./dataTransform-f2d07361.js');
+var dataTransform = require('./dataTransform-31d21af7.js');
 var togetherApiPaths = require('./togetherApiPaths.js');
-var index$9 = require('./index-f28e34d9.js');
-var togetherMoleculesCardAuthor = require('./index-e0f647d1.js');
-var togetherMoleculesProfileDetail = require('./index-8e8d2c4e.js');
-var togetherMoleculesPostImagePreview = require('./index-b9744f83.js');
-var index$a = require('./index-cbea48d4.js');
-var index$8 = require('./index-adb5909a.js');
-require('./index-12319903.js');
+var index$9 = require('./index-3809f6bf.js');
+var togetherMoleculesCardAuthor = require('./index-a8887b4f.js');
+var togetherMoleculesProfileDetail = require('./index-a54ded9e.js');
+var togetherMoleculesPostImagePreview = require('./index-6a546668.js');
+var index$a = require('./index-54bb1517.js');
+var index$8 = require('./index-da71b9b1.js');
+require('./index-b319bb8a.js');
 var core$1 = require('@hhgtech/icons/core');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
-var index$6 = require('./index-d74c3072.js');
-var index$4 = require('./index-505b1d6d.js');
-var index$5 = require('./index-d17e8880.js');
-var normalizeLink = require('./normalizeLink-2cee64ac.js');
+var index$6 = require('./index-54625114.js');
+var index$4 = require('./index-ecaaab9e.js');
+var index$5 = require('./index-95690bf9.js');
+var normalizeLink = require('./normalizeLink-931f07df.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/index-17a8cc66.js

@@ -0,0 +1,308 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
+var React = require('react');
+var core = require('@mantine/core');
+var other = require('@hhgtech/icons/other');
+require('./index-9f5fbdee.js');
+require('@mantine/dates');
+require('./index-b319bb8a.js');
+require('./index-c4c50d31.js');
+require('./index-e04d610b.js');
+require('./index-93c1da83.js');
+var index$1 = require('./index-ecaaab9e.js');
+require('./index-2d80a747.js');
+var index$2 = require('./index-4b72550f.js');
+require('./index.styles-80bf0384.js');
+var index = require('./index-11edad6f.js');
+require('@mantine/hooks');
+var utils = require('./utils-b1545b34.js');
+require('./index-01c0a05b.js');
+var context = require('./context-4b2abfb2.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
+const StyledInnerClass = 'hhgcomp-toolbanner-inner';
+const StyledWrapperClass = 'hhgcomp-toolbanner-wrapper';
+const useStyles$3 = core.createStyles((theme, { isRevamp, isPregTool, bannerColor, isMarryBaby }) => ({
+    wrapper: {
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        gap: core.rem(24),
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: core.rem(16),
+    },
+    container: {
+        width: '100%',
+        backgroundColor: bannerColor ||
+            (isMarryBaby
+                ? theme.colors.mb[1]
+                : isPregTool
+                    ? theme.colors.pink[1]
+                    : theme.colors.blue[1]),
+        position: 'relative',
+        display: 'flex',
+        gap: 24,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: core.rem(16),
+        a: {
+            textDecoration: 'none',
+            color: 'inherit',
+        },
+        '&[data-site="marryBaby"]': {
+            a: {
+                textDecoration: 'underline',
+            },
+            [utils.MediaQueries.mbDown]: {
+                paddingBottom: 0,
+            },
+        },
+        [utils.MediaQueries.tdDown]: {
+            height: 'auto',
+            [`.${StyledWrapperClass}`]: {
+                [`.${StyledInnerClass}`]: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    [utils.MediaQueries.mbDown]: {
+                        justifyContent: 'space-between',
+                    },
+                    [`.${StyledIconContainerClass}`]: {
+                        position: 'relative',
+                        right: core.rem(-50),
+                        bottom: core.rem(-20),
+                        width: core.rem(110),
+                        minWidth: 0,
+                        height: 'auto',
+                        minHeight: 0,
+                        alignSelf: 'flex-end',
+                        marginBottom: core.rem(-20),
+                        [utils.MediaQueries.mbDown]: {
+                            right: 'unset',
+                        },
+                    },
+                },
+            },
+        },
+        '.embedded-review': {
+            gap: core.rem(12),
+            display: 'flex',
+            alignItems: 'center',
+        },
+        '.embedded-review__avatar': {
+            position: 'relative',
+            minWidth: core.rem(32),
+            img: {
+                width: core.rem(32),
+                height: core.rem(32),
+                display: 'block',
+                borderRadius: '100%',
+            },
+            svg: {
+                bottom: 0,
+                right: 0,
+                position: 'absolute',
+            },
+        },
+    },
+    headingWrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: isRevamp ? core.rem(8) : 0,
+    },
+    avatarWrapper: {
+        position: 'relative',
+        img: {
+            maxWidth: core.rem(48),
+            maxHeight: core.rem(48),
+        },
+        '.embedded-review__avatar': {
+            position: 'relative',
+        },
+    },
+    reviewText: {
+        a: {
+            textDecoration: 'underline',
+            textUnderlineOffset: '2px',
+        },
+    },
+    iconWrapper: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: core.rem(80),
+        height: core.rem(80),
+        borderRadius: '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),
+            },
+        },
+    },
+    heading: {},
+}));
+
+const ToolsBannerCard = (_a) => {
+    var { className, classNames, heading, bannerColor, medicalReview = { link: '#', reviewer: '', date: '' }, icon, style, isPregTool, isRevamp, styles } = _a, rest = tslib_es6.__rest(_a, ["className", "classNames", "heading", "bannerColor", "medicalReview", "icon", "style", "isPregTool", "isRevamp", "styles"]);
+    const { t } = index.useTranslations();
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
+    const headingAs = 'h2';
+    const { classes, cx } = useStyles$3({ isRevamp, isPregTool, bannerColor, isMarryBaby }, {
+        name: 'ToolsBannerCard',
+        styles,
+        classNames,
+    });
+    const medicalReviewEle = (medicalReview === null || medicalReview === void 0 ? void 0 : medicalReview.reviewer) ? (React__default["default"].createElement(index$1.Text, { size: "label2", as: "div", className: classes.reviewText },
+        medicalReview.avatar && (React__default["default"].createElement("div", { className: "embedded-review__avatar" },
+            React__default["default"].createElement(core.Box, { className: classes.avatarWrapper },
+                React__default["default"].createElement("img", { src: medicalReview.avatar, alt: medicalReview.reviewer, loading: "lazy" }),
+                React__default["default"].createElement(other.RedCross, { size: 14 })))),
+        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(core.Box, Object.assign({ className: cx(className, classes.container), style: style, "data-site": siteType }, rest),
+        React__default["default"].createElement(core.Flex, { className: classes.headingWrapper },
+            React__default["default"].createElement(index$1.Text, { className: cx(classes.heading, 'heading'), size: isMarryBaby ? 'h4' : 'h3', as: headingAs }, heading),
+            medicalReview && React__default["default"].createElement(index$1.Text, { size: "n1" }, medicalReviewEle)),
+        React__default["default"].createElement(core.Flex, { className: classes.iconWrapper }, icon)));
+};
+
+var useStyles$2 = core.createStyles(() => {
+    return {
+        root: {
+            borderTopLeftRadius: 'inherit',
+            borderTopRightRadius: 'inherit',
+        },
+    };
+});
+
+const Banner = (_a) => {
+    var { className, classNames, styles } = _a, rest = tslib_es6.__rest(_a, ["className", "classNames", "styles"]);
+    const { classes: wrapperClasses } = React.useContext(context.CardWrapperContext);
+    const { isPregTool } = React.useContext(context.CardWrapperContext);
+    const { classes, cx } = useStyles$2(undefined, {
+        name: 'HealthToolCardWrapper__Banner',
+        classNames,
+        styles,
+    });
+    return (React__default["default"].createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, classNames: {
+            container: wrapperClasses.bannerWrapper,
+            heading: wrapperClasses.bannerHeading,
+            reviewText: wrapperClasses.bannerReviewText,
+        }, className: cx(className, classes.root) }, rest)));
+};
+
+var useStyles$1 = core.createStyles(() => {
+    return {
+        root: {
+            paddingTop: 16,
+            borderRadius: 'inherit',
+        },
+    };
+});
+
+const Body = (_a) => {
+    var { children, className, styles, classNames } = _a, rest = tslib_es6.__rest(_a, ["children", "className", "styles", "classNames"]);
+    const { classes: wrapperClasses, hasBodyScroll } = React.useContext(context.CardWrapperContext);
+    const { classes, cx } = useStyles$1(undefined, {
+        name: 'HealthToolCardWrapper__Body',
+        styles,
+        classNames,
+    });
+    return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root, wrapperClasses.bodyWrapper) }, rest), hasBodyScroll ? (React__default["default"].createElement(core.ScrollArea, { h: "100%", type: "auto", scrollbarSize: 8, className: wrapperClasses.scrollAreaWrapper }, children)) : (children)));
+};
+
+var useStyles = core.createStyles((theme, { isPregTool, variant }) => {
+    const isMarryBaby = theme.other.template === 'mb';
+    return {
+        root: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', borderRadius: core.rem(isMarryBaby ? 16 : 8) }, (variant === 'default' && {
+            backgroundColor: '#fff',
+            border: `1px solid ${isMarryBaby
+                ? theme.colors.mb[2]
+                : isPregTool
+                    ? theme.colors.pink[1]
+                    : theme.colors.blue[2]}`,
+        })), (variant === 'gray' && {
+            backgroundColor: theme.colors.neutral[0],
+        })),
+        submitBtn: {},
+        bodyWrapper: {},
+        scrollAreaWrapper: {},
+        bannerWrapper: Object.assign({}, (variant === 'gray' && {
+            backgroundColor: 'transparent',
+            padding: `${core.rem(16)} ${core.rem(16)} 0`,
+        })),
+        bannerHeading: Object.assign({}, (variant === 'gray' && {
+            fontSize: core.rem(20),
+            lineHeight: core.rem(28),
+            fontWeight: index$2.FontWeight.semiBold,
+            [theme.fn.smallerThan('sm')]: {
+                fontSize: core.rem(17),
+                lineHeight: core.rem(24),
+            },
+        })),
+        bannerReviewText: Object.assign({}, (variant === 'gray' && {
+            fontSize: core.rem(14),
+            lineHeight: core.rem(22),
+            [theme.fn.smallerThan('sm')]: {
+                fontSize: core.rem(12),
+                lineHeight: core.rem(18),
+            },
+        })),
+        submitWrapper: Object.assign({ [theme.fn.smallerThan('sm')]: {
+                button: {
+                    width: '100%',
+                },
+            }, [theme.fn.largerThan('sm')]: {
+                textAlign: 'right',
+            } }, (variant === 'gray' && {
+            backgroundColor: theme.colors.neutral[0],
+            button: {
+                marginTop: 10,
+            },
+        })),
+        newsletterBlock: {},
+    };
+});
+
+const _HealthToolCardWrapper = (_a) => {
+    var { children, styles, classNames, className, isPregTool, variant = 'default', hasBodyScroll } = _a, rest = tslib_es6.__rest(_a, ["children", "styles", "classNames", "className", "isPregTool", "variant", "hasBodyScroll"]);
+    const { classes, cx } = useStyles({ isPregTool, variant }, {
+        name: 'HealthToolCardWrapper',
+        styles,
+        classNames,
+    });
+    return (React__default["default"].createElement(context.CardWrapperContext.Provider, { value: {
+            isPregTool,
+            classes,
+            variant,
+            hasBodyScroll,
+        } },
+        React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, rest), children)));
+};
+const HealthToolCardWrapper = _HealthToolCardWrapper;
+HealthToolCardWrapper.Body = Body;
+HealthToolCardWrapper.Banner = Banner;
+
+exports.HealthToolCardWrapper = HealthToolCardWrapper;
+exports.ToolsBannerCard = ToolsBannerCard;

package/build/{index-265a4e19.js → index-1a6599b9.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-38b56ca0.js');
+var index = require('./index-2d80a747.js');
 var styled = require('@emotion/styled');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-6782d333.js → index-1ebb7538.js}

@@ -1,23 +1,23 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
-var index$2 = require('./index-230f438f.js');
+var index$2 = require('./index-9f5fbdee.js');
 require('@mantine/dates');
-require('./index-12319903.js');
-require('./index-f8ac1bf2.js');
-var index$1 = require('./index-4a27456a.js');
-require('./index-aaaea7c1.js');
-var index$3 = require('./index-505b1d6d.js');
-require('./index-38b56ca0.js');
-require('./index.styles-c7f5e0dc.js');
-var index = require('./index-a85ac47f.js');
+require('./index-b319bb8a.js');
+require('./index-c4c50d31.js');
+var index$1 = require('./index-e04d610b.js');
+require('./index-93c1da83.js');
+var index$3 = require('./index-ecaaab9e.js');
+require('./index-2d80a747.js');
+require('./index-4b72550f.js');
+require('./index.styles-80bf0384.js');
+var index = require('./index-11edad6f.js');
 require('@mantine/hooks');
-require('./text-e637affa.js');
-require('./utils-3ea8ef9f.js');
-require('./index-dc205198.js');
+require('./utils-b1545b34.js');
+require('./index-01c0a05b.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-4870a37e.js → index-1f606114.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index$1 = require('./index-505b1d6d.js');
-var index = require('./index-a85ac47f.js');
+var index$1 = require('./index-ecaaab9e.js');
+var index = require('./index-11edad6f.js');
 var miscTheme = require('./miscTheme.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-38b56ca0.js → index-2d80a747.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
 var core = require('@mantine/core');
-var shared = require('./shared-d3336c48.js');
-var text = require('./text-e637affa.js');
+var shared = require('./shared-31d5d1ed.js');
+var index = require('./index-4b72550f.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -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',
                     }));
             }
@@ -166,8 +168,9 @@ 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, className, dataEventCategory, dataEventAction, dataEventLabel, children, theme: themeProp, component } = _c, rest = tslib_es6.__rest(_c, ["variant", "size", "color", "skipHover", "className", "dataEventCategory", "dataEventAction", "dataEventLabel", "children", "theme", "component"]);
     const isError = variant === 'error';
+    const variantStyle = index.useTemplateVariant();
     const { classes, cx } = useStyles({
         variant,
         size,
@@ -177,9 +180,9 @@ const Button = React.forwardRef((props, ref) => {
         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));