@hhgtech/hhg-components 1.29.449 → 1.29.450

package/build/{index-7481f662.js → index-a6aadc84.js}

@@ -1,25 +1,25 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-1af0eb18.js');
 var React = require('react');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
 var hooks = require('@mantine/hooks');
-var index = require('./index-d7818ca5.js');
-var text = require('./text-92a095cb.js');
-var index$2 = require('./index-f8305dc1.js');
+var index$1 = require('./index-134c792d.js');
+var index = require('./index-a8da1594.js');
+var index$3 = require('./index-21e969b1.js');
 var styled = require('@emotion/styled');
 var carousel = require('@mantine/carousel');
-var index$1 = require('./index-caaf6cac.js');
-var index$3 = require('./index-18acca73.js');
+var index$2 = require('./index-32116925.js');
+var index$4 = require('./index-4f34d088.js');
 var miscTheme = require('./miscTheme.js');
 var cn = require('classnames');
 var uuid = require('uuid');
-var useUniqueId = require('./useUniqueId-df3c6150.js');
+var useUniqueId = require('./useUniqueId-4bd1c8b1.js');
 var constantsSite = require('./constantsSite.js');
 var react = require('@emotion/react');
 var core$1 = require('@hhgtech/icons/core');
-var index$4 = require('./index-ce0a7efa.js');
+var index$5 = require('./index-9496500d.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -45,8 +45,8 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var cn__default = /*#__PURE__*/_interopDefault(cn);
 
-var useStyles$4 = core.createStyles((theme) => {
-    const isLeadgenStyle = theme.other.customStyleType === text.CustomStylesType.LEADGEN;
+var useStyles$4 = core.createStyles((theme, { variantStyle }) => {
+    const isLeadgenStyle = variantStyle === index.CustomStylesType.LEADGEN;
     const commonStyle = {
         fontSize: core.rem(15),
         lineHeight: core.rem(24),
@@ -76,7 +76,7 @@ const _AutoComplete = React.forwardRef((_a, ref) => {
     const onClear = () => {
         handleChange('');
     };
-    return (React__namespace["default"].createElement(core.Autocomplete, Object.assign({ ref: ref, rightSection: React__namespace["default"].createElement(core.Image, { src: index.CommonGAssets.getAssetPath('chevron-down.svg'), fit: "none" }), size: "md", maxDropdownHeight: 300, onChange: (e) => handleChange(e), value: _value }, props, (clearable && (_value === null || _value === void 0 ? void 0 : _value.length) > 0
+    return (React__namespace["default"].createElement(core.Autocomplete, Object.assign({ ref: ref, rightSection: React__namespace["default"].createElement(core.Image, { src: index$1.CommonGAssets.getAssetPath('chevron-down.svg'), fit: "none" }), size: "md", maxDropdownHeight: 300, onChange: (e) => handleChange(e), value: _value }, props, (clearable && (_value === null || _value === void 0 ? void 0 : _value.length) > 0
         ? {
             rightSection: (React__namespace["default"].createElement(core.ActionIcon, { onClick: onClear, sx: { cursor: 'pointer' } },
                 React__namespace["default"].createElement(_IconSelect, null))),
@@ -85,7 +85,8 @@ const _AutoComplete = React.forwardRef((_a, ref) => {
 });
 const _Select = React.forwardRef((_a, ref) => {
     var { searchValue, onSearchChange, styles } = _a, props = tslib_es6.__rest(_a, ["searchValue", "onSearchChange", "styles"]);
-    const { classes } = useStyles$4(undefined, { name: 'MantineSelect', styles });
+    const variantStyle = index.useTemplateVariant();
+    const { classes } = useStyles$4({ variantStyle }, { name: 'MantineSelect', styles });
     const [_searchValue, handleSearchChange] = hooks.useUncontrolled({
         defaultValue: '',
         value: searchValue,
@@ -193,7 +194,7 @@ var useStyles$3 = core.createStyles((_theme, _params) => {
 const Anchor = (_a) => {
     var { color, styles, className } = _a, rest = tslib_es6.__rest(_a, ["color", "styles", "className"]);
     const { classes, cx } = useStyles$3({ color }, { name: 'Anchor', styles });
-    return React__namespace["default"].createElement(index$1.Text, Object.assign({ as: "a", className: cx(classes.root, className) }, rest));
+    return React__namespace["default"].createElement(index$2.Text, Object.assign({ as: "a", className: cx(classes.root, className) }, rest));
 };
 
 const BreadcrumbItem = (_a) => {
@@ -217,7 +218,7 @@ const _Breadcrumbs = (_a) => {
     const theme = core.useMantineTheme();
     const isMarryBaby = ((_b = theme === null || theme === void 0 ? void 0 : theme.other) === null || _b === void 0 ? void 0 : _b.template) === 'mb';
     const [embla, setEmbla] = React.useState(null);
-    const { isMobile } = index$2.useScreenSize();
+    const { isMobile } = index$3.useScreenSize();
     const [, setShouldAllowClick] = React.useState(true);
     const handleScroll = React.useCallback(() => {
         setShouldAllowClick(false);
@@ -242,14 +243,14 @@ const _Breadcrumbs = (_a) => {
     return (React__namespace["default"].createElement(StyledCarousel, Object.assign({ align: "center", slideGap: "xs", dragFree: true, draggable: isMobile, slideSize: "0", getEmblaApi: setEmbla, controlsOffset: -52, previousControlIcon: React__namespace["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
             React__namespace["default"].createElement("path", { d: "M6.86589 3.56104C7.03647 3.56104 7.20724 3.62732 7.33724 3.75765L7.39453 3.81494C7.6552 4.07561 7.6552 4.49765 7.39453 4.75765L4.81901 7.33317L13.5326 7.33317C13.9006 7.33317 14.1992 7.63184 14.1992 7.99984C14.1992 8.36784 13.9006 8.6665 13.5326 8.6665L4.81901 8.66651L7.39453 11.242C7.6552 11.5027 7.6552 11.9247 7.39453 12.1847L7.33724 12.242C7.07657 12.5027 6.65453 12.5027 6.39453 12.242L2.6237 8.47119C2.36303 8.21053 2.36303 7.78849 2.6237 7.52849L6.39453 3.75765C6.52487 3.62732 6.6953 3.56104 6.86589 3.56104Z", fill: "#595959" })), nextControlIcon: React__namespace["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
             React__namespace["default"].createElement("path", { d: "M9.13411 12.439C8.96353 12.439 8.79276 12.3727 8.66276 12.2423L8.60547 12.1851C8.3448 11.9244 8.3448 11.5023 8.60547 11.2423L11.181 8.66683L2.46745 8.66683C2.09945 8.66683 1.80078 8.36816 1.80078 8.00016C1.80078 7.63216 2.09945 7.3335 2.46745 7.3335L11.181 7.3335L8.60547 4.75797C8.3448 4.49731 8.3448 4.07527 8.60547 3.81527L8.66276 3.75797C8.92343 3.49731 9.34547 3.49731 9.60547 3.75797L13.3763 7.52881C13.637 7.78947 13.637 8.21152 13.3763 8.47152L9.60547 12.2423C9.47513 12.3727 9.3047 12.439 9.13411 12.439Z", fill: "#595959" })) }, rest),
-        showHomeIcon && (React__namespace["default"].createElement(Carousel.Slide, { style: { borderRight: `1px solid ${index$3.themeColors.neutral[1]}` } },
+        showHomeIcon && (React__namespace["default"].createElement(Carousel.Slide, { style: { borderRight: `1px solid ${index$4.themeColors.neutral[1]}` } },
             React__namespace["default"].createElement(BreadcrumbItem, { href: homeIconHref, target: "_blank", className: "pointer-event-child-none" },
                 React__namespace["default"].createElement(core.Box, { sx: Object.assign({}, (!isMarryBaby && {
                         borderRadius: '50%',
                         display: 'flex',
                         justifyContent: 'center',
                         alignItems: 'center',
-                    })), bg: !isMarryBaby && index$3.themeColors.neutral[0], p: !isMarryBaby ? 6 : 0 },
+                    })), bg: !isMarryBaby && index$4.themeColors.neutral[0], p: !isMarryBaby ? 6 : 0 },
                     React__namespace["default"].createElement(AspectRatio, { ratio: 1, w: 18 }, isMarryBaby ? (React__namespace["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
                         React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.1183 3.67722C12.8727 2.70772 11.1281 2.708 9.88187 3.67718L14.1183 3.67722ZM14.1183 3.67722L19.718 8.03283C20.5589 8.68632 21.05 9.69173 21.05 10.7562V17.6002C21.05 19.5057 19.5055 21.0502 17.6 21.0502H6.40016C4.49466 21.0502 2.9502 19.5057 2.9502 17.6002V10.7562C2.9502 9.69163 3.44113 8.68632 4.28216 8.03283L9.88187 3.67718M10.6799 4.70339L5.08006 9.05916C4.55657 9.46592 4.2502 10.0923 4.2502 10.7562V17.6002C4.2502 18.7878 5.21263 19.7502 6.40016 19.7502H17.6C18.7875 19.7502 19.75 18.7878 19.75 17.6002V10.7562C19.75 10.0923 19.4438 9.46612 18.9204 9.05936L13.3202 4.70335C12.5443 4.09941 11.4571 4.09905 10.6799 4.70339Z", fill: "#3E3F58" }),
                         React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.2373 13.1626C12.5546 12.4794 11.4466 12.4791 10.7629 13.1628C10.0793 13.8464 10.0793 14.9538 10.7629 15.6374C11.4465 16.321 12.5539 16.321 13.2375 15.6374C13.9211 14.9538 13.9211 13.8464 13.2375 13.1628L13.2373 13.1626ZM14.1567 12.2436C12.9661 11.0521 11.0348 11.0525 9.84366 12.2436C8.65237 13.4348 8.65237 15.3653 9.84366 16.5566C11.0349 17.7479 12.9654 17.7479 14.1567 16.5566C15.348 15.3653 15.348 13.4348 14.1567 12.2436Z", fill: "#3E3F58" }))) : (React__namespace["default"].createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" },
@@ -266,8 +267,8 @@ const _Breadcrumbs = (_a) => {
 const Breadcrumbs = _Breadcrumbs;
 Breadcrumbs.Item = BreadcrumbItem;
 
-var useStyles$2 = core.createStyles((theme) => {
-    const isLeadgenStyle = theme.other.customStyleType === text.CustomStylesType.LEADGEN;
+var useStyles$2 = core.createStyles((theme, { variantStyle }) => {
+    const isLeadgenStyle = variantStyle === index.CustomStylesType.LEADGEN;
     const commonStyle = {
         fontSize: core.rem(15),
         lineHeight: core.rem(24),
@@ -294,13 +295,13 @@ const StyledAccordion = styled__default["default"](core.Accordion) `
         width: 16px;
         height: 16px;
         background-position: center;
-        background-image: url(${(props) => props.closeChevron || index.CommonGAssets.getAssetPath('plus-icon.svg')});
+        background-image: url(${(props) => props.closeChevron || index$1.CommonGAssets.getAssetPath('plus-icon.svg')});
       }
     }
     &[data-active='true'] {
       .mantine-Accordion-chevron {
         > div {
-          background-image: url(${(props) => props.openChevron || index.CommonGAssets.getAssetPath('minus-icon.svg')});
+          background-image: url(${(props) => props.openChevron || index$1.CommonGAssets.getAssetPath('minus-icon.svg')});
         }
       }
     }
@@ -322,7 +323,7 @@ Accordion.Control = core.Accordion.Control;
 Accordion.Item = core.Accordion.Item;
 Accordion.Panel = core.Accordion.Panel;
 
-const DEFAULT_AVATAR = index.CommonGAssets.getAssetPath('avatar.jpg');
+const DEFAULT_AVATAR = index$1.CommonGAssets.getAssetPath('avatar.jpg');
 const Avatar = (_a) => {
     var { withIndicator = false, indicatorConfig = null, size = 56, children, styles, placeholderText } = _a, // usually first letter of name
     avatarProps = tslib_es6.__rest(_a, ["withIndicator", "indicatorConfig", "size", "children", "styles", "placeholderText"]);
@@ -332,7 +333,7 @@ const Avatar = (_a) => {
                     backgroundColor: avatarProps.color,
                     color: 'white',
                 },
-            } }), children ? (children) : placeholderText ? (placeholderText) : (React__namespace["default"].createElement(index$2.ImageWrap, { src: DEFAULT_AVATAR, width: size, alt: avatarProps.alt || 'avatar' }))));
+            } }), children ? (children) : placeholderText ? (placeholderText) : (React__namespace["default"].createElement(index$3.ImageWrap, { src: DEFAULT_AVATAR, width: size, alt: avatarProps.alt || 'avatar' }))));
     };
     if (withIndicator)
         return (React__namespace["default"].createElement(core.Indicator, Object.assign({ inline: true, position: "bottom-end", offset: 9 }, indicatorConfig, { styles: Object.assign({ indicator: {
@@ -346,8 +347,8 @@ const FileInput = (props) => {
     return React__namespace["default"].createElement(core.FileInput, Object.assign({ size: "md" }, props));
 };
 
-var useStyles$1 = core.createStyles((theme) => {
-    const isLeadgenStyle = theme.other.customStyleType === text.CustomStylesType.LEADGEN;
+var useStyles$1 = core.createStyles((theme, { variantStyle }) => {
+    const isLeadgenStyle = variantStyle === index.CustomStylesType.LEADGEN;
     const commonStyle = {
         fontSize: core.rem(15),
         lineHeight: core.rem(24),
@@ -382,8 +383,8 @@ const NumberInput = (_a) => {
         }, removeTrailingZeros: true, value: value }, props)));
 };
 
-const EyeVisible = index.CommonGAssets.getAssetPath('EyeVisible.svg');
-const EyeHidden = index.CommonGAssets.getAssetPath('EyeHidden.svg');
+const EyeVisible = index$1.CommonGAssets.getAssetPath('EyeVisible.svg');
+const EyeHidden = index$1.CommonGAssets.getAssetPath('EyeHidden.svg');
 // Fix re-render issue
 const RenderVisibleToggleIcon = ({ reveal, size, }) => (React__namespace["default"].createElement("img", { src: reveal ? EyeVisible : EyeHidden, style: {
         width: size,
@@ -411,7 +412,7 @@ const ErrorLabel = (_a) => {
     var { label, withIcon, textProps } = _a, rest = tslib_es6.__rest(_a, ["label", "withIcon", "textProps"]);
     return (React__namespace["default"].createElement(core.Flex, Object.assign({ align: 'center', gap: 4 }, rest),
         withIcon && React__namespace["default"].createElement(ErrorIcon, { size: 12 }),
-        React__namespace["default"].createElement(index$1.Text, Object.assign({ size: "c1", variant: "error", dangerouslySetInnerHTML: { __html: label } }, textProps))));
+        React__namespace["default"].createElement(index$2.Text, Object.assign({ size: "c1", variant: "error", dangerouslySetInnerHTML: { __html: label } }, textProps))));
 };
 
 const FloatingLabelControlContext = React.createContext({});
@@ -774,7 +775,8 @@ FloatingLabelControl.Icon = FloatingLabelControlIcon;
 
 const InputWrapper = React.forwardRef((_a, ref) => {
     var { label, value: _value, onChange: _onChange, onChangeRaw, maxLength, withFloatingLabel, styles, error } = _a, props = tslib_es6.__rest(_a, ["label", "value", "onChange", "onChangeRaw", "maxLength", "withFloatingLabel", "styles", "error"]);
-    const { classes } = useStyles$1(undefined, { name: 'MantineInput', styles });
+    const variantStyle = index.useTemplateVariant();
+    const { classes } = useStyles$1({ variantStyle }, { name: 'MantineInput', styles });
     const [value, setValue] = React.useState(_value || '');
     const [debounced] = hooks.useDebouncedValue(value, DEBOUNCED_TIME);
     React.useEffect(() => {
@@ -799,8 +801,8 @@ const InputWrapper = React.forwardRef((_a, ref) => {
         return (React__namespace["default"].createElement(FloatingLabelControl, { shrink: !!value },
             React__namespace["default"].createElement(FloatingLabelControl.Control, null, ({ shrink }) => (React__namespace["default"].createElement(core.TextInput, Object.assign({}, commonProps, { classNames: {
                     input: classes.input,
-                }, error: error && React__namespace["default"].createElement(ErrorLabel, { label: String(error) }), inputWrapperOrder: ['label', 'input', 'description', 'error'], label: React__namespace["default"].createElement(index$1.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), styles: (theme) => ({
-                    input: Object.assign(Object.assign({}, text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN].p2), { color: theme.colors.gray[9], fontWeight: text.FontWeight.halfBold }),
+                }, error: error && React__namespace["default"].createElement(ErrorLabel, { label: String(error) }), inputWrapperOrder: ['label', 'input', 'description', 'error'], label: React__namespace["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), styles: (theme) => ({
+                    input: Object.assign(Object.assign({}, index.GlobalTextStyleNew(theme)[index.CustomStylesType.LEADGEN].p2), { color: theme.colors.gray[9], fontWeight: index.FontWeight.halfBold }),
                 }) }))))));
     }
     return (React__namespace["default"].createElement(core.TextInput, Object.assign({}, commonProps, { classNames: {
@@ -966,6 +968,7 @@ const CheckboxWithState = (_a) => {
 const CheckboxWrapper = (_a) => {
     var { color = 'blue', label, size: sizeProp, styles } = _a, props = tslib_es6.__rest(_a, ["color", "label", "size", "styles"]);
     const theme = core.useMantineTheme();
+    const variantStyle = index.useTemplateVariant();
     const hexColor = React.useMemo(() => {
         var _a, _b;
         return ((color === null || color === void 0 ? void 0 : color.includes('.'))
@@ -973,9 +976,9 @@ 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 === text.CustomStylesType.LEADGEN;
+    const isLeadgenStyle = variantStyle === index.CustomStylesType.LEADGEN;
     const size = isLeadgenStyle ? 20 : sizeProp;
-    return (React__namespace["default"].createElement(core.Checkbox, Object.assign({ color: color, size: size, label: isLeadgenStyle ? (React__namespace["default"].createElement(index$1.Text, { size: "p2", color: theme.colors.gray[8] }, label)) : (label), icon: isLeadgenStyle
+    return (React__namespace["default"].createElement(core.Checkbox, Object.assign({ color: color, size: size, label: isLeadgenStyle ? (React__namespace["default"].createElement(index$2.Text, { size: "p2", color: theme.colors.gray[8] }, label)) : (label), icon: isLeadgenStyle
             ? (_a) => {
                 var rest = tslib_es6.__rest(_a, []);
                 return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
@@ -1123,6 +1126,7 @@ const RadioWithState = (_a) => {
 const RadioWrapper = (_a) => {
     var { color, label, size: sizeProp, styles } = _a, props = tslib_es6.__rest(_a, ["color", "label", "size", "styles"]);
     const theme = core.useMantineTheme();
+    const variantStyle = index.useTemplateVariant();
     const hexColor = React.useMemo(() => {
         var _a, _b;
         return ((color === null || color === void 0 ? void 0 : color.includes('.'))
@@ -1130,9 +1134,9 @@ 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 === text.CustomStylesType.LEADGEN;
+    const isLeadgenStyle = variantStyle === index.CustomStylesType.LEADGEN;
     const size = isLeadgenStyle ? 20 : sizeProp;
-    return (React__namespace["default"].createElement(core.Radio, Object.assign({ label: isLeadgenStyle ? (React__namespace["default"].createElement(index$1.Text, { size: "p2", color: theme.colors.gray[8] }, label)) : (label), size: size, icon: isLeadgenStyle
+    return (React__namespace["default"].createElement(core.Radio, Object.assign({ label: isLeadgenStyle ? (React__namespace["default"].createElement(index$2.Text, { size: "p2", color: theme.colors.gray[8] }, label)) : (label), size: size, icon: isLeadgenStyle
             ? (_a) => {
                 var rest = tslib_es6.__rest(_a, []);
                 return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
@@ -1364,8 +1368,8 @@ const OTPFowardRef = (props, ref) => {
 };
 const OTP = React.forwardRef(OTPFowardRef);
 
-const CambodiaRoundIcon = (props) => (React__namespace["default"].createElement(index$2.ImageWrap, Object.assign({ alt: "round cambodia flag", src: index.CommonGAssets.getAssetPath('flags/cambodiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
-const CambodiaSquareIcon = (props) => (React__namespace["default"].createElement(index$2.ImageWrap, Object.assign({ alt: "square cambodia flag", src: index.CommonGAssets.getAssetPath('flags/cambodiaSquare.png') }, props)));
+const CambodiaRoundIcon = (props) => (React__namespace["default"].createElement(index$3.ImageWrap, Object.assign({ alt: "round cambodia flag", src: index$1.CommonGAssets.getAssetPath('flags/cambodiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const CambodiaSquareIcon = (props) => (React__namespace["default"].createElement(index$3.ImageWrap, Object.assign({ alt: "square cambodia flag", src: index$1.CommonGAssets.getAssetPath('flags/cambodiaSquare.png') }, props)));
 
 const EnglishRoundIcon = (props) => (React__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
     React__namespace["default"].createElement("g", null,
@@ -1412,8 +1416,8 @@ const EnglishSquareIcon = (props) => (React__namespace["default"].createElement(
         React__namespace["default"].createElement("path", { d: "M9.32609 10.8334L1.08301 5.79537V7.06504L7.24826 10.8334H9.32609ZM24.0004 5.41675L15.1376 10.8334H17.2149L24.9163 6.12687V5.41675H24.0004ZM17.9191 15.1667L24.9163 19.4432V18.1735L19.9964 15.1667H17.9191ZM8.62192 15.1667L1.08301 19.7742V20.5834H1.83701L10.6992 15.1667H8.62192ZM1.08301 11.9167H24.9163V14.0834H1.08301V11.9167Z", fill: "#E53935" }),
         React__namespace["default"].createElement("path", { d: "M11.917 5.41675H14.0837V20.5834H11.917V5.41675Z", fill: "#E53935" }))));
 
-const IndiaRoundIcon = (props) => (React__namespace["default"].createElement(index$2.ImageWrap, Object.assign({ alt: "round india flag", src: index.CommonGAssets.getAssetPath('flags/indiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
-const IndiaSquareIcon = (props) => (React__namespace["default"].createElement(index$2.ImageWrap, Object.assign({ alt: "square indian flag", src: index.CommonGAssets.getAssetPath('flags/indiaSquare.png') }, props)));
+const IndiaRoundIcon = (props) => (React__namespace["default"].createElement(index$3.ImageWrap, Object.assign({ alt: "round india flag", src: index$1.CommonGAssets.getAssetPath('flags/indiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const IndiaSquareIcon = (props) => (React__namespace["default"].createElement(index$3.ImageWrap, Object.assign({ alt: "square indian flag", src: index$1.CommonGAssets.getAssetPath('flags/indiaSquare.png') }, props)));
 
 const IndonesiaRoundIcon = (_a) => {
     var rest = tslib_es6.__rest(_a, []);
@@ -1495,8 +1499,8 @@ const MyanmarSquareIcon = (props) => (React__namespace["default"].createElement(
     React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.6667 7.4589L16.3104 7.41087L12.5218 9.79821L11.6667 7.4589Z", fill: "white" }),
     React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.2361 7.90629L14.7225 11.8171L10.9974 9.35207L13.2361 7.90629Z", fill: "white" })));
 
-const PhilippinesRoundIcon = (props) => (React__namespace["default"].createElement(index$2.ImageWrap, Object.assign({ alt: "round philippines flag", src: index.CommonGAssets.getAssetPath('flags/philippineRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
-const PhilippinesSquareIcon = (props) => (React__namespace["default"].createElement(index$2.ImageWrap, Object.assign({ alt: "square philippines flag", src: index.CommonGAssets.getAssetPath('flags/philippineSquare.png') }, props)));
+const PhilippinesRoundIcon = (props) => (React__namespace["default"].createElement(index$3.ImageWrap, Object.assign({ alt: "round philippines flag", src: index$1.CommonGAssets.getAssetPath('flags/philippineRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const PhilippinesSquareIcon = (props) => (React__namespace["default"].createElement(index$3.ImageWrap, Object.assign({ alt: "square philippines flag", src: index$1.CommonGAssets.getAssetPath('flags/philippineSquare.png') }, props)));
 
 const TaiwanRoundIcon = (props) => (React__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
     React__namespace["default"].createElement("g", null,
@@ -1687,7 +1691,7 @@ const PhoneForwardRef = (props, ref) => {
             : '';
         return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
             React__namespace["default"].createElement(Flag, Object.assign({ country: country, title: countryName }, restProps)),
-            React__namespace["default"].createElement(index$1.Text, { size: "p2", variant: "primary", className: cn__default["default"](styles.callingCode, 'PhoneInputCountryIconCallingCode') }, callingCode)));
+            React__namespace["default"].createElement(index$2.Text, { size: "p2", variant: "primary", className: cn__default["default"](styles.callingCode, 'PhoneInputCountryIconCallingCode') }, callingCode)));
     }, [flagComponentProps, PhoneInputUtils]);
     const arrowComponent = React.useCallback(() => {
         if (arrowComponentProps) {
@@ -1723,12 +1727,12 @@ const PhoneForwardRef = (props, ref) => {
         }, className), flagUrl: undefined, flagComponent, countrySelectProps: { arrowComponent }, id: inputId }, inputProps);
     if (withFloatingLabel) {
         return (React__namespace["default"].createElement(FloatingLabelControl, { shrink: !!value },
-            React__namespace["default"].createElement(FloatingLabelControl.Control, null, ({ shrink }) => (React__namespace["default"].createElement(core.Input.Wrapper, { size: "md", label: React__namespace["default"].createElement(index$1.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), 
+            React__namespace["default"].createElement(FloatingLabelControl.Control, null, ({ shrink }) => (React__namespace["default"].createElement(core.Input.Wrapper, { size: "md", label: React__namespace["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), 
                 // data-invalid={!!error}
                 // labelProps={{ htmlFor: htmlForId }}
                 inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error && React__namespace["default"].createElement(ErrorLabel, { label: error }) },
                 React__namespace["default"].createElement(core.Box, { className: "mantine-Input-wrapper", sx: (theme) => ({
-                        '.PhoneInput .PhoneInputInput': Object.assign(Object.assign({}, text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN].p2), { color: theme.colors.gray[9], fontWeight: text.FontWeight.halfBold }),
+                        '.PhoneInput .PhoneInputInput': Object.assign(Object.assign({}, index.GlobalTextStyleNew(theme)[index.CustomStylesType.LEADGEN].p2), { color: theme.colors.gray[9], fontWeight: index.FontWeight.halfBold }),
                     }) },
                     React__namespace["default"].createElement(PhoneInputUtils.default, Object.assign({}, commonProps))))))));
     }
@@ -1809,8 +1813,8 @@ const _ChipButton = (_a) => {
     var { variant = 'secondary', withIcon, children, buttonProps } = _a, rest = tslib_es6.__rest(_a, ["variant", "withIcon", "children", "buttonProps"]);
     const { classes, cx } = useStyles();
     return (React__namespace["default"].createElement(core.Chip, Object.assign({ classNames: classes }, rest, { unstyled: true }),
-        React__namespace["default"].createElement(index$4.Button, Object.assign({ className: cx(classes.btnRoot, 'checked'), leftIcon: withIcon ? React__namespace["default"].createElement(core$1.Check, { size: 18, color: "currentColor" }) : undefined, variant: variant }, buttonProps), children),
-        React__namespace["default"].createElement(index$4.Button, Object.assign({ className: cx(classes.btnRoot, 'unchecked'), leftIcon: withIcon ? React__namespace["default"].createElement(core$1.Plus, { size: 18, color: "currentColor" }) : undefined, variant: 'tertiary' }, buttonProps), children)));
+        React__namespace["default"].createElement(index$5.Button, Object.assign({ className: cx(classes.btnRoot, 'checked'), leftIcon: withIcon ? React__namespace["default"].createElement(core$1.Check, { size: 18, color: "currentColor" }) : undefined, variant: variant }, buttonProps), children),
+        React__namespace["default"].createElement(index$5.Button, Object.assign({ className: cx(classes.btnRoot, 'unchecked'), leftIcon: withIcon ? React__namespace["default"].createElement(core$1.Plus, { size: 18, color: "currentColor" }) : undefined, variant: 'tertiary' }, buttonProps), children)));
 };
 const ChipButton = _ChipButton;
 ChipButton.Group = core.Chip.Group;

package/build/{text-92a095cb.js → index-a8da1594.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-d3ff96d5.js → index-a9ebc43f.js}

@@ -1,36 +1,36 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-1af0eb18.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-0ce39d92.js');
+var index$3 = require('./index-ddfed800.js');
+var index = require('./index-cd21f814.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-f0c4e9a4.js');
+var index$2 = require('./index-134c792d.js');
+var constants = require('./constants-087ac86c.js');
 var useTogetherAuthRequiredAction = require('./useTogetherAuthRequiredAction.js');
-var togetherComponentGlobalContext = require('./utils-623e143c.js');
-var treePopoverMenu = require('./treePopoverMenu-4e52e5d8.js');
+var togetherComponentGlobalContext = require('./utils-8d7e13f1.js');
+var treePopoverMenu = require('./treePopoverMenu-18f2de8d.js');
 var styled = require('@emotion/styled');
-var utils = require('./utils-7bc80898.js');
+var utils = require('./utils-46f1609b.js');
 var miscTheme = require('./miscTheme.js');
-var dataTransform = require('./dataTransform-7bc232fa.js');
+var dataTransform = require('./dataTransform-fc632a09.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-2780cf9c.js');
+var togetherMoleculesCardAuthor = require('./index-ae2eec47.js');
+var togetherMoleculesProfileDetail = require('./index-55bf8913.js');
+var togetherMoleculesPostImagePreview = require('./index-911262d3.js');
+var index$a = require('./index-49a0a65d.js');
+var index$8 = require('./index-447fb3a1.js');
+require('./index-9add285b.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-e2b457dc.js');
+var index$4 = require('./index-32116925.js');
+var index$5 = require('./index-084df4e1.js');
+var normalizeLink = require('./normalizeLink-20cbafcb.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-ba9ca44c.js → index-ae2eec47.js}

@@ -5,24 +5,24 @@ var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
 var dayjs = require('dayjs');
 var relativeTime = require('dayjs/plugin/relativeTime');
-var index$2 = require('./index-2f23d479.js');
-var utils = require('./utils-7bc80898.js');
-var index$1 = require('./index-26748f64.js');
-var index$a = require('./index-d9dc3d04.js');
-var tslib_es6 = require('./tslib.es6-acd80713.js');
-var index = require('./index-21dfe2bd.js');
-var index$4 = require('./index-f8305dc1.js');
-require('./index-2d74352f.js');
-var index$7 = require('./index-d7818ca5.js');
-var togetherComponentGlobalContext = require('./utils-623e143c.js');
-var index$6 = require('./index-6e1934a1.js');
-var index$5 = require('./index-caaf6cac.js');
+var index$2 = require('./index-cd21f814.js');
+var utils = require('./utils-46f1609b.js');
+var index$1 = require('./index-e8242b13.js');
+var index$a = require('./index-cc033f1d.js');
+var tslib_es6 = require('./tslib.es6-1af0eb18.js');
+var index = require('./index-7aeceafc.js');
+var index$4 = require('./index-21e969b1.js');
+require('./index-9add285b.js');
+var index$7 = require('./index-134c792d.js');
+var togetherComponentGlobalContext = require('./utils-8d7e13f1.js');
+var index$6 = require('./index-0ce39d92.js');
+var index$5 = require('./index-32116925.js');
 var miscTheme = require('./miscTheme.js');
 var styled = require('@emotion/styled');
 var togetherApiPaths = require('./togetherApiPaths.js');
-var index$3 = require('./index-d1263a2e.js');
-var index$8 = require('./index-08939d41.js');
-var index$9 = require('./index-0c3c27d7.js');
+var index$3 = require('./index-084df4e1.js');
+var index$8 = require('./index-ddfed800.js');
+var index$9 = require('./index-208d60cb.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -920,7 +920,7 @@ const _CardAuthor = (props) => {
     React.useEffect(() => {
         if (open && !ProfileDetail) {
             if (userType === 'chatbot') {
-                Promise.resolve().then(function () { return require('./index-42c8be1c.js'); }).then((module) => {
+                Promise.resolve().then(function () { return require('./index-e619a11a.js'); }).then((module) => {
                     setProfileDetail(() => module.ProfileChatbot);
                 });
             }