@atlaskit/share 3.2.6 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/share
 
+## 3.4.0
+
+### Minor Changes
+
+- [`e5aa0ac9b74`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e5aa0ac9b74) - [ux] ED-15329 migrates @atlaskit/share to emotion -- fixes a spacing bug with bottom margin on share button.
+
+## 3.3.1
+
+### Patch Changes
+
+- [`575b4888124`](https://bitbucket.org/atlassian/atlassian-frontend/commits/575b4888124) - Removed internal test/demo usages of setSmartUserPickerEnv
+- Updated dependencies
+
+## 3.3.0
+
+### Minor Changes
+
+- [`3f35716fe41`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3f35716fe41) - [ux] changed share dialogue button to 'share' from 'send'
+
 ## 3.2.6
 
 ### Patch Changes

package/dist/cjs/components/CopyLinkButton.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.MessageContainer = exports.HiddenInput = exports.CopyLinkButton = exports.AUTO_DISMISS_MS = void 0;
+exports.messageContainerStyle = exports.default = exports.HiddenInput = exports.CopyLinkButton = exports.AUTO_DISMISS_MS = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -27,9 +27,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
 
@@ -62,17 +62,14 @@ var Z_INDEX = _constants.layers.modal();
 var AUTO_DISMISS_SECONDS = 8;
 var AUTO_DISMISS_MS = AUTO_DISMISS_SECONDS * 1000;
 exports.AUTO_DISMISS_MS = AUTO_DISMISS_MS;
-
-var MessageContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin: -8px -16px;\n"])));
-
-exports.MessageContainer = MessageContainer;
+var messageContainerStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin: -8px -16px;\n"])));
+exports.messageContainerStyle = messageContainerStyle;
 var isSafari = navigator.userAgent.indexOf('Safari');
-
-var MessageSpan = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-indent: 6px;\n"])));
+var messageTextStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-indent: 6px;\n"])));
 
 var HiddenInput = /*#__PURE__*/_react.default.forwardRef( // we need a hidden input to reliably copy to clipboard across all browsers.
 function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement("input", {
+  return (0, _react2.jsx)("input", {
     style: {
       position: 'absolute',
       left: '-9999px'
@@ -146,16 +143,16 @@ var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
           formatMessage = _this$props.intl.formatMessage,
           isDisabled = _this$props.isDisabled,
           isPublicLink = _this$props.isPublicLink;
-      return /*#__PURE__*/_react.default.createElement(_styles.default, (0, _extends2.default)({
+      return (0, _react2.jsx)(_styles.default, (0, _extends2.default)({
         "aria-label": formatMessage(isPublicLink ? _i18n.messages.copyPublicLinkButtonText : _i18n.messages.copyLinkButtonText),
         isDisabled: isDisabled,
         appearance: "subtle-link",
-        iconBefore: /*#__PURE__*/_react.default.createElement(_linkFilled.default, {
+        iconBefore: (0, _react2.jsx)(_linkFilled.default, {
           label: "",
           size: "medium"
         }),
         onClick: _this.handleClick
-      }, triggerProps), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, isPublicLink ? _i18n.messages.copyPublicLinkButtonText : _i18n.messages.copyLinkButtonText));
+      }, triggerProps), (0, _react2.jsx)(_reactIntlNext.FormattedMessage, isPublicLink ? _i18n.messages.copyPublicLinkButtonText : _i18n.messages.copyLinkButtonText));
     });
     return _this;
   }
@@ -174,25 +171,30 @@ var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
           formatMessage = _this$props2.intl.formatMessage,
           copyTooltipText = _this$props2.copyTooltipText;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isSafari && /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react2.jsx)(_react.default.Fragment, null, isSafari && (0, _react2.jsx)("div", {
         className: "assistive",
         "aria-live": "assertive"
-      }, shouldShowCopiedMessage && formatMessage(_i18n.messages.copiedToClipboardMessage)), /*#__PURE__*/_react.default.createElement(HiddenInput, {
+      }, shouldShowCopiedMessage && formatMessage(_i18n.messages.copiedToClipboardMessage)), (0, _react2.jsx)(HiddenInput, {
         ref: this.inputRef,
         text: this.props.link
-      }), /*#__PURE__*/_react.default.createElement(_popup.default, {
+      }), (0, _react2.jsx)(_popup.default, {
         zIndex: Z_INDEX,
         content: function content() {
-          return /*#__PURE__*/_react.default.createElement(_styled.InlineDialogContentWrapper, null, /*#__PURE__*/_react.default.createElement(MessageContainer, null, /*#__PURE__*/_react.default.createElement(_checkCircle.default, {
+          return (0, _react2.jsx)(_styled.InlineDialogContentWrapper, null, (0, _react2.jsx)("div", {
+            css: messageContainerStyle,
+            "data-testid": "message-container"
+          }, (0, _react2.jsx)(_checkCircle.default, {
             label: "",
             primaryColor: (0, _tokens.token)('color.icon.success', _colors.G300)
-          }), /*#__PURE__*/_react.default.createElement(MessageSpan, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.copiedToClipboardMessage))));
+          }), (0, _react2.jsx)("span", {
+            css: messageTextStyle
+          }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.copiedToClipboardMessage))));
         },
         isOpen: shouldShowCopiedMessage,
         onClose: this.handleDismissCopiedMessage,
         placement: "top-start",
         trigger: function trigger(triggerProps) {
-          return copyTooltipText ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+          return copyTooltipText ? (0, _react2.jsx)(_tooltip.default, {
             content: copyTooltipText,
             position: "bottom-start"
           }, _this2.renderTriggerButton(triggerProps)) : _this2.renderTriggerButton(triggerProps);

package/dist/cjs/components/IntegrationButton.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
@@ -25,22 +25,22 @@ var _excluded = ["text", "textColor", "IntegrationIcon"];
 
 var _templateObject, _templateObject2;
 
-var IntegrationButtonCopyWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  display: flex;\n  justify-content: left;\n"])), function (props) {
-  return props.theme.textColor || (0, _tokens.token)('color.text', _colors.N500);
-});
-
-var IntegrationIconWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 1px 8px 0 0;\n"])));
+var integrationButtonCopyWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: left;\n"])));
+var integrationIconWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 1px 8px 0 0;\n"])));
 
 var IntegrationButton = function IntegrationButton(props) {
   var text = props.text,
       textColor = props.textColor,
       IntegrationIcon = props.IntegrationIcon,
       restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, restProps, /*#__PURE__*/_react.default.createElement(IntegrationButtonCopyWrapper, {
-    theme: {
-      textColor: textColor
+  return (0, _react2.jsx)(_customThemeButton.default, restProps, (0, _react2.jsx)("span", {
+    css: integrationButtonCopyWrapperStyle,
+    style: {
+      color: textColor || (0, _tokens.token)('color.text', _colors.N500)
     }
-  }, /*#__PURE__*/_react.default.createElement(IntegrationIconWrapper, null, /*#__PURE__*/_react.default.createElement(IntegrationIcon, null)), /*#__PURE__*/_react.default.createElement("span", null, text)));
+  }, (0, _react2.jsx)("span", {
+    css: integrationIconWrapperStyle
+  }, (0, _react2.jsx)(IntegrationIcon, null)), (0, _react2.jsx)("span", null, text)));
 };
 
 IntegrationButton.displayName = 'IntegrationButton';

package/dist/cjs/components/IntegrationForm.js

@@ -5,21 +5,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IntegrationForm = exports.FormWrapper = void 0;
+exports.formWrapperStyle = exports.IntegrationForm = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _typography = require("@atlaskit/theme/typography");
 
 var _templateObject;
 
-var FormWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _typography.h500)());
-
-exports.FormWrapper = FormWrapper;
+var formWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _typography.h500)());
+exports.formWrapperStyle = formWrapperStyle;
 
 var IntegrationForm = function IntegrationForm(_ref) {
   var Content = _ref.Content,
@@ -31,7 +30,9 @@ var IntegrationForm = function IntegrationForm(_ref) {
       changeTab = _ref$changeTab === void 0 ? function () {
     return undefined;
   } : _ref$changeTab;
-  return /*#__PURE__*/_react.default.createElement(FormWrapper, null, Content && /*#__PURE__*/_react.default.createElement(Content, {
+  return (0, _react2.jsx)("div", {
+    css: formWrapperStyle
+  }, Content && (0, _react2.jsx)(Content, {
     onClose: onIntegrationClose,
     changeTab: changeTab
   }));

package/dist/cjs/components/ShareDialogWithTrigger.js

@@ -27,9 +27,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -71,8 +71,7 @@ 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; } }
 
-var ShareButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  outline: none;\n"])));
-
+var shareButtonWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  outline: none;\n"])));
 var defaultShareContentState = {
   users: [],
   comment: {
@@ -368,12 +367,12 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
           onClick: _this.onTriggerClick
         }, triggerProps);
       } else {
-        button = /*#__PURE__*/_react.default.createElement(_ShareButton.default, (0, _extends2.default)({
+        button = (0, _react2.jsx)(_ShareButton.default, (0, _extends2.default)({
           appearance: triggerButtonAppearance,
-          text: triggerButtonStyle !== 'icon-only' ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.shareTriggerButtonText) : null,
+          text: triggerButtonStyle !== 'icon-only' ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.shareTriggerButtonText) : null,
           "aria-label": formatMessage(_i18n.messages.shareTriggerButtonText),
           onClick: _this.onTriggerClick,
-          iconBefore: triggerButtonStyle !== 'text-only' ? /*#__PURE__*/_react.default.createElement(ShareButtonIcon, {
+          iconBefore: triggerButtonStyle !== 'text-only' ? (0, _react2.jsx)(ShareButtonIcon, {
             label: ""
           }) : undefined,
           isSelected: isDialogOpen,
@@ -383,7 +382,7 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
 
 
       if (triggerButtonStyle === 'icon-only') {
-        button = /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        button = (0, _react2.jsx)(_tooltip.default, {
           content: !isUsingSplitButton ? triggerButtonTooltipText || formatMessage(_i18n.messages.shareTriggerButtonTooltipText) : null,
           position: triggerButtonTooltipPosition,
           hideTooltipOnClick: true
@@ -392,7 +391,7 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
 
 
       if (integrationMode === 'split' && shareIntegrations !== null && shareIntegrations !== void 0 && shareIntegrations.length) {
-        button = /*#__PURE__*/_react.default.createElement(_SplitButton.default, {
+        button = (0, _react2.jsx)(_SplitButton.default, {
           shareButton: button,
           handleOpenSplitButton: _this.handleOpenSplitButton,
           handleCloseSplitButton: _this.handleCloseSplitButton,
@@ -480,15 +479,16 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
       } : undefined;
       var footer = (0, _utils.resolveShareFooter)(integrationMode, this.state.tabIndex, customFooter); // for performance purposes, we may want to have a loadable content i.e. ShareForm
 
-      return /*#__PURE__*/_react.default.createElement(ShareButtonWrapper, {
+      return (0, _react2.jsx)("div", {
+        css: shareButtonWrapperStyles,
         tabIndex: tabIndex,
         onKeyDown: this.handleKeyDown,
         style: style
-      }, /*#__PURE__*/_react.default.createElement(_popup.default, {
+      }, (0, _react2.jsx)(_popup.default, {
         content: function content() {
-          return /*#__PURE__*/_react.default.createElement("div", {
+          return (0, _react2.jsx)("div", {
             ref: _this2.containerRef
-          }, /*#__PURE__*/_react.default.createElement(_lazy.default, {
+          }, (0, _react2.jsx)(_lazy.default, {
             Content: selectedIntegration && selectedIntegration.Content,
             selectedIntegration: selectedIntegration,
             copyLink: copyLink,
@@ -531,9 +531,9 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
         placement: dialogPlacement,
         trigger: this.renderShareTriggerButton,
         zIndex: dialogZIndex
-      }), /*#__PURE__*/_react.default.createElement(_portal.default, {
+      }), (0, _react2.jsx)(_portal.default, {
         zIndex: (0, _utils.generateSelectZIndex)(dialogZIndex)
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _react2.jsx)("div", {
         ref: this.selectPortalRef
       })));
     }

package/dist/cjs/components/ShareForm.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ShareForm = exports.FormWrapper = exports.FormFooter = void 0;
+exports.formWrapperStyles = exports.formFooterStyles = exports.ShareForm = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -29,9 +29,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -81,26 +81,18 @@ 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; } }
 
-var SubmitButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: auto;\n"])));
-
-var CenterAlignedIconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-self: center;\n  padding: 0 10px;\n\n  > div {\n    line-height: 1;\n  }\n"])));
-
-var FormWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.gridSize)());
-
-exports.FormWrapper = FormWrapper;
-
-var FormFooter = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", "px;\n  display: flex;\n  justify-content: flex-start;\n"])), _constants.gridSize);
-
-exports.FormFooter = FormFooter;
-
-var FormField = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: 12px;\n"])));
-
-var IntegrationWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
-
-var IntegrationIconWrapper = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: -6px;\n  margin-right: 5px;\n"])));
+var submitButtonWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: auto;\n"])));
+var centerAlignedIconWrapperStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-self: center;\n  padding: 0 10px;\n\n  > div {\n    line-height: 1;\n  }\n"])));
+var formWrapperStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.gridSize)());
+exports.formWrapperStyles = formWrapperStyles;
+var formFooterStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n"])));
+exports.formFooterStyles = formFooterStyles;
+var formFieldStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: 12px;\n"])));
+var integrationWrapperStyles = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+var integrationIconWrapperStyles = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: -6px;\n  margin-right: 5px;\n"])));
 
 var integrationTabText = function integrationTabText(integrationName) {
-  return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.shareInIntegrationButtonText, {
+  return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.shareInIntegrationButtonText, {
     values: {
       integrationName: integrationName
     }
@@ -151,13 +143,15 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
           copyTooltipText = _this$props.copyTooltipText,
           helperMessage = _this$props.helperMessage,
           orgId = _this$props.orgId;
-      return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+      return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
         data: {
           source: _analytics.ANALYTICS_SOURCE
         }
-      }, /*#__PURE__*/_react.default.createElement("form", formProps, showTitle && /*#__PURE__*/_react.default.createElement(_ShareHeader.ShareHeader, {
+      }, (0, _react2.jsx)("form", formProps, showTitle && (0, _react2.jsx)(_ShareHeader.ShareHeader, {
         title: title
-      }), /*#__PURE__*/_react.default.createElement(FormField, null, /*#__PURE__*/_react.default.createElement(_UserPickerField.UserPickerField, {
+      }), (0, _react2.jsx)("div", {
+        css: formFieldStyles
+      }, (0, _react2.jsx)(_UserPickerField.UserPickerField, {
         onInputChange: onUserInputChange,
         onChange: onUserSelectionChange,
         loadOptions: loadOptions,
@@ -172,9 +166,14 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
         isPublicLink: isPublicLink,
         helperMessage: helperMessage,
         orgId: orgId
-      })), /*#__PURE__*/_react.default.createElement(FormField, null, /*#__PURE__*/_react.default.createElement(_CommentField.CommentField, {
+      })), (0, _react2.jsx)("div", {
+        css: formFieldStyles
+      }, (0, _react2.jsx)(_CommentField.CommentField, {
         defaultValue: defaultValue && defaultValue.comment
-      })), fieldsFooter, /*#__PURE__*/_react.default.createElement(FormFooter, null, /*#__PURE__*/_react.default.createElement(_CopyLinkButton.default, {
+      })), fieldsFooter, (0, _react2.jsx)("div", {
+        css: formFooterStyles,
+        "data-testid": "form-footer"
+      }, (0, _react2.jsx)(_CopyLinkButton.default, {
         isDisabled: isDisabled,
         onLinkCopy: onLinkCopy,
         link: copyLink,
@@ -195,22 +194,26 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
       var buttonAppearance = !shouldShowWarning ? 'primary' : 'warning';
       var tabMode = integrationMode === 'tabs';
       var formPublicLabel = tabMode ? _i18n.messages.formSharePublic : _i18n.messages.formSendPublic;
-      var formSendLabel = tabMode ? _i18n.messages.formShare : _i18n.messages.formSend;
+      var formSendLabel = _i18n.messages.formShare;
       var sendLabel = isPublicLink ? formPublicLabel : formSendLabel;
       var buttonLabel = shareError ? _i18n.messages.formRetry : sendLabel;
       var ButtonLabelWrapper = buttonAppearance === 'warning' ? 'strong' : _react.default.Fragment;
-      return /*#__PURE__*/_react.default.createElement(SubmitButtonWrapper, null, /*#__PURE__*/_react.default.createElement(CenterAlignedIconWrapper, null, shouldShowWarning && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-        content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.shareFailureMessage),
+      return (0, _react2.jsx)("div", {
+        css: submitButtonWrapperStyles
+      }, (0, _react2.jsx)("div", {
+        css: centerAlignedIconWrapperStyles
+      }, shouldShowWarning && (0, _react2.jsx)(_tooltip.default, {
+        content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.shareFailureMessage),
         position: "top"
-      }, /*#__PURE__*/_react.default.createElement(_error.default, {
+      }, (0, _react2.jsx)(_error.default, {
         label: formatMessage(_i18n.messages.shareFailureIconLabel),
         primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R400)
-      }))), /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      }))), (0, _react2.jsx)(_customThemeButton.default, {
         appearance: buttonAppearance,
         type: "submit",
         isLoading: isSharing,
         isDisabled: isDisabled
-      }, /*#__PURE__*/_react.default.createElement(ButtonLabelWrapper, null, submitButtonLabel || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, buttonLabel))));
+      }, (0, _react2.jsx)(ButtonLabelWrapper, null, submitButtonLabel || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, buttonLabel))));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMainTabTitle", function () {
       var _this$props3 = _this.props,
@@ -222,11 +225,11 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       if (!product) {
-        return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.formTitle);
+        return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.formTitle);
       }
 
       var productShareType = product === 'jira' ? _objectSpread({}, _i18n.messages.shareMainTabTextJira) : _objectSpread({}, _i18n.messages.shareMainTabTextConfluence);
-      return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, productShareType);
+      return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, productShareType);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "changeTab", function (tab) {
       var _this$props$onTabChan, _this$props4;
@@ -267,23 +270,31 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
       var firstIntegration = shareIntegrations[0];
 
       if (integrationMode === 'tabs') {
-        return /*#__PURE__*/_react.default.createElement(_tabs.default, {
+        return (0, _react2.jsx)(_tabs.default, {
           id: "ShareForm-Tabs-Integrations",
           onChange: this.changeTab,
           selected: this.state.selectedTab
-        }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, /*#__PURE__*/_react.default.createElement(_tabs.Tab, {
+        }, (0, _react2.jsx)(_tabs.TabList, null, (0, _react2.jsx)(_tabs.Tab, {
           key: "share-tab-default"
-        }, this.renderMainTabTitle()), /*#__PURE__*/_react.default.createElement(_tabs.Tab, {
+        }, this.renderMainTabTitle()), (0, _react2.jsx)(_tabs.Tab, {
           key: "share-tab-".concat(firstIntegration.type)
-        }, /*#__PURE__*/_react.default.createElement(IntegrationWrapper, null, /*#__PURE__*/_react.default.createElement(IntegrationIconWrapper, null, /*#__PURE__*/_react.default.createElement(firstIntegration.Icon, null)), integrationTabText(firstIntegration.type)))), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, {
+        }, (0, _react2.jsx)("div", {
+          css: integrationWrapperStyles
+        }, (0, _react2.jsx)("span", {
+          css: integrationIconWrapperStyles
+        }, (0, _react2.jsx)(firstIntegration.Icon, null)), integrationTabText(firstIntegration.type)))), (0, _react2.jsx)(_tabs.TabPanel, {
           key: "share-tabPanel-default"
-        }, /*#__PURE__*/_react.default.createElement(FormWrapper, null, this.renderShareForm())), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, {
+        }, (0, _react2.jsx)("div", {
+          css: formWrapperStyles
+        }, this.renderShareForm())), (0, _react2.jsx)(_tabs.TabPanel, {
           key: "share-tabPanel-integration"
-        }, /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+        }, (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
           data: {
             source: _analytics.INTEGRATION_MODAL_SOURCE
           }
-        }, /*#__PURE__*/_react.default.createElement(FormWrapper, null, /*#__PURE__*/_react.default.createElement(_IntegrationForm.IntegrationForm, {
+        }, (0, _react2.jsx)("div", {
+          css: formWrapperStyles
+        }, (0, _react2.jsx)(_IntegrationForm.IntegrationForm, {
           Content: firstIntegration.Content,
           onIntegrationClose: function onIntegrationClose() {
             return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
@@ -304,12 +315,12 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
 var InternalFormWithIntl = (0, _reactIntlNext.injectIntl)(InternalForm);
 
 var ShareForm = function ShareForm(props) {
-  return /*#__PURE__*/_react.default.createElement(_form.default, {
+  return (0, _react2.jsx)(_form.default, {
     onSubmit: props.onSubmit
   }, function (_ref) {
     var formProps = _ref.formProps,
         getValues = _ref.getValues;
-    return /*#__PURE__*/_react.default.createElement(InternalFormWithIntl, (0, _extends2.default)({}, props, {
+    return (0, _react2.jsx)(InternalFormWithIntl, (0, _extends2.default)({}, props, {
       formProps: formProps,
       getValues: getValues
     }));

package/dist/cjs/components/ShareHeader.js

@@ -5,15 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ShareHeader = exports.FormHeaderTitle = void 0;
+exports.getFormHeaderTitleStyles = exports.ShareHeader = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -23,15 +23,22 @@ var _i18n = require("../i18n");
 
 var _templateObject, _templateObject2;
 
-var HeaderWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n"])));
+var headerWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n"])));
 
-var FormHeaderTitle = _styledComponents.default.h1(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), _typography.h500, (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() * 4);
+var getFormHeaderTitleStyles = function getFormHeaderTitleStyles(theme) {
+  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _typography.h500)(theme), (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() * 4);
+};
 
-exports.FormHeaderTitle = FormHeaderTitle;
+exports.getFormHeaderTitleStyles = getFormHeaderTitleStyles;
 
 var ShareHeader = function ShareHeader(_ref) {
   var title = _ref.title;
-  return /*#__PURE__*/_react.default.createElement(HeaderWrapper, null, /*#__PURE__*/_react.default.createElement(FormHeaderTitle, null, title || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.formTitle)));
+  var theme = (0, _react2.useTheme)();
+  return (0, _react2.jsx)("div", {
+    css: headerWrapperStyles
+  }, (0, _react2.jsx)("h1", {
+    css: getFormHeaderTitleStyles(theme)
+  }, title || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.formTitle)));
 };
 
 exports.ShareHeader = ShareHeader;

package/dist/cjs/components/SplitButton.js

@@ -17,9 +17,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
@@ -47,14 +47,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var SplitButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)());
-
-var DropdownMenuWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)());
+var splitButtonWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)());
+var dropdownMenuWrapperStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)()); // span
 
-var DropDownIntegrationButtonWrapper = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  button:hover {\n    background: transparent;\n  }\n"])));
+var dropDownIntegrationButtonWrapperStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  button:hover {\n    background: transparent;\n  }\n"])));
 
 var integrationButtonText = function integrationButtonText(integrationName) {
-  return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.shareToIntegrationButtonText, {
+  return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.shareToIntegrationButtonText, {
     values: {
       integrationName: integrationName
     }
@@ -82,14 +81,16 @@ var SplitButtonDropdown = function SplitButtonDropdown(props) {
     onIntegrationClick(integration);
     createAndFireEvent((0, _analytics.shareIntegrationButtonEvent)(integration.type));
   }, [createAndFireEvent, onIntegrationClick]);
-  return /*#__PURE__*/_react.default.createElement(DropdownMenuWrapper, null, /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
+  return (0, _react2.jsx)("div", {
+    css: dropdownMenuWrapperStyles
+  }, (0, _react2.jsx)(_dropdownMenu.default, {
     testId: "split-button-dropdown",
     trigger: function trigger(_ref2) {
       var triggerRef = _ref2.triggerRef,
           providedProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({}, providedProps, {
+      return (0, _react2.jsx)(_standardButton.default, (0, _extends2.default)({}, providedProps, {
         ref: triggerRef,
-        iconBefore: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+        iconBefore: (0, _react2.jsx)(_chevronDown.default, {
           label: ""
         }),
         appearance: triggerButtonAppearance
@@ -98,11 +99,13 @@ var SplitButtonDropdown = function SplitButtonDropdown(props) {
     placement: "bottom-end",
     isOpen: isUsingSplitButton,
     onOpenChange: onOpenChange
-  }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, shareIntegrations.map(function (integration) {
-    return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
+  }, (0, _react2.jsx)(_dropdownMenu.DropdownItemGroup, null, shareIntegrations.map(function (integration) {
+    return (0, _react2.jsx)(_dropdownMenu.DropdownItem, {
       key: integration.type,
       testId: "split-button-dropdownitem-".concat(integration.type)
-    }, /*#__PURE__*/_react.default.createElement(DropDownIntegrationButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_IntegrationButton.default, {
+    }, (0, _react2.jsx)("span", {
+      css: dropDownIntegrationButtonWrapperStyles
+    }, (0, _react2.jsx)(_IntegrationButton.default, {
       textColor: (0, _tokens.token)('color.text', _colors.N800),
       appearance: "subtle",
       onClick: function onClick() {
@@ -128,9 +131,10 @@ function SplitButton(_ref3) {
       dialogZIndex = _ref3.dialogZIndex,
       dialogPlacement = _ref3.dialogPlacement,
       createAndFireEvent = _ref3.createAndFireEvent;
-  return /*#__PURE__*/_react.default.createElement(SplitButtonWrapper, {
+  return (0, _react2.jsx)("div", {
+    css: splitButtonWrapperStyles,
     "data-testid": "split-button"
-  }, shareButton, /*#__PURE__*/_react.default.createElement(SplitButtonDropdown, {
+  }, shareButton, (0, _react2.jsx)(SplitButtonDropdown, {
     shareIntegrations: shareIntegrations,
     triggerButtonAppearance: triggerButtonAppearance,
     isUsingSplitButton: isUsingSplitButton,