@hhgtech/hhg-components 1.29.79 → 1.29.81

package/build/esm/index-703205e3.js

@@ -0,0 +1,54 @@
+import { _ as __rest } from './tslib.es6-761239c7.js';
+import React__default, { useContext, useState } from 'react';
+import { T as TogetherComponentGlobalContext } from './utils-d5a0b58f.js';
+import styled from '@emotion/styled';
+import { t as theme } from './theme-f18c2351.js';
+
+const StyledUserAvatar = styled.div `
+  width: ${(props) => props.size || 40}px;
+  height: ${(props) => props.size || 40}px;
+  flex-shrink: 0;
+  cursor: pointer;
+
+  img {
+    border-radius: 50%;
+  }
+
+  .avatar {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .avatar-default {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${theme.colors.secondaryBase};
+    border-radius: 50%;
+    color: white;
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 1;
+  }
+
+  &[data-is-marrybaby='true'] {
+    .avatar-default {
+      background-color: ${theme.mbColors.pink};
+    }
+  }
+`;
+
+const UserAvatar = (_a) => {
+    var { className, isMarryBaby: isMarryBabyProp, style, avatar, username, size } = _a, rest = __rest(_a, ["className", "isMarryBaby", "style", "avatar", "username", "size"]);
+    const { data: { env: { isMarryBaby: isMarryBabyContext }, }, } = useContext(TogetherComponentGlobalContext);
+    const isMarryBaby = typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext;
+    const [tempAvatar, setTempAvatar] = useState(false);
+    return (React__default.createElement(StyledUserAvatar, Object.assign({ "data-is-marrybaby": isMarryBaby, className: className, style: style, size: size }, rest), avatar && !tempAvatar ? (React__default.createElement("img", { loading: "lazy", src: avatar, className: `avatar`, alt: "avatar", onError: () => {
+            // e.currentTarget.onerror = null
+            if (!tempAvatar)
+                setTempAvatar(true);
+        } })) : (React__default.createElement("div", { className: "avatar avatar-default" }, username && (username === null || username === void 0 ? void 0 : username.length) > 0 ? username[0].toUpperCase() : 'A'))));
+};
+
+export { UserAvatar as U };

package/build/esm/{index-7c6316a6.js → index-73301602.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-efad16cf.js';
+import { _ as __rest } from './tslib.es6-761239c7.js';
 import React__default from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { T as Text } from './index-b2eed677.js';
+import { T as Text } from './index-c200bff6.js';
 
 /**
  * @deprecated Consider to use import { Title } from '@mantine/core'

package/build/esm/index-76d20d3f.js

@@ -0,0 +1,100 @@
+import React__default, { useState } from 'react';
+import { t as theme } from './theme-f18c2351.js';
+import styled from '@emotion/styled';
+import { M as MarryBabyText } from './index-87a2ea8c.js';
+import { T as Text } from './index-7e756cb8.js';
+
+const StyledRadioImageGroup = styled.div `
+  display: flex;
+  width: 100%;
+
+  &[data-direction='vertical'] {
+    flex-direction: column;
+  }
+
+  &[data-direction='horizontal'] {
+    flex-wrap: wrap;
+  }
+`;
+const StyledRadioImageItem = styled.div `
+  display: flex;
+
+  padding: 8px;
+
+  border-radius: ${theme.borderRadius};
+  cursor: pointer;
+
+  & > div {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  &[data-is-mb='false'] {
+    &[data-selected='true'] {
+      border: 1px solid #2d87f3;
+      background: white;
+    }
+    &[data-selected='false'] {
+      border: 1px solid #f2f2f2;
+      box-shadow: 0px 5px 12px rgba(40, 74, 117, 0.08);
+    }
+  }
+
+  &[data-is-mb='true'] {
+    border-radius: 16px;
+    background: white;
+    padding: 16px auto;
+
+    &[data-selected='true'] {
+      border: 1px solid ${theme.mbColors.mint};
+      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.06);
+    }
+    &[data-selected='false'] {
+      border: none;
+    }
+  }
+
+  &[data-disabled='true'] {
+    cursor: auto;
+  }
+
+  .radio-group-item-heading {
+    margin-top: 8px;
+    //height: 48px;
+    text-align: center;
+  }
+
+  .gender-image {
+    width: 70px;
+    height: 70px;
+    &[data-is-mobile='true'] {
+      width: 40px;
+      height: 40px;
+    }
+  }
+`;
+
+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, { type: "bold", color: (value || check) === option.value ? '#2D87F3' : 'black', className: "radio-group-item-heading", size: "label1" }, option.label))))))))));
+};
+
+export { RadioImageGroup as R };

package/build/esm/{index-ec38e886.js → index-780a08de.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-efad16cf.js';
+import { _ as __rest } from './tslib.es6-761239c7.js';
 import React__default from 'react';
 import { Indicator as Indicator$1 } from '@mantine/core';
-import { t as theme } from './theme-eb1b39f6.js';
+import { t as theme } from './theme-f18c2351.js';
 
 const Indicator = (_a) => {
     var { styles, color = theme.colors.red700 } = _a, props = __rest(_a, ["styles", "color"]);

package/build/esm/{index-92fd8661.js → index-78255d6c.js}

@@ -1,5 +1,5 @@
-import { d as domainLocales } from './index-ef96fd13.js';
-import { i as isProduction } from './isProduction-d39b7ab2.js';
+import { d as domainLocales } from './index-bef3c9bd.js';
+import { i as isProduction } from './isProduction-5684a28c.js';
 
 const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n);
 const defaultDomain = 'hellosehat.com';

package/build/esm/{index-9b3bf9da.js → index-7cbe2a10.js}

@@ -1,18 +1,19 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-efad16cf.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-761239c7.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-e2d856fc.js';
+import { c as Input, S as Select } from './index-21eac858.js';
 import '@mantine/dates';
-import { c as CDN_ADDRESS } from './index-ef96fd13.js';
-import { L as LOCALE } from './index-877eed06.js';
-import './index-92fd8661.js';
-import './useMantineLocale-bcfdeb0c.js';
-import './index-b2eed677.js';
-import './theme-eb1b39f6.js';
-import { u as useTranslations } from './useTranslations-b8c49c9b.js';
+import { C as CDN_ADDRESS } from './index-bef3c9bd.js';
+import { L as LOCALE } from './index-e3787b20.js';
+import './index-78255d6c.js';
+import './useMantineLocale-4fb67342.js';
+import './index-c200bff6.js';
+import './index-2b9213cf.js';
+import './theme-f18c2351.js';
+import { u as useTranslations } from './useTranslations-fbf6a6ab.js';
 import '@mantine/hooks';
-import './utils-0d590d5e.js';
-import { M as MAPPED_LOCALE } from './utils-86ef2283.js';
+import './utils-f8761b9d.js';
+import { M as MAPPED_LOCALE } from './utils-cef111b6.js';
 
 const generateGetAddressDetail = (locale) => {
     return `${CDN_ADDRESS}/cities-data-${MAPPED_LOCALE[locale]}.json`;

package/build/esm/{index-5265867b.js → index-7e756cb8.js}

@@ -1,18 +1,19 @@
-import { _ as __rest } from './tslib.es6-efad16cf.js';
+import { _ as __rest } from './tslib.es6-761239c7.js';
 import React__default from 'react';
-import './index-e2d856fc.js';
+import './index-21eac858.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-ef96fd13.js';
-import './index-877eed06.js';
-import './index-92fd8661.js';
-import './useMantineLocale-bcfdeb0c.js';
-import { T as Text$1 } from './index-b2eed677.js';
-import './theme-eb1b39f6.js';
-import './translationsContext-dfb42bf8.js';
+import './index-bef3c9bd.js';
+import './index-e3787b20.js';
+import './index-78255d6c.js';
+import './useMantineLocale-4fb67342.js';
+import { T as Text$1 } from './index-c200bff6.js';
+import './index-2b9213cf.js';
+import './theme-f18c2351.js';
+import './translationsContext-f3d1a7bd.js';
 import 'string-format';
 import '@mantine/hooks';
-import './utils-0d590d5e.js';
+import './utils-f8761b9d.js';
 
 /**
  * @deprecated Consider to use import { Text } from '@hhgtech/hhg-components/mantine'

package/build/esm/{index.styled-eb1001c3.js → index-87a2ea8c.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-efad16cf.js';
+import { _ as __rest } from './tslib.es6-761239c7.js';
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { t as theme } from './theme-eb1b39f6.js';
+import { t as theme } from './theme-f18c2351.js';
 
 const Heading = (_a) => {
     var { type } = _a, elementProps = __rest(_a, ["type"]);
@@ -78,4 +78,22 @@ const StyledText = styled.p `
   }
 `;
 
-export { StyledHeading as S, StyledText as a };
+const MarryBabyHeading = (_a) => {
+    var { type, color, style } = _a, props = __rest(_a, ["type", "color", "style"]);
+    const DATATYPE = {
+        h1: 'headline-1',
+        h2: 'headline-2',
+        h3: 'headline-3',
+        h4: 'headline-4',
+    };
+    return (React__default.createElement(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 = __rest(_a, ["type", "color", "style"]);
+    return (React__default.createElement(StyledText, Object.assign({ "data-type": type, style: Object.assign(Object.assign({}, style), (color && { '--text-color': color })) }, props)));
+};
+
+export { MarryBabyText as M, MarryBabyHeading as a };