@hhgtech/hhg-components 1.29.80 → 1.29.81

package/build/esm/index-8952ceac.js

@@ -0,0 +1,202 @@
+import React__default, { useRef, useEffect } from 'react';
+import { Portal } from '@mantine/core';
+import { t as toggleNoScroll } from './utils-f8761b9d.js';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { t as theme } from './theme-f18c2351.js';
+import { s as slideInUp, e as slideOutDown, b as slideInLeft, f as slideOutLeft, c as slideInRight, g as slideOutRight, a as slideInDown, d as slideOutUp } from './animation-0b2299dc.js';
+import { T as Text } from './index-c200bff6.js';
+
+const DURATION = '600ms';
+const generateStyleBasedOnPlacement = (placement, open) => {
+    switch (placement) {
+        case 'top':
+            return css `
+        top: 0;
+        width: 100%;
+        border-radius: 0px 0px 6px 6px;
+        ${open
+                ? css `
+              animation: ${slideInDown} ${DURATION} ease-in-out forwards;
+            `
+                : null}
+
+        &.slideOut {
+          animation: ${slideOutUp} ${DURATION} ease-in-out forwards;
+        }
+      `;
+        case 'right':
+            return css `
+        right: 0;
+        height: 100%;
+        min-width: 300px;
+        border-radius: 6px 0px 0px 6px;
+
+        ${open
+                ? css `
+              animation: ${slideInRight} ${DURATION} ease-in-out forwards;
+            `
+                : null}
+
+        &.slideOut {
+          animation: ${slideOutRight} ${DURATION} ease-in-out forwards;
+        }
+      `;
+        case 'bottom':
+            return css `
+        bottom: 0;
+        width: 100%;
+        border-radius: 6px 6px 0px 0px;
+        ${open
+                ? css `
+              animation: ${slideInUp} ${DURATION} ease-in-out forwards;
+            `
+                : null}
+
+        &.slideOut {
+          animation: ${slideOutDown} ${DURATION} ease-in-out forwards;
+        }
+      `;
+        case 'left':
+            return css `
+        left: 0;
+        height: 100%;
+        min-width: 300px;
+        border-radius: 0px 6px 6px 0px;
+
+        ${open
+                ? css `
+              animation: ${slideInLeft} ${DURATION} ease-in-out forwards;
+            `
+                : null}
+
+        &.slideOut {
+          animation: ${slideOutLeft} ${DURATION} ease-in-out forwards;
+        }
+      `;
+        default:
+            return css `
+        left: 0;
+        height: 100%;
+        min-width: 300px;
+        border-radius: 0px 6px 6px 0px;
+
+        ${open
+                ? css `
+              animation: ${slideInUp} ${DURATION} ease-in-out forwards;
+            `
+                : null}
+
+        &.slideOut {
+          animation: ${slideOutDown} ${DURATION} ease-in-out forwards;
+        }
+      `;
+    }
+};
+
+const StyledDrawer = styled.div `
+  position: fixed;
+  inset: 0;
+  z-index: ${theme.zIndexes.drawer};
+  pointer-events: ${(props) => (props.open ? 'auto' : 'none')};
+`;
+const StyledDrawerPanel = styled.div `
+  position: fixed;
+  z-index: 300;
+  background: #ffffff;
+  visibility: ${(props) => (props.open ? 'visible' : 'hidden')};
+  max-height: calc(100vh - 100px);
+  display: flex;
+  flex-direction: column;
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    ${(props) => props.hasTitle
+    ? css `
+            border-bottom: 1px solid ${theme.colors.neutral100};
+          `
+    : null}
+  }
+
+  .close-button {
+    margin-left: auto;
+  }
+
+  ${(props) => generateStyleBasedOnPlacement(props.placement, props.open)}
+`;
+const StyledDrawerContent = styled.div `
+  min-height: 200px;
+  padding: 16px;
+  overflow-y: auto;
+`;
+
+const StyledBackdrop = styled.div `
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+  background-color: rgba(38, 38, 38, 0.3);
+  z-index: 1;
+  &[data-open='false'] {
+    visibility: hidden;
+    pointer-events: none;
+  }
+  &[data-open='true'] {
+    visibility: visible;
+    pointer-events: auto;
+  }
+`;
+
+const Backdrop = ({ open = false, onClickOutside, }) => {
+    return (React__default.createElement(StyledBackdrop, { "data-open": open, onClick: onClickOutside }));
+};
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Drawer = ({ children, title, onClose, open = false, placement = 'left', destroyOnClose = false, isPropagationEvent = true, className, }) => {
+    const ref = useRef();
+    useEffect(() => {
+        toggleNoScroll(open);
+        return () => toggleNoScroll(false);
+    }, [open]);
+    const onCloseDrawer = () => {
+        ref.current.classList.add('slideOut');
+        setTimeout(() => {
+            onClose();
+        }, 800);
+    };
+    if (!open && destroyOnClose) {
+        return null;
+    }
+    return (React__default.createElement(Portal, null,
+        React__default.createElement(StyledDrawer, { className: className, open: open },
+            React__default.createElement(Backdrop, { open: open, onClickOutside: onCloseDrawer }),
+            React__default.createElement(StyledDrawerPanel, { open: open, placement: placement, ref: ref, hasTitle: Boolean(title) },
+                React__default.createElement("div", { className: "title" },
+                    title && (React__default.createElement(Text, { size: "s2", weight: "semiBold" }, title)),
+                    React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: "close-button", onClick: onCloseDrawer },
+                        React__default.createElement("path", { d: "M5.99007 4.99067C5.79114 4.99072 5.59674 5.0501 5.43173 5.16121C5.26672 5.27233 5.1386 5.43013 5.06374 5.61444C4.98889 5.79875 4.9707 6.0012 5.0115 6.1959C5.05231 6.39061 5.15025 6.56872 5.29281 6.70747L10.5858 12.0004L5.29281 17.2934C5.19684 17.3855 5.12021 17.4959 5.06743 17.618C5.01464 17.7402 4.98676 17.8716 4.9854 18.0046C4.98405 18.1377 5.00926 18.2697 5.05954 18.3928C5.10983 18.516 5.1842 18.6279 5.27827 18.722C5.37235 18.8161 5.48426 18.8904 5.60743 18.9407C5.73061 18.991 5.86259 19.0162 5.99563 19.0149C6.12867 19.0135 6.2601 18.9856 6.38223 18.9328C6.50436 18.8801 6.61473 18.8034 6.70687 18.7075L11.9998 13.4145L17.2928 18.7075C17.385 18.8034 17.4953 18.8801 17.6175 18.9328C17.7396 18.9856 17.871 19.0135 18.0041 19.0149C18.1371 19.0162 18.2691 18.991 18.3922 18.9407C18.5154 18.8904 18.6273 18.8161 18.7214 18.722C18.8155 18.6279 18.8899 18.516 18.9401 18.3928C18.9904 18.2697 19.0156 18.1377 19.0143 18.0047C19.0129 17.8716 18.985 17.7402 18.9323 17.618C18.8795 17.4959 18.8028 17.3855 18.7069 17.2934L13.4139 12.0004L18.7069 6.70747C18.8514 6.567 18.9501 6.38616 18.99 6.18864C19.03 5.99112 19.0093 5.78614 18.9308 5.60055C18.8523 5.41497 18.7195 5.25744 18.5499 5.14861C18.3803 5.03978 18.1817 4.98473 17.9803 4.99067C17.7205 4.99841 17.4739 5.10699 17.2928 5.2934L11.9998 10.5864L6.70687 5.2934C6.61368 5.19761 6.50224 5.12146 6.37912 5.06947C6.25601 5.01747 6.12372 4.99068 5.99007 4.99067Z", fill: "#595959" }))),
+                React__default.createElement(StyledDrawerContent, { onClick: (e) => {
+                        if (isPropagationEvent) {
+                            e.stopPropagation();
+                        }
+                    } }, children &&
+                    (React__default.isValidElement(children)
+                        ? children
+                        : typeof children === 'function'
+                            ? children({
+                                internalClose: onCloseDrawer,
+                            })
+                            : null))))));
+};
+
+export { Drawer as D };

package/build/esm/index-996f7caf.js

@@ -0,0 +1,148 @@
+import React__default, { useState } from 'react';
+import { F as Flag } from './index-21eac858.js';
+import styled from '@emotion/styled';
+import { t as theme } from './theme-f18c2351.js';
+import { T as Text } from './index-c200bff6.js';
+import { C as CommonGAssets } from './index-78255d6c.js';
+
+const ALLOW_DOMAIN_URL = [
+    'hellobacsi.com',
+    'hellosehat.com',
+    'hellodoktor.com',
+    'hellokrupet.com',
+    'hellodoctor.com.ph',
+    'hellokhunmor.com',
+    'hellosayarwon.com',
+    'helloyishi.com.tw',
+    'helloswasthya.com',
+    'marrybaby.vn',
+    'hellohealth.questionpro.com',
+    'hellobacsivn.page.link',
+];
+const isInternalLink = (url = '') => {
+    return ALLOW_DOMAIN_URL.some((o) => new URL(url).origin.endsWith(o));
+};
+
+const StyledLanguageChangeLink = styled.a `
+  display: inline-flex;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  padding: 7px 11px;
+  gap: 2px;
+
+  background: ${theme.colors.white};
+  border: 1px solid ${theme.colors.neutral100};
+  border-radius: 20px;
+
+  color: ${theme.colors.gray600};
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 18px;
+  text-decoration: none;
+
+  cursor: pointer;
+`;
+
+const StyledSelectionContainer = styled.div `
+  position: relative;
+  display: inline-block;
+`;
+const StyledSelectionLabel = styled.div `
+  position: relative;
+`;
+const StyleSelectionPopup = styled.div `
+  position: absolute;
+  z-index: 21;
+  top: 100%;
+  right: 0;
+  width: 327px;
+  padding: 8px;
+  background: white;
+  border-radius: 4px;
+  filter: drop-shadow(0px 8px 40px rgba(0, 0, 0, 0.1));
+
+  &[data-is-open='false'] {
+    display: none;
+  }
+  &[data-show-indicator='true'] {
+    &:before {
+      position: absolute;
+      right: 11px;
+      bottom: 100%;
+      width: 0;
+      height: 0;
+      border: 0.5rem solid transparent;
+      border-top: none;
+      border-bottom-color: #fff;
+      content: '';
+      filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
+    }
+  }
+`;
+const StyledOption = styled.div `
+  display: flex;
+  height: 40px;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 0 16px;
+  border-radius: ${theme.borderRadius};
+  cursor: pointer;
+
+  .check-icon {
+    width: 16px;
+    height: 16px;
+  }
+  &[data-selected='false'] {
+    background-color: ${theme.colors.gray100};
+  }
+`;
+const StyledPopupBackground = styled.div `
+  position: fixed;
+  z-index: 20;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: default;
+`;
+
+const TooltipSelection = ({ options, label, labelRenderer, selected, onChange, showSelected = true, style = {}, showIndicator = true, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(StyledSelectionContainer, null,
+            React__default.createElement(StyledSelectionLabel, { onClick: () => setIsOpen((value) => !value) },
+                label || (labelRenderer === null || labelRenderer === void 0 ? void 0 : labelRenderer(isOpen)) || null,
+                React__default.createElement(StyleSelectionPopup, { "data-is-open": isOpen, style: style, "data-show-indicator": showIndicator }, options.map((option, index) => (React__default.createElement(StyledOption, { key: index, "data-selected": showSelected && selected === option.value, onClick: (e) => {
+                        if (selected !== option.value) {
+                            onChange(option.value);
+                            setIsOpen((value) => !value);
+                        }
+                        e.stopPropagation();
+                    } },
+                    React__default.createElement(Text, { size: "p3" }, option.label),
+                    showSelected && selected === option.value && (React__default.createElement("img", { src: CommonGAssets.getAssetPath('check.svg'), alt: "check", className: "check-icon", loading: "lazy" })))))))),
+        isOpen && (React__default.createElement(StyledPopupBackground, { onClick: () => setIsOpen(false) }))));
+};
+
+const LanguageSwitcher = ({ languageOptions, locale }) => {
+    var _a, _b;
+    const selectedLanguage = languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.find((option) => option.locale === locale);
+    if (!(languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.length)) {
+        return null;
+    }
+    return (React__default.createElement(TooltipSelection, { options: languageOptions, selected: selectedLanguage.value, label: React__default.createElement(LanguageLabel, { locale: locale, label: selectedLanguage.label || ((_b = (_a = locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) }), onChange: (href) => {
+            if (typeof window !== 'undefined') {
+                window.location.href = href;
+            }
+        }, style: { width: 100 }, showSelected: true, showIndicator: false }));
+};
+const LanguageLabel = ({ locale, label, href, }) => {
+    var _a, _b, _c;
+    return (React__default.createElement(StyledLanguageChangeLink, { href: href },
+        React__default.createElement(Flag, { country: (_b = (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase(), width: 16, height: 16, rounded: true, language: (_c = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _c === void 0 ? void 0 : _c[0] }),
+        React__default.createElement("span", null, label)));
+};
+
+export { LanguageSwitcher as L, isInternalLink as i };

package/build/esm/{index-ef855343.js → index-9f1899f2.js}

@@ -1,9 +1,9 @@
-import { c as cookie } from './index-13bf84f4.js';
-import { B as BEARER_TOKEN_COOKIE, d as domainLocales } from './index-c807ef87.js';
-import { N as NodeIntentType } from './index-eeedf0f0.js';
+import { c as cookie } from './index-3078acec.js';
+import { B as BEARER_TOKEN_COOKIE, d as domainLocales } from './index-bef3c9bd.js';
+import { N as NodeIntentType } from './index-e3787b20.js';
 import Cookies from 'js-cookie';
 import { v4 } from 'uuid';
-import { i as isProduction } from './isProduction-2838b9ae.js';
+import { i as isProduction } from './isProduction-5684a28c.js';
 
 const queryKeysJson = [
     'form_submit_meta',

package/build/esm/{index-32e2b169.js → index-b1bb27aa.js}

@@ -1,13 +1,21 @@
 import React__default, { useState, useEffect, useMemo, useCallback } from 'react';
-import { t as StyledDivider, u as useStyles, v as StyledContainer } from './index.styles-0ef0135c.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-2673b49d.js';
-import { u as useTranslations } from './useTranslations-adad3b06.js';
-import { B as Button } from './index-92eedeb0.js';
-import { P as PATHS } from './paths-d1c61fa8.js';
-import { a as LOCALIZED_SLUGS } from './constants-508ba335.js';
-import { d as domainLocales } from './index-c807ef87.js';
-import { h as callApi, i as getCarePath } from './utils-dee27bfd.js';
-import { i as isProduction } from './isProduction-2838b9ae.js';
+import styled from '@emotion/styled';
+import { t as theme } from './theme-f18c2351.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-761239c7.js';
+import { u as useTranslations } from './useTranslations-fbf6a6ab.js';
+import { createStyles } from '@mantine/core';
+import { B as Button } from './index-2b9213cf.js';
+import { P as PATHS } from './paths-49a813e7.js';
+import { L as LOCALIZED_SLUGS } from './constants-f77fc231.js';
+import { d as domainLocales } from './index-bef3c9bd.js';
+import { c as callApi, g as getCarePath } from './utils-d5a0b58f.js';
+import { i as isProduction } from './isProduction-5684a28c.js';
+
+const StyledDivider = styled.hr `
+  border-width: 1px;
+  border-color: ${theme.colors.neutral200};
+  border-style: ${(props) => props.dividerType};
+`;
 
 /**
  * @deprecated Consider to use mantine
@@ -16,6 +24,61 @@ const Divider = ({ type = 'solid', className, style }) => {
     return (React__default.createElement(StyledDivider, { style: style, className: className, "data-diver-type": type, dividerType: type }));
 };
 
+var useStyles = createStyles((theme) => {
+    return {
+        root: {
+            display: 'inline-block',
+            // height: 1rem,
+            flexShrink: 0,
+            padding: '2px 0.5rem',
+            marginLeft: '4px',
+            borderRadius: theme.radius.xs,
+            // color: white,
+            fontSize: '12px',
+            fontWeight: 400,
+            lineHeight: '18px',
+            '&[data-label-type="admin"]': {
+                background: theme.primaryColor[0],
+                color: theme.primaryColor[9],
+                // &[data-is-marrybaby='true'] {
+                //   background: #{map-get($mbColors, 'tonePink')};
+                //   color: #{map-get($mbColors, 'cRed')};
+                // }
+            },
+            '&[data-label-type="local admin"]': {
+                background: theme.primaryColor[8],
+            },
+            '&[data-label-type="ambassador"]': {
+                background: theme.colors.green[4],
+            },
+            '&[data-label-type="expert"]': {
+                background: theme.colors.yellow[6],
+                // &[data-is-marrybaby='true'] {
+                //   background: #{map-get($mbColors, 'cOrange')};
+                //   color: #{map-get($colors, 'cWhite')};
+                // }
+            },
+            '&[data-label-type="moderator"]': {
+                background: theme.colors.red[0],
+                color: theme.colors.red[8],
+                // &[data-is-marrybaby='true'] {
+                //   background: #{map-get($mbColors, 'toneBlue')};
+                //   color: #{map-get($mbColors, 'cobalt')};
+                // }
+            },
+            '&[data-label-type="sponsor"]': {
+                background: theme.colors.teal[4],
+            },
+            '&[data-label-type="guide"]': {
+                background: theme.colors.teal[4],
+            },
+            '&[data-label-type="influencer"]': {
+                background: theme.colors.teal[4],
+            },
+        },
+    };
+});
+
 const AuthorLabelTextMapping = {
     admin: 'cardAuthor.admin',
     moderator: 'cardAuthor.moderator',
@@ -50,6 +113,15 @@ const AuthorBadge = (_a) => {
         className: cx(classes.root, className), "data-label-type": matchedRole, "data-is-marrybaby": siteType === 'marryBaby' }, rest), title || t(AuthorLabelTextMapping[matchedRole]))) : null;
 };
 
+const StyledContainer = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  button[data-color='tertiary'] {
+    background: white;
+  }
+`;
+
 const BtnChoice = ({ value: valueInit, choices, onChange }) => {
     const [value, setValue] = useState(valueInit);
     useEffect(() => {

package/build/esm/{index-c807ef87.js → index-bef3c9bd.js}

@@ -1,6 +1,6 @@
 import { enUS, vi, km, hi, id, ms, th, zhTW } from 'date-fns/locale';
-import { L as LOCALE } from './index-eeedf0f0.js';
-import { i as isProduction } from './isProduction-2838b9ae.js';
+import { L as LOCALE } from './index-e3787b20.js';
+import { i as isProduction } from './isProduction-5684a28c.js';
 
 const siteHost = {
     HELLO_HEALTH_GROUP: 'hellohealthgroup.com',
@@ -902,4 +902,4 @@ var index = /*#__PURE__*/Object.freeze({
   isProduction: isProduction
 });
 
-export { API_DATE_FORMAT as A, BEARER_TOKEN_COOKIE as B, CARE_LOCALES as C, DATE_FNS_LOCALE as D, ECOM_LOCALES as E, FAVICONS as F, GA_TOKEN_COOKIE as G, ISO_FORMAT as I, LOCALE_SPECS as L, MAP_DOMAIN_BY_LOCALE as M, QUERY_HEALTH_TOOL as Q, RISK_SCREENER_NAME as R, STATIC_PAGES as S, TOGETHER_LOCALES as T, USER_GEOLOCATION_COORDINATES_COOKIE as U, RISK_SCREENER_SLUG as a, CARE_BOOKING_LOCALES as b, CDN_ADDRESS as c, domainLocales as d, basePath as e, SSO_URL as f, UP_BASEPATH as g, DATE_FNS_DATE_FORMAT as h, index as i, siteHost as j, siteOptions as s };
+export { API_DATE_FORMAT as A, BEARER_TOKEN_COOKIE as B, CDN_ADDRESS as C, DATE_FNS_LOCALE as D, ECOM_LOCALES as E, FAVICONS as F, GA_TOKEN_COOKIE as G, ISO_FORMAT as I, LOCALE_SPECS as L, MAP_DOMAIN_BY_LOCALE as M, QUERY_HEALTH_TOOL as Q, RISK_SCREENER_NAME as R, STATIC_PAGES as S, TOGETHER_LOCALES as T, USER_GEOLOCATION_COORDINATES_COOKIE as U, RISK_SCREENER_SLUG as a, CARE_LOCALES as b, CARE_BOOKING_LOCALES as c, domainLocales as d, basePath as e, SSO_URL as f, UP_BASEPATH as g, DATE_FNS_DATE_FORMAT as h, index as i, siteHost as j, siteOptions as s };

package/build/esm/{index-bcd13f1d.js → index-c1af3a8e.js}

@@ -1,22 +1,23 @@
 import React__default from 'react';
-import { C as Container } from './index-6c0f560b.js';
+import { C as Container } from './index-782fed08.js';
 import dayjs from 'dayjs';
-import { d as domainLocales } from './index-c807ef87.js';
-import { u as useScreenSize } from './index-92eedeb0.js';
+import { d as domainLocales } from './index-bef3c9bd.js';
+import { u as useScreenSize } from './index-21eac858.js';
 import { Flex, Stack, Box } from '@mantine/core';
 import '@mantine/dates';
-import './index-eeedf0f0.js';
-import './index-80f4d7df.js';
-import './useMantineLocale-1373e175.js';
-import { T as Text } from './index-4dcdce19.js';
-import { t as theme } from './theme-0af1cc3d.js';
-import './translationsContext-036458b7.js';
+import './index-e3787b20.js';
+import './index-78255d6c.js';
+import './useMantineLocale-4fb67342.js';
+import { T as Text } from './index-c200bff6.js';
+import './index-2b9213cf.js';
+import { t as theme } from './theme-f18c2351.js';
+import './translationsContext-f3d1a7bd.js';
 import 'string-format';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-511a24f4.js';
+import { M as MediaQueries } from './utils-f8761b9d.js';
 import styled from '@emotion/styled';
-import { L as Logo } from './index-d48b5db6.js';
-import { M as MarryBabyText } from './index-d5b66388.js';
+import { L as Logo } from './index-1ecbcf21.js';
+import { M as MarryBabyText } from './index-87a2ea8c.js';
 
 const StyledFooter$1 = styled.footer `
   background-color: #1b3250;

package/build/esm/{index-4dcdce19.js → index-c200bff6.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-2673b49d.js';
+import { _ as __rest } from './tslib.es6-761239c7.js';
 import React__default from 'react';
 import { createStyles, Text as Text$1 } from '@mantine/core';
-import { O as OTHER_THEME_CONFIG, F as FontWeight } from './utils-511a24f4.js';
+import { O as OTHER_THEME_CONFIG, F as FontWeight } from './utils-f8761b9d.js';
 
 var useStyles = createStyles((theme, _params) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;

package/build/esm/{index-5773eb18.js → index-cb4afb33.js}

@@ -1,11 +1,11 @@
-import { _ as __rest } from './tslib.es6-2673b49d.js';
+import { _ as __rest } from './tslib.es6-761239c7.js';
 import React__default, { useMemo, useState, useEffect } from 'react';
-import { L as LOCALE } from './index-eeedf0f0.js';
+import { L as LOCALE } from './index-e3787b20.js';
 import styled from '@emotion/styled';
-import { C as CommonGAssets } from './index-80f4d7df.js';
-import { t as theme } from './theme-0af1cc3d.js';
-import { I as ImageWrap, f as CentralCarousel } from './index-92eedeb0.js';
-import { T as Text } from './index-2d47a346.js';
+import { C as CommonGAssets } from './index-78255d6c.js';
+import { t as theme } from './theme-f18c2351.js';
+import { I as ImageWrap, d as CentralCarousel } from './index-21eac858.js';
+import { T as Text } from './index-7e756cb8.js';
 
 const StyledIconContainer = styled.div `
   display: inline-flex;

package/build/esm/{index-679d5383.js → index-cdac57da.js}

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import { useMantineTheme } from '@mantine/core';
 import styled from '@emotion/styled';
-import { t as theme } from './theme-0af1cc3d.js';
+import { t as theme } from './theme-f18c2351.js';
 
 const StyledDropdown = styled.div `
   --dropdown-padding: 12px 18px 12px 16px;

package/build/esm/{index-474e0ae5.js → index-cf6beac8.js}

@@ -1,19 +1,8 @@
 import React__default, { useRef, useState, useEffect } from 'react';
-import { I as Icon } from './index-df29c4e0.js';
-import { u as useTranslations } from './useTranslations-adad3b06.js';
 import { format } from 'date-fns';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import styled from '@emotion/styled';
-import { t as theme } from './theme-0af1cc3d.js';
-
-var styles = {"loading":"tliWyii"};
-
-const Loading = ({ className, theme, hideText }) => {
-    const { t } = useTranslations();
-    return (React__default.createElement("div", { className: `${styles.loading} ${className}` },
-        React__default.createElement(Icon.Spinner, { isMarryBaby: theme === 'marryBaby' }),
-        !hideText && t('loading')));
-};
+import { t as theme } from './theme-f18c2351.js';
 
 const MONTHS_TRANSLATION = {
     'vi-VN': [
@@ -612,4 +601,4 @@ const DatePicker = ({ alignRight = true, placeholder, displayDateFormat, onChang
             }, format: displayDateFormat || defaultDateFormatString, formatDate: formatPickerDate, hideOnDayClick: isStatic ? false : true, placeholder: placeholder || '', onDayChange: handleDayChanged, showOverlay: isStatic })));
 };
 
-export { DatePicker as D, Loading as L };
+export { DatePicker as D };

package/build/esm/{index-77dddeb9.js → index-d218b94e.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-2673b49d.js';
+import { _ as __rest } from './tslib.es6-761239c7.js';
 import React__default from 'react';
 import { Modal as Modal$1 } from '@mantine/core';
-import { g as useStyles } from './index-92eedeb0.js';
+import { g as useStyles } from './index-21eac858.js';
 
 const Modal = (_a) => {
     var { styles, classNames, transitionProps } = _a, rest = __rest(_a, ["styles", "classNames", "transitionProps"]);

package/build/esm/index-d6201fa4.js

@@ -0,0 +1,42 @@
+import React__default from 'react';
+import styled from '@emotion/styled';
+import { L as Label } from './index-16514f4d.js';
+import { t as theme } from './theme-f18c2351.js';
+
+const StyledTextArea = styled.div `
+  textarea {
+    width: 100%;
+    height: var(--textarea-height, 116px);
+    padding: 1rem;
+    border: 1px solid ${theme.colors.gray200};
+    border-radius: 6px;
+    color: ${theme.colors.gray800};
+    font-size: 14px;
+    resize: none;
+
+    &:focus {
+      box-shadow: 0px 0px 2px 2px #91caff;
+    }
+
+    &::placeholder {
+      color: ${theme.colors.gray500};
+    }
+
+    &:disabled {
+      background-color: ${theme.colors.neutral50};
+      cursor: not-allowed;
+    }
+  }
+`;
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const TextArea = React__default.forwardRef(({ height, placeholder, labelText, labelColor, id, name, onChange, value, className, onKeyPress, disabled = false, }, ref) => {
+    return (React__default.createElement(StyledTextArea, { className: className, style: { ['--textarea-height']: height || '116px' } },
+        labelText && (React__default.createElement(Label, { size: "label2", style: { color: labelColor || '#595959' }, htmlFor: id }, labelText)),
+        React__default.createElement("textarea", { name: name, ref: ref, placeholder: placeholder, id: id, onChange: (e) => onChange && onChange(e.target.value), 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onKeyPress: (e) => onKeyPress && onKeyPress(e), value: value, disabled: disabled })));
+});
+
+export { TextArea as T };