@hhgtech/hhg-components 1.29.79 → 1.29.81

package/build/esm/index-1f6890ad.js

@@ -1,1086 +0,0 @@
-import React__default, { useRef, useEffect, useState, useMemo, createContext, useContext } from 'react';
-import { Portal, Box, Flex, rem, createStyles, Input, Chip, useMantineTheme, Switch } from '@mantine/core';
-import { t as toggleNoScroll, M as MediaQueries } from './utils-0d590d5e.js';
-import { w as StyledBackdrop, x as StyledDrawer, y as StyledDrawerPanel, z as StyledDrawerContent, A as StyledRadioImageGroup, B as StyledRadioImageItem, C as useStyles$b } from './index.styles-bff4ac47.js';
-import { T as Text } from './index-b2eed677.js';
-import { t as theme } from './theme-eb1b39f6.js';
-import { M as MarryBabyText } from './index-47d01c08.js';
-import { T as Text$1 } from './index-5265867b.js';
-import { u as useScrollbarSize } from './useScrollbarSize-594c61c3.js';
-import { createPortal } from 'react-dom';
-import styled from '@emotion/styled';
-import { s as setDefaultClass } from './defaultClassWrapper-fcdfc7a3.js';
-import { _ as __rest } from './tslib.es6-efad16cf.js';
-import { useForm, isNotEmpty } from '@mantine/form';
-import { R as Radio, B as Button, c as Input$1 } from './index-e2d856fc.js';
-import { C as CommonGAssets } from './index-92fd8661.js';
-import './index-122dd8ee.js';
-import './index-877eed06.js';
-import './utils-45e55363.js';
-import { D as DatePicker } from './index-47a90477.js';
-import { u as useTranslations } from './useTranslations-b8c49c9b.js';
-import '@mantine/hooks';
-import './useMantineLocale-bcfdeb0c.js';
-import './index-ef96fd13.js';
-import './index-40fc06d9.js';
-import './index.styled-eb1001c3.js';
-import './index-4687d5f8.js';
-import { BabyBoyMB, BabyGirlMB, CalendarMB } from '@hhgtech/icons/other';
-import '@mantine/dates';
-import flattenChildren from 'react-keyed-flatten-children';
-
-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))))));
-};
-
-const RadioImageGroup = ({ value, options, className, direction = 'horizontal', onChange, isDisabled, siteType, }) => {
-    const [check, setCheck] = useState(value);
-    const handleOnChange = (v) => {
-        if (isDisabled)
-            return;
-        setCheck(v);
-        onChange && onChange(v);
-    };
-    const isMarryBaby = siteType === 'marryBaby';
-    return (React__default.createElement(StyledRadioImageGroup, { className: className, "data-direction": direction }, options.map((option, index) => (React__default.createElement(StyledRadioImageItem, { "data-selected": (value || check) === option.value, "data-is-mb": isMarryBaby, "data-disabled": isDisabled, key: index, onClick: () => {
-            handleOnChange(option.value);
-        } },
-        React__default.createElement("div", null,
-            option.content,
-            option.label && (React__default.createElement(React__default.Fragment, null, isMarryBaby ? (React__default.createElement(MarryBabyText, { type: "subtitle-2", color: (value || check) === option.value
-                    ? theme.mbColors.dark
-                    : theme.mbColors.midGray }, option.label)) : (React__default.createElement(Text$1, { type: "bold", color: (value || check) === option.value ? '#2D87F3' : 'black', className: "radio-group-item-heading", size: "label1" }, option.label))))))))));
-};
-
-const GenderOptionControl = (_a) => {
-    var { label, availableValue: availableValueInit, styles, isBaby, genderValue = {
-        male: 'male',
-        female: 'female',
-    }, type = 'button', hideLabel } = _a, radioProps = __rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue", "type", "hideLabel"]);
-    const { t } = useTranslations();
-    const { classes, cx, theme } = useStyles$b({ type }, {
-        name: 'GenderOptionControl',
-        styles,
-    });
-    const isMarryBaby = theme.other.template === 'mb';
-    const [availableValue, setAvailableValue] = useState();
-    const ref = useRef(null);
-    const genderOptions = useMemo(() => [
-        {
-            value: genderValue.male,
-            label: isBaby ? t('gender.boy') : t('gender.male'),
-            icon: isBaby ? (isMarryBaby ? (React__default.createElement(BabyBoyMB, null)) : (CommonGAssets.getAssetPath('health-tools/boy-icon.svg'))) : (CommonGAssets.getAssetPath('health-tools/male-icon.svg')),
-        },
-        {
-            value: genderValue.female,
-            label: isBaby ? t('gender.girl') : t('gender.female'),
-            icon: isBaby ? (isMarryBaby ? (React__default.createElement(BabyGirlMB, null)) : (CommonGAssets.getAssetPath('health-tools/girl-icon.svg'))) : (CommonGAssets.getAssetPath('health-tools/female-icon.svg')),
-        },
-    ], []);
-    useEffect(() => {
-        setAvailableValue(availableValueInit);
-    }, [availableValueInit]);
-    return (React__default.createElement(Box, { ref: ref, className: classes.root },
-        React__default.createElement(Radio.Group, Object.assign({ className: "radio-group", label: !hideLabel ? (React__default.createElement(Text, { as: "label", size: "s4", weight: "semiBold" }, label ||
-                (isBaby
-                    ? t('tools.selectBabyGender')
-                    : t('tools.selectGender')))) : undefined, size: "lg" }, radioProps, { classNames: {
-                error: classes.groupErr,
-            } }, (type === 'radio' && {
-            error: null,
-        })),
-            React__default.createElement(Flex, { className: cx(classes.wrapper) }, genderOptions.map((i) => (React__default.createElement(Radio, Object.assign({ className: "gender-item", size: "sm", classNames: {
-                    root: classes.itemRoot,
-                    labelWrapper: classes.itemLabelWrapper,
-                    label: classes.itemLabel,
-                    inner: classes.itemInner,
-                    body: classes.itemBody,
-                }, key: i.value, value: i.value }, (availableValue &&
-                i.value !== availableValue && {
-                disabled: true,
-            }), { label: React__default.createElement(Flex, { gap: rem(8), align: 'center', justify: 'center', sx: { zIndex: 0 } },
-                    type === 'button' &&
-                        (typeof i.icon === 'string' ? (React__default.createElement("img", { src: i.icon, className: "gender-image", alt: "female", loading: "lazy" })) : (i.icon)),
-                    React__default.createElement(Text, { size: "p3" }, i.label)) }))))))));
-};
-
-const StyledModal = setDefaultClass(styled.div `
-    position: relative;
-    z-index: 200;
-    background-color: ${theme.colors.white};
-    border-radius: ${theme.borderRadius};
-    box-shadow: 0px 8px 40px 0px #0000001a;
-    &[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;
-    }
-  `, 'hhgcomp-modal-modal');
-const StyledModalWrapper = styled.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;
-  opacity: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  transition: opacity 0.3s ease-in-out;
-
-  .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'] {
-    opacity: 1;
-    visibility: visible;
-  }
-
-  ${StyledModal.classSelector} {
-    transition: transform 0.3s ease-in-out;
-  }
-  &.slideTop {
-    ${StyledModal.classSelector} {
-      transform: translate(0, -100vh);
-    }
-
-    &[data-open='true'] {
-      ${StyledModal.classSelector} {
-        transform: translate(0);
-      }
-    }
-  }
-
-  &.scaleUp {
-    ${StyledModal.classSelector} {
-      transform: scale(0.9);
-    }
-
-    &[data-open='true'] {
-      ${StyledModal.classSelector} {
-        transform: scale(1);
-      }
-    }
-  }
-
-  &[data-type='tail'] {
-    justify-content: flex-end;
-    ${StyledModal.classSelector} {
-      width: 420px;
-      height: 100%;
-      border-radius: 0;
-      overflow: hidden auto;
-    }
-  }
-  &[data-type='form'] {
-    ${StyledModal.classSelector} {
-      width: 496px;
-      height: 548px;
-      max-height: 100%;
-      overflow-y: auto;
-      ${MediaQueries.mbDown} {
-        width: 340px;
-      }
-    }
-  }
-  &[data-type='video'] {
-    ${StyledModal.classSelector} {
-      height: 100%;
-      max-height: 539px;
-      ${MediaQueries.mbDown} {
-        height: 192px;
-        width: 100%;
-        height: 100%;
-        border-radius: ${theme.borderRadius};
-        max-height: 192px;
-      }
-    }
-  }
-  &[data-type='confirm'] {
-    ${StyledModal.classSelector} {
-      width: 100%;
-      max-width: 407px;
-      ${MediaQueries.mbDown} {
-        width: calc(100% - 32px);
-        max-width: calc(100% - 32px);
-      }
-    }
-  }
-`;
-const StyledModalMask = styled.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.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 = 'scaleUp', isStaticBackdrop = false, siteType, }) => {
-    const [mounted, setMounted] = useState(false);
-    const elRef = useRef(null);
-    const { width: scrollBarWidth } = useScrollbarSize();
-    if (!elRef.current && mounted) {
-        elRef.current = document.createElement('div');
-    }
-    useEffect(() => {
-        setMounted(true);
-        return () => {
-            setMounted(false);
-            cleanUpModalShow();
-            cleanUpDisabledScroll();
-        };
-    }, []);
-    useEffect(() => {
-        if (mounted) {
-            const modalsRoot = getModalsRoot();
-            modalsRoot.appendChild(elRef.current);
-            return () => {
-                modalsRoot.removeChild(elRef.current);
-            };
-        }
-    }, [mounted]);
-    useEffect(() => {
-        if (isOpen) {
-            document.body.classList.add('hhc-modal-show');
-        }
-        else {
-            cleanUpModalShow();
-        }
-    }, [isOpen]);
-    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 createPortal(React__default.createElement(StyledModalWrapper, { className: classes, "data-open": isOpen, "data-type": type },
-        !isStaticBackdrop && (React__default.createElement(StyledModalMask, { "data-open": isOpen, onClick: onClose, "data-type": type })),
-        !isStaticBackdrop && type === 'video' && !!closeIcon && (React__default.createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
-        React__default.createElement(StyledModal, { className: "hhg-modal", "data-open": isOpen, "data-site-type": siteType },
-            React__default.createElement("div", { className: type === 'video' ? 'hhg-modal__video' : 'hhg-modal__content' },
-                !!closeIcon && type !== 'video' && (React__default.createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
-                children))), elRef.current);
-};
-
-var useStyles$a = createStyles(() => {
-    return {
-        root: {
-            justifyContent: 'flex-start',
-        },
-        group: {
-            display: 'flex',
-            alignItems: 'stretch',
-            gap: rem(8),
-        },
-        item: {
-            flex: '1 1 0px',
-        },
-        icon: {
-            flexShrink: 0,
-        },
-    };
-});
-
-const ChipGroup = (_a) => {
-    var { data = [], label, isMobile, layout = 'horizonal', classNames, styles } = _a, props = __rest(_a, ["data", "label", "isMobile", "layout", "classNames", "styles"]);
-    const { classes, theme } = useStyles$a(undefined, {
-        name: 'ChipGroup',
-        classNames,
-        styles,
-    });
-    const isMarryBaby = theme.other.template === 'mb';
-    const iconSize = isMobile
-        ? 48
-        : isMarryBaby
-            ? 32
-            : layout === 'vertical'
-                ? 32
-                : 18;
-    return (React__default.createElement(Box, null,
-        React__default.createElement(Input.Wrapper, { label: label },
-            React__default.createElement(Chip.Group, Object.assign({}, props),
-                React__default.createElement(Box, { className: classes.group }, data.map((i, idx) => (React__default.createElement(Chip, { className: classes.item, key: idx, value: String(i.value), styles: {
-                        iconWrapper: {
-                            display: 'none',
-                        },
-                        label: {
-                            width: '100%',
-                            borderRadius: rem(isMarryBaby ? 12 : 8),
-                            padding: 0,
-                            border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.neutral[2]}`,
-                            height: '100%',
-                            '&[data-checked]': {
-                                padding: 0,
-                                backgroundColor: isMarryBaby
-                                    ? '#FFE9F1'
-                                    : theme.colors.blue[0],
-                                border: `1px solid ${isMarryBaby ? '#F5B4CB' : theme.colors.blue[1]}`,
-                            },
-                            [theme.fn.smallerThan('sm')]: {
-                                alignItems: 'flex-start',
-                            },
-                        },
-                    } },
-                    React__default.createElement(Box, { sx: Object.assign(Object.assign(Object.assign({ width: '100%', display: 'flex', gap: rem(isMarryBaby ? 2 : 8), padding: '8px 16px 8px 12px', justifyContent: 'center', alignItems: 'center' }, (isMarryBaby && {
-                            flexDirection: 'column',
-                        })), (layout === 'vertical' && {
-                            flexDirection: 'column',
-                            padding: '16px 8px 8px',
-                        })), { [theme.fn.smallerThan('sm')]: {
-                                flexDirection: 'column',
-                                padding: '16px 8px 8px',
-                            } }) },
-                        React__default.isValidElement(i.icon)
-                            ? React__default.cloneElement(i.icon, {
-                                size: iconSize,
-                                isMarryBaby,
-                                className: classes.icon,
-                            })
-                            : null,
-                        React__default.createElement(Text, { size: 'p4', styles: {
-                                root: Object.assign(Object.assign({}, (isMarryBaby && {
-                                    textAlign: 'center',
-                                })), { whiteSpace: 'normal', [theme.fn.smallerThan('sm')]: {
-                                        fontSize: rem(12),
-                                        lineHeight: rem(18),
-                                        textAlign: 'center',
-                                    } }),
-                            } }, i.label))))))))));
-};
-
-const FormLayoutContext = createContext({});
-
-const useStyles$9 = createStyles(() => {
-    return {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: rem(8),
-        },
-    };
-});
-const FormRow = (_a) => {
-    var { styles, classNames, className, children } = _a, props = __rest(_a, ["styles", "classNames", "className", "children"]);
-    const { classes, cx } = useStyles$9(undefined, {
-        name: 'HealthToolFormWrapper__FormRow',
-        styles,
-        classNames,
-    });
-    return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, props), children));
-};
-
-var useStyles$8 = createStyles((theme, { formLayout }) => {
-    return {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: rem(formLayout === 'inline' ? 8 : 16),
-            '.mantine-Input-input::placeholder, .mantine-Input-input[data-invalid]::placeholder': {
-                color: '#8C8C8C',
-            },
-        },
-        control: {
-            width: rem(180),
-            flexShrink: 1,
-            '&.error': {
-                'button, input': {
-                    borderColor: theme.colors.red[7],
-                },
-            },
-        },
-    };
-});
-
-const useStyles$7 = createStyles((theme, { formLayout }) => {
-    const isMarryBaby = theme.other.template === 'mb';
-    return {
-        root: Object.assign(Object.assign({ minWidth: rem(180) }, (formLayout === 'inline' && {
-            alignSelf: 'flex-end',
-            marginTop: rem(16),
-        })), (formLayout === 'default' && Object.assign({}, (isMarryBaby && {
-            alignSelf: 'center',
-        })))),
-    };
-});
-const SubmitBtn = (_a) => {
-    var { styles, classNames, className } = _a, props = __rest(_a, ["styles", "classNames", "className"]);
-    const { formLayout } = useContext(FormLayoutContext);
-    const { classes, cx } = useStyles$7({ formLayout }, {
-        name: 'HealthToolFormWrapper__SubmitBtn',
-        styles,
-        classNames,
-    });
-    return (React__default.createElement(Button, Object.assign({ className: cx('submit-btn', className, classes.root) }, props, { variant: "primary", size: "md" })));
-};
-
-const Switching = (_a) => {
-    var { label } = _a, props = __rest(_a, ["label"]);
-    const { t } = useTranslations();
-    const theme = useMantineTheme();
-    const isMarryBaby = theme.other.template === 'mb';
-    return (React__default.createElement(Flex, { gap: rem(4), sx: () => ({
-            justifyContent: 'space-between',
-            alignItems: 'center',
-        }) },
-        label && (React__default.createElement(Text, { size: isMarryBaby ? 'p4' : 's4', color: "gray.6" }, label)),
-        React__default.createElement(Switch, Object.assign({ labelPosition: "left", onLabel: t('switchBtn.yes'), offLabel: t('switchBtn.no') }, props, { styles: (theme) => ({
-                trackLabel: {
-                    fontSize: rem(12),
-                },
-                track: {
-                    cursor: 'pointer',
-                },
-                body: {
-                    [theme.fn.largerThan('sm')]: {
-                        flexDirection: 'column',
-                        alignItems: 'flex-start',
-                    },
-                    [theme.fn.smallerThan('sm')]: {
-                        justifyContent: 'space-between',
-                    },
-                },
-                labelWrapper: {
-                    [theme.fn.smallerThan('sm')]: {
-                        display: 'flex',
-                        justifyContent: 'center',
-                    },
-                },
-            }) }))));
-};
-
-const useStyles$6 = createStyles((theme) => {
-    return {
-        root: {
-            color: theme.colors.gray[6],
-            whiteSpace: 'nowrap',
-            paddingRight: rem(16),
-        },
-    };
-});
-const Unit = (_a) => {
-    var { styles, classNames, className } = _a, props = __rest(_a, ["styles", "classNames", "className"]);
-    const { classes, cx } = useStyles$6(undefined, {
-        name: 'HealthToolFormWrapper__UnitText',
-        styles,
-        classNames,
-    });
-    return React__default.createElement(Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
-};
-
-var useStyles$5 = createStyles(() => {
-    return {
-        root: {
-            display: 'flex',
-            gap: rem(8),
-            border: '1px solid #EAEAEC',
-            borderRadius: rem(16),
-            padding: '10px 16px 12px 16px',
-            flex: '1 1 0px',
-            '.mantine-Input-input': {
-                border: 0,
-                paddingLeft: 0,
-                height: '22px',
-                borderRadius: 0,
-                '&:focus': {
-                    outline: 0,
-                    boxShadow: 'none',
-                },
-            },
-        },
-        info: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 0,
-            flex: '1 1 0px',
-        },
-        label: {
-            color: '#7C7C8F',
-            fontWeight: 'normal',
-        },
-        content: {},
-        rightSection: {
-            display: 'flex',
-            alignItems: 'center',
-            textTransform: 'lowercase',
-            color: '#3E3F58',
-        },
-    };
-});
-
-const BorderBoxControl = (_a) => {
-    var { label, rightSection, children, styles, className, classNames } = _a, props = __rest(_a, ["label", "rightSection", "children", "styles", "className", "classNames"]);
-    const { classes, cx } = useStyles$5(undefined, {
-        name: 'HealthToolFormWrapper__BorderBoxControl',
-        styles,
-        classNames,
-    });
-    return (React__default.createElement(Box, Object.assign({ className: cx(classes.root, className) }, props),
-        React__default.createElement(Box, { className: classes.info },
-            label && (React__default.createElement(Text, { size: "n1", as: "label", className: classes.label }, label)),
-            React__default.createElement(Box, { className: classes.content }, React__default.isValidElement(children)
-                ? React__default.cloneElement(children, Object.assign(Object.assign({}, children.props), { size: 'sm', error: null }))
-                : null)),
-        rightSection && (React__default.createElement(Box, { className: classes.rightSection }, typeof rightSection === 'string' ? (React__default.createElement(Text, { size: "p4" }, rightSection)) : React__default.isValidElement(rightSection) ? (React__default.cloneElement(rightSection, {
-            size: 24,
-        })) : null))));
-};
-
-var useStyles$4 = createStyles((theme, { width, direction }) => {
-    const isMarryBaby = theme.other.template === 'mb';
-    return {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: rem(8),
-        },
-        row: {
-            display: 'flex',
-            flexDirection: direction,
-            alignItems: 'stretch',
-            justifyContent: 'space-between',
-            gap: rem(16),
-            minHeight: rem(40),
-        },
-        labelWrapper: Object.assign({ flex: '1 1 0px', display: 'flex', alignItems: 'center' }, (direction === 'row' && {
-            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
-        })),
-        label: {
-            fontSize: rem(14),
-            color: theme.colors.gray[6],
-        },
-        content: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: rem(8),
-            input: {
-                backgroundColor: '#fff',
-            },
-        },
-        control: {
-            width: typeof width === 'number' ? rem(width) : width,
-            flexShrink: 1,
-            input: Object.assign({}, (isMarryBaby && {
-                borderRadius: rem(12),
-            })),
-            '&.error': {
-                'button, input': {
-                    borderColor: theme.colors.red[7],
-                },
-            },
-        },
-        error: {
-            color: 'red',
-            textAlign: 'right',
-        },
-    };
-});
-
-const BorderInlineControl = ({ label, children, styles, classNames, direction = 'row', width = 180, errorMess, }) => {
-    const { classes } = useStyles$4({ width, direction }, {
-        name: 'HealthToolFormWrapper__BorderInlineControl',
-        styles,
-        classNames,
-    });
-    return (React__default.createElement(Box, { className: classes.root },
-        React__default.createElement(Box, { className: classes.row },
-            React__default.createElement(Box, { className: classes.labelWrapper }, label && (React__default.createElement("label", { className: classes.label, htmlFor: "gender" }, label))),
-            React__default.createElement(Box, { className: classes.content }, flattenChildren(children).map((i, idx) => (React__default.createElement(Box, { key: idx, className: classes.control }, i))))),
-        errorMess && (React__default.createElement(Text, { size: "p4", className: classes.error }, errorMess))));
-};
-
-const useStyles$3 = createStyles(() => {
-    return {
-        root: {
-            color: 'red',
-            textAlign: 'right',
-            width: 'auto',
-        },
-    };
-});
-const Error = (_a) => {
-    var { styles, classNames, className } = _a, props = __rest(_a, ["styles", "classNames", "className"]);
-    const { classes, cx } = useStyles$3(undefined, {
-        name: 'HealthToolFormWrapper__UnitText',
-        styles,
-        classNames,
-    });
-    return React__default.createElement(Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
-};
-
-var useStyles$2 = createStyles((theme$1) => {
-    const isMarryBaby = theme$1.other.template === 'mb';
-    return {
-        root: {
-            label: Object.assign({}, (isMarryBaby && {
-                color: theme.mbColors.midGray,
-                fontSize: rem(12),
-                fontWeight: 'normal',
-            })),
-        },
-    };
-});
-
-const Control = (_a) => {
-    var { className, styles, classNames } = _a, rest = __rest(_a, ["className", "styles", "classNames"]);
-    const { classes, cx } = useStyles$2(undefined, {
-        name: 'HealthToolFormWrapper__Control',
-        styles,
-        classNames,
-    });
-    return React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, rest));
-};
-
-const _HealthToolFormWrapper = (_a) => {
-    var { children, formLayout: formLayoutProp, styles, classNames, className, component = 'form' } = _a, rest = __rest(_a, ["children", "formLayout", "styles", "classNames", "className", "component"]);
-    const formLayout = formLayoutProp || 'default';
-    const { classes, cx } = useStyles$8({ formLayout }, {
-        name: 'HealthToolFormWrapper',
-        styles,
-        classNames,
-    });
-    return (React__default.createElement(FormLayoutContext.Provider, { value: {
-            formLayout,
-        } },
-        React__default.createElement(Box, Object.assign({ component: component, className: cx(className, classes.root) }, rest), children)));
-};
-const HealthToolFormWrapper = _HealthToolFormWrapper;
-HealthToolFormWrapper.Control = Control;
-HealthToolFormWrapper.BorderInlineControl = BorderInlineControl;
-HealthToolFormWrapper.BorderBoxControl = BorderBoxControl;
-HealthToolFormWrapper.Error = Error;
-HealthToolFormWrapper.FormRow = FormRow;
-HealthToolFormWrapper.Submit = SubmitBtn;
-HealthToolFormWrapper.Unit = Unit;
-HealthToolFormWrapper.Switching = Switching;
-HealthToolFormWrapper.ChipGroup = ChipGroup;
-
-const BabyGrowthFormContext = createContext({});
-
-const INPUT_RANGE = {
-    height: {
-        min: 1,
-        max: 300,
-    },
-    weight: {
-        min: 1,
-        max: 200,
-    },
-    pregnantWeek: {
-        min: 1,
-        max: 40,
-    },
-};
-
-var useStyles$1 = createStyles((theme) => {
-    return {
-        unit: {
-            color: theme.colors.gray[4],
-            fontWeight: 'normal',
-        },
-    };
-});
-
-const DefaultForm = (_a) => {
-    var { styles, classNames } = _a, props = __rest(_a, ["styles", "classNames"]);
-    const { t } = useTranslations();
-    const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
-    const { classes } = useStyles$1(undefined, {
-        name: 'BabyGrowthForm__DefaultForm',
-        styles,
-        classNames,
-    });
-    const commonDateProps = {
-        placeholder: 'DD/MM/YYYY',
-        popoverProps: {
-            withinPortal: true,
-        },
-    };
-    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(HealthToolFormWrapper.Control, null,
-                React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true, genderValue: {
-                        male: 'boy',
-                        female: 'girl',
-                    } }, form.getInputProps('gender'), { error: null }))),
-            form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
-        React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Input$1.Wrapper, { label: t('babyGrowth.input.birthday') },
-                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, onChange: (v) => {
-                        v && form.validateField('measurementDate');
-                        form.getInputProps('birthday').onChange(v);
-                    } }))),
-            form.errors.birthday && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday))),
-        React__default.createElement(Input$1.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
-                t('babyGrowth.height'),
-                React__default.createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.cm'),
-                    ")")) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
-                form.setFieldValue('height', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } })),
-        React__default.createElement(Input$1.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
-                t('babyGrowth.weight'),
-                React__default.createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.kg'),
-                    ")")) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
-                form.setFieldValue('weight', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } })),
-        React__default.createElement(Input$1.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
-                t('babyGrowth.head'),
-                React__default.createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.cm'),
-                    ")")) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
-                form.setFieldValue('head', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } })),
-        form.errors.checkMesureVal && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
-        React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Input$1.Wrapper, { label: t('babyGrowth.input.measurementDate') },
-                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), error: null }))),
-            form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit'))));
-};
-
-var useStyles = createStyles((theme) => {
-    return {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: rem(8),
-        },
-        bmiVal: {
-            display: 'inline-block',
-        },
-        unitText: {
-            color: theme.colors.gray[6],
-        },
-        submitBtn: {},
-    };
-});
-
-/**
- * Using {@link Intl.NumberFormat} to covert a number to string base on its locale
- * @param {number} num - Number to convert
- * @param {number} maximumFractionDigits - Number of decimal digits
- * @returns {string} - String based number
- */
-const localizeNumberFormat = (num, maximumFractionDigits = 2) => {
-    return Intl.NumberFormat(undefined, {
-        maximumFractionDigits,
-    }).format(num);
-};
-
-/**
- * Calculate BMI
- * Using {@link localizeNumberFormat} to convert number based on locale
- * @param {number} height - Height in number
- * @param {number} weight - Weight in number
- * @returns {number} - BMI with 2 decimal digits
- */
-const bmiCalculate = (height = 0, weight = 0) => {
-    try {
-        if (height && weight) {
-            const bmi = Number(weight) / Math.pow(Number(height) / 100, 2);
-            if (isNaN(bmi))
-                return 0;
-            return Number(localizeNumberFormat(bmi));
-        }
-        else {
-            return 0;
-        }
-    }
-    catch (error) { }
-    return 0;
-};
-
-const InlineForm = (_a) => {
-    var { styles, classNames } = _a, props = __rest(_a, ["styles", "classNames"]);
-    const { t } = useTranslations();
-    const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
-    const { classes } = useStyles(undefined, {
-        name: 'BabyGrowthForm__InlineForm',
-        styles,
-        classNames,
-    });
-    const commonDateProps = {
-        placeholder: 'DD/MM/YYYY',
-        popoverProps: {
-            withinPortal: true,
-        },
-    };
-    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
-        React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender') },
-                React__default.createElement(GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, isBaby: true, genderValue: {
-                        male: 'boy',
-                        female: 'girl',
-                    } }, form.getInputProps('gender')))),
-            form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
-        React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.birthday') },
-                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, onChange: (v) => {
-                        v && form.validateField('measurementDate');
-                        form.getInputProps('birthday').onChange(v);
-                    } }))),
-            form.errors.birthday && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday))),
-        React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: "BMI", styles: {
-                    control: {
-                        '&:first-child': {
-                            width: 'auto',
-                        },
-                    },
-                } },
-                React__default.createElement(Text, { size: "p3" },
-                    React__default.createElement("span", { className: classes.bmiVal }, form.getInputProps('height').value &&
-                        form.getInputProps('weight').value &&
-                        bmiCalculate(Number(form.getInputProps('height').value), Number(form.getInputProps('weight').value))),
-                    "(",
-                    t('babyGrowth.kg.m2'),
-                    ")"),
-                React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
-                        form.setFieldValue('height', v);
-                        form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-                    }, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
-                React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
-                        form.setFieldValue('weight', v);
-                        form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-                    }, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
-            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.head') },
-                React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
-                        form.setFieldValue('head', v);
-                        form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-                    }, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) }))),
-            form.errors.checkMesureVal && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal))),
-        React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.measurementDate') },
-                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('measurementDate'), { error: null }))),
-            form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: classes.submitBtn }, submitProps), t('babyGrowth.input.submit'))));
-};
-
-const MbLayout = (_a) => {
-    var props = __rest(_a, []);
-    const { t } = useTranslations();
-    const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
-    const commonDateProps = {
-        placeholder: 'DD/MM/YYYY',
-        popoverProps: {
-            withinPortal: true,
-        },
-    };
-    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(HealthToolFormWrapper.Control, null,
-                React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true, genderValue: {
-                        male: 'boy',
-                        female: 'girl',
-                    } }, form.getInputProps('gender'), { error: null }))),
-            form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
-        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.birthday'), rightSection: React__default.createElement(CalendarMB, null) },
-            React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, rightSection: null, onChange: (v) => {
-                    v && form.validateField('measurementDate');
-                    form.getInputProps('birthday').onChange(v);
-                } }))),
-        form.errors.birthday && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday)),
-        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.height'), rightSection: t('babyGrowth.cm') },
-            React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('height'), { placeholder: t('tools.inputPlaceholder', {
-                    content: '160',
-                }), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
-                    form.setFieldValue('height', v);
-                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-                } }))),
-        form.errors.height && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.height)),
-        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.weight'), rightSection: t('babyGrowth.kg') },
-            React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('weight'), { placeholder: t('tools.inputPlaceholder', {
-                    content: '50',
-                }), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
-                    form.setFieldValue('weight', v);
-                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-                } }))),
-        form.errors.weight && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.weight)),
-        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.head'), rightSection: t('babyGrowth.cm') },
-            React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('head'), { placeholder: t('tools.inputPlaceholder', {
-                    content: '50',
-                }), onChange: (v) => {
-                    form.setFieldValue('head', v);
-                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-                } }))),
-        form.errors.checkMesureVal && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
-        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.measurementDate'), rightSection: React__default.createElement(CalendarMB, null) },
-            React__default.createElement(Input$1.Wrapper, null,
-                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), rightSection: null, error: null })))),
-        form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate)),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit'))));
-};
-
-const BabyGrowthForm = (_a) => {
-    var { onSubmit, formLayout = 'default', submitProps, currentUrl } = _a, rest = __rest(_a, ["onSubmit", "formLayout", "submitProps", "currentUrl"]);
-    const { t } = useTranslations();
-    const theme = useMantineTheme();
-    const form = useForm({
-        initialValues: {
-            measurementDate: new Date(),
-        },
-        validate: {
-            gender: isNotEmpty(t('validation.error.requiredField')),
-            birthday: isNotEmpty(t('validation.error.requiredField')),
-            measurementDate: (value, values) => {
-                return values.birthday
-                    ? values.birthday instanceof Date &&
-                        value instanceof Date &&
-                        values.birthday.getTime() <= value.getTime()
-                        ? null
-                        : t('babyGrowth.error.measurementDateLowerThanBirthday', {
-                            name: '',
-                        })
-                    : null;
-            },
-            checkMesureVal: (_value, values) => {
-                return (values.head === undefined &&
-                    values.height === undefined &&
-                    values.weight === undefined) ||
-                    values.head ||
-                    values.height ||
-                    values.weight
-                    ? null
-                    : t('babyGrowth.error.atLeastOneOf');
-            },
-        },
-        validateInputOnChange: ['checkMesureVal'],
-    });
-    const commonProps = Object.assign({ onSubmit: form.onSubmit((v) => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(Object.assign(Object.assign({}, v), { bmi: bmiCalculate(Number(form.getInputProps('height').value), Number(form.getInputProps('weight').value)).toString() }))) }, rest);
-    return (React__default.createElement(BabyGrowthFormContext.Provider, { value: {
-            submitProps,
-            currentUrl,
-            form,
-        } }, formLayout === 'default' ? (theme.other.template === 'mb' ? (React__default.createElement(MbLayout, Object.assign({ formLayout: formLayout }, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))) : (React__default.createElement(InlineForm, Object.assign({}, commonProps)))));
-};
-
-export { BabyGrowthForm as B, Drawer as D, GenderOptionControl as G, HealthToolFormWrapper as H, INPUT_RANGE as I, Modal as M, RadioImageGroup as R };