@hhgtech/hhg-components 1.28.68 → 1.28.69

package/build/index-5fa68e45.js

@@ -0,0 +1,380 @@
+'use strict';
+
+var React = require('react');
+var core = require('@mantine/core');
+var utils = require('./utils-64bd0c42.js');
+var index_styles = require('./index.styles-b822bf42.js');
+var index = require('./index-bc4f4c33.js');
+var useScrollbarSize = require('./useScrollbarSize-0fa31aa7.js');
+var ReactDOM = require('react-dom');
+var styled = require('styled-components');
+var theme = require('./theme-fa910869.js');
+var other = require('@hhgtech/icons/other');
+var useTranslations = require('./useTranslations-e1853417.js');
+var Subot = require('./Subot-5fc40fb5.js');
+var index$1 = require('./index-488d71ae.js');
+var index$2 = require('./index-8a95d709.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const Backdrop = ({ open = false, onClickOutside, }) => {
+    return (React__default["default"].createElement(index_styles.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 = React.useRef();
+    React.useEffect(() => {
+        utils.toggleNoScroll(open);
+        return () => utils.toggleNoScroll(false);
+    }, [open]);
+    const onCloseDrawer = () => {
+        ref.current.classList.add('slideOut');
+        setTimeout(() => {
+            onClose();
+        }, 800);
+    };
+    if (!open && destroyOnClose) {
+        return null;
+    }
+    return (React__default["default"].createElement(core.Portal, null,
+        React__default["default"].createElement(index_styles.StyledDrawer, { className: className, open: open },
+            React__default["default"].createElement(Backdrop, { open: open, onClickOutside: onCloseDrawer }),
+            React__default["default"].createElement(index_styles.StyledDrawerPanel, { open: open, placement: placement, ref: ref, hasTitle: Boolean(title) },
+                React__default["default"].createElement("div", { className: "title" },
+                    title && (React__default["default"].createElement(index.Text, { size: "s2", weight: "semiBold" }, title)),
+                    React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: "close-button", onClick: onCloseDrawer },
+                        React__default["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["default"].createElement(index_styles.StyledDrawerContent, { onClick: (e) => {
+                        if (isPropagationEvent) {
+                            e.stopPropagation();
+                        }
+                    } }, children &&
+                    (React__default["default"].isValidElement(children)
+                        ? children
+                        : typeof children === 'function'
+                            ? children({
+                                internalClose: onCloseDrawer,
+                            })
+                            : null))))));
+};
+
+const RadioImageGroup = ({ value, options, className, direction = 'horizontal', onChange, isDisabled, siteType, }) => {
+    const [check, setCheck] = React.useState(value);
+    const handleOnChange = (v) => {
+        if (isDisabled)
+            return;
+        setCheck(v);
+        onChange && onChange(v);
+    };
+    const isMarryBaby = siteType === 'marryBaby';
+    return (React__default["default"].createElement(index_styles.StyledRadioImageGroup, { className: className, "data-direction": direction }, options.map((option, index) => (React__default["default"].createElement(index_styles.StyledRadioImageItem, { "data-selected": (value || check) === option.value, "data-is-mb": isMarryBaby, "data-disabled": isDisabled, key: index, onClick: () => {
+            handleOnChange(option.value);
+        } },
+        React__default["default"].createElement("div", null,
+            option.content,
+            option.label && (React__default["default"].createElement(React__default["default"].Fragment, null, isMarryBaby ? (React__default["default"].createElement(index$1.MarryBabyText, { type: "subtitle-2", color: (value || check) === option.value
+                    ? theme.theme.mbColors.dark
+                    : theme.theme.mbColors.midGray }, option.label)) : (React__default["default"].createElement(index$2.Text, { type: "bold", color: (value || check) === option.value ? '#2D87F3' : 'black', className: "radio-group-item-heading", size: "label1" }, option.label))))))))));
+};
+
+const _StyledModal = styled__default["default"].div `
+  position: relative;
+  z-index: 200;
+  background-color: ${theme.theme.colors.white};
+  border-radius: ${theme.theme.borderRadius};
+  box-shadow: 0px 4px 8px ${theme.theme.colors.gray200};
+  &[data-site-type='marryBaby'] {
+    border-radius: 16px;
+    .hhg-modal__content {
+      position: relative;
+      z-index: 111;
+      height: 100%;
+
+      padding: 24px;
+    }
+  }
+  .hhg-modal__content {
+    position: relative;
+    z-index: 111;
+    height: 100%;
+    padding: 16px;
+  }
+  .hhg-modal__video {
+    position: relative;
+    z-index: 111;
+    height: 100%;
+    background-color: none;
+    box-shadow: none;
+  }
+`;
+const StyledModalClass = 'hhgcomp-modal-modal';
+const StyledModal = index_styles.getDefaultClassWrapper(_StyledModal, StyledModalClass);
+const StyledModalWrapper = styled__default["default"].div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 201;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+  visibility: hidden;
+  background-color: rgba(38, 38, 38, 0.3);
+
+  .hhg-modal__close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    cursor: pointer;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+  &[data-type='video'] {
+    z-index: 1001;
+  }
+  &[data-open='true'] {
+    visibility: visible;
+  }
+
+  &.slideTop {
+    .${StyledModalClass} {
+      transform: translate(0, -100vh);
+      transition: all 0.5s ease;
+    }
+
+    &[data-open='true'] {
+      .${StyledModalClass} {
+        transform: translate(0);
+      }
+    }
+  }
+
+  &.scaleUp {
+    .${StyledModalClass} {
+      transform: scale(0.9);
+    }
+
+    &[data-open='true'] {
+      .${StyledModalClass} {
+        transition: all 0.3s ease-out;
+        transform: scale(1);
+      }
+    }
+  }
+
+  &[data-type='tail'] {
+    justify-content: flex-end;
+    .${StyledModalClass} {
+      width: 420px;
+      height: 100%;
+      border-radius: 0;
+      overflow: hidden auto;
+    }
+  }
+  &[data-type='form'] {
+    .${StyledModalClass} {
+      width: 496px;
+      height: 548px;
+      max-height: 100%;
+      overflow-y: auto;
+      ${utils.MediaQueries.mbDown} {
+        width: 340px;
+      }
+    }
+  }
+  &[data-type='video'] {
+    .${StyledModalClass} {
+      height: 100%;
+      max-height: 539px;
+      ${utils.MediaQueries.mbDown} {
+        height: 192px;
+        width: 100%;
+        height: 100%;
+        border-radius: ${theme.theme.borderRadius};
+        max-height: 192px;
+      }
+    }
+  }
+  &[data-type='confirm'] {
+    .${StyledModalClass} {
+      width: 100%;
+      max-width: 407px;
+      ${utils.MediaQueries.mbDown} {
+        width: calc(100% - 32px);
+        max-width: calc(100% - 32px);
+      }
+    }
+  }
+`;
+const StyledModalMask = styled__default["default"].div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+
+  &[data-open='false'] {
+    display: none;
+  }
+  &[data-type='video'] {
+    background-color: ${theme.theme.colors.secondaryDark};
+  }
+`;
+
+const MODAL_ROOT_ID = 'hhg-modals';
+const getModalsRoot = () => {
+    let el = document.getElementById(MODAL_ROOT_ID);
+    if (!el) {
+        el = document.createElement('div');
+        el.setAttribute('id', MODAL_ROOT_ID);
+        document.body.append(el);
+    }
+    return el;
+};
+const cleanUpModalShow = () => {
+    const selector = '.hhg-modal[data-open="true"]';
+    const remainingPopupOpened = document.querySelectorAll(selector);
+    // Remove the opening class if there are only 1 popup is shown
+    if (remainingPopupOpened.length < 1) {
+        document.body.classList.remove('hhc-modal-show');
+    }
+};
+const cleanUpDisabledScroll = () => {
+    // Clear the overflow if there are only 1 popup is shown. useEffect runs after so the count number becomes zero
+    const selector = '.hhg-modal[data-open="true"]';
+    const remainingPopupOpened = document.querySelectorAll(selector);
+    if (remainingPopupOpened.length < 1) {
+        document.body.style.overflow = '';
+        document.body.style.paddingRight = '';
+        document.body.classList.remove('hhc-disabled-scroll');
+    }
+};
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Modal = ({ type = 'lead', closeIcon, isOpen = true, onClose, children, className = '', animationType = 'slideTop', isStaticBackdrop = false, siteType, }) => {
+    const [mounted, setMounted] = React.useState(false);
+    const elRef = React.useRef(null);
+    const { width: scrollBarWidth } = useScrollbarSize.useScrollbarSize();
+    if (!elRef.current && mounted) {
+        elRef.current = document.createElement('div');
+    }
+    React.useEffect(() => {
+        setMounted(true);
+        return () => {
+            setMounted(false);
+            cleanUpModalShow();
+            cleanUpDisabledScroll();
+        };
+    }, []);
+    React.useEffect(() => {
+        if (mounted) {
+            const modalsRoot = getModalsRoot();
+            modalsRoot.appendChild(elRef.current);
+            return () => {
+                modalsRoot.removeChild(elRef.current);
+            };
+        }
+    }, [mounted]);
+    React.useEffect(() => {
+        if (isOpen) {
+            document.body.classList.add('hhc-modal-show');
+        }
+        else {
+            cleanUpModalShow();
+        }
+    }, [isOpen]);
+    React.useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            document.body.style.paddingRight = scrollBarWidth + 'px';
+            document.body.classList.add('hhc-disabled-scroll');
+        }
+        else {
+            cleanUpDisabledScroll();
+        }
+    }, [isOpen, scrollBarWidth]);
+    if (!mounted)
+        return null;
+    const classes = ['hhg-modal__wrapper', className, animationType]
+        .filter((s) => s)
+        .join(' ');
+    return ReactDOM.createPortal(React__default["default"].createElement(StyledModalWrapper, { className: classes, "data-open": isOpen, "data-type": type },
+        !isStaticBackdrop && (React__default["default"].createElement(StyledModalMask, { "data-open": isOpen, onClick: onClose, "data-type": type })),
+        !isStaticBackdrop && type === 'video' && !!closeIcon && (React__default["default"].createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
+        React__default["default"].createElement(StyledModal, { className: "hhg-modal", "data-open": isOpen, "data-site-type": siteType },
+            React__default["default"].createElement("div", { className: type === 'video' ? 'hhg-modal__video' : 'hhg-modal__content' },
+                !!closeIcon && type !== 'video' && (React__default["default"].createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
+                children))), elRef.current);
+};
+
+const StyledBabyGrowthGender = styled__default["default"].div `
+  & > :not(:last-child) {
+    margin-bottom: 8px;
+  }
+
+  .gender-selector {
+    & > :not(:last-child) {
+      margin-right: 16px;
+    }
+
+    & > div {
+      width: calc(50% - 8px);
+
+      ${utils.MediaQueries.mbUp} {
+        justify-self: left;
+      }
+    }
+  }
+`;
+const StyledBabyGrowthGenderOption = styled__default["default"](RadioImageGroup) `
+  & > div > div {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: center;
+    gap: 8px;
+    padding-block: 5px;
+  }
+  .radio-group-item-heading {
+    margin-top: 0;
+  }
+`;
+
+const BabyGrowthGender = ({ value, onChange, siteType, }) => {
+    const { t } = useTranslations.useTranslations();
+    const isMarryBaby = siteType == 'marryBaby';
+    return (React__default["default"].createElement(StyledBabyGrowthGender, { "data-is-marryBaby": isMarryBaby },
+        isMarryBaby ? (React__default["default"].createElement(index$1.MarryBabyHeading, { type: "h4", color: theme.theme.mbColors.dark }, t('tools.selectBabyGender'))) : (React__default["default"].createElement(index.Text, { size: "label2", weight: "bold", style: { marginBottom: '0.5rem' } }, t('tools.selectBabyGender'))),
+        React__default["default"].createElement(StyledBabyGrowthGenderOption, { siteType: siteType, options: [
+                {
+                    value: Subot.Gender.Boy,
+                    label: t('gender.male'),
+                    content: isMarryBaby ? React__default["default"].createElement(other.BabyBoyMB, null) : React__default["default"].createElement(other.GenderChooseBoy, null),
+                },
+                {
+                    value: Subot.Gender.Girl,
+                    label: t('gender.female'),
+                    content: isMarryBaby ? React__default["default"].createElement(other.BabyGirlMB, null) : React__default["default"].createElement(other.GenderChooseGirl, null),
+                },
+            ], value: value, onChange: onChange, className: "gender-selector" })));
+};
+
+exports.BabyGrowthGender = BabyGrowthGender;
+exports.Drawer = Drawer;
+exports.Modal = Modal;
+exports.RadioImageGroup = RadioImageGroup;

package/build/index-7b467209.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-65e312a5.js');
+var React = require('react');
+var core = require('@mantine/core');
+var dates = require('@mantine/dates');
+var index$1 = require('./index-5553f9e1.js');
+var Subot = require('./Subot-5fc40fb5.js');
+var index$2 = require('./index-1baaedb0.js');
+var index = require('./index-3e5fc2d6.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// Omit<MantineDatePickerInputProps, 'value'>
+const DatePicker = (_a) => {
+    var _b;
+    var { value, fullWidth = true } = _a, rest = tslib_es6.__rest(_a, ["value", "fullWidth"]);
+    return (React__default["default"].createElement(dates.DatePickerInput, Object.assign({ locale: index.MAPPED_LOCALE[process.env.UNIFY_LOCALE || Subot.LOCALE.Vietnam], valueFormat: (_b = index$1.ISO_FORMAT[process.env.UNIFY_LOCALE || Subot.LOCALE.Vietnam]) === null || _b === void 0 ? void 0 : _b.dateFormat, size: "md", clearable: false, popoverProps: fullWidth
+            ? {
+                styles: {
+                    dropdown: {
+                        minWidth: '100%',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    },
+                },
+            }
+            : {}, styles: {
+            root: {
+                position: 'relative',
+            },
+            rightSection: { pointerEvents: 'none', cursor: 'default' },
+        }, rightSection: React__default["default"].createElement(core.Image, { src: index$2.CommonGAssets.getAssetPath(rest.isMB ? 'MB-calendar.svg' : 'OutlineCalendar.svg'), width: 16, height: 16 }), value: value }, rest, { className: `input-control ${(rest === null || rest === void 0 ? void 0 : rest.className) || ''}` })));
+};
+
+exports.DatePicker = DatePicker;

package/build/index-81cb1142.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var React = require('react');
+var Subot = require('./Subot-5fc40fb5.js');
+var index$1 = require('./index-1baaedb0.js');
+var utils = require('./utils-52113753.js');
+var index = require('./index-3e5fc2d6.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const Logo = ({ type, className, style, isLightLogo, customSize, badge, locale, dateForSeasonal, isPro, }) => {
+    const [seasonalChecks, setSeasonalChecks] = React.useState({
+        isChristmas: false,
+        isLunarNewYear: false,
+        isNewYear: false,
+        isRamadan: false,
+        isVNHungKing: false,
+        isVN3004: false,
+        isLabourDay: false,
+    });
+    React.useEffect(() => {
+        if (!dateForSeasonal || isNaN(new Date(dateForSeasonal).getTime()))
+            return;
+        const dateForSeasonalDate = new Date(dateForSeasonal);
+        const isChristmasMemo = utils.isChristmas(dateForSeasonalDate);
+        const isLunarNewYearMemo = utils.LunarNewYearLocale.includes(locale) && utils.isLunarNewYear(dateForSeasonalDate);
+        const isNewYearMemo = !isLunarNewYearMemo && utils.isNewYear(dateForSeasonalDate);
+        const isRamadanMemo = utils.isRamadan(dateForSeasonalDate);
+        const isVNHungKingMemo = locale === Subot.LOCALE.Vietnam && utils.isVNHungKing(dateForSeasonalDate);
+        const isVN3004Memo = locale === Subot.LOCALE.Vietnam && utils.isVN3004(dateForSeasonalDate);
+        const isLabourDayMemo = locale === Subot.LOCALE.Vietnam && utils.isLabourDay(dateForSeasonalDate);
+        setSeasonalChecks({
+            isChristmas: isChristmasMemo,
+            isLunarNewYear: isLunarNewYearMemo,
+            isNewYear: isNewYearMemo,
+            isRamadan: isRamadanMemo,
+            isVNHungKing: isVNHungKingMemo,
+            isVN3004: isVN3004Memo,
+            isLabourDay: isLabourDayMemo,
+        });
+    }, [locale, new Date(dateForSeasonal).getDate()]);
+    return (React__default["default"].createElement(utils.StyledLogo, { className: className, style: style, "data-logo-is-light": isLightLogo || undefined, "data-has-badge": badge ? true : false, "data-seasonal": seasonalChecks.isRamadan
+            ? 'ramadan'
+            : seasonalChecks.isChristmas
+                ? 'christmas'
+                : seasonalChecks.isLunarNewYear
+                    ? 'lunar-new-year'
+                    : seasonalChecks.isNewYear
+                        ? 'new-year'
+                        : seasonalChecks.isVNHungKing
+                            ? 'hung-king'
+                            : seasonalChecks.isVN3004
+                                ? '30-04'
+                                : seasonalChecks.isLabourDay
+                                    ? 'labour-day'
+                                    : undefined, "data-type": type },
+        seasonalChecks.isChristmas ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(index.ImageWrap, { alt: "left xmas logo", src: index$1.CommonGAssets.getAssetPath('logo/xmas-left.png'), className: "common-logo-seasonal-left" }),
+            React__default["default"].createElement(index.ImageWrap, { alt: "right xmas logo", src: index$1.CommonGAssets.getAssetPath('logo/xmas-right.png'), className: "common-logo-seasonal-right" }))) : seasonalChecks.isNewYear ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(index.ImageWrap, { alt: "left new year logo", src: index$1.CommonGAssets.getAssetPath('logo/new-year-left.png'), className: "common-logo-seasonal-left" }),
+            React__default["default"].createElement(index.ImageWrap, { alt: "right new year logo", src: index$1.CommonGAssets.getAssetPath('logo/new-year-right.png'), className: "common-logo-seasonal-right" }))) : seasonalChecks.isLunarNewYear ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(index.ImageWrap, { alt: "left lunar new year logo", loading: "lazy", src: index$1.CommonGAssets.getAssetPath('logo/lunar-new-year-left.png'), className: "common-logo-seasonal-left" }),
+            React__default["default"].createElement(index.ImageWrap, { alt: "right lunar new year logo", loading: "lazy", src: index$1.CommonGAssets.getAssetPath('logo/lunar-new-year-right.png'), className: "common-logo-seasonal-right" }))) : seasonalChecks.isRamadan && type === 'hellosehat' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(index.ImageWrap, { alt: "left ramadan logo", loading: "lazy", src: index$1.CommonGAssets.getAssetPath('logo/ramadan-sehat-left.png'), className: "common-logo-seasonal-left" }),
+            React__default["default"].createElement(index.ImageWrap, { alt: "right ramadan logo", loading: "lazy", src: index$1.CommonGAssets.getAssetPath('logo/ramadan-sehat-right.png'), className: "common-logo-seasonal-right" }))) : seasonalChecks.isRamadan && type === 'hellodoktor' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(index.ImageWrap, { alt: "left ramadan logo", loading: "lazy", src: index$1.CommonGAssets.getAssetPath('logo/ramadan-doktor-left.png'), className: "common-logo-seasonal-left" }),
+            React__default["default"].createElement(index.ImageWrap, { alt: "right ramadan logo", loading: "lazy", src: index$1.CommonGAssets.getAssetPath('logo/ramadan-doktor-right.png'), className: "common-logo-seasonal-right" }))) : seasonalChecks.isVNHungKing &&
+            (type === 'hellobacsi' || type === 'marryBaby') ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(index.ImageWrap, { alt: "Hung King logo", loading: "lazy", src: index$1.CommonGAssets.getAssetPath('logo/hung-king-bg.png'), className: "common-logo-seasonal-left" }))) : null,
+        React__default["default"].createElement(utils.LogoIcon, { type: type, width: customSize === null || customSize === void 0 ? void 0 : customSize.width, height: customSize === null || customSize === void 0 ? void 0 : customSize.height }),
+        isPro ? (React__default["default"].createElement(utils.StyledProLogo, { src: index$1.CommonGAssets.getAssetPath('logo/pro-suffix.svg') })) : null,
+        badge));
+};
+
+exports.Logo = Logo;

package/build/index-84ab5b89.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-65e312a5.js');
+var React = require('react');
+var hooks = require('@mantine/hooks');
+var index = require('./index-3e5fc2d6.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const Slider = (_a) => {
+    var { color, withControl, onChange, value, min, max, isStatic, containerClassName, containerStyle } = _a, props = tslib_es6.__rest(_a, ["color", "withControl", "onChange", "value", "min", "max", "isStatic", "containerClassName", "containerStyle"]);
+    const [currentValue, setCurrentValue] = React.useState(value || min || 0);
+    const [debounced] = hooks.useDebouncedValue(currentValue, index.DEBOUNCED_TIME);
+    const increase = () => {
+        setCurrentValue((p) => (max && p === max ? p : p + 1));
+    };
+    const decrease = () => {
+        setCurrentValue((p) => (min && p === min ? p : p - 1));
+    };
+    React.useEffect(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(debounced);
+    }, [debounced]);
+    React.useEffect(() => {
+        setCurrentValue(value);
+    }, [value]);
+    return (React__default["default"].createElement(index.StyledSliderWrapper, { className: containerClassName, style: containerStyle },
+        withControl && (React__default["default"].createElement(index.Button, { type: "button", size: "sm", color: "ghost", onClick: decrease },
+            React__default["default"].createElement("svg", { width: "10", height: "10", fill: "none", viewBox: "0 0 12 3" },
+                React__default["default"].createElement("path", { d: "M1 1.004h8", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })))),
+        React__default["default"].createElement(index.StyledSlider, Object.assign({ thumbSize: 21, labelAlwaysOn: true, radius: "xl", color: color, value: currentValue, onChange: !isStatic ? setCurrentValue : () => null, min: min, max: max }, props, { className: 'hhg-mantine-slider ' + (props.className || '') })),
+        withControl && (React__default["default"].createElement(index.Button, { type: "button", size: "sm", variant: "ghost", onClick: increase },
+            React__default["default"].createElement("svg", { width: "16", height: "20", fill: "none", viewBox: "0 0 16 16" },
+                React__default["default"].createElement("path", { d: "M8 4v8M4 8h8", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }))))));
+};
+
+exports.Slider = Slider;

package/build/index-8a95d709.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-65e312a5.js');
+var React = require('react');
+require('./index-3e5fc2d6.js');
+require('@mantine/core');
+require('@mantine/dates');
+require('./index-5553f9e1.js');
+require('./Subot-5fc40fb5.js');
+require('./index-1baaedb0.js');
+var index = require('./index-bc4f4c33.js');
+require('./theme-fa910869.js');
+require('./translationsContext-950334bf.js');
+require('string-format');
+require('@mantine/hooks');
+require('./utils-64bd0c42.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * @deprecated Consider to use import { Text } from '@hhgtech/hhg-components/mantine'
+ */
+const Text = (_a) => {
+    var { size = 'base', type = 'regular' } = _a, rest = tslib_es6.__rest(_a, ["size", "type"]);
+    return (React__default["default"].createElement(index.Text, Object.assign({ size: size, weight: type === 'caption' ? 'bold' : type }, rest)));
+};
+
+exports.Text = Text;

package/build/index-9da9f0c3.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-65e312a5.js');
+var React = require('react');
+var index = require('./index-3e5fc2d6.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Button = (_a) => {
+    var { size, color = 'primary', isDisabled, isBlock, title, onClick, icon, iconPosition = 'left', children, isLoading = false, loadingText, dataEventCategory, dataEventAction, dataEventLabel, dataProductChannel, dataProductSku, dataProductBrand, dataProductName, dataProductPrice, dataProductCategory, dataProductPosition, type } = _a, rest = tslib_es6.__rest(_a, ["size", "color", "isDisabled", "isBlock", "title", "onClick", "icon", "iconPosition", "children", "isLoading", "loadingText", "dataEventCategory", "dataEventAction", "dataEventLabel", "dataProductChannel", "dataProductSku", "dataProductBrand", "dataProductName", "dataProductPrice", "dataProductCategory", "dataProductPosition", "type"]);
+    const gtmProps = {
+        'data-event-category': dataEventCategory,
+        'data-event-action': dataEventAction,
+        'data-event-label': dataEventLabel,
+        'data-product-channel': dataProductChannel,
+        'data-product-sku': dataProductSku,
+        'data-product-brand': dataProductBrand,
+        'data-product-name': dataProductName,
+        'data-product-price': dataProductPrice,
+        'data-product-category': dataProductCategory,
+        'data-product-position': dataProductPosition,
+    };
+    return (React__default["default"].createElement(index.Button, Object.assign({}, gtmProps, { size: size, variant: color === 'transparent' ? 'white' : color === 'danger' ? 'error' : color, disabled: isDisabled, onClick: (evt) => {
+            !isLoading && !isDisabled && onClick && onClick(evt);
+        }, title: title, loading: isLoading, type: type, leftIcon: iconPosition === 'left' ? icon : undefined, rightIcon: iconPosition === 'right' ? icon : undefined, 
+        // hasIcon={!!icon || undefined}
+        w: isBlock ? '100%' : undefined, p: isBlock ? '12px auto' : undefined }, rest), isLoading ? loadingText || children : children));
+};
+
+exports.Button = Button;

package/build/index-af91c83e.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-65e312a5.js');
+var React = require('react');
+var core = require('@mantine/core');
+var theme = require('./theme-fa910869.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const Indicator = (_a) => {
+    var { styles, color = theme.theme.colors.red700 } = _a, props = tslib_es6.__rest(_a, ["styles", "color"]);
+    return (React__default["default"].createElement(core.Indicator, Object.assign({ inline: true, position: "top-end", offset: 4, styles: Object.assign({ processing: {
+                // FIX: Safari blink
+                animationDirection: 'alternate',
+            } }, styles), color: color }, props)));
+};
+
+exports.Indicator = Indicator;