@hhgtech/hhg-components 1.29.349 → 1.29.351-beta-1

package/build/{index-e79b74ad.js → index-62548512.js}

@@ -1,27 +1,27 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-400729ae.js');
+var tslib_es6 = require('./tslib.es6-ba92c8a7.js');
 var React = require('react');
 var core = require('@mantine/core');
 var form = require('@mantine/form');
-var useHealthToolCache = require('./useHealthToolCache-6c22500d.js');
-var index = require('./index-2ec2e22f.js');
-var constants$1 = require('./constants-adcd504a.js');
-var index$2 = require('./index-78c6c6cf.js');
+var useHealthToolCache = require('./useHealthToolCache-68e6225b.js');
+var index = require('./index-7d793ec4.js');
+var constants$1 = require('./constants-85011c6d.js');
+var index$2 = require('./index-f91d4f9b.js');
 require('@mantine/dates');
-require('./index-54096852.js');
-require('./index-e1a39c0f.js');
-require('./index-d49e78ee.js');
-require('./useMantineLocale-5e25dbd7.js');
-require('./index-5ffb9c80.js');
-require('./index-92c78315.js');
-require('./index.styles-f3cba150.js');
+require('./index-faf96499.js');
+require('./index-05e6202a.js');
+require('./index-e596adb8.js');
+require('./useMantineLocale-681887a6.js');
+require('./index-dab1cb47.js');
+require('./index-bf4b5ae2.js');
+require('./index.styles-8510d50e.js');
 require('@mantine/hooks');
-require('./utils-0b96a051.js');
-require('./other-55a9988c.js');
-require('./index-d1a1f50a.js');
-var index$1 = require('./index-239a44cd.js');
-var constants = require('./constants-a0dcf322.js');
+require('./utils-b20c27f3.js');
+require('./other-2bd39cad.js');
+require('./index-eab1da9a.js');
+var index$1 = require('./index-3c1ebd51.js');
+var constants = require('./constants-62df9928.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-86fb82cb.js → index-69e6de3a.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-400729ae.js');
+var tslib_es6 = require('./tslib.es6-ba92c8a7.js');
 var React = require('react');
 var miscTheme = require('./miscTheme.js');
-var WhatsApp = require('./WhatsApp-11a5928c.js');
-var Spinner = require('./Spinner-29efc69e.js');
+var WhatsApp = require('./WhatsApp-e36fa113.js');
+var Spinner = require('./Spinner-b1260331.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-d3eee893.js → index-70de7321.js}

@@ -1,23 +1,23 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-400729ae.js');
+var tslib_es6 = require('./tslib.es6-ba92c8a7.js');
 var React = require('react');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
-var index$2 = require('./index-78c6c6cf.js');
+var index$2 = require('./index-f91d4f9b.js');
 require('@mantine/dates');
-require('./index-54096852.js');
-require('./index-e1a39c0f.js');
-var index$1 = require('./index-d49e78ee.js');
-require('./useMantineLocale-5e25dbd7.js');
-var index$3 = require('./index-5ffb9c80.js');
-require('./index-92c78315.js');
-require('./index.styles-f3cba150.js');
-var index = require('./index-2ec2e22f.js');
+require('./index-faf96499.js');
+require('./index-05e6202a.js');
+var index$1 = require('./index-e596adb8.js');
+require('./useMantineLocale-681887a6.js');
+var index$3 = require('./index-dab1cb47.js');
+require('./index-bf4b5ae2.js');
+require('./index.styles-8510d50e.js');
+var index = require('./index-7d793ec4.js');
 require('@mantine/hooks');
-require('./utils-0b96a051.js');
-require('./other-55a9988c.js');
-require('./index-d1a1f50a.js');
+require('./utils-b20c27f3.js');
+require('./other-2bd39cad.js');
+require('./index-eab1da9a.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-e785998a.js → index-71148417.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var styled = require('@emotion/styled');
-var utils = require('./utils-0b96a051.js');
+var utils = require('./utils-b20c27f3.js');
 var miscTheme = require('./miscTheme.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-10563d2d.js → index-72671071.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-400729ae.js');
+var tslib_es6 = require('./tslib.es6-ba92c8a7.js');
 var React = require('react');
 var core = require('@mantine/core');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var utils = require('./utils-0b96a051.js');
+var utils = require('./utils-b20c27f3.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-ede81ff3.js → index-761f2bbb.js}

@@ -1,34 +1,36 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-400729ae.js');
+var tslib_es6 = require('./tslib.es6-ba92c8a7.js');
 var React = require('react');
-var index$6 = require('./index-69e5e1b3.js');
-var index$3 = require('./index-ca0aaa30.js');
-var index = require('./index-2ec2e22f.js');
+var index$7 = require('./index-f01067ba.js');
+var index$3 = require('./index-f5477e08.js');
+var index = require('./index-7d793ec4.js');
 var innertext = require('innertext');
-var index$1 = require('./index-d586f960.js');
-var index$2 = require('./index-d49e78ee.js');
-var constants = require('./constants-adcd504a.js');
+var index$1 = require('./index-0a07827e.js');
+var index$2 = require('./index-e596adb8.js');
+var constants = require('./constants-85011c6d.js');
 var useTogetherAuthRequiredAction = require('./useTogetherAuthRequiredAction.js');
-var togetherComponentGlobalContext = require('./utils-cfd7bb44.js');
-var treePopoverMenu = require('./treePopoverMenu-6493d54c.js');
+var togetherComponentGlobalContext = require('./utils-0ad9aa89.js');
+var treePopoverMenu = require('./treePopoverMenu-e057488c.js');
 var styled = require('@emotion/styled');
-var utils = require('./utils-0b96a051.js');
+var utils = require('./utils-b20c27f3.js');
 var miscTheme = require('./miscTheme.js');
-var dataTransform = require('./dataTransform-e1b2da85.js');
+var dataTransform = require('./dataTransform-69f7d427.js');
 var togetherApiPaths = require('./togetherApiPaths.js');
-var index$8 = require('./index-293892eb.js');
-var togetherMoleculesCardAuthor = require('./index-de872eb4.js');
-var togetherMoleculesProfileDetail = require('./index-f0964133.js');
-var togetherMoleculesPostImagePreview = require('./index-4c3d9fab.js');
-var index$7 = require('./index-affa5696.js');
-require('./index-54096852.js');
+var index$9 = require('./index-ce7e00ca.js');
+var togetherMoleculesCardAuthor = require('./index-136c16c8.js');
+var togetherMoleculesProfileDetail = require('./index-79d2fc4e.js');
+var togetherMoleculesPostImagePreview = require('./index-9462f653.js');
+var index$a = require('./index-8e28098d.js');
+var index$8 = require('./index-fee7b6c8.js');
+require('./index-faf96499.js');
 var core$1 = require('@hhgtech/icons/core');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
-var index$5 = require('./index-10563d2d.js');
-var index$4 = require('./index-5ffb9c80.js');
-var normalizeLink = require('./normalizeLink-7ccd3c22.js');
+var index$6 = require('./index-72671071.js');
+var index$4 = require('./index-dab1cb47.js');
+var index$5 = require('./index-cd7f4e33.js');
+var normalizeLink = require('./normalizeLink-11adaff0.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -731,7 +733,7 @@ const SourceList = (_a) => {
             React__default["default"].createElement(index$4.Text, { size: "s3", as: "span", dangerouslySetInnerHTML: {
                     __html: t('cardReply.disclaimer'),
                 } }))),
-        !hideSourceList ? (loading ? (React__default["default"].createElement(togetherMoleculesCardAuthor.Loading, null)) : data.length > 0 || editMode ? (React__default["default"].createElement(StyledContainer$1, null,
+        !hideSourceList ? (loading ? (React__default["default"].createElement(index$5.Loading, null)) : data.length > 0 || editMode ? (React__default["default"].createElement(StyledContainer$1, null,
             React__default["default"].createElement(core.Accordion, { defaultValue: !collapseSource && 'accordion', styles: {
                     control: {
                         borderRadius: 'inherit',
@@ -770,7 +772,7 @@ const SourceList = (_a) => {
                         React__default["default"].createElement(StyledListItems$1, null,
                             (data || []).map((i, idx) => (React__default["default"].createElement(StyledSourceItemWrapper, { key: String(idx) },
                                 typeof i === 'object' ? (React__default["default"].createElement(SourceItem, Object.assign({}, i))) : (React__default["default"].createElement(StyledInputWrapper, null,
-                                    React__default["default"].createElement(index$5.Input, { style: { width: '100%' }, name: "source-list", value: i || '', size: "sm", onChange: (v) => {
+                                    React__default["default"].createElement(index$6.Input, { style: { width: '100%' }, name: "source-list", value: i || '', size: "sm", onChange: (v) => {
                                             setListUrl((old) => {
                                                 const tmp = [...old];
                                                 tmp[idx] = v;
@@ -782,8 +784,8 @@ const SourceList = (_a) => {
                                                 return tmp;
                                             });
                                         } }))),
-                                editMode && (React__default["default"].createElement(index$6.Button, { size: "md", color: "transparent", icon: React__default["default"].createElement(other.Trash, null), onClick: () => handleRemoveItem(idx) }))))),
-                            editMode && (React__default["default"].createElement(index$6.Button, { className: "add-link", color: "transparent", size: "md", icon: React__default["default"].createElement(core$1.Plus, { color: miscTheme.theme.colors.primaryBase, size: 18 }), onClick: () => {
+                                editMode && (React__default["default"].createElement(index$7.Button, { size: "md", color: "transparent", icon: React__default["default"].createElement(other.Trash, null), onClick: () => handleRemoveItem(idx) }))))),
+                            editMode && (React__default["default"].createElement(index$7.Button, { className: "add-link", color: "transparent", size: "md", icon: React__default["default"].createElement(core$1.Plus, { color: miscTheme.theme.colors.primaryBase, size: 18 }), onClick: () => {
                                     setListUrl((old) => [...old, '']);
                                     setData((old) => [...old, '']);
                                 } }, "Add source")))))))) : (React__default["default"].createElement(RecommentCategories, { categories: categories }))) : null));
@@ -997,7 +999,7 @@ const VerifiedTag = ({ userId, avatar, name, role, title, className, }) => {
     const { t } = index.useTranslations();
     const [openPopup, setOpenPopup] = React.useState(false);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(index$6.Button, { className: `${styles.button} ${className}`, color: "success", size: "xs", onClick: () => setOpenPopup(true), style: {
+        React__default["default"].createElement(index$7.Button, { className: `${styles.button} ${className}`, color: "success", size: "xs", onClick: () => setOpenPopup(true), style: {
                 padding: '5px 8px',
                 marginBottom: '12px',
                 borderRadius: '4px',
@@ -1131,7 +1133,7 @@ const CardReply = ({ className, style, comment: CommentProps, type = 'comment',
             _joinTopicIds: (_f = post === null || post === void 0 ? void 0 : post.topics) === null || _f === void 0 ? void 0 : _f.map((t) => t.id),
         } },
         React__default["default"].createElement(StyledCardPost, { className: className, style: style, "data-is-reply": !!level, "data-is-marrybaby": isMarryBaby, "data-has-booking": hasQuickBooking },
-            type === 'reply' && React__default["default"].createElement(index$7.Divider, { className: "top-divider", type: "solid" }),
+            type === 'reply' && React__default["default"].createElement(index$8.Divider, { className: "top-divider", type: "solid" }),
             React__default["default"].createElement("div", { style: { padding: '16px 16px 0' } },
                 React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor, Object.assign({ avatar: avatar, name: name, username: username, timeText: post === null || post === void 0 ? void 0 : post.createdTime, community: post === null || post === void 0 ? void 0 : post.community, 
                     // miniIcon="./svg/icon-tag.svg"
@@ -1146,7 +1148,7 @@ const CardReply = ({ className, style, comment: CommentProps, type = 'comment',
             images && images.length > 0 ? (React__default["default"].createElement("div", { key: "image-preview", className: "image-preview-wrapper", "data-is-reply": true },
                 React__default["default"].createElement(togetherMoleculesPostImagePreview.PostImagePreview, { images: images, authorName: author === null || author === void 0 ? void 0 : author.username }))) : null,
             (!images || images.length === 0) && link ? (React__default["default"].createElement("div", { key: "link-preview", className: "link-preview-wrapper", "data-is-reply": true },
-                React__default["default"].createElement(index$8.CardLink, { url: link }))) : null,
+                React__default["default"].createElement(index$9.CardLink, { url: link }))) : null,
             type !== 'most-engaging' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
                 isChatbotAuthor && (React__default["default"].createElement(StyledSourceList, { listUrl: comment === null || comment === void 0 ? void 0 : comment.source, categorySlug: comment === null || comment === void 0 ? void 0 : comment.categorySlug })),
                 React__default["default"].createElement(treePopoverMenu.CardReactions, { type: treePopoverMenu.CardReactionType.reply, loveCount: countLikes, replyCount: mergeCountReplies, className: "post-reaction", liked: liked, isReplied: isCommented, hideCommentIcon: type === 'reply' || isChatbotAuthor, hasShare: false, onCommentClick: () => authActionWrapper(() => setShowInputComment((v) => !v)), onCommentCountClick: () => authActionWrapper(() => {
@@ -1180,8 +1182,8 @@ const CardReply = ({ className, style, comment: CommentProps, type = 'comment',
                             });
                         }, handleMakeAppointment: handleMakeAppointment, hasQuickBookingEnable: hasQuickBookingEnable }))),
                     mergeCountReplies > maxRepliesShow && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                        React__default["default"].createElement(index$7.Divider, { className: "top-divider", type: "solid" }),
-                        React__default["default"].createElement(index$6.Button, { className: "more-cmt", size: "lg", color: "ghost", onClick: () => setMaxRepliesShow((m) => m + COMMENT_LIMIT) },
+                        React__default["default"].createElement(index$8.Divider, { className: "top-divider", type: "solid" }),
+                        React__default["default"].createElement(index$7.Button, { className: "more-cmt", size: "lg", color: "ghost", onClick: () => setMaxRepliesShow((m) => m + COMMENT_LIMIT) },
                             t('comment.seeMoreReplies', {
                                 count: mergeCountReplies - maxRepliesShow,
                             }),
@@ -1312,11 +1314,11 @@ const CardPost = ({ className, style, hideViewMoreComment, showMostEngaging, onC
             React__default["default"].createElement("span", null),
             React__default["default"].createElement("div", { key: "tag-topic" }, topics && topics.length > 0 ? (React__default["default"].createElement(treePopoverMenu.TagTopic, { topics: topics, className: "post-topics" })) : null),
             React__default["default"].createElement("div", { key: "social-preview" }, (post === null || post === void 0 ? void 0 : post.introUrl) ? (React__default["default"].createElement("div", { className: `social-preview-wrapper ${!!(photos === null || photos === void 0 ? void 0 : photos.length) ? 'has-image' : ''}` },
-                React__default["default"].createElement(index$1.SocialLinkPreview, { url: post.introUrl, image: post.bannerImage }))) : null),
+                React__default["default"].createElement(index$a.SocialLinkPreview, { url: post.introUrl, image: post.bannerImage }))) : null),
             React__default["default"].createElement("div", { key: "image-preview" }, !!(photos === null || photos === void 0 ? void 0 : photos.length) ? (React__default["default"].createElement("div", { className: "image-preview-wrapper" },
                 React__default["default"].createElement(togetherMoleculesPostImagePreview.PostImagePreview, { images: photos, authorName: author === null || author === void 0 ? void 0 : author.name, isSensitive: Boolean(post === null || post === void 0 ? void 0 : post.isSensitive) }))) : null),
             React__default["default"].createElement("div", { key: "link-preview" }, !(post === null || post === void 0 ? void 0 : post.introUrl) && !(photos === null || photos === void 0 ? void 0 : photos.length) && (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.url) ? (React__default["default"].createElement("div", { className: "link-preview-wrapper" },
-                React__default["default"].createElement(index$8.CardLink, { title: previewUrl.title, url: previewUrl.url, image: previewUrl.image }))) : null),
+                React__default["default"].createElement(index$9.CardLink, { title: previewUrl.title, url: previewUrl.url, image: previewUrl.image }))) : null),
             React__default["default"].createElement(treePopoverMenu.CardReactions, { isMarryBaby: isMarryBaby, type: treePopoverMenu.CardReactionType.post, loveCount: likesCount, replyCount: commentsCount, className: `post-reaction ${(photos === null || photos === void 0 ? void 0 : photos.length) || (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.url) ? 'hide-top-border' : ''}`, liked: isLikeLoading ? !liked : liked, isReplied: commented, isSaved: (post === null || post === void 0 ? void 0 : post.bookmarked) || false, onCommentClick: () => authActionWrapper(() => {
                     onCommentClick ? onCommentClick() : setShowInputComment((v) => !v);
                 }), onCommentCountClick: () => {
@@ -1436,7 +1438,7 @@ const CardPost = ({ className, style, hideViewMoreComment, showMostEngaging, onC
                 React__default["default"].createElement(CardReply, { hasQuickBookingEnable: hasQuickBookingEnable, handleMakeAppointment: handleMakeAppointment, comment: mostEngagingComment, post: post, onDeleteComment: () => {
                         onDeleteComment && onDeleteComment(mostEngagingComment);
                     }, className: "most-engaging-comment", type: "most-engaging", key: mostEngagingComment.id, cardAuthorProps: cardAuthorProps }),
-                commentsCount > 1 && !hideViewMoreComment && (React__default["default"].createElement(index$6.Button, { className: "see-more-comments", color: "ghost", size: "md" }, t('comment.seeMoreComments', {
+                commentsCount > 1 && !hideViewMoreComment && (React__default["default"].createElement(index$7.Button, { className: "see-more-comments", color: "ghost", size: "md" }, t('comment.seeMoreComments', {
                     count: commentsCount - 1,
                 }))))) : null,
             InlineCommentsComponent)));

package/build/{index-f0964133.js → index-79d2fc4e.js}

@@ -1,37 +1,37 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-400729ae.js');
+var tslib_es6 = require('./tslib.es6-ba92c8a7.js');
 var React = require('react');
 var dayjs = require('dayjs');
-var index$8 = require('./index-d1a1f50a.js');
-var index$6 = require('./index-0c666eec.js');
-var dataTransform = require('./dataTransform-e1b2da85.js');
+var index$8 = require('./index-eab1da9a.js');
+var index$6 = require('./index-56485788.js');
+var dataTransform = require('./dataTransform-69f7d427.js');
 var togetherApiPaths = require('./togetherApiPaths.js');
-var togetherComponentGlobalContext = require('./utils-cfd7bb44.js');
+var togetherComponentGlobalContext = require('./utils-0ad9aa89.js');
 var core$1 = require('@hhgtech/icons/core');
 var core = require('@mantine/core');
-var index$1 = require('./index-d49e78ee.js');
-var useScreenSize = require('./useScreenSize-23da1322.js');
-var togetherMoleculesCardAuthor = require('./index-de872eb4.js');
-var index$2 = require('./index-e1a39c0f.js');
-var index = require('./index-2ec2e22f.js');
+var index$1 = require('./index-e596adb8.js');
+var useScreenSize = require('./useScreenSize-e44ff92b.js');
+var togetherMoleculesCardAuthor = require('./index-136c16c8.js');
+var index$2 = require('./index-05e6202a.js');
+var index = require('./index-7d793ec4.js');
 var miscTheme = require('./miscTheme.js');
 var other = require('@hhgtech/icons/other');
-var index$3 = require('./index-78c6c6cf.js');
+var index$3 = require('./index-f91d4f9b.js');
 require('@mantine/dates');
-require('./index-54096852.js');
-require('./useMantineLocale-5e25dbd7.js');
-var index$7 = require('./index-5ffb9c80.js');
-var index$4 = require('./index-92c78315.js');
-require('./index.styles-f3cba150.js');
+require('./index-faf96499.js');
+require('./useMantineLocale-681887a6.js');
+var index$7 = require('./index-dab1cb47.js');
+var index$4 = require('./index-bf4b5ae2.js');
+require('./index.styles-8510d50e.js');
 require('@mantine/hooks');
-require('./utils-0b96a051.js');
-require('./other-55a9988c.js');
+require('./utils-b20c27f3.js');
+require('./other-2bd39cad.js');
 var styled = require('@emotion/styled');
 var useTogetherAuthRequiredAction = require('./useTogetherAuthRequiredAction.js');
-var post = require('./post-68372a5c.js');
-var index$5 = require('./index-69e5e1b3.js');
-require('./translationsContext-f04b6541.js');
+var post = require('./post-55130c86.js');
+var index$5 = require('./index-f01067ba.js');
+require('./translationsContext-239790ff.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-c2b6c6df.js → index-7a3a5929.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-400729ae.js');
+var tslib_es6 = require('./tslib.es6-ba92c8a7.js');
 var React = require('react');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');

package/build/{index-2ec2e22f.js → index-7d793ec4.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var translationsContext = require('./translationsContext-f04b6541.js');
+var translationsContext = require('./translationsContext-239790ff.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/build/{index-24f74a6c.js → index-82baad1d.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-400729ae.js');
+var tslib_es6 = require('./tslib.es6-ba92c8a7.js');
 var React = require('react');
 var core = require('@mantine/core');
 var miscTheme = require('./miscTheme.js');

package/build/{index-684d0882.js → index-8e0ed6f2.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-400729ae.js');
+var tslib_es6 = require('./tslib.es6-ba92c8a7.js');
 var React = require('react');
-var togetherComponentGlobalContext = require('./utils-cfd7bb44.js');
+var togetherComponentGlobalContext = require('./utils-0ad9aa89.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
 

package/build/index-8e28098d.js

@@ -0,0 +1,232 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-ba92c8a7.js');
+var React = require('react');
+var core = require('@mantine/core');
+var useScreenSize = require('./useScreenSize-e44ff92b.js');
+var togetherComponentGlobalContext = require('./utils-0ad9aa89.js');
+var styled = require('@emotion/styled');
+var togetherApiPaths = require('./togetherApiPaths.js');
+var constants = require('./constants-85011c6d.js');
+var post = require('./post-55130c86.js');
+var index = require('./index-cd7f4e33.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledSocialLinkPreview = styled__default["default"].div `
+  .link-info-container {
+    padding: 0.5rem 1rem;
+    background: ${(props) => props.color || '#f4faff'};
+  }
+  .link-image-wrapper {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding-top: 56.25%;
+    &.fetching {
+      background: lightgray;
+    }
+    .loading-spinner {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .link-image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+  a {
+    text-decoration: none;
+  }
+  &[data-is-marrybaby='true'] {
+    overflow: hidden;
+    border-radius: 1rem;
+  }
+`;
+
+const useExternalScript = ({ url, onLoad, onError }) => {
+    const [state, setState] = React.useState(url ? 'loading' : 'idle');
+    React.useEffect(() => {
+        if (!url) {
+            setState('idle');
+            return;
+        }
+        let script = document.querySelector(`script[src="${url}"]`);
+        const handleLoadScript = () => {
+            setState('ready');
+            onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+        };
+        const handleErrorScript = () => {
+            setState('error');
+            onError === null || onError === void 0 ? void 0 : onError();
+        };
+        if (!script) {
+            script = document.createElement('script');
+            script.type = 'application/javascript';
+            script.src = url;
+            script.async = true;
+            document.body.appendChild(script);
+            script.addEventListener('load', handleLoadScript);
+            script.addEventListener('error', handleErrorScript);
+        }
+        script.addEventListener('load', handleLoadScript);
+        script.addEventListener('error', handleErrorScript);
+        return () => {
+            script.removeEventListener('load', handleLoadScript);
+            script.removeEventListener('error', handleErrorScript);
+        };
+    }, [url]);
+    return state;
+};
+
+const YoutubePlyr = ({ id, autoplay }) => {
+    const ref = React.useRef(null);
+    const state = useExternalScript({ url: 'https://cdn.plyr.io/3.7.8/plyr.js' });
+    React.useEffect(() => {
+        if (!document.getElementById('hhg-plyr-player')) {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.type = 'text/css';
+            link.href = 'https://cdn.plyr.io/3.7.8/plyr.css';
+            link.id = 'hhg-plyr-player';
+            document.head.appendChild(link);
+        }
+        if (state === 'ready' || typeof Plyr !== 'undefined') {
+            new Plyr(ref.current.querySelector('[data-id="player"]'), {
+                autoplay,
+                muted: true,
+            });
+        }
+    }, [state]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(core.Box, { ref: ref, sx: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: '#000',
+                '&, > div': {
+                    width: '100%',
+                    height: '100%',
+                },
+            } },
+            React__default["default"].createElement("div", { "data-id": "player" },
+                React__default["default"].createElement("iframe", { width: "100%", height: "100%", src: `https://www.youtube.com/embed/${id}?&mute=1&enablejsapi=1&rel=0`, allowFullScreen: true, frameBorder: "0" })))));
+};
+
+const SocialLinkPreview = ({ url, image, className, style, baseUrl = '', autoPlay = true, onPushStatus, }) => {
+    const { data: { locale }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const [previewData, setPreviewData] = React.useState(null);
+    React.useEffect(() => {
+        (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+            if (image)
+                return;
+            if (!url)
+                return setPreviewData(null);
+            setPreviewData((_data) => (Object.assign(Object.assign({}, _data), { isFetching: true })));
+            // fetch('./api/fetch-meta?url=' + encodeURIComponent(url))
+            //   .then((res) => res.json())
+            //   .then((res) =>
+            //     setPreviewData({
+            //       url,
+            //       image: res?.image || res?.logo,
+            //     }),
+            //   )
+            togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.FETCH_PREVIEW, {
+                _locale: locale,
+            }, undefined, baseUrl), 'POST', {
+                data: {
+                    link: url,
+                },
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }, !!baseUrl)
+                .then((res) => {
+                var _a, _b;
+                setPreviewData({
+                    url,
+                    image: ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.image) || ((_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.logo),
+                });
+            })
+                .catch(() => {
+                setPreviewData(null);
+            });
+        }))();
+    }, [url, image]);
+    const displayImage = image || (previewData === null || previewData === void 0 ? void 0 : previewData.image);
+    const displayUrl = (previewData === null || previewData === void 0 ? void 0 : previewData.url) || url;
+    const youtubeVidId = React.useMemo(() => {
+        return post.youtubeVidIdGetter(displayUrl);
+    }, [displayUrl]);
+    const facebookVidId = React.useMemo(() => {
+        return (displayUrl.includes('facebook.com') || displayUrl.includes('fb.watch'));
+    }, [displayUrl]);
+    const responsiveWidth = React.useRef(0);
+    const responsiveHeight = React.useRef(0);
+    const [forceRerenderFB, setForceRerenderFB] = React.useState(false);
+    // FACEBOOK Video is not responsive for desktop browser
+    // => hack: set size to same as container, if size change too large, re-render facebook iframe with new config
+    React.useEffect(() => {
+        const handleResize = () => {
+            var _a;
+            const containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            let toChangeSize = false;
+            if (containerRect &&
+                (!responsiveWidth.current ||
+                    Math.abs((responsiveWidth.current - containerRect.width) /
+                        (containerRect === null || containerRect === void 0 ? void 0 : containerRect.width)) > 0.2)) {
+                responsiveWidth.current = Math.floor(containerRect.width);
+                toChangeSize = true;
+            }
+            if (containerRect &&
+                (!responsiveHeight.current ||
+                    Math.abs((responsiveHeight.current - containerRect.height) /
+                        (containerRect === null || containerRect === void 0 ? void 0 : containerRect.height)) > 0.2)) {
+                responsiveHeight.current = Math.floor(containerRect.height);
+                toChangeSize = true;
+            }
+            if (toChangeSize) {
+                setForceRerenderFB((v) => !v);
+            }
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize, {
+            passive: true,
+        });
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    React.useEffect(() => {
+        if ((previewData === null || previewData === void 0 ? void 0 : previewData.image) && (previewData === null || previewData === void 0 ? void 0 : previewData.url)) {
+            onPushStatus === null || onPushStatus === void 0 ? void 0 : onPushStatus(true);
+        }
+    }, [previewData]);
+    const containerRef = React.useRef(null);
+    const _theme = core.useMantineTheme();
+    return (React__default["default"].createElement(StyledSocialLinkPreview, { className: `${className} no-replace-click`, style: style, ref: containerRef, color: _theme.colors[_theme.primaryColor][0] }, !image && (youtubeVidId || facebookVidId) ? (React__default["default"].createElement("div", { className: "link-image-wrapper" }, youtubeVidId ? (React__default["default"].createElement(YoutubePlyr, { id: youtubeVidId, autoplay: autoPlay })) : facebookVidId ? (React__default["default"].createElement("iframe", { key: String(forceRerenderFB), src: `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(displayUrl)}&autoplay=${autoPlay ? 1 : 0}&show_text=false&t=0&width=${responsiveWidth.current}&height=${responsiveHeight.current}`, style: {
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            border: 'none',
+            overflow: 'hidden',
+            height: responsiveHeight.current,
+            width: responsiveWidth.current,
+            transform: 'translate(-50%, -50%)',
+        }, scrolling: "no", frameBorder: "0", allowFullScreen: true, allow: "autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share", loading: "lazy" })) : null)) : (React__default["default"].createElement("a", { href: displayUrl, target: "_blank", rel: "noreferrer" },
+        React__default["default"].createElement("div", { className: `link-image-wrapper ${(previewData === null || previewData === void 0 ? void 0 : previewData.isFetching) ? 'fetching' : ''}` }, (previewData === null || previewData === void 0 ? void 0 : previewData.isFetching) ? (React__default["default"].createElement(index.Loading, { className: "loading-spinner" })) : (React__default["default"].createElement(useScreenSize.ImageWrap, { className: "link-image", src: displayImage || constants.DEFAULT_IMG, backupSrc: constants.DEFAULT_IMG, alt: displayUrl })))))));
+};
+
+exports.SocialLinkPreview = SocialLinkPreview;

package/build/{index-923ca659.js → index-9022ed3c.js}

@@ -1,14 +1,14 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-5ffb9c80.js');
+var index = require('./index-dab1cb47.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var utils = require('./utils-0b96a051.js');
-var index$1 = require('./index-78c6c6cf.js');
-var index$2 = require('./index-293b14b4.js');
+var utils = require('./utils-b20c27f3.js');
+var index$1 = require('./index-f91d4f9b.js');
+var index$2 = require('./index-5e7965b6.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
-var tslib_es6 = require('./tslib.es6-400729ae.js');
+var tslib_es6 = require('./tslib.es6-ba92c8a7.js');
 var flattenChildren = require('react-keyed-flatten-children');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }