@bigbinary/neeto-molecules 1.1.78 → 1.2.0-beta2

package/dist/ShareViaLink.js

@@ -1,270 +1,24 @@
-import React, { useRef, useState } from 'react';
+import React__default, { useRef, useEffect, useState } from 'react';
 import { slugify, isPresent, noop } from '@bigbinary/neeto-cist';
-import { MenuVertical, MenuHorizontal, Facebook, Linkedin, Twitter, ExternalLink } from '@bigbinary/neeto-icons';
-import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
-import { Dropdown, Tooltip, Button, Pane, Typography, Modal, Input as Input$1 } from '@bigbinary/neetoui';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { Facebook, Linkedin, Twitter, ExternalLink } from '@bigbinary/neeto-icons';
+import { Pane, Typography, Modal, Input as Input$1, Button } from '@bigbinary/neetoui';
 import { useTranslation, Trans } from 'react-i18next';
-import { mergeRight } from 'ramda';
+import CopyToClipboardButton from './CopyToClipboardButton.js';
+import MoreDropdown from './MoreDropdown.js';
 import { Formik, Form } from 'formik';
 import { Input, ActionBlock } from '@bigbinary/neetoui/formik';
-import { t as t$1 } from 'i18next';
+import { t } from 'i18next';
 import * as yup from 'yup';
-import { buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
+import { buildUrl } from '@bigbinary/neeto-commons-frontend/utils/general';
+import { n } from './inject-css-c86de496.js';
 import classnames from 'classnames';
 import { Link as Link$1 } from 'react-router-dom';
 import QRCodeImage from 'qrcode.react';
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
-}
-
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-var MENU_ITEM_TYPES = {
-  menuItem: "menuItem",
-  divider: "divider"
-};
-var DEFAULT_TOOLTIP_PROPS = {
-  disabled: true,
-  position: "bottom"
-};
-
-var _excluded$2 = ["label", "key"],
-  _excluded2 = ["isVisible", "key"];
-var MenuItem$1 = Dropdown.MenuItem,
-  Menu$1 = Dropdown.Menu;
-var Submenu = function Submenu(_ref) {
-  var label = _ref.label,
-    key = _ref.key,
-    menuItemProps = _objectWithoutProperties(_ref, _excluded$2);
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({
-    customTarget: /*#__PURE__*/React.createElement(MenuItem$1.Button, null, label),
-    key: key,
-    position: "left",
-    trigger: "hover"
-  }, menuItemProps.dropdownProps), /*#__PURE__*/React.createElement(Menu$1, null, menuItemProps.menuItems.map(function (_ref2) {
-    var _ref2$isVisible = _ref2.isVisible,
-      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
-      key = _ref2.key,
-      menuItemProps = _objectWithoutProperties(_ref2, _excluded2);
-    if (!isVisible) return null;
-    return /*#__PURE__*/React.createElement(MoreDropdownMenuItem, _extends({
-      key: key
-    }, menuItemProps));
-  })));
-};
-
-var _excluded$1 = ["onClick", "label", "type", "hasSubItems"];
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var MenuItem = Dropdown.MenuItem,
-  Divider = Dropdown.Divider;
-var MoreDropdownMenuItem = function MoreDropdownMenuItem(_ref) {
-  var onClick = _ref.onClick,
-    label = _ref.label,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? MENU_ITEM_TYPES.menuItem : _ref$type,
-    _ref$hasSubItems = _ref.hasSubItems,
-    hasSubItems = _ref$hasSubItems === void 0 ? false : _ref$hasSubItems,
-    menuItemProps = _objectWithoutProperties(_ref, _excluded$1);
-  if (type === MENU_ITEM_TYPES.divider) {
-    return /*#__PURE__*/React.createElement(Divider, null);
-  }
-  if (hasSubItems) {
-    return /*#__PURE__*/React.createElement(Submenu, _objectSpread$1({
-      label: label
-    }, menuItemProps));
-  }
-  return /*#__PURE__*/React.createElement(MenuItem.Button, _objectSpread$1({
-    onClick: onClick
-  }, menuItemProps), label);
-};
-
-var _excluded = ["isVisible", "key"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Menu = Dropdown.Menu;
-var MoreDropdown = function MoreDropdown(_ref) {
-  var _ref$dropdownButtonPr = _ref.dropdownButtonProps,
-    dropdownButtonProps = _ref$dropdownButtonPr === void 0 ? {} : _ref$dropdownButtonPr,
-    _ref$isVertical = _ref.isVertical,
-    isVertical = _ref$isVertical === void 0 ? false : _ref$isVertical,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$dropdownProps = _ref.dropdownProps,
-    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
-    menuTopChildren = _ref.menuTopChildren,
-    menuBottomChildren = _ref.menuBottomChildren,
-    _ref$menuItems = _ref.menuItems,
-    menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems;
-  var tooltipProps = mergeRight(DEFAULT_TOOLTIP_PROPS, dropdownButtonProps.tooltipProps);
-  var targetIcon = isVertical ? MenuVertical : MenuHorizontal;
-  var isDropdownDisabled = isDisabled || dropdownProps.disabled;
-  if (isDropdownDisabled && !tooltipProps.disabled) {
-    return /*#__PURE__*/React.createElement(Tooltip, tooltipProps, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, _extends({
-      disabled: true,
-      "data-cy": "more-dropdown-button",
-      "data-testid": "nui-dropdown-button",
-      icon: targetIcon,
-      iconPosition: "right",
-      size: "medium",
-      style: "text"
-    }, dropdownButtonProps))));
-  }
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({
-    autoWidth: true,
-    className: "flex",
-    disabled: isDisabled,
-    icon: targetIcon,
-    buttonProps: _objectSpread({
-      className: "min-h-0 flex-shrink-0",
-      style: "text"
-    }, dropdownButtonProps)
-  }, dropdownProps), /*#__PURE__*/React.createElement(Menu, null, menuTopChildren, menuItems.map(function (_ref2) {
-    var _ref2$isVisible = _ref2.isVisible,
-      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
-      key = _ref2.key,
-      menuItemProps = _objectWithoutProperties(_ref2, _excluded);
-    if (!isVisible) return null;
-    return /*#__PURE__*/React.createElement(MoreDropdownMenuItem, _extends({
-      key: key
-    }, menuItemProps));
-  }), menuBottomChildren));
-};
+import '@babel/runtime/helpers/extends';
+import '@babel/runtime/helpers/defineProperty';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import 'ramda';
 
 var facebookShareLink = function facebookShareLink(_ref) {
   var id = _ref.id;
@@ -314,28 +68,26 @@ var truncatePrefix = function truncatePrefix(url) {
 
 var SOCIAL_MEDIA_OPTIONS = {
   FACEBOOK: {
-    label: t$1("neetoMolecules.shareViaLink.socialMediaShare.facebook"),
+    label: t("neetoMolecules.shareViaLink.socialMediaShare.facebook"),
     icon: Facebook,
     generateShareUrl: facebookShareLink
   },
   LINKEDIN: {
-    label: t$1("neetoMolecules.shareViaLink.socialMediaShare.linkedIn"),
+    label: t("neetoMolecules.shareViaLink.socialMediaShare.linkedIn"),
     icon: Linkedin,
     generateShareUrl: linkedInShareLink
   },
   TWITTER: {
-    label: t$1("neetoMolecules.shareViaLink.socialMediaShare.twitter"),
+    label: t("neetoMolecules.shareViaLink.socialMediaShare.twitter"),
     icon: Twitter,
     generateShareUrl: twitterShareLink
   }
 };
 var PATH_VALIDATION_SCHEMA = yup.object().shape({
-  path: yup.string().required(t$1("neetoMolecules.shareViaLink.editUrl.validationError")).matches(/^[A-Za-z0-9]([\w/-])*$/, t$1("neetoMolecules.shareViaLink.editUrl.validationError"))
+  path: yup.string().required(t("neetoMolecules.shareViaLink.editUrl.validationError")).matches(/^[A-Za-z0-9]([\w/-])*$/, t("neetoMolecules.shareViaLink.editUrl.validationError"))
 });
 var MAX_PREFIX_SIZE = 30;
 
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
 var css = ".no-padding .neeto-ui-input.neeto-ui-input--medium input{padding:0}.no-padding .neeto-ui-input__prefix{color:rgb(var(--neeto-ui-gray-600))!important}";
 n(css,{});
 
@@ -352,32 +104,37 @@ var EditURL = function EditURL(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var focusRef = useRef(null);
-  var handleSubmit = function handleSubmit(values) {
-    handleEdit(values.path);
-    onClose();
-  };
-  return /*#__PURE__*/React.createElement(Pane, {
+  var prevIsLoadingRef = useRef(isLoading);
+  useEffect(function () {
+    if (prevIsLoadingRef.current && !isLoading) onClose();
+    prevIsLoadingRef.current = isLoading;
+  }, [isLoading]);
+  return /*#__PURE__*/React__default.createElement(Pane, {
+    isOpen: isOpen,
+    onClose: onClose,
     "data-testid": "edit-url-modal",
     initialFocusRef: focusRef,
-    isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(Typography, {
+    size: "large"
+  }, /*#__PURE__*/React__default.createElement(Header, null, /*#__PURE__*/React__default.createElement(Typography, {
     lineHeight: "normal",
     style: "h2",
     weight: "semibold"
-  }, t("neetoMolecules.shareViaLink.editUrl.title"))), /*#__PURE__*/React.createElement(Formik, {
+  }, t("neetoMolecules.shareViaLink.editUrl.title"))), /*#__PURE__*/React__default.createElement(Formik, {
     enableReinitialize: true,
     initialValues: {
       path: (editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.editablePath) || getPathname(url)
     },
     validationSchema: PATH_VALIDATION_SCHEMA,
-    onSubmit: handleSubmit
-  }, function (_ref2) {
-    var isSubmitting = _ref2.isSubmitting,
-      dirty = _ref2.dirty;
-    return /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(Body, {
+    onSubmit: function onSubmit(_ref2) {
+      var path = _ref2.path;
+      return handleEdit(path);
+    }
+  }, function (_ref3) {
+    var isSubmitting = _ref3.isSubmitting,
+      dirty = _ref3.dirty;
+    return /*#__PURE__*/React__default.createElement(Form, null, /*#__PURE__*/React__default.createElement(Body, {
       className: "space-y-6"
-    }, /*#__PURE__*/React.createElement(Input, {
+    }, /*#__PURE__*/React__default.createElement(Input, {
       className: "no-padding w-full flex-grow-0",
       "data-testid": "edit-url-input",
       label: t("neetoMolecules.shareViaLink.editUrl.inputLabel"),
@@ -385,13 +142,13 @@ var EditURL = function EditURL(_ref) {
       name: "path",
       ref: focusRef,
       prefix: truncatePrefix((editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.prefix) || getPrefixFromUrl(url))
-    }), /*#__PURE__*/React.createElement(Typography, {
+    }), /*#__PURE__*/React__default.createElement(Typography, {
       className: "neeto-ui-text-gray-700",
       lineHeight: "normal",
       style: "body2"
-    }, t("neetoMolecules.shareViaLink.editUrl.description"))), /*#__PURE__*/React.createElement(Footer, {
+    }, t("neetoMolecules.shareViaLink.editUrl.description"))), /*#__PURE__*/React__default.createElement(Footer, {
       className: "space-x-2"
-    }, /*#__PURE__*/React.createElement(ActionBlock, {
+    }, /*#__PURE__*/React__default.createElement(ActionBlock, {
       className: "flex items-center space-x-2",
       cancelButtonProps: {
         onClick: onClose,
@@ -415,35 +172,39 @@ var RegenerateURL = function RegenerateURL(_ref) {
     handleRegenerate = _ref.handleRegenerate;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  return /*#__PURE__*/React.createElement(Modal, {
-    "data-testid": "regenerate-url-modal",
+  var prevIsLoadingRef = useRef(isLoading);
+  useEffect(function () {
+    if (prevIsLoadingRef.current && !isLoading) onClose();
+    prevIsLoadingRef.current = isLoading;
+  }, [isLoading]);
+  return /*#__PURE__*/React__default.createElement(Modal, {
     isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    onClose: onClose,
+    "data-testid": "regenerate-url-modal"
+  }, /*#__PURE__*/React__default.createElement(Modal.Header, null, /*#__PURE__*/React__default.createElement(Typography, {
     lineHeight: "normal",
     style: "h2",
     weight: "semibold"
-  }, t("neetoMolecules.shareViaLink.regenerateUrl.title"))), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("div", {
+  }, t("neetoMolecules.shareViaLink.regenerateUrl.title"))), /*#__PURE__*/React__default.createElement(Modal.Body, null, /*#__PURE__*/React__default.createElement("div", {
     className: "w-full space-y-6"
-  }, /*#__PURE__*/React.createElement(Input$1, {
+  }, /*#__PURE__*/React__default.createElement(Input$1, {
     disabled: true,
     label: t("neetoMolecules.shareViaLink.regenerateUrl.inputLabel"),
     value: url
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }), /*#__PURE__*/React__default.createElement(Typography, {
     className: "neeto-ui-text-gray-700",
     lineHeight: "normal",
     style: "body2"
-  }, t("neetoMolecules.shareViaLink.regenerateUrl.description")))), /*#__PURE__*/React.createElement(Modal.Footer, {
+  }, t("neetoMolecules.shareViaLink.regenerateUrl.description")))), /*#__PURE__*/React__default.createElement(Modal.Footer, {
     className: "space-x-2"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    "data-cy": "regenerate-url-confirm-button",
     "data-testid": "regenerate-url-confirm-button",
     loading: isLoading,
     label: t("neetoMolecules.shareViaLink.regenerateUrl.submitButtonLabel"),
-    onClick: function onClick() {
-      handleRegenerate();
-      onClose();
-    }
-  }), /*#__PURE__*/React.createElement(Button, {
+    onClick: handleRegenerate
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    "data-cy": "regenerate-url-cancel-button",
     "data-testid": "regenerate-url-cancel-button",
     style: "text",
     label: t("neetoMolecules.shareViaLink.regenerateUrl.cancelButtonLabel"),
@@ -471,41 +232,40 @@ var Link = function Link(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var isDropdownEnabled = enabledOptions.regenerate || enabledOptions.edit;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "space-y-4",
+    "data-cy": "link-block",
     "data-testid": "link-block"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "space-y-0.5"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    "data-testid": "link-title",
-    lineHeight: "normal",
-    style: "h3",
-    weight: "semibold"
-  }, t("neetoMolecules.shareViaLink.title"))), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-1"
-  }, /*#__PURE__*/React.createElement(Input$1, {
-    readOnly: true,
-    value: url
-  }), /*#__PURE__*/React.createElement(CopyToClipboardButton, {
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-1"
+  }, /*#__PURE__*/React__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.createElement("div", {
+    className: "flex w-full flex-shrink-0 items-center gap-1 sm:w-auto"
+  }, /*#__PURE__*/React__default.createElement(CopyToClipboardButton, {
+    "data-cy": "link-copy-button",
     "data-testid": "link-copy-button",
     label: t("neetoMolecules.shareViaLink.copyLink"),
     value: url
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    "data-cy": "preview-button",
     "data-testid": "preview-button",
     href: previewUrl || url,
     icon: ExternalLink,
     style: "secondary",
     target: "_blank",
     tooltipProps: {
-      content: t("neetoMolecules.shareViaLink.open", {
+      content: t("neetoMolecules.shareViaLink.view", {
         entity: entityName
       }),
       position: "top"
     }
-  }), isDropdownEnabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MoreDropdown, {
+  }), isDropdownEnabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MoreDropdown, {
     menuItems: [{
       isVisible: enabledOptions.regenerate,
       "data-testid": "regenerate-url-button",
+      "data-cy": "regenerate-url-button",
       onClick: function onClick() {
         return setIsRegenerateURLModalOpen(true);
       },
@@ -514,13 +274,14 @@ var Link = function Link(_ref) {
     }, {
       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.createElement(RegenerateURL, {
+  }), /*#__PURE__*/React__default.createElement(RegenerateURL, {
     handleRegenerate: handleRegenerate,
     isLoading: isLoading,
     url: url,
@@ -528,7 +289,7 @@ var Link = function Link(_ref) {
     onClose: function onClose() {
       return setIsRegenerateURLModalOpen(false);
     }
-  }), /*#__PURE__*/React.createElement(EditURL, {
+  }), /*#__PURE__*/React__default.createElement(EditURL, {
     editUrlProps: editUrlProps,
     handleEdit: handleEdit,
     isLoading: isLoading,
@@ -537,7 +298,7 @@ var Link = function Link(_ref) {
     onClose: function onClose() {
       return setIsEditURLModalOpen(false);
     }
-  }))));
+  })))));
 };
 
 var QRCode = function QRCode(_ref) {
@@ -553,26 +314,34 @@ var QRCode = function QRCode(_ref) {
       name: slugify(name)
     });
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col justify-center space-y-4 pl-6"
-  }, /*#__PURE__*/React.createElement(Typography, {
+  return /*#__PURE__*/React__default.createElement("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.createElement(Typography, {
     lineHeight: "normal",
     style: "body2",
     weight: "medium"
-  }, /*#__PURE__*/React.createElement(Trans, {
+  }, /*#__PURE__*/React__default.createElement(Trans, {
     i18nKey: "neetoMolecules.shareViaLink.socialMediaShare.qrCodeInfo",
     components: {
-      button: /*#__PURE__*/React.createElement(Button, {
+      button: /*#__PURE__*/React__default.createElement(Button, {
+        "data-cy": "qr-code-download-button",
         "data-testid": "qr-code-download-button",
         style: "link",
         onClick: handleDownload
       })
     }
-  })), /*#__PURE__*/React.createElement(QRCodeImage, {
+  })), /*#__PURE__*/React__default.createElement(QRCodeImage, {
     className: "cursor-pointer",
+    "data-cy": "qr-code-image",
     "data-testid": canvasId,
     id: canvasId,
-    size: 40,
+    size: 256,
+    style: {
+      width: 80,
+      height: 80
+    },
     value: url,
     onClick: handleDownload
   }));
@@ -582,44 +351,50 @@ var ShareBlock = function ShareBlock(_ref) {
   var entity = _ref.entity,
     postTitle = _ref.postTitle,
     url = _ref.url,
-    moreOptions = _ref.moreOptions;
+    moreOptions = _ref.moreOptions,
+    disableShareSocialMedia = _ref.disableShareSocialMedia,
+    disableQRDownload = _ref.disableQRDownload;
   var _useTranslation = useTranslation(),
     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 = isPresent(moreOptions);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-6 divide-x"
-  }, hasMoreOptions && /*#__PURE__*/React.createElement("div", {
-    className: "grid grid-cols-1 divide-y"
+  return /*#__PURE__*/React__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.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;
-    return /*#__PURE__*/React.createElement(Link$1, {
+    var Component = isPresent(link) ? Link$1 : "div";
+    return /*#__PURE__*/React__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.createElement(Icon, {
+    }, /*#__PURE__*/React__default.createElement(Icon, {
       className: "neeto-ui-text-gray-500",
       size: 24
-    }), /*#__PURE__*/React.createElement(Typography, {
+    }), /*#__PURE__*/React__default.createElement(Typography, {
       className: "group-hover:underline",
       style: "body2",
       weight: "medium"
     }, title));
-  })), /*#__PURE__*/React.createElement("div", {
+  })), !disableShareSocialMedia && /*#__PURE__*/React__default.createElement("div", {
+    "data-cy": "social-media-block",
     "data-testid": "social-media-block",
-    className: classnames("space-y-4 py-2", {
-      "pl-6": hasMoreOptions
+    className: classnames("space-y-2 py-3 sm:space-y-4 sm:py-2", {
+      "pl-8 sm:pl-6": hasMoreOptions
     })
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(Typography, {
     className: "neeto-ui-text-gray-800",
     lineHeight: "normal",
     style: "body2",
     weight: "medium"
-  }, t("neetoMolecules.shareViaLink.socialMediaShare.title")), /*#__PURE__*/React.createElement("div", {
+  }, t("neetoMolecules.shareViaLink.socialMediaShare.title")), /*#__PURE__*/React__default.createElement("div", {
     className: "flex gap-4"
   }, Object.entries(SOCIAL_MEDIA_OPTIONS).map(function (_ref3) {
     var _ref4 = _slicedToArray(_ref3, 2),
@@ -628,8 +403,9 @@ var ShareBlock = function ShareBlock(_ref) {
       label = _ref4$.label,
       Icon = _ref4$.icon,
       generateShareUrl = _ref4$.generateShareUrl;
-    return /*#__PURE__*/React.createElement("a", {
+    return /*#__PURE__*/React__default.createElement("a", {
       className: socialMediaButtonClasses,
+      "data-cy": "social-media-button-".concat(key),
       "data-testid": "social-media-button-".concat(key),
       href: generateShareUrl({
         id: entity.id,
@@ -639,10 +415,10 @@ var ShareBlock = function ShareBlock(_ref) {
       rel: "noopener noreferrer",
       target: "_blank",
       title: label
-    }, /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React__default.createElement(Icon, {
       size: 24
     }));
-  }))), /*#__PURE__*/React.createElement(QRCode, {
+  }))), !disableQRDownload && /*#__PURE__*/React__default.createElement(QRCode, {
     entity: entity,
     url: url
   }));
@@ -673,11 +449,15 @@ var ShareViaLink = function ShareViaLink(_ref) {
     url = _ref.url,
     moreOptions = _ref.moreOptions,
     _ref$isOtherShareOpti = _ref.isOtherShareOptionsEnabled,
-    isOtherShareOptionsEnabled = _ref$isOtherShareOpti === void 0 ? true : _ref$isOtherShareOpti;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-border-gray-400 neeto-ui-shadow-xs neeto-ui-rounded-lg neeto-ui-bg-white col-span-2 space-y-4 border p-8",
+    isOtherShareOptionsEnabled = _ref$isOtherShareOpti === void 0 ? true : _ref$isOtherShareOpti,
+    _ref$disableShareSoci = _ref.disableShareSocialMedia,
+    disableShareSocialMedia = _ref$disableShareSoci === void 0 ? false : _ref$disableShareSoci,
+    _ref$disableQRDownloa = _ref.disableQRDownload,
+    disableQRDownload = _ref$disableQRDownloa === void 0 ? false : _ref$disableQRDownloa;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-ui-border-gray-400 neeto-ui-shadow-xs 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.createElement(Link, {
+  }, /*#__PURE__*/React__default.createElement(Link, {
     editUrlProps: editUrlProps,
     enabledOptions: enabledOptions,
     entityName: entityName,
@@ -686,7 +466,9 @@ var ShareViaLink = function ShareViaLink(_ref) {
     isLoading: isLoading,
     previewUrl: previewUrl,
     url: url
-  }), isOtherShareOptionsEnabled && /*#__PURE__*/React.createElement(ShareBlock, {
+  }), isOtherShareOptionsEnabled && /*#__PURE__*/React__default.createElement(ShareBlock, {
+    disableQRDownload: disableQRDownload,
+    disableShareSocialMedia: disableShareSocialMedia,
     entity: entity,
     moreOptions: moreOptions,
     url: url,