@hhgtech/hhg-components 1.29.42 → 1.29.44

package/build/esm/{index-4ea3e525.js → index-af5ce53c.js}

@@ -1,33 +1,33 @@
 import React__default, { useRef, useEffect, useState, useMemo, createContext, useContext } from 'react';
-import { Portal, Box, Flex, rem, createStyles, useMantineTheme } from '@mantine/core';
-import { t as toggleNoScroll, M as MediaQueries } from './utils-21e35369.js';
-import { w as StyledBackdrop, x as StyledDrawer, y as StyledDrawerPanel, z as StyledDrawerContent, A as StyledRadioImageGroup, B as StyledRadioImageItem, C as useStyles$9, P as PureInput } from './index.styles-924b4812.js';
-import { T as Text } from './index-667832a2.js';
-import { t as theme } from './theme-03d89802.js';
-import { M as MarryBabyText } from './index-18250b0b.js';
-import { T as Text$1 } from './index-7edac771.js';
-import { u as useScrollbarSize } from './useScrollbarSize-f2dc58f6.js';
+import { Portal, Box, Flex, rem, createStyles, useMantineTheme, Switch } from '@mantine/core';
+import { t as toggleNoScroll, M as MediaQueries } from './utils-72d20560.js';
+import { w as StyledBackdrop, x as StyledDrawer, y as StyledDrawerPanel, z as StyledDrawerContent, A as StyledRadioImageGroup, B as StyledRadioImageItem, C as useStyles$9, P as PureInput } from './index.styles-59f43d64.js';
+import { T as Text } from './index-7aff3435.js';
+import { t as theme } from './theme-7c208c30.js';
+import { M as MarryBabyText } from './index-c0c2dfbe.js';
+import { T as Text$1 } from './index-52e1cb2b.js';
+import { u as useScrollbarSize } from './useScrollbarSize-718c8d7c.js';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
-import { s as setDefaultClass } from './utils-b0732a5b.js';
-import { _ as __rest } from './tslib.es6-5160724c.js';
+import { s as setDefaultClass } from './utils-101d2ed1.js';
+import { _ as __rest } from './tslib.es6-2c23b4a0.js';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { G as Gender } from './index-7dea2608.js';
+import { G as Gender } from './index-3e04178f.js';
 import { Controller, useForm } from 'react-hook-form';
 import { BabyBoyMB, BabyGirlMB, CalendarMB } from '@hhgtech/icons/other';
-import { R as Radio, B as Button, c as Input$1 } from './index-ba777d71.js';
-import { C as CommonGAssets } from './index-61c6842a.js';
-import { I as Input } from './index-7d1d6c79.js';
-import './utils-cf5bebf5.js';
-import { D as DatePicker } from './index-3723a2c1.js';
-import { u as useTranslations } from './useTranslations-3a5b70f3.js';
+import { R as Radio, B as Button, c as Input$1 } from './index-f0ac2d9c.js';
+import { C as CommonGAssets } from './index-a2cdc317.js';
+import { I as Input } from './index-db0a1f04.js';
+import './utils-8a09aa51.js';
+import { D as DatePicker } from './index-329afe30.js';
+import { u as useTranslations } from './useTranslations-3ea1638d.js';
 import '@mantine/hooks';
-import './useMantineLocale-deeb986b.js';
-import './index-62e5ab51.js';
-import './WhatsApp-85f73100.js';
-import './index.styled-d9fe4f4b.js';
-import './index-eec6203c.js';
-import { L as Label } from './constants-0904669a.js';
+import './useMantineLocale-6a509174.js';
+import './index-d73390b2.js';
+import './WhatsApp-9dbce6f2.js';
+import './index.styled-e18670ac.js';
+import './index-be8d21e4.js';
+import { L as Label } from './constants-e3536cb0.js';
 import '@mantine/dates';
 import { format } from 'date-fns';
 import flattenChildren from 'react-keyed-flatten-children';
@@ -595,11 +595,10 @@ var useStyles$7 = createStyles((theme, { formLayout }) => {
 const useStyles$6 = createStyles((theme, { formLayout }) => {
     const isMarryBaby = theme.other.template === 'mb';
     return {
-        root: Object.assign(Object.assign({}, (formLayout === 'inline' && {
+        root: Object.assign(Object.assign({ minWidth: rem(180) }, (formLayout === 'inline' && {
             alignSelf: 'flex-end',
             marginTop: rem(16),
         })), (formLayout === 'default' && Object.assign({}, (isMarryBaby && {
-            minWidth: rem(180),
             alignSelf: 'center',
         })))),
     };
@@ -608,13 +607,48 @@ const SubmitBtn = (_a) => {
     var { styles, classNames, className } = _a, props = __rest(_a, ["styles", "classNames", "className"]);
     const { formLayout } = useContext(FormLayoutContext);
     const { classes, cx } = useStyles$6({ formLayout }, {
-        name: 'HealthToolFormWrapper',
+        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$5 = createStyles((theme) => {
     return {
         root: {
@@ -634,69 +668,72 @@ const Unit = (_a) => {
     return React__default.createElement(Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
 };
 
-var useStyles$4 = createStyles((theme, { width }) => {
+var useStyles$4 = createStyles(() => {
     return {
-        row: {
+        root: {
             display: 'flex',
-            alignItems: 'stretch',
-            justifyContent: 'space-between',
-            gap: rem(16),
-        },
-        labelWrapper: {
+            gap: rem(8),
+            border: '1px solid #EAEAEC',
+            borderRadius: rem(16),
+            padding: '10px 16px',
             flex: '1 1 0px',
+            '.mantine-Input-input': {
+                border: 0,
+                paddingLeft: 0,
+                height: '22px',
+                borderRadius: 0,
+                '&:focus': {
+                    outline: 0,
+                    boxShadow: 'none',
+                },
+            },
+        },
+        info: {
             display: 'flex',
-            alignItems: 'center',
-            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
+            flexDirection: 'column',
+            gap: rem(8),
         },
         label: {
-            fontSize: rem(14),
-            color: theme.colors.gray[6],
+            color: '#7C7C8F',
+            fontWeight: 'normal',
         },
-        content: {
+        content: {},
+        rightSection: {
             display: 'flex',
             alignItems: 'center',
-            gap: rem(8),
-            input: {
-                backgroundColor: '#fff',
-            },
-        },
-        control: {
-            width: typeof width === 'number' ? rem(width) : width,
-            flexShrink: 1,
-            '&.error': {
-                'button, input': {
-                    borderColor: theme.colors.red[7],
-                },
-            },
+            textTransform: 'lowercase',
+            color: '#3E3F58',
         },
     };
 });
 
-const BorderBoxControl = ({ label, children, styles, classNames, width = 180, }) => {
-    const { classes } = useStyles$4({ width }, {
+const BorderBoxControl = (_a) => {
+    var { label, rightSection, children, styles, className, classNames } = _a, props = __rest(_a, ["label", "rightSection", "children", "styles", "className", "classNames"]);
+    const { classes, cx } = useStyles$4(undefined, {
         name: 'HealthToolFormWrapper__BorderBoxControl',
         styles,
         classNames,
     });
-    return (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))))));
+    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 }, children)),
+        rightSection && (React__default.createElement(Box, { className: classes.rightSection }, typeof rightSection === 'string' ? (React__default.createElement(Text, { size: "p4" }, rightSection)) : (rightSection)))));
 };
 
-var useStyles$3 = createStyles((theme, { width }) => {
+var useStyles$3 = createStyles((theme, { width, direction }) => {
     return {
         row: {
             display: 'flex',
+            flexDirection: direction,
             alignItems: 'stretch',
             justifyContent: 'space-between',
             gap: rem(16),
+            minHeight: rem(40),
         },
-        labelWrapper: {
-            flex: '1 1 0px',
-            display: 'flex',
-            alignItems: 'center',
+        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],
@@ -721,8 +758,8 @@ var useStyles$3 = createStyles((theme, { width }) => {
     };
 });
 
-const BorderInlineControl = ({ label, children, styles, classNames, width = 180, }) => {
-    const { classes } = useStyles$3({ width }, {
+const BorderInlineControl = ({ label, children, styles, classNames, direction = 'row', width = 180, }) => {
+    const { classes } = useStyles$3({ width, direction }, {
         name: 'HealthToolFormWrapper__BorderInlineControl',
         styles,
         classNames,
@@ -794,7 +831,8 @@ HealthToolFormWrapper.BorderBoxControl = BorderBoxControl;
 HealthToolFormWrapper.Error = Error;
 HealthToolFormWrapper.FormRow = FormRow;
 HealthToolFormWrapper.Submit = SubmitBtn;
-HealthToolFormWrapper.Unit = Unit;
+HealthToolFormWrapper.Unit = Unit;
+HealthToolFormWrapper.Switching = Switching;
 
 const BabyGrowthFormContext = createContext({});
 

package/build/esm/{index-18250b0b.js → index-c0c2dfbe.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-5160724c.js';
+import { _ as __rest } from './tslib.es6-2c23b4a0.js';
 import React__default from 'react';
-import { S as StyledHeading, a as StyledText } from './index.styled-d9fe4f4b.js';
+import { S as StyledHeading, a as StyledText } from './index.styled-e18670ac.js';
 
 const MarryBabyHeading = (_a) => {
     var { type, color, style } = _a, props = __rest(_a, ["type", "color", "style"]);

package/build/esm/{index-829fbe6e.js → index-c826cac0.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-5160724c.js';
+import { _ as __rest } from './tslib.es6-2c23b4a0.js';
 import React__default from 'react';
 import { Indicator as Indicator$1 } from '@mantine/core';
-import { t as theme } from './theme-03d89802.js';
+import { t as theme } from './theme-7c208c30.js';
 
 const Indicator = (_a) => {
     var { styles, color = theme.colors.red700 } = _a, props = __rest(_a, ["styles", "color"]);

package/build/esm/{index-b03e8e5c.js → index-c8a34381.js}

@@ -1,9 +1,9 @@
 import React__default, { useContext, useState } from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-21e35369.js';
-import { t as theme } from './theme-03d89802.js';
-import { _ as __rest } from './tslib.es6-5160724c.js';
-import { T as TogetherComponentGlobalContext } from './utils-b0732a5b.js';
+import { M as MediaQueries } from './utils-72d20560.js';
+import { t as theme } from './theme-7c208c30.js';
+import { _ as __rest } from './tslib.es6-2c23b4a0.js';
+import { T as TogetherComponentGlobalContext } from './utils-101d2ed1.js';
 
 const StyledPopup = styled.div `
   position: fixed;

package/build/esm/{index-62e5ab51.js → index-d73390b2.js}

@@ -1,6 +1,6 @@
 import { enUS, vi, km, hi, id, ms, th, zhTW } from 'date-fns/locale';
-import { L as LOCALE } from './index-7dea2608.js';
-import { i as isProduction } from './isProduction-d3299694.js';
+import { L as LOCALE } from './index-3e04178f.js';
+import { i as isProduction } from './isProduction-8ddd1c09.js';
 
 const siteHost = {
     HELLO_HEALTH_GROUP: 'hellohealthgroup.com',

package/build/esm/{index-a6863224.js → index-da45fa92.js}

@@ -1,18 +1,18 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-5160724c.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-2c23b4a0.js';
 import React__default, { useReducer, useState, useEffect } from 'react';
 import { Stack, Input as Input$1 } from '@mantine/core';
-import { c as Input, S as Select } from './index-ba777d71.js';
+import { c as Input, S as Select } from './index-f0ac2d9c.js';
 import '@mantine/dates';
-import { c as CDN_ADDRESS } from './index-62e5ab51.js';
-import { L as LOCALE } from './index-7dea2608.js';
-import './index-61c6842a.js';
-import './useMantineLocale-deeb986b.js';
-import './index-667832a2.js';
-import './theme-03d89802.js';
-import { u as useTranslations } from './useTranslations-3a5b70f3.js';
+import { c as CDN_ADDRESS } from './index-d73390b2.js';
+import { L as LOCALE } from './index-3e04178f.js';
+import './index-a2cdc317.js';
+import './useMantineLocale-6a509174.js';
+import './index-7aff3435.js';
+import './theme-7c208c30.js';
+import { u as useTranslations } from './useTranslations-3ea1638d.js';
 import '@mantine/hooks';
-import './utils-21e35369.js';
-import { M as MAPPED_LOCALE } from './utils-50c254f2.js';
+import './utils-72d20560.js';
+import { M as MAPPED_LOCALE } from './utils-25cc1cc1.js';
 
 const generateGetAddressDetail = (locale) => {
     return `${CDN_ADDRESS}/cities-data-${MAPPED_LOCALE[locale]}.json`;

package/build/esm/{index-7d1d6c79.js → index-db0a1f04.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-5160724c.js';
+import { _ as __rest } from './tslib.es6-2c23b4a0.js';
 import React__default, { useMemo } from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { S as StyledInput, L as Label, b as StyledDisplayIcon, d as StyledActionIcon, e as StyledErrorLabel } from './constants-0904669a.js';
+import { S as StyledInput, L as Label, b as StyledDisplayIcon, d as StyledActionIcon, e as StyledErrorLabel } from './constants-e3536cb0.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'

package/build/esm/{index-ba777d71.js → index-f0ac2d9c.js}

@@ -1,20 +1,20 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-5160724c.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-2c23b4a0.js';
 import * as React from 'react';
 import React__default, { useState, forwardRef, useEffect, Component, useCallback, createContext, useContext, useRef, useMemo, useImperativeHandle } from 'react';
 import { ArrowDown, ArrowLeft, ArrowRight } from '@hhgtech/icons/other';
 import { em, createStyles, useMantineTheme, Button as Button$1, Autocomplete, Image, ActionIcon, Select as Select$1, AspectRatio as AspectRatio$1, Box, Breadcrumbs as Breadcrumbs$1, Textarea, Accordion as Accordion$1, Indicator, Avatar as Avatar$1, FileInput as FileInput$1, createEmotionCache, NumberInput as NumberInput$1, PasswordInput as PasswordInput$1, TextInput, Input as Input$1, Checkbox as Checkbox$1, Slider, Radio as Radio$1, Flex, rem, Tabs as Tabs$1, ScrollArea, Popover as Popover$1, Chip } from '@mantine/core';
 import { useUncontrolled, useDebouncedValue, useViewportSize, useResizeObserver, useDisclosure, useClickOutside } from '@mantine/hooks';
-import { C as CommonGAssets } from './index-61c6842a.js';
-import { B as Breakpoints } from './utils-21e35369.js';
+import { C as CommonGAssets } from './index-a2cdc317.js';
+import { B as Breakpoints } from './utils-72d20560.js';
 import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text } from './index-667832a2.js';
-import { L as LOCALE } from './index-7dea2608.js';
-import { t as theme } from './theme-03d89802.js';
-import { G as GlobalHeadingStyle } from './useMantineLocale-deeb986b.js';
-import { I as ISO_FORMAT, s as siteOptions } from './index-62e5ab51.js';
+import { T as Text } from './index-7aff3435.js';
+import { L as LOCALE } from './index-3e04178f.js';
+import { t as theme } from './theme-7c208c30.js';
+import { G as GlobalHeadingStyle } from './useMantineLocale-6a509174.js';
+import { I as ISO_FORMAT, s as siteOptions } from './index-d73390b2.js';
 import cn from 'classnames';
-import { a as useUniqueId } from './useUniqueId-7834dc19.js';
+import { a as useUniqueId } from './useUniqueId-ce0a21e6.js';
 import { Check, Plus } from '@hhgtech/icons/core';
 
 const GlobalButtonStyle = {

package/build/esm/{index-48d75d5b.js → index-f55cc5a7.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-5160724c.js';
+import { _ as __rest } from './tslib.es6-2c23b4a0.js';
 import React__default from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { T as Text } from './index-667832a2.js';
+import { T as Text } from './index-7aff3435.js';
 
 /**
  * @deprecated Consider to use import { Title } from '@mantine/core'