@hhgtech/hhg-components 1.28.68 → 1.28.70

package/build/index-165c76af.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-abc17c4d.js');
+var React = require('react');
+var core = require('@mantine/core');
+var index$2 = require('./index-bef45e43.js');
+var index = require('./index-95dd817d.js');
+var index$1 = require('./index-970717a9.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const Modal = (_a) => {
+    var { title, styles } = _a, rest = tslib_es6.__rest(_a, ["title", "styles"]);
+    const { classes } = index.useStyles(undefined, { name: 'Modal', styles });
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(core.Modal, Object.assign({ centered: true, classNames: classes }, rest, { withCloseButton: false, title: rest.withCloseButton && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(index$1.Text, { size: "s2", weight: "semiBold", as: "span" }, title),
+                React__default["default"].createElement(core.CloseButton, Object.assign({}, rest.closeButtonProps, { onClick: () => { var _a; return (_a = rest.onClose) === null || _a === void 0 ? void 0 : _a.call(rest); }, sx: {
+                        ':focus': {
+                            outline: 0,
+                        },
+                    } }),
+                    React__default["default"].createElement("img", { loading: "lazy", className: "mantine-Modal-close", src: index$2.CommonGAssets.getAssetPath('CloseModal.svg'), style: {
+                            width: '16px',
+                        } })))) }))));
+};
+
+exports.Modal = Modal;

package/build/index-2d4e4a2c.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-abc17c4d.js');
+var React = require('react');
+var index_styled = require('./index.styled-97b37364.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const MarryBabyHeading = (_a) => {
+    var { type, color, style } = _a, props = tslib_es6.__rest(_a, ["type", "color", "style"]);
+    const DATATYPE = {
+        h1: 'headline-1',
+        h2: 'headline-2',
+        h3: 'headline-3',
+        h4: 'headline-4',
+    };
+    return (React__default["default"].createElement(index_styled.StyledHeading, Object.assign({ type: type, "data-type": DATATYPE[type], style: Object.assign(Object.assign({}, (color && { '--text-color': color })), style) }, props)));
+};
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const MarryBabyText = (_a) => {
+    var { type, color, style } = _a, props = tslib_es6.__rest(_a, ["type", "color", "style"]);
+    return (React__default["default"].createElement(index_styled.StyledText, Object.assign({ "data-type": type, style: Object.assign(Object.assign({}, style), (color && { '--text-color': color })) }, props)));
+};
+
+exports.MarryBabyHeading = MarryBabyHeading;
+exports.MarryBabyText = MarryBabyText;

package/build/index-3540ce3f.js

@@ -0,0 +1,380 @@
+'use strict';
+
+var React = require('react');
+var core = require('@mantine/core');
+var utils = require('./utils-d8cae1f5.js');
+var index_styles = require('./index.styles-2434bd17.js');
+var index = require('./index-970717a9.js');
+var useScrollbarSize = require('./useScrollbarSize-3e11e4b6.js');
+var ReactDOM = require('react-dom');
+var styled = require('styled-components');
+var theme = require('./theme-30426d81.js');
+var other = require('@hhgtech/icons/other');
+var useTranslations = require('./useTranslations-64bdaca7.js');
+var Subot = require('./Subot-cc39f8f4.js');
+var index$1 = require('./index-2d4e4a2c.js');
+var index$2 = require('./index-b0333d49.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-473e8c3c.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-abc17c4d.js');
+var React = require('react');
+var core = require('@mantine/core');
+var constants = require('./constants-fc94e094.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 Input = (_a) => {
+    var { name, value, errorMessage, isNumerousKeyboard = false, showErrorMessage = true, actionIcon: ActionIcon, displayIcon: DisplayIcon, onActionClick, label, className, onChange, isDisabled, CustomInput, size, style, autoComplete = 'off', type = 'text', inputClassName, trackingAttributes, enterKeyHint } = _a, rest = tslib_es6.__rest(_a, ["name", "value", "errorMessage", "isNumerousKeyboard", "showErrorMessage", "actionIcon", "displayIcon", "onActionClick", "label", "className", "onChange", "isDisabled", "CustomInput", "size", "style", "autoComplete", "type", "inputClassName", "trackingAttributes", "enterKeyHint"]);
+    const _theme = core.useMantineTheme();
+    const gaAttributes = React.useMemo(() => {
+        if (trackingAttributes) {
+            return {
+                'data-event-category': trackingAttributes.dataEventCategory,
+                'data-event-action': trackingAttributes.dataEventAction,
+                'data-event-label': trackingAttributes.dataEventLabel,
+            };
+        }
+        else {
+            return {};
+        }
+    }, [trackingAttributes]);
+    return (React__default["default"].createElement(constants.StyledInput, { "data-size": size, className: className, "data-has-action-icon": !!ActionIcon || undefined, "data-has-display-icon": !!DisplayIcon || undefined, "data-has-error": (errorMessage && errorMessage.length > 0) || undefined, color: _theme.fn.primaryColor(), shadowColor: _theme.colors[_theme.primaryColor][0], style: style },
+        label && (React__default["default"].createElement(constants.Label, { size: "label2", htmlFor: name, className: "inputLabel" }, label)),
+        React__default["default"].createElement("div", { style: { position: 'relative' } },
+            CustomInput ? (CustomInput) : (React__default["default"].createElement("input", Object.assign({ id: name, name: name, onChange: (e) => onChange && onChange(e.target.value), type: type, "aria-label": type, value: value, disabled: isDisabled, autoComplete: autoComplete, inputMode: isNumerousKeyboard || type === 'number' ? 'numeric' : type, pattern: isNumerousKeyboard ? '[0-9]*' : '.*', className: inputClassName, enterKeyHint: enterKeyHint }, gaAttributes, rest))),
+            DisplayIcon && (React__default["default"].createElement(constants.StyledDisplayIcon, { className: "displayIcon" }, DisplayIcon)),
+            ActionIcon && (React__default["default"].createElement(constants.StyledActionIcon, { className: "actionIcon", onClick: onActionClick }, ActionIcon))),
+        errorMessage && errorMessage.length > 0 && showErrorMessage && (React__default["default"].createElement(constants.StyledErrorLabel, { className: "errorLabel" }, errorMessage))));
+};
+
+exports.Input = Input;

package/build/index-48b608d8.js

@@ -0,0 +1,123 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-abc17c4d.js');
+var React = require('react');
+var Subot = require('./Subot-cc39f8f4.js');
+var index$1 = require('./index-bef45e43.js');
+var theme = require('./theme-30426d81.js');
+var styled = require('styled-components');
+var index = require('./index-95dd817d.js');
+var index$2 = require('./index-b0333d49.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledIconContainer = styled__default["default"].div `
+  display: inline-flex;
+  overflow: hidden;
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+
+  border: 1px solid #e4e8ec;
+  background-color: ${(props) => props.backgroundColor || theme.theme.colors.white};
+  border-radius: ${(props) => props.borderRadius || '50%'};
+  & > * {
+    width: ${(props) => props.iconSize}px;
+    height: ${(props) => props.iconSize}px;
+  }
+`;
+const StyledPillContainer = styled__default["default"].div `
+  display: inline-block;
+  height: 108px;
+  background-color: ${(props) => props.theme.colors.white};
+  border-radius: 60px;
+  cursor: pointer;
+  &.selected-week-pill {
+    background-color: ${(props) => props.theme.colors.pink100};
+  }
+
+  & > div:first-child {
+    margin: 4px 4px 0;
+  }
+
+  & > p {
+    margin-top: 8px;
+    text-align: center;
+  }
+
+  & > * {
+    pointer-events: none;
+  }
+`;
+
+const LONG_TITLE_LOCALE = [Subot.LOCALE.Myanmar, Subot.LOCALE.Taiwan];
+const Pill = (_a) => {
+    var { icon, name, className, locale = 'en-PH', dataEventCategory, dataEventAction, dataEventLabel, onSelect } = _a, rest = tslib_es6.__rest(_a, ["icon", "name", "className", "locale", "dataEventCategory", "dataEventAction", "dataEventLabel", "onSelect"]);
+    const isSelected = React.useMemo(() => className === null || className === void 0 ? void 0 : className.includes('selected-week-pill'), [className]);
+    return (React__default["default"].createElement(StyledPillContainer, Object.assign({ onClick: onSelect, className: className
+            ? 'week-pill'.concat(' non-pointer-event-child ', className)
+            : 'week-pill non-pointer-event-child', "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, rest),
+        React__default["default"].createElement(StyledIconContainer, { size: 64, iconSize: 40, backgroundColor: theme.theme.colors.white },
+            React__default["default"].createElement(index.ImageWrap, { src: icon || index$1.CommonGAssets.getAssetPath('week_default.png'), alt: `week ${name}` })),
+        isSelected ? (React__default["default"].createElement(index$2.Text, Object.assign({ type: "semiBold", size: "n1", color: theme.theme.colors.gray800 }, (LONG_TITLE_LOCALE.includes(locale) && {
+            style: { fontSize: '10px' },
+        })), name)) : (React__default["default"].createElement(index$2.Text, Object.assign({ size: "n1", color: theme.theme.colors.gray600 }, (LONG_TITLE_LOCALE.includes(locale) && {
+            style: { fontSize: '10px' },
+        })), name))));
+};
+
+const StyledPill = styled__default["default"](Pill) `
+  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.08);
+`;
+const StyledSlide = styled__default["default"](index.CentralCarousel.Slide) `
+  cursor: pointer;
+  > div * {
+    pointer-events: none;
+  }
+`;
+const StyledCarousel = styled__default["default"](index.CentralCarousel) `
+  .centerred-pill-wrapper {
+    padding: 16px 0;
+  }
+`;
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const PillCarousel = (_a) => {
+    var { data, isMobile, onSlideChange, pillProps, locale = Subot.LOCALE.Vietnam, blurFromIndex, blurLength } = _a, rest = tslib_es6.__rest(_a, ["data", "isMobile", "onSlideChange", "pillProps", "locale", "blurFromIndex", "blurLength"]);
+    const sliderProps = {
+        withControls: !isMobile,
+        slideGap: 16,
+        blurFromCenter: true,
+        blurFromIndex: blurFromIndex || (isMobile ? 2 : 4),
+        blurLength: blurLength || (isMobile ? 1 : 3),
+        onSlideChange,
+    };
+    const [currentUrl, setCurrentUrl] = React.useState('');
+    React.useEffect(() => {
+        setCurrentUrl(window.location.href);
+    }, []);
+    return (React__default["default"].createElement(StyledCarousel, Object.assign({}, sliderProps, rest, { selectSlideWhenClick: true, previousControlIcon: React__default["default"].createElement(Arrow, { currentUrl: currentUrl }), nextControlIcon: React__default["default"].createElement(Arrow, { currentUrl: currentUrl, isRight: true }) }), (centerSlide) => data.map((pill, idx) => (React__default["default"].createElement(StyledSlide, Object.assign({ key: idx, onClick: onSlideChange, "data-event-category": "Health Tool", "data-event-action": "Pregnancy Week Click", "data-event-label": currentUrl, innerSlideProps: {
+            'data-event-category': 'Health Tool',
+            'data-event-action': 'Pregnancy Week Click',
+            'data-event-label': currentUrl,
+        } }, pillProps),
+        React__default["default"].createElement("div", { className: "centerred-pill-wrapper" },
+            React__default["default"].createElement(StyledPill, { "data-event-category": "Health Tool", "data-event-action": "Fetal Week Click", "data-event-label": currentUrl, locale: locale, name: pill.name, icon: pill.icon, className: idx === centerSlide
+                    ? 'selected-week-pill pointer-event-child-none'
+                    : 'pointer-event-child-none' })))))));
+};
+const Arrow = ({ isRight, currentUrl, }) => {
+    return (React__default["default"].createElement("svg", { viewBox: "0 0 15 15", fill: "none", width: "16", height: "16", style: isRight
+            ? { transform: 'rotate(-90deg)' }
+            : { transform: 'rotate(90deg)' }, "data-event-category": "Health Tool", "data-event-action": "Pregnancy Week Arrow Click", "data-event-label": currentUrl, className: "pointer-event-child-none" },
+        React__default["default"].createElement("path", { d: "M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" })));
+};
+
+exports.PillCarousel = PillCarousel;