@atlaskit/share 3.2.6 → 3.4.0

package/dist/esm/components/CopyLinkButton.js

@@ -14,9 +14,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import LinkFilledIcon from '@atlaskit/icon/glyph/link-filled';
 import Popup from '@atlaskit/popup';
@@ -30,12 +31,12 @@ import Button from './styles';
 var Z_INDEX = layers.modal();
 var AUTO_DISMISS_SECONDS = 8;
 export var AUTO_DISMISS_MS = AUTO_DISMISS_SECONDS * 1000;
-export var MessageContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: -8px -16px;\n"])));
+export var messageContainerStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: -8px -16px;\n"])));
 var isSafari = navigator.userAgent.indexOf('Safari');
-var MessageSpan = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-indent: 6px;\n"])));
+var messageTextStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-indent: 6px;\n"])));
 export var HiddenInput = /*#__PURE__*/React.forwardRef( // we need a hidden input to reliably copy to clipboard across all browsers.
 function (props, ref) {
-  return /*#__PURE__*/React.createElement("input", {
+  return jsx("input", {
     style: {
       position: 'absolute',
       left: '-9999px'
@@ -112,16 +113,16 @@ export var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
           formatMessage = _this$props.intl.formatMessage,
           isDisabled = _this$props.isDisabled,
           isPublicLink = _this$props.isPublicLink;
-      return /*#__PURE__*/React.createElement(Button, _extends({
+      return jsx(Button, _extends({
         "aria-label": formatMessage(isPublicLink ? messages.copyPublicLinkButtonText : messages.copyLinkButtonText),
         isDisabled: isDisabled,
         appearance: "subtle-link",
-        iconBefore: /*#__PURE__*/React.createElement(LinkFilledIcon, {
+        iconBefore: jsx(LinkFilledIcon, {
           label: "",
           size: "medium"
         }),
         onClick: _this.handleClick
-      }, triggerProps), /*#__PURE__*/React.createElement(FormattedMessage, isPublicLink ? messages.copyPublicLinkButtonText : messages.copyLinkButtonText));
+      }, triggerProps), jsx(FormattedMessage, isPublicLink ? messages.copyPublicLinkButtonText : messages.copyLinkButtonText));
     });
 
     return _this;
@@ -141,25 +142,30 @@ export var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
           formatMessage = _this$props2.intl.formatMessage,
           copyTooltipText = _this$props2.copyTooltipText;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isSafari && /*#__PURE__*/React.createElement("div", {
+      return jsx(React.Fragment, null, isSafari && jsx("div", {
         className: "assistive",
         "aria-live": "assertive"
-      }, shouldShowCopiedMessage && formatMessage(messages.copiedToClipboardMessage)), /*#__PURE__*/React.createElement(HiddenInput, {
+      }, shouldShowCopiedMessage && formatMessage(messages.copiedToClipboardMessage)), jsx(HiddenInput, {
         ref: this.inputRef,
         text: this.props.link
-      }), /*#__PURE__*/React.createElement(Popup, {
+      }), jsx(Popup, {
         zIndex: Z_INDEX,
         content: function content() {
-          return /*#__PURE__*/React.createElement(InlineDialogContentWrapper, null, /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(CheckCircleIcon, {
+          return jsx(InlineDialogContentWrapper, null, jsx("div", {
+            css: messageContainerStyle,
+            "data-testid": "message-container"
+          }, jsx(CheckCircleIcon, {
             label: "",
             primaryColor: token('color.icon.success', G300)
-          }), /*#__PURE__*/React.createElement(MessageSpan, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.copiedToClipboardMessage))));
+          }), jsx("span", {
+            css: messageTextStyle
+          }, jsx(FormattedMessage, messages.copiedToClipboardMessage))));
         },
         isOpen: shouldShowCopiedMessage,
         onClose: this.handleDismissCopiedMessage,
         placement: "top-start",
         trigger: function trigger(triggerProps) {
-          return copyTooltipText ? /*#__PURE__*/React.createElement(Tooltip, {
+          return copyTooltipText ? jsx(Tooltip, {
             content: copyTooltipText,
             position: "bottom-start"
           }, _this2.renderTriggerButton(triggerProps)) : _this2.renderTriggerButton(triggerProps);

package/dist/esm/components/IntegrationButton.js

@@ -4,15 +4,14 @@ var _excluded = ["text", "textColor", "IntegrationIcon"];
 
 var _templateObject, _templateObject2;
 
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { N500 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-var IntegrationButtonCopyWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  display: flex;\n  justify-content: left;\n"])), function (props) {
-  return props.theme.textColor || token('color.text', N500);
-});
-var IntegrationIconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 1px 8px 0 0;\n"])));
+var integrationButtonCopyWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: left;\n"])));
+var integrationIconWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 1px 8px 0 0;\n"])));
 
 var IntegrationButton = function IntegrationButton(props) {
   var text = props.text,
@@ -20,11 +19,14 @@ var IntegrationButton = function IntegrationButton(props) {
       IntegrationIcon = props.IntegrationIcon,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  return /*#__PURE__*/React.createElement(Button, restProps, /*#__PURE__*/React.createElement(IntegrationButtonCopyWrapper, {
-    theme: {
-      textColor: textColor
+  return jsx(Button, restProps, jsx("span", {
+    css: integrationButtonCopyWrapperStyle,
+    style: {
+      color: textColor || token('color.text', N500)
     }
-  }, /*#__PURE__*/React.createElement(IntegrationIconWrapper, null, /*#__PURE__*/React.createElement(IntegrationIcon, null)), /*#__PURE__*/React.createElement("span", null, text)));
+  }, jsx("span", {
+    css: integrationIconWrapperStyle
+  }, jsx(IntegrationIcon, null)), jsx("span", null, text)));
 };
 
 IntegrationButton.displayName = 'IntegrationButton';

package/dist/esm/components/IntegrationForm.js

@@ -2,10 +2,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { h500 } from '@atlaskit/theme/typography';
-export var FormWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [class^='FormHeader__FormHeaderWrapper'] {\n    h1:first-child {\n      ", "\n\n      > span {\n        /* jira has a class override font settings on h1 > span in gh-custom-field-pickers.css */\n        font-size: inherit !important;\n        line-height: inherit !important;\n        letter-spacing: inherit !important;\n      }\n    }\n  }\n\n  [class^='FormSection__FormSectionWrapper'] {\n    margin-top: 0px;\n  }\n\n  [class^='FormFooter__FormFooterWrapper'] {\n    justify-content: space-between;\n    margin-top: 12px;\n    margin-bottom: 24px;\n  }\n\n  [class^='Field__FieldWrapper']:not(:first-child) {\n    margin-top: 12px;\n  }\n"])), h500());
+export var formWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [class^='FormHeader__FormHeaderWrapper'] {\n    h1:first-child {\n      ", "\n\n      > span {\n        /* jira has a class override font settings on h1 > span in gh-custom-field-pickers.css */\n        font-size: inherit !important;\n        line-height: inherit !important;\n        letter-spacing: inherit !important;\n      }\n    }\n  }\n\n  [class^='FormSection__FormSectionWrapper'] {\n    margin-top: 0px;\n  }\n\n  [class^='FormFooter__FormFooterWrapper'] {\n    justify-content: space-between;\n    margin-top: 12px;\n    margin-bottom: 24px;\n  }\n\n  [class^='Field__FieldWrapper']:not(:first-child) {\n    margin-top: 12px;\n  }\n"])), h500());
 export var IntegrationForm = function IntegrationForm(_ref) {
   var Content = _ref.Content,
       _ref$onIntegrationClo = _ref.onIntegrationClose,
@@ -16,7 +17,9 @@ export var IntegrationForm = function IntegrationForm(_ref) {
       changeTab = _ref$changeTab === void 0 ? function () {
     return undefined;
   } : _ref$changeTab;
-  return /*#__PURE__*/React.createElement(FormWrapper, null, Content && /*#__PURE__*/React.createElement(Content, {
+  return jsx("div", {
+    css: formWrapperStyle
+  }, Content && jsx(Content, {
     onClose: onIntegrationClose,
     changeTab: changeTab
   }));

package/dist/esm/components/ShareDialogWithTrigger.js

@@ -18,9 +18,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import ShareIcon from '@atlaskit/icon/glyph/share';
 import Popup from '@atlaskit/popup';
@@ -38,7 +39,7 @@ import LazyShareFormLazy from './LazyShareForm/lazy';
 import ShareButton from './ShareButton';
 import SplitButton from './SplitButton';
 import { generateSelectZIndex, resolveShareFooter } from './utils';
-var ShareButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  outline: none;\n"])));
+var shareButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  outline: none;\n"])));
 export var defaultShareContentState = {
   users: [],
   comment: {
@@ -348,12 +349,12 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
           onClick: _this.onTriggerClick
         }, triggerProps);
       } else {
-        button = /*#__PURE__*/React.createElement(ShareButton, _extends({
+        button = jsx(ShareButton, _extends({
           appearance: triggerButtonAppearance,
-          text: triggerButtonStyle !== 'icon-only' ? /*#__PURE__*/React.createElement(FormattedMessage, messages.shareTriggerButtonText) : null,
+          text: triggerButtonStyle !== 'icon-only' ? jsx(FormattedMessage, messages.shareTriggerButtonText) : null,
           "aria-label": formatMessage(messages.shareTriggerButtonText),
           onClick: _this.onTriggerClick,
-          iconBefore: triggerButtonStyle !== 'text-only' ? /*#__PURE__*/React.createElement(ShareButtonIcon, {
+          iconBefore: triggerButtonStyle !== 'text-only' ? jsx(ShareButtonIcon, {
             label: ""
           }) : undefined,
           isSelected: isDialogOpen,
@@ -363,7 +364,7 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
 
 
       if (triggerButtonStyle === 'icon-only') {
-        button = /*#__PURE__*/React.createElement(Aktooltip, {
+        button = jsx(Aktooltip, {
           content: !isUsingSplitButton ? triggerButtonTooltipText || formatMessage(messages.shareTriggerButtonTooltipText) : null,
           position: triggerButtonTooltipPosition,
           hideTooltipOnClick: true
@@ -372,7 +373,7 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
 
 
       if (integrationMode === 'split' && shareIntegrations !== null && shareIntegrations !== void 0 && shareIntegrations.length) {
-        button = /*#__PURE__*/React.createElement(SplitButton, {
+        button = jsx(SplitButton, {
           shareButton: button,
           handleOpenSplitButton: _this.handleOpenSplitButton,
           handleCloseSplitButton: _this.handleCloseSplitButton,
@@ -463,15 +464,16 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
       } : undefined;
       var footer = resolveShareFooter(integrationMode, this.state.tabIndex, customFooter); // for performance purposes, we may want to have a loadable content i.e. ShareForm
 
-      return /*#__PURE__*/React.createElement(ShareButtonWrapper, {
+      return jsx("div", {
+        css: shareButtonWrapperStyles,
         tabIndex: tabIndex,
         onKeyDown: this.handleKeyDown,
         style: style
-      }, /*#__PURE__*/React.createElement(Popup, {
+      }, jsx(Popup, {
         content: function content() {
-          return /*#__PURE__*/React.createElement("div", {
+          return jsx("div", {
             ref: _this2.containerRef
-          }, /*#__PURE__*/React.createElement(LazyShareFormLazy, {
+          }, jsx(LazyShareFormLazy, {
             Content: selectedIntegration && selectedIntegration.Content,
             selectedIntegration: selectedIntegration,
             copyLink: copyLink,
@@ -514,9 +516,9 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
         placement: dialogPlacement,
         trigger: this.renderShareTriggerButton,
         zIndex: dialogZIndex
-      }), /*#__PURE__*/React.createElement(Portal, {
+      }), jsx(Portal, {
         zIndex: generateSelectZIndex(dialogZIndex)
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         ref: this.selectPortalRef
       })));
     }

package/dist/esm/components/ShareForm.js

@@ -18,9 +18,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/custom-theme-button';
 import Form from '@atlaskit/form';
@@ -38,16 +39,16 @@ import CopyLinkButton from './CopyLinkButton';
 import { IntegrationForm } from './IntegrationForm';
 import { ShareHeader } from './ShareHeader';
 import { UserPickerField } from './UserPickerField';
-var SubmitButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n"])));
-var CenterAlignedIconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-self: center;\n  padding: 0 10px;\n\n  > div {\n    line-height: 1;\n  }\n"])));
-export var FormWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  width: 100%;\n\n  /* jira has a class override font settings on h1 in gh-custom-field-pickers.css */\n  #ghx-modes-tools #ghx-share & h1:first-child {\n    margin-top: 0;\n  }\n"])), gridSize());
-export var FormFooter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-bottom: ", "px;\n  display: flex;\n  justify-content: flex-start;\n"])), gridSize);
-var FormField = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-bottom: 12px;\n"])));
-var IntegrationWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-var IntegrationIconWrapper = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-bottom: -6px;\n  margin-right: 5px;\n"])));
+var submitButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n"])));
+var centerAlignedIconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-self: center;\n  padding: 0 10px;\n\n  > div {\n    line-height: 1;\n  }\n"])));
+export var formWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  width: 100%;\n\n  /* jira has a class override font settings on h1 in gh-custom-field-pickers.css */\n  #ghx-modes-tools #ghx-share & h1:first-child {\n    margin-top: 0;\n  }\n"])), gridSize());
+export var formFooterStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n"])));
+var formFieldStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-bottom: 12px;\n"])));
+var integrationWrapperStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+var integrationIconWrapperStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-bottom: -6px;\n  margin-right: 5px;\n"])));
 
 var integrationTabText = function integrationTabText(integrationName) {
-  return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.shareInIntegrationButtonText, {
+  return jsx(FormattedMessage, _extends({}, messages.shareInIntegrationButtonText, {
     values: {
       integrationName: integrationName
     }
@@ -100,13 +101,15 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
           copyTooltipText = _this$props.copyTooltipText,
           helperMessage = _this$props.helperMessage,
           orgId = _this$props.orgId;
-      return /*#__PURE__*/React.createElement(AnalyticsContext, {
+      return jsx(AnalyticsContext, {
         data: {
           source: ANALYTICS_SOURCE
         }
-      }, /*#__PURE__*/React.createElement("form", formProps, showTitle && /*#__PURE__*/React.createElement(ShareHeader, {
+      }, jsx("form", formProps, showTitle && jsx(ShareHeader, {
         title: title
-      }), /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(UserPickerField, {
+      }), jsx("div", {
+        css: formFieldStyles
+      }, jsx(UserPickerField, {
         onInputChange: onUserInputChange,
         onChange: onUserSelectionChange,
         loadOptions: loadOptions,
@@ -121,9 +124,14 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
         isPublicLink: isPublicLink,
         helperMessage: helperMessage,
         orgId: orgId
-      })), /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(CommentField, {
+      })), jsx("div", {
+        css: formFieldStyles
+      }, jsx(CommentField, {
         defaultValue: defaultValue && defaultValue.comment
-      })), fieldsFooter, /*#__PURE__*/React.createElement(FormFooter, null, /*#__PURE__*/React.createElement(CopyLinkButton, {
+      })), fieldsFooter, jsx("div", {
+        css: formFooterStyles,
+        "data-testid": "form-footer"
+      }, jsx(CopyLinkButton, {
         isDisabled: isDisabled,
         onLinkCopy: onLinkCopy,
         link: copyLink,
@@ -145,22 +153,26 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
       var buttonAppearance = !shouldShowWarning ? 'primary' : 'warning';
       var tabMode = integrationMode === 'tabs';
       var formPublicLabel = tabMode ? messages.formSharePublic : messages.formSendPublic;
-      var formSendLabel = tabMode ? messages.formShare : messages.formSend;
+      var formSendLabel = messages.formShare;
       var sendLabel = isPublicLink ? formPublicLabel : formSendLabel;
       var buttonLabel = shareError ? messages.formRetry : sendLabel;
       var ButtonLabelWrapper = buttonAppearance === 'warning' ? 'strong' : React.Fragment;
-      return /*#__PURE__*/React.createElement(SubmitButtonWrapper, null, /*#__PURE__*/React.createElement(CenterAlignedIconWrapper, null, shouldShowWarning && /*#__PURE__*/React.createElement(Tooltip, {
-        content: /*#__PURE__*/React.createElement(FormattedMessage, messages.shareFailureMessage),
+      return jsx("div", {
+        css: submitButtonWrapperStyles
+      }, jsx("div", {
+        css: centerAlignedIconWrapperStyles
+      }, shouldShowWarning && jsx(Tooltip, {
+        content: jsx(FormattedMessage, messages.shareFailureMessage),
         position: "top"
-      }, /*#__PURE__*/React.createElement(ErrorIcon, {
+      }, jsx(ErrorIcon, {
         label: formatMessage(messages.shareFailureIconLabel),
         primaryColor: token('color.icon.danger', R400)
-      }))), /*#__PURE__*/React.createElement(Button, {
+      }))), jsx(Button, {
         appearance: buttonAppearance,
         type: "submit",
         isLoading: isSharing,
         isDisabled: isDisabled
-      }, /*#__PURE__*/React.createElement(ButtonLabelWrapper, null, submitButtonLabel || /*#__PURE__*/React.createElement(FormattedMessage, buttonLabel))));
+      }, jsx(ButtonLabelWrapper, null, submitButtonLabel || jsx(FormattedMessage, buttonLabel))));
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderMainTabTitle", function () {
@@ -173,11 +185,11 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       if (!product) {
-        return /*#__PURE__*/React.createElement(FormattedMessage, messages.formTitle);
+        return jsx(FormattedMessage, messages.formTitle);
       }
 
       var productShareType = product === 'jira' ? _objectSpread({}, messages.shareMainTabTextJira) : _objectSpread({}, messages.shareMainTabTextConfluence);
-      return /*#__PURE__*/React.createElement(FormattedMessage, productShareType);
+      return jsx(FormattedMessage, productShareType);
     });
 
     _defineProperty(_assertThisInitialized(_this), "changeTab", function (tab) {
@@ -220,23 +232,31 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
       var firstIntegration = shareIntegrations[0];
 
       if (integrationMode === 'tabs') {
-        return /*#__PURE__*/React.createElement(Tabs, {
+        return jsx(Tabs, {
           id: "ShareForm-Tabs-Integrations",
           onChange: this.changeTab,
           selected: this.state.selectedTab
-        }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, {
+        }, jsx(TabList, null, jsx(Tab, {
           key: "share-tab-default"
-        }, this.renderMainTabTitle()), /*#__PURE__*/React.createElement(Tab, {
+        }, this.renderMainTabTitle()), jsx(Tab, {
           key: "share-tab-".concat(firstIntegration.type)
-        }, /*#__PURE__*/React.createElement(IntegrationWrapper, null, /*#__PURE__*/React.createElement(IntegrationIconWrapper, null, /*#__PURE__*/React.createElement(firstIntegration.Icon, null)), integrationTabText(firstIntegration.type)))), /*#__PURE__*/React.createElement(TabPanel, {
+        }, jsx("div", {
+          css: integrationWrapperStyles
+        }, jsx("span", {
+          css: integrationIconWrapperStyles
+        }, jsx(firstIntegration.Icon, null)), integrationTabText(firstIntegration.type)))), jsx(TabPanel, {
           key: "share-tabPanel-default"
-        }, /*#__PURE__*/React.createElement(FormWrapper, null, this.renderShareForm())), /*#__PURE__*/React.createElement(TabPanel, {
+        }, jsx("div", {
+          css: formWrapperStyles
+        }, this.renderShareForm())), jsx(TabPanel, {
           key: "share-tabPanel-integration"
-        }, /*#__PURE__*/React.createElement(AnalyticsContext, {
+        }, jsx(AnalyticsContext, {
           data: {
             source: INTEGRATION_MODAL_SOURCE
           }
-        }, /*#__PURE__*/React.createElement(FormWrapper, null, /*#__PURE__*/React.createElement(IntegrationForm, {
+        }, jsx("div", {
+          css: formWrapperStyles
+        }, jsx(IntegrationForm, {
           Content: firstIntegration.Content,
           onIntegrationClose: function onIntegrationClose() {
             return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
@@ -258,12 +278,12 @@ _defineProperty(InternalForm, "defaultProps", {
 
 var InternalFormWithIntl = injectIntl(InternalForm);
 export var ShareForm = function ShareForm(props) {
-  return /*#__PURE__*/React.createElement(Form, {
+  return jsx(Form, {
     onSubmit: props.onSubmit
   }, function (_ref) {
     var formProps = _ref.formProps,
         getValues = _ref.getValues;
-    return /*#__PURE__*/React.createElement(InternalFormWithIntl, _extends({}, props, {
+    return jsx(InternalFormWithIntl, _extends({}, props, {
       formProps: formProps,
       getValues: getValues
     }));

package/dist/esm/components/ShareHeader.js

@@ -2,15 +2,23 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2;
 
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx, useTheme } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import styled from 'styled-components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { h500 } from '@atlaskit/theme/typography';
 import { messages } from '../i18n';
-var HeaderWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
-export var FormHeaderTitle = styled.h1(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  line-height: ", "px;\n  margin-right: ", "px;\n  margin-top: ", "px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  > span {\n    font-size: initial;\n  }\n"])), h500, gridSize() * 4, gridSize() * 4, gridSize() * 4);
+var headerWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
+export var getFormHeaderTitleStyles = function getFormHeaderTitleStyles(theme) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  line-height: ", "px;\n  margin-right: ", "px;\n  margin-top: ", "px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  > span {\n    font-size: initial;\n  }\n"])), h500(theme), gridSize() * 4, gridSize() * 4, gridSize() * 4);
+};
 export var ShareHeader = function ShareHeader(_ref) {
   var title = _ref.title;
-  return /*#__PURE__*/React.createElement(HeaderWrapper, null, /*#__PURE__*/React.createElement(FormHeaderTitle, null, title || /*#__PURE__*/React.createElement(FormattedMessage, messages.formTitle)));
+  var theme = useTheme();
+  return jsx("div", {
+    css: headerWrapperStyles
+  }, jsx("h1", {
+    css: getFormHeaderTitleStyles(theme)
+  }, title || jsx(FormattedMessage, messages.formTitle)));
 };

package/dist/esm/components/SplitButton.js

@@ -5,9 +5,10 @@ var _excluded = ["triggerRef"];
 
 var _templateObject, _templateObject2, _templateObject3;
 
+/** @jsx jsx */
 import React, { useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import styled from 'styled-components';
 import Button from '@atlaskit/button/standard-button';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
@@ -17,12 +18,13 @@ import { token } from '@atlaskit/tokens';
 import { messages } from '../i18n';
 import { shareIntegrationButtonEvent } from './analytics/analytics';
 import IntegrationButton from './IntegrationButton';
-var SplitButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  button {\n    border-radius: ", "px 0 0 ", "px;\n  }\n  button:hover {\n    border-radius: ", "px 0 0 ", "px;\n  }\n"])), borderRadius(), borderRadius(), borderRadius(), borderRadius());
-var DropdownMenuWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: 1px;\n  button {\n    border-radius: 0 ", "px ", "px 0;\n  }\n  button:hover {\n    border-radius: 0 ", "px ", "px 0;\n  }\n"])), borderRadius(), borderRadius(), borderRadius(), borderRadius());
-var DropDownIntegrationButtonWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  button:hover {\n    background: transparent;\n  }\n"])));
+var splitButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  button {\n    border-radius: ", "px 0 0 ", "px;\n  }\n  button:hover {\n    border-radius: ", "px 0 0 ", "px;\n  }\n"])), borderRadius(), borderRadius(), borderRadius(), borderRadius());
+var dropdownMenuWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: 1px;\n  button {\n    border-radius: 0 ", "px ", "px 0;\n  }\n  button:hover {\n    border-radius: 0 ", "px ", "px 0;\n  }\n"])), borderRadius(), borderRadius(), borderRadius(), borderRadius()); // span
+
+var dropDownIntegrationButtonWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  button:hover {\n    background: transparent;\n  }\n"])));
 
 var integrationButtonText = function integrationButtonText(integrationName) {
-  return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.shareToIntegrationButtonText, {
+  return jsx(FormattedMessage, _extends({}, messages.shareToIntegrationButtonText, {
     values: {
       integrationName: integrationName
     }
@@ -50,15 +52,17 @@ var SplitButtonDropdown = function SplitButtonDropdown(props) {
     onIntegrationClick(integration);
     createAndFireEvent(shareIntegrationButtonEvent(integration.type));
   }, [createAndFireEvent, onIntegrationClick]);
-  return /*#__PURE__*/React.createElement(DropdownMenuWrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+  return jsx("div", {
+    css: dropdownMenuWrapperStyles
+  }, jsx(DropdownMenu, {
     testId: "split-button-dropdown",
     trigger: function trigger(_ref2) {
       var triggerRef = _ref2.triggerRef,
           providedProps = _objectWithoutProperties(_ref2, _excluded);
 
-      return /*#__PURE__*/React.createElement(Button, _extends({}, providedProps, {
+      return jsx(Button, _extends({}, providedProps, {
         ref: triggerRef,
-        iconBefore: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+        iconBefore: jsx(ChevronDownIcon, {
           label: ""
         }),
         appearance: triggerButtonAppearance
@@ -67,11 +71,13 @@ var SplitButtonDropdown = function SplitButtonDropdown(props) {
     placement: "bottom-end",
     isOpen: isUsingSplitButton,
     onOpenChange: onOpenChange
-  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, shareIntegrations.map(function (integration) {
-    return /*#__PURE__*/React.createElement(DropdownItem, {
+  }, jsx(DropdownItemGroup, null, shareIntegrations.map(function (integration) {
+    return jsx(DropdownItem, {
       key: integration.type,
       testId: "split-button-dropdownitem-".concat(integration.type)
-    }, /*#__PURE__*/React.createElement(DropDownIntegrationButtonWrapper, null, /*#__PURE__*/React.createElement(IntegrationButton, {
+    }, jsx("span", {
+      css: dropDownIntegrationButtonWrapperStyles
+    }, jsx(IntegrationButton, {
       textColor: token('color.text', N800),
       appearance: "subtle",
       onClick: function onClick() {
@@ -96,9 +102,10 @@ export default function SplitButton(_ref3) {
       dialogZIndex = _ref3.dialogZIndex,
       dialogPlacement = _ref3.dialogPlacement,
       createAndFireEvent = _ref3.createAndFireEvent;
-  return /*#__PURE__*/React.createElement(SplitButtonWrapper, {
+  return jsx("div", {
+    css: splitButtonWrapperStyles,
     "data-testid": "split-button"
-  }, shareButton, /*#__PURE__*/React.createElement(SplitButtonDropdown, {
+  }, shareButton, jsx(SplitButtonDropdown, {
     shareIntegrations: shareIntegrations,
     triggerButtonAppearance: triggerButtonAppearance,
     isUsingSplitButton: isUsingSplitButton,

package/dist/esm/components/analytics/analytics.js

@@ -10,7 +10,7 @@ var buildAttributes = function buildAttributes() {
   var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return _objectSpread({
     packageName: "@atlaskit/share",
-    packageVersion: "3.2.6"
+    packageVersion: "3.4.0"
   }, attributes);
 };
 

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/share",
-	"version": "3.2.6"
+	"version": "3.4.0"
 }

package/dist/types/components/CopyLinkButton.d.ts

@@ -1,8 +1,10 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { TriggerProps } from '@atlaskit/popup';
 export declare const AUTO_DISMISS_MS: number;
-export declare const MessageContainer: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const messageContainerStyle: import("@emotion/react").SerializedStyles;
 declare type InputProps = {
     text: string;
 };
@@ -27,8 +29,8 @@ export declare class CopyLinkButton extends React.Component<Props & WrappedCompo
     private clearAutoDismiss;
     private handleClick;
     private handleDismissCopiedMessage;
-    renderTriggerButton: (triggerProps: TriggerProps) => JSX.Element;
-    render(): JSX.Element;
+    renderTriggerButton: (triggerProps: TriggerProps) => jsx.JSX.Element;
+    render(): jsx.JSX.Element;
 }
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;

package/dist/types/components/IntegrationButton.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { CustomThemeButtonProps } from '@atlaskit/button/types';
 declare type Props = CustomThemeButtonProps & {

package/dist/types/components/IntegrationForm.d.ts

@@ -1,9 +1,11 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { IntegrationContentProps } from '../types';
-export declare const FormWrapper: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const formWrapperStyle: import("@emotion/react").SerializedStyles;
 export declare type IntegrationFormProps = {
     Content: React.ComponentType<IntegrationContentProps> | null;
     onIntegrationClose?: () => void;
     changeTab?: (index: number) => void;
 };
-export declare const IntegrationForm: ({ Content, onIntegrationClose, changeTab, }: IntegrationFormProps) => JSX.Element;
+export declare const IntegrationForm: ({ Content, onIntegrationClose, changeTab, }: IntegrationFormProps) => jsx.JSX.Element;

package/dist/types/components/ShareDialogWithTrigger.d.ts

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { TriggerProps } from '@atlaskit/popup';
@@ -33,7 +35,7 @@ export declare class ShareDialogWithTriggerInternal extends React.PureComponent<
     renderShareTriggerButton: (triggerProps: TriggerProps) => React.ReactNode;
     handleOpenSplitButton: () => void;
     handleCloseSplitButton: () => void;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }
 export declare const ShareDialogWithTrigger: React.ComponentType<ShareDialogWithTriggerProps>;
 export {};

package/dist/types/components/ShareForm.d.ts

@@ -1,8 +1,9 @@
+/** @jsx jsx */
 import React from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { FormChildrenArgs, ShareData, ShareFormProps, TabType } from '../types';
-export declare const FormWrapper: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
-export declare const FormFooter: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const formWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const formFooterStyles: import("@emotion/react").SerializedStyles;
 export declare type State = {
     selectedTab: TabType;
 };

package/dist/types/components/ShareHeader.d.ts

@@ -1,6 +1,8 @@
+/** @jsx jsx */
 import React from 'react';
+import { Theme } from '@emotion/react';
 export declare type Props = {
     title?: React.ReactNode;
 };
-export declare const FormHeaderTitle: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
+export declare const getFormHeaderTitleStyles: (theme: Theme) => import("@emotion/react").SerializedStyles;
 export declare const ShareHeader: React.StatelessComponent<Props>;