@bigbinary/neeto-molecules 3.3.11 → 3.3.13

package/dist/cjs/ShareViaLink.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var React = require('react');
 var neetoCist = require('@bigbinary/neeto-cist');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
 var ExternalLink = require('@bigbinary/neeto-icons/ExternalLink');
 var Button = require('@bigbinary/neetoui/Button');
 var reactI18next = require('react-i18next');
@@ -20,11 +20,11 @@ var Twitter = require('@bigbinary/neeto-icons/Twitter');
 var yup = require('yup');
 var general = require('@bigbinary/neeto-commons-frontend/utils/general');
 var injectCss = require('./inject-css-80a5faa3.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Modal = require('@bigbinary/neetoui/Modal');
 var Input$1 = require('@bigbinary/neetoui/Input');
 var classnames = require('classnames');
 var reactRouterDom = require('react-router-dom');
-require('@babel/runtime/helpers/extends');
 require('@babel/runtime/helpers/defineProperty');
 require('@babel/runtime/helpers/objectWithoutProperties');
 require('@bigbinary/neeto-icons/Copy');
@@ -55,8 +55,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ExternalLink__default = /*#__PURE__*/_interopDefaultLegacy(ExternalLink);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
@@ -159,59 +159,69 @@ var EditURL = function EditURL(_ref) {
     if (prevIsLoadingRef.current && !isLoading) onClose();
     prevIsLoadingRef.current = isLoading;
   }, [isLoading]);
-  return /*#__PURE__*/React__default["default"].createElement(Pane__default["default"], {
+  return /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], {
     isOpen: isOpen,
     onClose: onClose,
     "data-testid": "edit-url-modal",
     initialFocusRef: focusRef,
-    size: "large"
-  }, /*#__PURE__*/React__default["default"].createElement(Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-    lineHeight: "normal",
-    style: "h2",
-    weight: "semibold"
-  }, t("neetoMolecules.shareViaLink.editUrl.title"))), /*#__PURE__*/React__default["default"].createElement(formik.Formik, {
-    enableReinitialize: true,
-    initialValues: {
-      path: (editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.editablePath) || getPathname(url)
-    },
-    validationSchema: PATH_VALIDATION_SCHEMA,
-    onSubmit: function onSubmit(_ref2) {
-      var path = _ref2.path;
-      return handleEdit(path);
-    }
-  }, function (_ref3) {
-    var isSubmitting = _ref3.isSubmitting,
-      dirty = _ref3.dirty;
-    return /*#__PURE__*/React__default["default"].createElement(formik.Form, null, /*#__PURE__*/React__default["default"].createElement(Body, {
-      className: "space-y-6"
-    }, /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
-      className: "no-padding w-full flex-grow-0",
-      "data-testid": "edit-url-input",
-      label: t("neetoMolecules.shareViaLink.editUrl.inputLabel"),
-      maxLength: editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.maxLength,
-      name: "path",
-      ref: focusRef,
-      prefix: truncatePrefix((editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.prefix) || getPrefixFromUrl(url))
-    }), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-      className: "neeto-ui-text-gray-700",
-      lineHeight: "normal",
-      style: "body2"
-    }, t("neetoMolecules.shareViaLink.editUrl.description"))), /*#__PURE__*/React__default["default"].createElement(Footer, {
-      className: "space-x-2"
-    }, /*#__PURE__*/React__default["default"].createElement(ActionBlock__default["default"], {
-      className: "flex items-center space-x-2",
-      cancelButtonProps: {
-        onClick: onClose,
-        disabled: isSubmitting,
-        "data-testid": "edit-url-cancel-button"
+    size: "large",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        lineHeight: "normal",
+        style: "h2",
+        weight: "semibold",
+        children: t("neetoMolecules.shareViaLink.editUrl.title")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(formik.Formik, {
+      enableReinitialize: true,
+      initialValues: {
+        path: (editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.editablePath) || getPathname(url)
       },
-      submitButtonProps: {
-        disabled: isSubmitting || !dirty,
-        loading: isLoading,
-        "data-testid": "edit-url-confirm-button"
+      validationSchema: PATH_VALIDATION_SCHEMA,
+      onSubmit: function onSubmit(_ref2) {
+        var path = _ref2.path;
+        return handleEdit(path);
+      },
+      children: function children(_ref3) {
+        var isSubmitting = _ref3.isSubmitting,
+          dirty = _ref3.dirty;
+        return /*#__PURE__*/jsxRuntime.jsxs(formik.Form, {
+          children: [/*#__PURE__*/jsxRuntime.jsxs(Body, {
+            className: "space-y-6",
+            children: [/*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
+              className: "no-padding w-full flex-grow-0",
+              "data-testid": "edit-url-input",
+              label: t("neetoMolecules.shareViaLink.editUrl.inputLabel"),
+              maxLength: editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.maxLength,
+              name: "path",
+              ref: focusRef,
+              prefix: truncatePrefix((editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.prefix) || getPrefixFromUrl(url))
+            }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+              className: "neeto-ui-text-gray-700",
+              lineHeight: "normal",
+              style: "body2",
+              children: t("neetoMolecules.shareViaLink.editUrl.description")
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsx(Footer, {
+            className: "space-x-2",
+            children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock__default["default"], {
+              className: "flex items-center space-x-2",
+              cancelButtonProps: {
+                onClick: onClose,
+                disabled: isSubmitting,
+                "data-testid": "edit-url-cancel-button"
+              },
+              submitButtonProps: {
+                disabled: isSubmitting || !dirty,
+                loading: isLoading,
+                "data-testid": "edit-url-confirm-button"
+              }
+            })
+          })]
+        });
       }
-    })));
-  }));
+    })]
+  });
 };
 
 var RegenerateURL = function RegenerateURL(_ref) {
@@ -227,39 +237,48 @@ var RegenerateURL = function RegenerateURL(_ref) {
     if (prevIsLoadingRef.current && !isLoading) onClose();
     prevIsLoadingRef.current = isLoading;
   }, [isLoading]);
-  return /*#__PURE__*/React__default["default"].createElement(Modal__default["default"], {
+  return /*#__PURE__*/jsxRuntime.jsxs(Modal__default["default"], {
     isOpen: isOpen,
     onClose: onClose,
-    "data-testid": "regenerate-url-modal"
-  }, /*#__PURE__*/React__default["default"].createElement(Modal__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-    lineHeight: "normal",
-    style: "h2",
-    weight: "semibold"
-  }, t("neetoMolecules.shareViaLink.regenerateUrl.title"))), /*#__PURE__*/React__default["default"].createElement(Modal__default["default"].Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "w-full space-y-6"
-  }, /*#__PURE__*/React__default["default"].createElement(Input__default$1["default"], {
-    disabled: true,
-    label: t("neetoMolecules.shareViaLink.regenerateUrl.inputLabel"),
-    value: url
-  }), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-    className: "neeto-ui-text-gray-700",
-    lineHeight: "normal",
-    style: "body2"
-  }, t("neetoMolecules.shareViaLink.regenerateUrl.description")))), /*#__PURE__*/React__default["default"].createElement(Modal__default["default"].Footer, {
-    className: "space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-    "data-cy": "regenerate-url-confirm-button",
-    "data-testid": "regenerate-url-confirm-button",
-    loading: isLoading,
-    label: t("neetoMolecules.shareViaLink.regenerateUrl.submitButtonLabel"),
-    onClick: handleRegenerate
-  }), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-    "data-cy": "regenerate-url-cancel-button",
-    "data-testid": "regenerate-url-cancel-button",
-    style: "text",
-    label: t("neetoMolecules.shareViaLink.regenerateUrl.cancelButtonLabel"),
-    onClick: onClose
-  })));
+    "data-testid": "regenerate-url-modal",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Modal__default["default"].Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        lineHeight: "normal",
+        style: "h2",
+        weight: "semibold",
+        children: t("neetoMolecules.shareViaLink.regenerateUrl.title")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Modal__default["default"].Body, {
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "w-full space-y-6",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Input__default$1["default"], {
+          disabled: true,
+          label: t("neetoMolecules.shareViaLink.regenerateUrl.inputLabel"),
+          value: url
+        }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          className: "neeto-ui-text-gray-700",
+          lineHeight: "normal",
+          style: "body2",
+          children: t("neetoMolecules.shareViaLink.regenerateUrl.description")
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(Modal__default["default"].Footer, {
+      className: "space-x-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+        "data-cy": "regenerate-url-confirm-button",
+        "data-testid": "regenerate-url-confirm-button",
+        loading: isLoading,
+        label: t("neetoMolecules.shareViaLink.regenerateUrl.submitButtonLabel"),
+        onClick: handleRegenerate
+      }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+        "data-cy": "regenerate-url-cancel-button",
+        "data-testid": "regenerate-url-cancel-button",
+        style: "text",
+        label: t("neetoMolecules.shareViaLink.regenerateUrl.cancelButtonLabel"),
+        onClick: onClose
+      })]
+    })]
+  });
 };
 
 var Link = function Link(_ref) {
@@ -282,73 +301,79 @@ var Link = function Link(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var isDropdownEnabled = enabledOptions.regenerate || enabledOptions.edit;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "space-y-4",
     "data-cy": "link-block",
-    "data-testid": "link-block"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-1"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-rounded-md relative min-w-0 flex-grow truncate border p-2 leading-none",
-    "data-cy": "nui-input-field"
-  }, url), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex w-full flex-shrink-0 items-center gap-1 sm:w-auto"
-  }, /*#__PURE__*/React__default["default"].createElement(CopyToClipboardButton, {
-    "data-cy": "link-copy-button",
-    "data-testid": "link-copy-button",
-    label: t("neetoMolecules.shareViaLink.copyLink"),
-    value: url
-  }), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-    "data-cy": "preview-button",
-    "data-testid": "preview-button",
-    href: previewUrl || url,
-    icon: ExternalLink__default["default"],
-    style: "secondary",
-    target: "_blank",
-    tooltipProps: {
-      content: t("neetoMolecules.shareViaLink.view", {
-        entity: entityName
-      }),
-      position: "top"
-    }
-  }), isDropdownEnabled && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(MoreDropdown, {
-    menuItems: [{
-      isVisible: enabledOptions.regenerate,
-      "data-testid": "regenerate-url-button",
-      "data-cy": "regenerate-url-button",
-      onClick: function onClick() {
-        return setIsRegenerateURLModalOpen(true);
-      },
-      label: t("neetoMolecules.shareViaLink.regenerateUrl.title"),
-      key: "regenerate-url-option"
-    }, {
-      isVisible: enabledOptions.edit,
-      "data-testid": "edit-url-button",
-      "data-cy": "edit-url-button",
-      onClick: function onClick() {
-        return setIsEditURLModalOpen(true);
-      },
-      label: t("neetoMolecules.shareViaLink.editUrl.title"),
-      key: "edit-url-option"
-    }]
-  }), /*#__PURE__*/React__default["default"].createElement(RegenerateURL, {
-    handleRegenerate: handleRegenerate,
-    isLoading: isLoading,
-    url: url,
-    isOpen: isRegenerateURLModalOpen,
-    onClose: function onClose() {
-      return setIsRegenerateURLModalOpen(false);
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(EditURL, {
-    editUrlProps: editUrlProps,
-    handleEdit: handleEdit,
-    isLoading: isLoading,
-    url: url,
-    isOpen: isEditURLModalOpen,
-    onClose: function onClose() {
-      return setIsEditURLModalOpen(false);
-    }
-  })))));
+    "data-testid": "link-block",
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-1",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "neeto-ui-rounded-md relative min-w-0 flex-grow truncate border p-2 leading-none",
+        "data-cy": "nui-input-field",
+        children: url
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex w-full flex-shrink-0 items-center gap-1 sm:w-auto",
+        children: [/*#__PURE__*/jsxRuntime.jsx(CopyToClipboardButton, {
+          "data-cy": "link-copy-button",
+          "data-testid": "link-copy-button",
+          label: t("neetoMolecules.shareViaLink.copyLink"),
+          value: url
+        }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          "data-cy": "preview-button",
+          "data-testid": "preview-button",
+          href: previewUrl || url,
+          icon: ExternalLink__default["default"],
+          style: "secondary",
+          target: "_blank",
+          tooltipProps: {
+            content: t("neetoMolecules.shareViaLink.view", {
+              entity: entityName
+            }),
+            position: "top"
+          }
+        }), isDropdownEnabled && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
+            menuItems: [{
+              isVisible: enabledOptions.regenerate,
+              "data-testid": "regenerate-url-button",
+              "data-cy": "regenerate-url-button",
+              onClick: function onClick() {
+                return setIsRegenerateURLModalOpen(true);
+              },
+              label: t("neetoMolecules.shareViaLink.regenerateUrl.title"),
+              key: "regenerate-url-option"
+            }, {
+              isVisible: enabledOptions.edit,
+              "data-testid": "edit-url-button",
+              "data-cy": "edit-url-button",
+              onClick: function onClick() {
+                return setIsEditURLModalOpen(true);
+              },
+              label: t("neetoMolecules.shareViaLink.editUrl.title"),
+              key: "edit-url-option"
+            }]
+          }), /*#__PURE__*/jsxRuntime.jsx(RegenerateURL, {
+            handleRegenerate: handleRegenerate,
+            isLoading: isLoading,
+            url: url,
+            isOpen: isRegenerateURLModalOpen,
+            onClose: function onClose() {
+              return setIsRegenerateURLModalOpen(false);
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx(EditURL, {
+            editUrlProps: editUrlProps,
+            handleEdit: handleEdit,
+            isLoading: isLoading,
+            url: url,
+            isOpen: isEditURLModalOpen,
+            onClose: function onClose() {
+              return setIsEditURLModalOpen(false);
+            }
+          })]
+        })]
+      })]
+    })
+  });
 };
 
 var __defProp = Object.defineProperty;
@@ -1223,37 +1248,39 @@ var QRCode = function QRCode(_ref) {
       name: neetoCist.slugify(name)
     });
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col justify-center space-y-2 py-3 pl-8 sm:space-y-4 sm:py-2 sm:pl-6",
     "data-cy": "qr-download-block",
-    "data-testid": "qr-download-block"
-  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-    lineHeight: "normal",
-    style: "body2",
-    weight: "medium"
-  }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-    i18nKey: "neetoMolecules.shareViaLink.socialMediaShare.qrCodeInfo",
-    components: {
-      button: /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-        "data-cy": "qr-code-download-button",
-        "data-testid": "qr-code-download-button",
-        style: "link",
-        onClick: handleDownload
+    "data-testid": "qr-download-block",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      lineHeight: "normal",
+      style: "body2",
+      weight: "medium",
+      children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+        i18nKey: "neetoMolecules.shareViaLink.socialMediaShare.qrCodeInfo",
+        components: {
+          button: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+            "data-cy": "qr-code-download-button",
+            "data-testid": "qr-code-download-button",
+            style: "link",
+            onClick: handleDownload
+          })
+        }
       })
-    }
-  })), /*#__PURE__*/React__default["default"].createElement(QRCode$1, {
-    className: "cursor-pointer",
-    "data-cy": "qr-code-image",
-    "data-testid": canvasId,
-    id: canvasId,
-    size: 256,
-    style: {
-      width: 80,
-      height: 80
-    },
-    value: url,
-    onClick: handleDownload
-  }));
+    }), /*#__PURE__*/jsxRuntime.jsx(QRCode$1, {
+      className: "cursor-pointer",
+      "data-cy": "qr-code-image",
+      "data-testid": canvasId,
+      id: canvasId,
+      size: 256,
+      style: {
+        width: 80,
+        height: 80
+      },
+      value: url,
+      onClick: handleDownload
+    })]
+  });
 };
 
 var ShareBlock = function ShareBlock(_ref) {
@@ -1267,70 +1294,76 @@ var ShareBlock = function ShareBlock(_ref) {
     t = _useTranslation.t;
   var socialMediaButtonClasses = "neeto-ui-bg-gray-200 hover:neeto-ui-bg-gray-300 flex h-10 w-10 cursor-pointer items-center justify-center neeto-ui-rounded-md transition-colors duration-300 ease-in-out";
   var hasMoreOptions = neetoCist.isPresent(moreOptions);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex flex-col divide-y sm:flex-row sm:gap-6 sm:divide-x sm:divide-y-0"
-  }, hasMoreOptions && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "divide-y"
-  }, moreOptions.map(function (_ref2) {
-    var title = _ref2.title,
-      link = _ref2.link,
-      Icon = _ref2.icon,
-      onClick = _ref2.onClick,
-      dataCy = _ref2.dataCy;
-    var Component = neetoCist.isPresent(link) ? reactRouterDom.Link : "div";
-    return /*#__PURE__*/React__default["default"].createElement(Component, {
-      onClick: onClick,
-      className: "flex cursor-pointer items-center gap-x-2 py-3",
-      "data-cy": dataCy,
-      key: link,
-      to: link
-    }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-      className: "neeto-ui-text-gray-500",
-      size: 24
-    }), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-      className: "group-hover:underline",
-      style: "body2",
-      weight: "medium"
-    }, title));
-  })), !disableShareSocialMedia && /*#__PURE__*/React__default["default"].createElement("div", {
-    "data-cy": "social-media-block",
-    "data-testid": "social-media-block",
-    className: classnames__default["default"]("space-y-2 py-3 sm:space-y-4 sm:py-2", {
-      "pl-8 sm:pl-6": hasMoreOptions
-    })
-  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-    className: "neeto-ui-text-gray-800",
-    lineHeight: "normal",
-    style: "body2",
-    weight: "medium"
-  }, t("neetoMolecules.shareViaLink.socialMediaShare.title")), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex gap-4"
-  }, Object.entries(SOCIAL_MEDIA_OPTIONS).map(function (_ref3) {
-    var _ref4 = _slicedToArray__default["default"](_ref3, 2),
-      key = _ref4[0],
-      _ref4$ = _ref4[1],
-      label = _ref4$.label,
-      Icon = _ref4$.icon,
-      generateShareUrl = _ref4$.generateShareUrl;
-    return /*#__PURE__*/React__default["default"].createElement("a", {
-      className: socialMediaButtonClasses,
-      "data-cy": "social-media-button-".concat(key),
-      "data-testid": "social-media-button-".concat(key),
-      href: generateShareUrl({
-        id: entity.id,
-        title: postTitle
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col divide-y sm:flex-row sm:gap-6 sm:divide-x sm:divide-y-0",
+    children: [hasMoreOptions && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "divide-y",
+      children: moreOptions.map(function (_ref2) {
+        var title = _ref2.title,
+          link = _ref2.link,
+          Icon = _ref2.icon,
+          onClick = _ref2.onClick,
+          dataCy = _ref2.dataCy;
+        var Component = neetoCist.isPresent(link) ? reactRouterDom.Link : "div";
+        return /*#__PURE__*/React.createElement(Component, {
+          onClick: onClick,
+          className: "flex cursor-pointer items-center gap-x-2 py-3",
+          "data-cy": dataCy,
+          key: link,
+          to: link
+        }, /*#__PURE__*/jsxRuntime.jsx(Icon, {
+          className: "neeto-ui-text-gray-500",
+          size: 24
+        }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          className: "group-hover:underline",
+          style: "body2",
+          weight: "medium",
+          children: title
+        }));
+      })
+    }), !disableShareSocialMedia && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      "data-cy": "social-media-block",
+      "data-testid": "social-media-block",
+      className: classnames__default["default"]("space-y-2 py-3 sm:space-y-4 sm:py-2", {
+        "pl-8 sm:pl-6": hasMoreOptions
       }),
-      key: key,
-      rel: "noopener noreferrer",
-      target: "_blank",
-      title: label
-    }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-      size: 24
-    }));
-  }))), !disableQRDownload && /*#__PURE__*/React__default["default"].createElement(QRCode, {
-    entity: entity,
-    url: url
-  }));
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        className: "neeto-ui-text-gray-800",
+        lineHeight: "normal",
+        style: "body2",
+        weight: "medium",
+        children: t("neetoMolecules.shareViaLink.socialMediaShare.title")
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex gap-4",
+        children: Object.entries(SOCIAL_MEDIA_OPTIONS).map(function (_ref3) {
+          var _ref4 = _slicedToArray__default["default"](_ref3, 2),
+            key = _ref4[0],
+            _ref4$ = _ref4[1],
+            label = _ref4$.label,
+            Icon = _ref4$.icon,
+            generateShareUrl = _ref4$.generateShareUrl;
+          return /*#__PURE__*/jsxRuntime.jsx("a", {
+            className: socialMediaButtonClasses,
+            "data-cy": "social-media-button-".concat(key),
+            "data-testid": "social-media-button-".concat(key),
+            href: generateShareUrl({
+              id: entity.id,
+              title: postTitle
+            }),
+            rel: "noopener noreferrer",
+            target: "_blank",
+            title: label,
+            children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+              size: 24
+            })
+          }, key);
+        })
+      })]
+    }), !disableQRDownload && /*#__PURE__*/jsxRuntime.jsx(QRCode, {
+      entity: entity,
+      url: url
+    })]
+  });
 };
 
 var ShareViaLink = function ShareViaLink(_ref) {
@@ -1363,26 +1396,27 @@ var ShareViaLink = function ShareViaLink(_ref) {
     disableShareSocialMedia = _ref$disableShareSoci === void 0 ? false : _ref$disableShareSoci,
     _ref$disableQRDownloa = _ref.disableQRDownload,
     disableQRDownload = _ref$disableQRDownloa === void 0 ? false : _ref$disableQRDownloa;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white col-span-2 space-y-4 border p-6 sm:p-8",
-    "data-testid": "share-via-link"
-  }, /*#__PURE__*/React__default["default"].createElement(Link, {
-    editUrlProps: editUrlProps,
-    enabledOptions: enabledOptions,
-    entityName: entityName,
-    handleEdit: handleEdit,
-    handleRegenerate: handleRegenerate,
-    isLoading: isLoading,
-    previewUrl: previewUrl,
-    url: url
-  }), isOtherShareOptionsEnabled && /*#__PURE__*/React__default["default"].createElement(ShareBlock, {
-    disableQRDownload: disableQRDownload,
-    disableShareSocialMedia: disableShareSocialMedia,
-    entity: entity,
-    moreOptions: moreOptions,
-    url: url,
-    postTitle: socialMediaPostTitle
-  }));
+    "data-testid": "share-via-link",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Link, {
+      editUrlProps: editUrlProps,
+      enabledOptions: enabledOptions,
+      entityName: entityName,
+      handleEdit: handleEdit,
+      handleRegenerate: handleRegenerate,
+      isLoading: isLoading,
+      previewUrl: previewUrl,
+      url: url
+    }), isOtherShareOptionsEnabled && /*#__PURE__*/jsxRuntime.jsx(ShareBlock, {
+      disableQRDownload: disableQRDownload,
+      disableShareSocialMedia: disableShareSocialMedia,
+      entity: entity,
+      moreOptions: moreOptions,
+      url: url,
+      postTitle: socialMediaPostTitle
+    })]
+  });
 };
 
 module.exports = ShareViaLink;