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

package/build/esm/{index-ea6106bd.js → index-c7aa5c48.js}

@@ -1,22 +1,23 @@
-import { _ as __rest } from './tslib.es6-91093dfb.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
 import React__default, { createContext, useContext } from 'react';
-import { createStyles, rem, useMantineTheme } from '@mantine/core';
+import { createStyles, rem, useMantineTheme, clsx } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { I as Input } from './index-94204073.js';
-import { D as DatePicker } from './index-7dd06998.js';
-import { T as Text } from './index-c68a533e.js';
-import './index-cc305f99.js';
-import './index.styles-e737cd1b.js';
-import { u as useTranslations } from './index-64827257.js';
+import { I as Input } from './index-d7bd249f.js';
+import { D as DatePicker } from './index-6d40879d.js';
+import { T as Text } from './index-15687d4c.js';
+import './index-3d2078ab.js';
+import './index-d0dddda4.js';
+import './index.styles-25051c24.js';
+import { u as useTranslations } from './index-e6601f2c.js';
 import '@mantine/hooks';
-import './index-2870af04.js';
-import './text-db324baf.js';
-import './utils-54809471.js';
-import './index-92ea8383.js';
-import { I as INPUT_RANGE } from './constants-024f4863.js';
-import { H as HealthToolFormWrapper } from './index-6c0a8369.js';
-import { G as GenderOptionControl } from './index-bd65bdb6.js';
-import { L as LOCALE } from './Locale-bb880082.js';
+import './index-5d273446.js';
+import './utils-ff8e88ec.js';
+import './index-0bb898db.js';
+import { C as CardWrapperContext } from './context-98f996bd.js';
+import { I as INPUT_RANGE } from './constants-c86fd286.js';
+import { H as HealthToolFormWrapper } from './index-d0b44796.js';
+import { G as GenderOptionControl } from './index-481eacef.js';
+import { L as LOCALE } from './Locale-932c7523.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const BabyGrowthFormContext = createContext({});
@@ -33,6 +34,7 @@ var useStyles$1 = createStyles((theme) => {
 const DefaultForm = (_a) => {
     var { styles, classNames } = _a, props = __rest(_a, ["styles", "classNames"]);
     const { t, locale } = useTranslations();
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
     const { classes } = useStyles$1(undefined, {
         name: 'BabyGrowthForm__DefaultForm',
@@ -60,39 +62,43 @@ const DefaultForm = (_a) => {
                         form.getInputProps('birthday').onChange(v);
                     } }))),
             form.errors.birthday && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday))),
-        React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
-                t('babyGrowth.height'),
-                React__default.createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.cm'),
-                    ")")) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
-                form.setFieldValue('height', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } })),
-        React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
-                t('babyGrowth.weight'),
-                React__default.createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.kg'),
-                    ")")) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
-                form.setFieldValue('weight', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } })),
-        locale !== LOCALE.Vietnam && (React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
-                t('babyGrowth.head'),
-                React__default.createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.cm'),
-                    ")")) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
-                form.setFieldValue('head', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } }))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
+                    t('babyGrowth.height'),
+                    React__default.createElement("span", { className: classes.unit },
+                        "(",
+                        t('babyGrowth.cm'),
+                        ")")) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
+                    form.setFieldValue('height', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } }))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
+                    t('babyGrowth.weight'),
+                    React__default.createElement("span", { className: classes.unit },
+                        "(",
+                        t('babyGrowth.kg'),
+                        ")")) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
+                    form.setFieldValue('weight', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } }))),
+        locale !== LOCALE.Vietnam && (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
+                    t('babyGrowth.head'),
+                    React__default.createElement("span", { className: classes.unit },
+                        "(",
+                        t('babyGrowth.cm'),
+                        ")")) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
+                    form.setFieldValue('head', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } })))),
         form.errors.checkMesureVal && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(Input.Wrapper, { label: t('babyGrowth.input.measurementDate') },
                 React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), error: null }))),
             form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit'))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit')))));
 };
 
 var useStyles = createStyles((theme) => {
@@ -151,6 +157,7 @@ const InlineForm = (_a) => {
     var { styles, classNames } = _a, props = __rest(_a, ["styles", "classNames"]);
     const { t, locale } = useTranslations();
     const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     const theme = useMantineTheme();
     const { classes } = useStyles(undefined, {
         name: 'BabyGrowthForm__InlineForm',
@@ -211,7 +218,8 @@ const InlineForm = (_a) => {
             React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.measurementDate') },
                 React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('measurementDate'), { error: null }))),
             form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: classes.submitBtn }, submitProps), t('babyGrowth.input.submit'))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: clsx(classes.submitBtn, wrapperClasses.submitBtn) }, submitProps), t('babyGrowth.input.submit')))));
 };
 
 const MbLayout = (_a) => {

package/build/esm/{index-191bb5e3.js → index-ca5ebcfd.js}

@@ -1,48 +1,48 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-91093dfb.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-8570c30c.js';
 import React__default, { useContext, useState, useCallback, useEffect, useMemo, useRef } from 'react';
-import { V as VideoType } from './index-5d09fff6.js';
-import { i as isInternalLink, V as VideoItem, L as LanguageSwitcher } from './index-ac6cb3b8.js';
-import { L as LOCALE_SPECS, S as STATIC_PAGES, a as ZINDEX_HEADER, T as TOGETHER_LOCALES, c as CARE_LOCALES } from './index-43c88049.js';
-import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-5a2e92c9.js';
-import { a as formatCommunity, b as formatPost } from './dataTransform-eec5e584.js';
+import { V as VideoType } from './index-d18ed0e7.js';
+import { i as isInternalLink, V as VideoItem, L as LanguageSwitcher } from './index-ded03e50.js';
+import { L as LOCALE_SPECS, S as STATIC_PAGES, a as ZINDEX_HEADER, T as TOGETHER_LOCALES, c as CARE_LOCALES } from './index-39bf919c.js';
+import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-a4d2f4ed.js';
+import { a as formatCommunity, b as formatPost } from './dataTransform-fa959101.js';
 import { Close, Logo } from '@hhgtech/icons/core';
-import './translationsContext-581baa38.js';
+import './translationsContext-47869a7a.js';
 import styled from '@emotion/styled';
-import { I as Input } from './index-94204073.js';
+import { I as Input } from './index-d7bd249f.js';
 import { theme } from './miscTheme.js';
-import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-e90acae8.js';
+import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-6d6446c4.js';
 import { ArrowRight, ChatAi } from '@hhgtech/icons/other';
 import { createStyles, Box, Indicator, useMantineTheme, clsx } from '@mantine/core';
-import { L as Logo$1 } from './index-5179d870.js';
+import { L as Logo$1 } from './index-924e34d7.js';
 import throttle from 'lodash/throttle';
 import '@mantine/dates';
-import { C as CommonGAssets } from './index-a35d5bd3.js';
-import './index-2870af04.js';
-import { T as Text } from './index-c68a533e.js';
-import { B as Button } from './index-cc305f99.js';
-import './index.styles-e737cd1b.js';
+import { C as CommonGAssets } from './index-f8a949a8.js';
+import './index-5d273446.js';
+import { T as Text } from './index-15687d4c.js';
+import { B as Button } from './index-3d2078ab.js';
+import './index-d0dddda4.js';
+import './index.styles-25051c24.js';
 import '@mantine/hooks';
-import './text-db324baf.js';
-import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-54809471.js';
-import './index-92ea8383.js';
-import { L as LOCALISED_SLUGS } from './constants-5f6fa0d8.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-13ef6e74.js';
-import { L as LOCALIZED_SLUGS } from './constants-bddfc09c.js';
-import { u as useTranslations } from './index-64827257.js';
-import { H as Heading } from './index-602c10bf.js';
-import { I as Indicator$1 } from './index-1457df3c.js';
-import { u as useIsInit } from './useIsInit-e24533db.js';
+import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-ff8e88ec.js';
+import './index-0bb898db.js';
+import { L as LOCALISED_SLUGS } from './constants-4679e9e2.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-4778b33a.js';
+import { L as LOCALIZED_SLUGS } from './constants-43303b1b.js';
+import { u as useTranslations } from './index-e6601f2c.js';
+import { H as Heading } from './index-fd175154.js';
+import { I as Indicator$1 } from './index-f3b18d45.js';
+import { u as useIsInit } from './useIsInit-6ad6f658.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
-import { B as Button$1 } from './index-341ed865.js';
+import { B as Button$1 } from './index-b88aba78.js';
 import formatString from 'string-format';
 import { domainLocales } from './constantsDomainLocales.js';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { U as UserAvatar } from './index-7b4efb28.js';
-import { C as Container } from './index-af7af639.js';
+import { U as UserAvatar } from './index-dd14e9a1.js';
+import { C as Container } from './index-89cc39f2.js';
 import debounce from 'lodash/debounce';
-import { L as LOCALE } from './Locale-bb880082.js';
-import { g as getDataWithCache } from './core-6275b986.js';
+import { L as LOCALE } from './Locale-932c7523.js';
+import { g as getDataWithCache } from './core-adb60697.js';
 
 const StyleInput = styled(Input) `
   .mantine-Input-input {

package/build/esm/{index-c8a1a131.js → index-cb9adbdc.js}

@@ -1,13 +1,13 @@
-import { _ as __rest } from './tslib.es6-91093dfb.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
 import React__default, { useMemo, useState, useEffect } from 'react';
-import './index-5d09fff6.js';
+import './index-d18ed0e7.js';
 import styled from '@emotion/styled';
-import { C as CommonGAssets } from './index-a35d5bd3.js';
+import { C as CommonGAssets } from './index-f8a949a8.js';
 import { theme } from './miscTheme.js';
-import { I as ImageWrap } from './index-9a3adb7b.js';
-import { T as Text } from './index-a45be0c7.js';
-import { L as LOCALE } from './Locale-bb880082.js';
-import { e as CentralCarousel } from './index-94204073.js';
+import { I as ImageWrap } from './index-5e4c4c9c.js';
+import { T as Text } from './index-ad055c3e.js';
+import { L as LOCALE } from './Locale-932c7523.js';
+import { e as CentralCarousel } from './index-d7bd249f.js';
 
 const StyledIconContainer = styled.div `
   display: inline-flex;

package/build/esm/{index-6c0a8369.js → index-d0b44796.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-91093dfb.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
 import React__default, { createContext, useContext } from 'react';
 import { createStyles, rem, Box, Input, Chip, useMantineTheme, Flex, Switch } from '@mantine/core';
-import { T as Text } from './index-c68a533e.js';
-import { B as Button } from './index-cc305f99.js';
-import { u as useTranslations } from './index-64827257.js';
+import { T as Text } from './index-15687d4c.js';
+import { B as Button } from './index-3d2078ab.js';
+import { u as useTranslations } from './index-e6601f2c.js';
 import flattenChildren from 'react-keyed-flatten-children';
 import { theme } from './miscTheme.js';
 
@@ -101,6 +101,11 @@ const useStyles$7 = createStyles(() => {
             display: 'flex',
             flexDirection: 'column',
             gap: rem(8),
+            paddingLeft: 16,
+            paddingRight: 16,
+            '&:last-child': {
+                paddingBottom: 16,
+            },
         },
     };
 });
@@ -292,6 +297,7 @@ var useStyles$2 = createStyles((theme, { width, direction }) => {
         })),
         label: {
             fontSize: rem(14),
+            lineHeight: rem(22),
             color: theme.colors.gray[6],
         },
         content: {

package/build/esm/{text-db324baf.js → index-d0dddda4.js}

@@ -1,4 +1,5 @@
 import { rem } from '@mantine/core';
+import React__default, { createContext, useContext } from 'react';
 
 var CustomStylesType;
 (function (CustomStylesType) {
@@ -140,6 +141,8 @@ const GlobalTextStyle = {
             h6: [rem(16), rem(14)],
             title1: [rem(17), rem(17)],
             title2: [rem(15), rem(15)],
+            overline: [rem(11), rem(11)],
+            subText: [rem(10), rem(10)],
         },
         lineHeight: {
             base: [rem(24), rem(24)],
@@ -169,6 +172,8 @@ const GlobalTextStyle = {
             h6: [rem(24), rem(22)],
             title1: [rem(24), rem(24)],
             title2: [rem(24), rem(24)],
+            overline: [rem(12), rem(12)],
+            subText: [rem(12), rem(12)],
         },
         letterSpacing: {
             lg: [-0.2, 0],
@@ -194,6 +199,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: FontWeight.semiBold,
@@ -255,4 +262,10 @@ const GlobalTextStyleNew = (theme) => ({
     },
 });
 
-export { CustomStylesType as C, FontWeight as F, GlobalTextStyleNew as G, GlobalTextStyle as a };
+const TemplateContext = createContext(CustomStylesType.NONE);
+const TemplateProvider = ({ variant = CustomStylesType.NONE, children, }) => {
+    return (React__default.createElement(TemplateContext.Provider, { value: variant }, children));
+};
+const useTemplateVariant = () => useContext(TemplateContext);
+
+export { CustomStylesType as C, FontWeight as F, GlobalTextStyleNew as G, TemplateProvider as T, GlobalTextStyle as a, useTemplateVariant as u };

package/build/esm/{index-5d09fff6.js → index-d18ed0e7.js}

@@ -1,4 +1,4 @@
-import { L as LOCALE } from './Locale-bb880082.js';
+import { L as LOCALE } from './Locale-932c7523.js';
 
 var Gender;
 (function (Gender) {

package/build/esm/{index-94204073.js → index-d7bd249f.js}

@@ -1,27 +1,27 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-91093dfb.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-8570c30c.js';
 import * as React from 'react';
 import React__default, { forwardRef, Component, useState, useCallback, useEffect, createContext, useContext, useRef, useMemo, useImperativeHandle } from 'react';
 import { ArrowDown } from '@hhgtech/icons/other';
 import { createStyles, rem, Autocomplete, Image, ActionIcon, Select as Select$1, AspectRatio as AspectRatio$1, useMantineTheme, Box, Breadcrumbs as Breadcrumbs$1, Accordion as Accordion$1, Indicator, Avatar as Avatar$1, FileInput as FileInput$1, createEmotionCache, NumberInput as NumberInput$1, PasswordInput as PasswordInput$1, Flex, clsx, TextInput, Input as Input$1, Checkbox as Checkbox$1, Slider, Radio as Radio$1, Popover as Popover$1, Chip } from '@mantine/core';
 import { useUncontrolled, useDebouncedValue, useClickOutside, useViewportSize, useResizeObserver, useDisclosure } from '@mantine/hooks';
-import { C as CommonGAssets } from './index-a35d5bd3.js';
-import { C as CustomStylesType, G as GlobalTextStyleNew, F as FontWeight } from './text-db324baf.js';
-import { u as useScreenSize, I as ImageWrap } from './index-9a3adb7b.js';
+import { C as CommonGAssets } from './index-f8a949a8.js';
+import { C as CustomStylesType, u as useTemplateVariant, G as GlobalTextStyleNew, F as FontWeight } from './index-d0dddda4.js';
+import { u as useScreenSize, I as ImageWrap } from './index-5e4c4c9c.js';
 import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text } from './index-c68a533e.js';
-import { t as themeColors } from './index-2870af04.js';
+import { T as Text } from './index-15687d4c.js';
+import { t as themeColors } from './index-5d273446.js';
 import { theme } from './miscTheme.js';
 import cn from 'classnames';
 import { v1 } from 'uuid';
-import { a as useUniqueId } from './useUniqueId-ccd8c09f.js';
+import { a as useUniqueId } from './useUniqueId-bbc9ce62.js';
 import { siteOptions } from './constantsSite.js';
 import { css } from '@emotion/react';
 import { Check, Plus } from '@hhgtech/icons/core';
-import { B as Button } from './index-cc305f99.js';
+import { B as Button } from './index-3d2078ab.js';
 
-var useStyles$4 = createStyles((theme) => {
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
+var useStyles$4 = createStyles((theme, { variantStyle }) => {
+    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
     const commonStyle = {
         fontSize: rem(15),
         lineHeight: rem(24),
@@ -60,7 +60,8 @@ const _AutoComplete = forwardRef((_a, ref) => {
 });
 const _Select = forwardRef((_a, ref) => {
     var { searchValue, onSearchChange, styles } = _a, props = __rest(_a, ["searchValue", "onSearchChange", "styles"]);
-    const { classes } = useStyles$4(undefined, { name: 'MantineSelect', styles });
+    const variantStyle = useTemplateVariant();
+    const { classes } = useStyles$4({ variantStyle }, { name: 'MantineSelect', styles });
     const [_searchValue, handleSearchChange] = useUncontrolled({
         defaultValue: '',
         value: searchValue,
@@ -241,8 +242,8 @@ const _Breadcrumbs = (_a) => {
 const Breadcrumbs = _Breadcrumbs;
 Breadcrumbs.Item = BreadcrumbItem;
 
-var useStyles$2 = createStyles((theme) => {
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
+var useStyles$2 = createStyles((theme, { variantStyle }) => {
+    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
     const commonStyle = {
         fontSize: rem(15),
         lineHeight: rem(24),
@@ -321,8 +322,8 @@ const FileInput = (props) => {
     return React__default.createElement(FileInput$1, Object.assign({ size: "md" }, props));
 };
 
-var useStyles$1 = createStyles((theme) => {
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
+var useStyles$1 = createStyles((theme, { variantStyle }) => {
+    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
     const commonStyle = {
         fontSize: rem(15),
         lineHeight: rem(24),
@@ -382,10 +383,11 @@ ErrorIcon.defaultProps = {
     activeColor: theme.colors.primaryBase,
 };
 
-const ErrorLabel = ({ label, withIcon }) => {
-    return (React__default.createElement(Flex, { align: 'center', gap: 4 },
+const ErrorLabel = (_a) => {
+    var { label, withIcon, textProps } = _a, rest = __rest(_a, ["label", "withIcon", "textProps"]);
+    return (React__default.createElement(Flex, Object.assign({ align: 'center', gap: 4 }, rest),
         withIcon && React__default.createElement(ErrorIcon, { size: 12 }),
-        React__default.createElement(Text, { size: "c1", variant: "error", dangerouslySetInnerHTML: { __html: label } })));
+        React__default.createElement(Text, Object.assign({ size: "c1", variant: "error", dangerouslySetInnerHTML: { __html: label } }, textProps))));
 };
 
 const FloatingLabelControlContext = createContext({});
@@ -748,7 +750,8 @@ FloatingLabelControl.Icon = FloatingLabelControlIcon;
 
 const InputWrapper = forwardRef((_a, ref) => {
     var { label, value: _value, onChange: _onChange, onChangeRaw, maxLength, withFloatingLabel, styles, error } = _a, props = __rest(_a, ["label", "value", "onChange", "onChangeRaw", "maxLength", "withFloatingLabel", "styles", "error"]);
-    const { classes } = useStyles$1(undefined, { name: 'MantineInput', styles });
+    const variantStyle = useTemplateVariant();
+    const { classes } = useStyles$1({ variantStyle }, { name: 'MantineInput', styles });
     const [value, setValue] = useState(_value || '');
     const [debounced] = useDebouncedValue(value, DEBOUNCED_TIME);
     useEffect(() => {
@@ -940,6 +943,7 @@ const CheckboxWithState = (_a) => {
 const CheckboxWrapper = (_a) => {
     var { color = 'blue', label, size: sizeProp, styles } = _a, props = __rest(_a, ["color", "label", "size", "styles"]);
     const theme = useMantineTheme();
+    const variantStyle = useTemplateVariant();
     const hexColor = useMemo(() => {
         var _a, _b;
         return ((color === null || color === void 0 ? void 0 : color.includes('.'))
@@ -947,7 +951,7 @@ const CheckboxWrapper = (_a) => {
             : (_b = theme.colors[color]) === null || _b === void 0 ? void 0 : _b[theme.primaryShade || 6]) ||
             theme.colors.blue[6];
     }, [color]);
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
+    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
     const size = isLeadgenStyle ? 20 : sizeProp;
     return (React__default.createElement(Checkbox$1, Object.assign({ color: color, size: size, label: isLeadgenStyle ? (React__default.createElement(Text, { size: "p2", color: theme.colors.gray[8] }, label)) : (label), icon: isLeadgenStyle
             ? (_a) => {
@@ -1097,6 +1101,7 @@ const RadioWithState = (_a) => {
 const RadioWrapper = (_a) => {
     var { color, label, size: sizeProp, styles } = _a, props = __rest(_a, ["color", "label", "size", "styles"]);
     const theme = useMantineTheme();
+    const variantStyle = useTemplateVariant();
     const hexColor = useMemo(() => {
         var _a, _b;
         return ((color === null || color === void 0 ? void 0 : color.includes('.'))
@@ -1104,7 +1109,7 @@ const RadioWrapper = (_a) => {
             : (_b = theme.colors[color]) === null || _b === void 0 ? void 0 : _b[theme.primaryShade || 6]) ||
             theme.fn.primaryColor();
     }, [color]);
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
+    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
     const size = isLeadgenStyle ? 20 : sizeProp;
     return (React__default.createElement(Radio$1, Object.assign({ label: isLeadgenStyle ? (React__default.createElement(Text, { size: "p2", color: theme.colors.gray[8] }, label)) : (label), size: size, icon: isLeadgenStyle
             ? (_a) => {

package/build/esm/{index-7b4efb28.js → index-dd14e9a1.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-91093dfb.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
 import React__default, { useContext, useState } from 'react';
-import { T as TogetherComponentGlobalContext } from './utils-cd8ba782.js';
+import { T as TogetherComponentGlobalContext } from './utils-3c6f8119.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-ac6cb3b8.js → index-ded03e50.js}

@@ -1,18 +1,18 @@
 import React__default, { useState, useMemo } from 'react';
-import { F as Flag } from './index-94204073.js';
+import { F as Flag } from './index-d7bd249f.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { T as Text } from './index-c68a533e.js';
-import { C as CommonGAssets } from './index-a35d5bd3.js';
-import { _ as __rest } from './tslib.es6-91093dfb.js';
-import { a as ZINDEX_HEADER, V as VIDEO_DETAIL_TEMP_STORAGE } from './index-43c88049.js';
-import { V as VideoType } from './index-5d09fff6.js';
+import { T as Text } from './index-15687d4c.js';
+import { C as CommonGAssets } from './index-f8a949a8.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
+import { a as ZINDEX_HEADER, V as VIDEO_DETAIL_TEMP_STORAGE } from './index-39bf919c.js';
+import { V as VideoType } from './index-d18ed0e7.js';
 import { createStyles, Stack, Box, AspectRatio, getStylesRef, rem, Flex } from '@mantine/core';
-import { a as abbreviateNumber } from './number-a224c433.js';
-import { u as useTranslations } from './index-64827257.js';
+import { a as abbreviateNumber } from './number-634c430b.js';
+import { u as useTranslations } from './index-e6601f2c.js';
 import { useOs } from '@mantine/hooks';
-import { M as Modal } from './index-9676d497.js';
-import { S as SocialLinkPreview } from './index-1f04f5cd.js';
+import { M as Modal } from './index-2ad629e0.js';
+import { S as SocialLinkPreview } from './index-27467701.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const ALLOW_DOMAIN_URL = [

package/build/esm/{index-64827257.js → index-e6601f2c.js}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useContext, useMemo } from 'react';
-import { T as TranslationsContext } from './translationsContext-581baa38.js';
+import { T as TranslationsContext } from './translationsContext-47869a7a.js';
 
 // SRC: https://github.com/berezh/react-string-format
 function format(text, params) {

package/build/esm/{index-3fe05a17.js → index-ea4d7712.js}

@@ -1,6 +1,6 @@
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
-import { B as Button } from './index-341ed865.js';
-import { T as TogetherComponentGlobalContext } from './utils-cd8ba782.js';
+import { B as Button } from './index-b88aba78.js';
+import { T as TogetherComponentGlobalContext } from './utils-3c6f8119.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-1457df3c.js → index-f3b18d45.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-91093dfb.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
 import React__default from 'react';
 import { Indicator as Indicator$1 } from '@mantine/core';
 import { theme } from './miscTheme.js';