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

package/build/esm/index-2b96d6f0.js

@@ -0,0 +1,301 @@
+import { _ as __rest } from './tslib.es6-e3ed5d20.js';
+import React__default, { useContext } from 'react';
+import { createStyles, rem, useMantineTheme, Box, Flex, ScrollArea } from '@mantine/core';
+import { RedCross } from '@hhgtech/icons/other';
+import './index-d3799b84.js';
+import '@mantine/dates';
+import './index-75aa1256.js';
+import './index-cd062921.js';
+import './index-60de5686.js';
+import './index-eb2188c9.js';
+import { T as Text } from './index-ba8907ff.js';
+import './index-20240399.js';
+import { F as FontWeight } from './index-4b8b5cfb.js';
+import './index.styles-323d0bc2.js';
+import { u as useTranslations } from './index-008fe74b.js';
+import '@mantine/hooks';
+import { M as MediaQueries } from './utils-3e692308.js';
+import './index-352cf948.js';
+import { C as CardWrapperContext } from './context-d9175f75.js';
+
+const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
+const StyledInnerClass = 'hhgcomp-toolbanner-inner';
+const StyledWrapperClass = 'hhgcomp-toolbanner-wrapper';
+const useStyles$3 = createStyles((theme, { isRevamp, isPregTool, bannerColor, isMarryBaby }) => ({
+    wrapper: {
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        gap: rem(24),
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: 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: rem(16),
+        a: {
+            textDecoration: 'none',
+            color: 'inherit',
+        },
+        '&[data-site="marryBaby"]': {
+            a: {
+                textDecoration: 'underline',
+            },
+            [MediaQueries.mbDown]: {
+                paddingBottom: 0,
+            },
+        },
+        [MediaQueries.tdDown]: {
+            height: 'auto',
+            [`.${StyledWrapperClass}`]: {
+                [`.${StyledInnerClass}`]: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    [MediaQueries.mbDown]: {
+                        justifyContent: 'space-between',
+                    },
+                    [`.${StyledIconContainerClass}`]: {
+                        position: 'relative',
+                        right: rem(-50),
+                        bottom: rem(-20),
+                        width: rem(110),
+                        minWidth: 0,
+                        height: 'auto',
+                        minHeight: 0,
+                        alignSelf: 'flex-end',
+                        marginBottom: rem(-20),
+                        [MediaQueries.mbDown]: {
+                            right: 'unset',
+                        },
+                    },
+                },
+            },
+        },
+        '.embedded-review': {
+            gap: rem(12),
+            display: 'flex',
+            alignItems: 'center',
+        },
+        '.embedded-review__avatar': {
+            position: 'relative',
+            minWidth: rem(32),
+            img: {
+                width: rem(32),
+                height: rem(32),
+                display: 'block',
+                borderRadius: '100%',
+            },
+            svg: {
+                bottom: 0,
+                right: 0,
+                position: 'absolute',
+            },
+        },
+    },
+    headingWrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: isRevamp ? rem(8) : 0,
+    },
+    avatarWrapper: {
+        position: 'relative',
+        img: {
+            maxWidth: rem(48),
+            maxHeight: rem(48),
+        },
+        '.embedded-review__avatar': {
+            position: 'relative',
+        },
+    },
+    reviewText: {
+        a: {
+            textDecoration: 'underline',
+            textUnderlineOffset: '2px',
+        },
+    },
+    iconWrapper: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: rem(80),
+        height: rem(80),
+        borderRadius: '50%',
+        backgroundColor: '#fff',
+        flexShrink: 0,
+        img: {
+            maxWidth: rem(48),
+            maxHeight: rem(48),
+        },
+        [theme.fn.smallerThan('sm')]: {
+            width: rem(64),
+            height: rem(64),
+            img: {
+                maxWidth: rem(40),
+                maxHeight: rem(40),
+            },
+        },
+    },
+    heading: {},
+}));
+
+const ToolsBannerCard = (_a) => {
+    var { className, classNames, heading, bannerColor, medicalReview = { link: '#', reviewer: '', date: '' }, icon, style, isPregTool, isRevamp, styles } = _a, rest = __rest(_a, ["className", "classNames", "heading", "bannerColor", "medicalReview", "icon", "style", "isPregTool", "isRevamp", "styles"]);
+    const { t } = useTranslations();
+    const theme = 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.createElement(Text, { size: "label2", as: "div", className: classes.reviewText },
+        medicalReview.avatar && (React__default.createElement("div", { className: "embedded-review__avatar" },
+            React__default.createElement(Box, { className: classes.avatarWrapper },
+                React__default.createElement("img", { src: medicalReview.avatar, alt: medicalReview.reviewer, loading: "lazy" }),
+                React__default.createElement(RedCross, { size: 14 })))),
+        React__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.createElement(Box, Object.assign({ className: cx(className, classes.container), style: style, "data-site": siteType }, rest),
+        React__default.createElement(Flex, { className: classes.headingWrapper },
+            React__default.createElement(Text, { className: cx(classes.heading, 'heading'), size: isMarryBaby ? 'h4' : 'h3', as: headingAs }, heading),
+            medicalReview && React__default.createElement(Text, { size: "n1" }, medicalReviewEle)),
+        React__default.createElement(Flex, { className: classes.iconWrapper }, icon)));
+};
+
+var useStyles$2 = createStyles(() => {
+    return {
+        root: {
+            borderTopLeftRadius: 'inherit',
+            borderTopRightRadius: 'inherit',
+        },
+    };
+});
+
+const Banner = (_a) => {
+    var { className, classNames, styles } = _a, rest = __rest(_a, ["className", "classNames", "styles"]);
+    const { classes: wrapperClasses } = useContext(CardWrapperContext);
+    const { isPregTool } = useContext(CardWrapperContext);
+    const { classes, cx } = useStyles$2(undefined, {
+        name: 'HealthToolCardWrapper__Banner',
+        classNames,
+        styles,
+    });
+    return (React__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 = createStyles(() => {
+    return {
+        root: {
+            paddingTop: 16,
+            borderRadius: 'inherit',
+        },
+    };
+});
+
+const Body = (_a) => {
+    var { children, className, styles, classNames } = _a, rest = __rest(_a, ["children", "className", "styles", "classNames"]);
+    const { classes: wrapperClasses, hasBodyScroll } = useContext(CardWrapperContext);
+    const { classes, cx } = useStyles$1(undefined, {
+        name: 'HealthToolCardWrapper__Body',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.root, wrapperClasses.bodyWrapper) }, rest), hasBodyScroll ? (React__default.createElement(ScrollArea, { h: "100%", type: "auto", scrollbarSize: 8, className: wrapperClasses.scrollAreaWrapper }, children)) : (children)));
+};
+
+var useStyles = createStyles((theme, { isPregTool, variant }) => {
+    const isMarryBaby = theme.other.template === 'mb';
+    return {
+        root: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', borderRadius: 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: `${rem(16)} ${rem(16)} 0`,
+        })),
+        bannerHeading: Object.assign({}, (variant === 'gray' && {
+            fontSize: rem(20),
+            lineHeight: rem(28),
+            fontWeight: FontWeight.semiBold,
+            [theme.fn.smallerThan('sm')]: {
+                fontSize: rem(17),
+                lineHeight: rem(24),
+            },
+        })),
+        bannerReviewText: Object.assign({}, (variant === 'gray' && {
+            fontSize: rem(14),
+            lineHeight: rem(22),
+            [theme.fn.smallerThan('sm')]: {
+                fontSize: rem(12),
+                lineHeight: 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 = __rest(_a, ["children", "styles", "classNames", "className", "isPregTool", "variant", "hasBodyScroll"]);
+    const { classes, cx } = useStyles({ isPregTool, variant }, {
+        name: 'HealthToolCardWrapper',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(CardWrapperContext.Provider, { value: {
+            isPregTool,
+            classes,
+            variant,
+            hasBodyScroll,
+        } },
+        React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, rest), children)));
+};
+const HealthToolCardWrapper = _HealthToolCardWrapper;
+HealthToolCardWrapper.Body = Body;
+HealthToolCardWrapper.Banner = Banner;
+
+export { HealthToolCardWrapper as H, ToolsBannerCard as T };

package/build/esm/{index-d8e2d38e.js → index-2c98e99c.js}

@@ -1,6 +1,6 @@
 import { createStyles, clsx, Box, useMantineTheme } from '@mantine/core';
-import { G as GlobalTextStyleNew, C as CustomStylesType } from './text-db324baf.js';
-import { _ as __rest } from './tslib.es6-91093dfb.js';
+import { G as GlobalTextStyleNew, C as CustomStylesType } from './index-4b8b5cfb.js';
+import { _ as __rest } from './tslib.es6-e3ed5d20.js';
 import React__default, { createContext, useState, useEffect, useContext, useCallback } from 'react';
 import { useClickOutside } from '@mantine/hooks';
 import { css } from '@emotion/react';

package/build/esm/{index-011585c5.js → index-2e5fc5f0.js}

@@ -1,53 +1,53 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-91093dfb.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-e3ed5d20.js';
 import React__default, { createContext, useState, useContext, useEffect } from 'react';
-import { T as Tabs } from './index-92ea8383.js';
-import { L as Loading } from './index-a4d8dbc0.js';
-import './index-5d09fff6.js';
-import { g as formatArticle } from './dataTransform-eec5e584.js';
+import { T as Tabs } from './index-352cf948.js';
+import { L as Loading } from './index-2973bdc7.js';
+import './index-cd062921.js';
+import { g as formatArticle } from './dataTransform-18256035.js';
 import { PATHS } from './togetherApiPaths.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-cd8ba782.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-8acddf8a.js';
 import { Minus, Plus } from '@hhgtech/icons/core';
 import { Collapse } from '@mantine/core';
-import { C as CardAuthor } from './index-e0ef6db8.js';
-import { L as LOCALE } from './Locale-bb880082.js';
+import { C as CardAuthor } from './index-ee9b21dd.js';
+import { L as LOCALE } from './Locale-0b863052.js';
 import '@hhgtech/icons/other';
-import './index-cc305f99.js';
-import './shared-16fcefec.js';
-import './text-db324baf.js';
-import './index-c68a533e.js';
-import './index-64827257.js';
-import './translationsContext-581baa38.js';
-import './index-341ed865.js';
-import './index-24fb3416.js';
+import './index-20240399.js';
+import './shared-debad824.js';
+import './index-4b8b5cfb.js';
+import './index-ba8907ff.js';
+import './index-008fe74b.js';
+import './translationsContext-b7095320.js';
+import './index-41f19609.js';
+import './index-73de56e9.js';
 import './miscCookieHelper.js';
 import 'slugify';
 import './constantsIsProduction.js';
 import 'string-format';
-import './constants-78e39ac0.js';
+import './constants-033a44bc.js';
 import 'dayjs';
 import 'dayjs/plugin/relativeTime';
-import './utils-54809471.js';
-import './index-b4c8b075.js';
-import './paths-eaeaed07.js';
-import './constants-bddfc09c.js';
-import './index-43c88049.js';
+import './utils-3e692308.js';
+import './index-f07ceb04.js';
+import './paths-8e610029.js';
+import './constants-2db72d28.js';
+import './index-75aa1256.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
-import './index-fc84a739.js';
+import './index-0d3574a2.js';
 import './miscTheme.js';
-import './WhatsApp-f52e7a45.js';
-import './Spinner-8b8558fa.js';
-import './index-7b4efb28.js';
+import './WhatsApp-fe353c48.js';
+import './Spinner-9d2efda0.js';
+import './index-4e489a5e.js';
 import '@emotion/styled';
-import './index-9a3adb7b.js';
-import './index-a35d5bd3.js';
-import './index-4ad33a18.js';
+import './index-e9760d21.js';
+import './index-60de5686.js';
+import './index-5b96362d.js';
 import '@emotion/react';
-import './index-602c10bf.js';
-import './index-9676d497.js';
-import './index.styles-e737cd1b.js';
+import './index-c3fa0f11.js';
+import './index-c693afcb.js';
+import './index.styles-323d0bc2.js';
 
 const ProfileDetailContext = createContext({});
 

package/build/esm/{index-c3f8797c.js → index-2fd142bb.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { L as Label } from './index-326ff299.js';
+import { L as Label } from './index-ab44d897.js';
 import { theme } from './miscTheme.js';
 
 const StyledTextArea = styled.div `

package/build/esm/{index-92ea8383.js → index-352cf948.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-91093dfb.js';
+import { _ as __rest } from './tslib.es6-e3ed5d20.js';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { ArrowLeft, ArrowRight } from '@hhgtech/icons/other';
 import { createStyles, rem, Tabs as Tabs$1, ScrollArea } from '@mantine/core';
-import { B as Button } from './index-cc305f99.js';
-import { T as Text } from './index-c68a533e.js';
+import { B as Button } from './index-20240399.js';
+import { T as Text } from './index-ba8907ff.js';
 
 var useStyles = createStyles((theme, params) => {
     const { variant } = params;

package/build/esm/{index-7dd06998.js → index-35c9b134.js}

@@ -1,12 +1,12 @@
-import { _ as __rest } from './tslib.es6-91093dfb.js';
+import { _ as __rest } from './tslib.es6-e3ed5d20.js';
 import React__default from 'react';
 import { useMantineTheme, Image } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
-import { I as ISO_FORMAT } from './index-43c88049.js';
-import './index-5d09fff6.js';
-import { C as CommonGAssets } from './index-a35d5bd3.js';
-import { M as MAPPED_LOCALE } from './index-2870af04.js';
-import { L as LOCALE } from './Locale-bb880082.js';
+import { I as ISO_FORMAT } from './index-75aa1256.js';
+import './index-cd062921.js';
+import { C as CommonGAssets } from './index-60de5686.js';
+import { M as MAPPED_LOCALE } from './index-eb2188c9.js';
+import { L as LOCALE } from './Locale-0b863052.js';
 
 // Omit<MantineDatePickerInputProps, 'value'>
 const DatePicker = (_a) => {

package/build/esm/{index-0a5c217f.js → index-39e57464.js}

@@ -1,20 +1,20 @@
 import * as React from 'react';
 import React__default, { useState, useRef, createContext, useEffect, Fragment, forwardRef, useMemo, useCallback } from 'react';
-import { T as Text } from './index-c68a533e.js';
+import { T as Text } from './index-ba8907ff.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-54809471.js';
+import { M as MediaQueries } from './utils-3e692308.js';
 import { Collapse, rem, clsx } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { S as ShapedArrowDown } from './index-ea0f1051.js';
-import { R as Radio$1 } from './index-94204073.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-91093dfb.js';
-import { T as Text$1 } from './index-a45be0c7.js';
+import { S as ShapedArrowDown } from './index-8ffa96e5.js';
+import { R as Radio$1 } from './index-d3799b84.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-e3ed5d20.js';
+import { T as Text$1 } from './index-d18b0110.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import flattenChildren from 'react-keyed-flatten-children';
-import { H as Heading } from './index-602c10bf.js';
-import { C as Close } from './Close-94e1dd74.js';
-import { u as useTranslations } from './index-64827257.js';
+import { H as Heading } from './index-c3fa0f11.js';
+import { C as Close } from './Close-50252b81.js';
+import { u as useTranslations } from './index-008fe74b.js';
 import { Carousel } from '@mantine/carousel';
 
 var styles = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};

package/build/esm/{index-bd65bdb6.js → index-3db2b1fd.js}

@@ -1,21 +1,21 @@
-import { _ as __rest } from './tslib.es6-91093dfb.js';
+import { _ as __rest } from './tslib.es6-e3ed5d20.js';
 import React__default, { useState, useRef, useMemo, useEffect } from 'react';
 import { BabyBoyMB, BabyGirlMB } from '@hhgtech/icons/other';
 import { createStyles, rem, Box, Flex } from '@mantine/core';
-import { R as Radio } from './index-94204073.js';
+import { R as Radio } from './index-d3799b84.js';
 import '@mantine/dates';
-import './index-43c88049.js';
-import './index-5d09fff6.js';
-import { C as CommonGAssets } from './index-a35d5bd3.js';
-import './index-2870af04.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 './index-75aa1256.js';
+import './index-cd062921.js';
+import { C as CommonGAssets } from './index-60de5686.js';
+import './index-eb2188c9.js';
+import { T as Text } from './index-ba8907ff.js';
+import './index-20240399.js';
+import './index-4b8b5cfb.js';
+import './index.styles-323d0bc2.js';
+import { u as useTranslations } from './index-008fe74b.js';
 import '@mantine/hooks';
-import './text-db324baf.js';
-import './utils-54809471.js';
-import './index-92ea8383.js';
+import './utils-3e692308.js';
+import './index-352cf948.js';
 
 var useStyles = createStyles((theme, { type }) => {
     const isMarryBaby = theme.other.template === 'mb';

package/build/esm/{index-55bfc6f0.js → index-418c7687.js}

@@ -1,9 +1,9 @@
-import { a as __awaiter } from './tslib.es6-91093dfb.js';
+import { a as __awaiter } from './tslib.es6-e3ed5d20.js';
 import { isProduction } from './constantsIsProduction.js';
-import { n as normalizeLinkSlash, a as getCurrentSsoUrl } from './normalizeLink-5a2e92c9.js';
-import { L as LOCALE_SPECS, g as BEARER_REFRESH_TOKEN_COOKIE } from './index-43c88049.js';
+import { n as normalizeLinkSlash, a as getCurrentSsoUrl } from './normalizeLink-153e1442.js';
+import { L as LOCALE_SPECS, g as BEARER_REFRESH_TOKEN_COOKIE } from './index-75aa1256.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { L as LOCALE } from './Locale-bb880082.js';
+import { L as LOCALE } from './Locale-0b863052.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const SSO_V2_PATHS = {

package/build/esm/{index-341ed865.js → index-41f19609.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-91093dfb.js';
+import { _ as __rest } from './tslib.es6-e3ed5d20.js';
 import React__default from 'react';
-import { B as Button$1 } from './index-cc305f99.js';
+import { B as Button$1 } from './index-20240399.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'

package/build/esm/{index-27d4922c.js → index-44ed9e83.js}

@@ -1,6 +1,6 @@
-import { c as cookie } from './index-24fb3416.js';
-import { B as BEARER_TOKEN_COOKIE } from './index-43c88049.js';
-import { N as NodeIntentType } from './index-5d09fff6.js';
+import { c as cookie } from './index-73de56e9.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-75aa1256.js';
+import { N as NodeIntentType } from './index-cd062921.js';
 import Cookies from 'js-cookie';
 import { v4 } from 'uuid';
 import { isProduction } from './constantsIsProduction.js';

package/build/esm/{text-db324baf.js → index-4b8b5cfb.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-7b4efb28.js → index-4e489a5e.js}

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