@atlaskit/share 3.2.6 → 3.4.0

package/dist/cjs/components/analytics/analytics.js

@@ -19,7 +19,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/cjs/version.json

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

package/dist/es2019/components/CopyLinkButton.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @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';
@@ -16,17 +18,17 @@ import Button from './styles';
 const Z_INDEX = layers.modal();
 const AUTO_DISMISS_SECONDS = 8;
 export const AUTO_DISMISS_MS = AUTO_DISMISS_SECONDS * 1000;
-export const MessageContainer = styled.div`
+export const messageContainerStyle = css`
   display: flex;
   align-items: center;
   margin: -8px -16px;
 `;
 const isSafari = navigator.userAgent.indexOf('Safari');
-const MessageSpan = styled.span`
+const messageTextStyle = css`
   text-indent: 6px;
 `;
 export const HiddenInput = /*#__PURE__*/React.forwardRef( // we need a hidden input to reliably copy to clipboard across all browsers.
-(props, ref) => /*#__PURE__*/React.createElement("input", {
+(props, ref) => jsx("input", {
   style: {
     position: 'absolute',
     left: '-9999px'
@@ -90,16 +92,16 @@ export class CopyLinkButton extends React.Component {
         isDisabled,
         isPublicLink
       } = this.props;
-      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));
     });
   }
 
@@ -117,22 +119,27 @@ export class CopyLinkButton extends React.Component {
       },
       copyTooltipText
     } = this.props;
-    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: () => /*#__PURE__*/React.createElement(InlineDialogContentWrapper, null, /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(CheckCircleIcon, {
+      content: () => 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: triggerProps => copyTooltipText ? /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: triggerProps => copyTooltipText ? jsx(Tooltip, {
         content: copyTooltipText,
         position: "bottom-start"
       }, this.renderTriggerButton(triggerProps)) : this.renderTriggerButton(triggerProps)

package/dist/es2019/components/IntegrationButton.js

@@ -1,14 +1,14 @@
+/** @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';
-const IntegrationButtonCopyWrapper = styled.span`
-  color: ${props => props.theme.textColor || token('color.text', N500)};
+const integrationButtonCopyWrapperStyle = css`
   display: flex;
   justify-content: left;
 `;
-const IntegrationIconWrapper = styled.span`
+const integrationIconWrapperStyle = css`
   margin: 1px 8px 0 0;
 `;
 
@@ -19,11 +19,14 @@ const IntegrationButton = props => {
     IntegrationIcon,
     ...restProps
   } = props;
-  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/es2019/components/IntegrationForm.js

@@ -1,7 +1,8 @@
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { h500 } from '@atlaskit/theme/typography';
-export const FormWrapper = styled.div`
+export const formWrapperStyle = css`
   [class^='FormHeader__FormHeaderWrapper'] {
     h1:first-child {
       ${h500()}
@@ -33,7 +34,9 @@ export const IntegrationForm = ({
   Content,
   onIntegrationClose = () => undefined,
   changeTab = () => undefined
-}) => /*#__PURE__*/React.createElement(FormWrapper, null, Content && /*#__PURE__*/React.createElement(Content, {
+}) => jsx("div", {
+  css: formWrapperStyle
+}, Content && jsx(Content, {
   onClose: onIntegrationClose,
   changeTab: changeTab
 }));

package/dist/es2019/components/ShareDialogWithTrigger.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @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';
@@ -20,7 +22,7 @@ import LazyShareFormLazy from './LazyShareForm/lazy';
 import ShareButton from './ShareButton';
 import SplitButton from './SplitButton';
 import { generateSelectZIndex, resolveShareFooter } from './utils';
-const ShareButtonWrapper = styled.div`
+const shareButtonWrapperStyles = css`
   display: inline-flex;
   outline: none;
 `;
@@ -326,12 +328,12 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
           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,
@@ -341,7 +343,7 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
 
 
       if (triggerButtonStyle === 'icon-only') {
-        button = /*#__PURE__*/React.createElement(Aktooltip, {
+        button = jsx(Aktooltip, {
           content: !isUsingSplitButton ? triggerButtonTooltipText || formatMessage(messages.shareTriggerButtonTooltipText) : null,
           position: triggerButtonTooltipPosition,
           hideTooltipOnClick: true
@@ -350,7 +352,7 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
 
 
       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,
@@ -432,14 +434,15 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
     } : undefined;
     const 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, {
-      content: () => /*#__PURE__*/React.createElement("div", {
+    }, jsx(Popup, {
+      content: () => jsx("div", {
         ref: this.containerRef
-      }, /*#__PURE__*/React.createElement(LazyShareFormLazy, {
+      }, jsx(LazyShareFormLazy, {
         Content: selectedIntegration && selectedIntegration.Content,
         selectedIntegration: selectedIntegration,
         copyLink: copyLink,
@@ -481,9 +484,9 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
       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/es2019/components/ShareForm.js

@@ -1,8 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @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';
@@ -20,11 +22,11 @@ import CopyLinkButton from './CopyLinkButton';
 import { IntegrationForm } from './IntegrationForm';
 import { ShareHeader } from './ShareHeader';
 import { UserPickerField } from './UserPickerField';
-const SubmitButtonWrapper = styled.div`
+const submitButtonWrapperStyles = css`
   display: flex;
   margin-left: auto;
 `;
-const CenterAlignedIconWrapper = styled.div`
+const centerAlignedIconWrapperStyles = css`
   display: flex;
   align-self: center;
   padding: 0 10px;
@@ -33,7 +35,7 @@ const CenterAlignedIconWrapper = styled.div`
     line-height: 1;
   }
 `;
-export const FormWrapper = styled.div`
+export const formWrapperStyles = css`
   margin-top: ${gridSize()}px;
   width: 100%;
 
@@ -42,24 +44,23 @@ export const FormWrapper = styled.div`
     margin-top: 0;
   }
 `;
-export const FormFooter = styled.div`
-  margin-bottom: ${gridSize}px;
+export const formFooterStyles = css`
   display: flex;
   justify-content: flex-start;
 `;
-const FormField = styled.div`
+const formFieldStyles = css`
   margin-bottom: 12px;
 `;
-const IntegrationWrapper = styled.div`
+const integrationWrapperStyles = css`
   display: flex;
   align-items: center;
 `;
-const IntegrationIconWrapper = styled.span`
+const integrationIconWrapperStyles = css`
   margin-bottom: -6px;
   margin-right: 5px;
 `;
 
-const integrationTabText = integrationName => /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.shareInIntegrationButtonText, {
+const integrationTabText = integrationName => jsx(FormattedMessage, _extends({}, messages.shareInIntegrationButtonText, {
   values: {
     integrationName
   }
@@ -99,13 +100,15 @@ class InternalForm extends React.PureComponent {
         helperMessage,
         orgId
       } = this.props;
-      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,
@@ -120,9 +123,14 @@ class InternalForm extends 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,
@@ -147,22 +155,26 @@ class InternalForm extends React.PureComponent {
       const buttonAppearance = !shouldShowWarning ? 'primary' : 'warning';
       const tabMode = integrationMode === 'tabs';
       const formPublicLabel = tabMode ? messages.formSharePublic : messages.formSendPublic;
-      const formSendLabel = tabMode ? messages.formShare : messages.formSend;
+      const formSendLabel = messages.formShare;
       const sendLabel = isPublicLink ? formPublicLabel : formSendLabel;
       const buttonLabel = shareError ? messages.formRetry : sendLabel;
       const 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(this, "renderMainTabTitle", () => {
@@ -176,13 +188,13 @@ class InternalForm extends React.PureComponent {
       }
 
       if (!product) {
-        return /*#__PURE__*/React.createElement(FormattedMessage, messages.formTitle);
+        return jsx(FormattedMessage, messages.formTitle);
       }
 
       const productShareType = product === 'jira' ? { ...messages.shareMainTabTextJira
       } : { ...messages.shareMainTabTextConfluence
       };
-      return /*#__PURE__*/React.createElement(FormattedMessage, productShareType);
+      return jsx(FormattedMessage, productShareType);
     });
 
     _defineProperty(this, "changeTab", tab => {
@@ -220,23 +232,31 @@ class InternalForm extends React.PureComponent {
     const 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-${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: () => handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog(),
         changeTab: this.changeTab
@@ -253,12 +273,12 @@ _defineProperty(InternalForm, "defaultProps", {
 });
 
 const InternalFormWithIntl = injectIntl(InternalForm);
-export const ShareForm = props => /*#__PURE__*/React.createElement(Form, {
+export const ShareForm = props => jsx(Form, {
   onSubmit: props.onSubmit
 }, ({
   formProps,
   getValues
-}) => /*#__PURE__*/React.createElement(InternalFormWithIntl, _extends({}, props, {
+}) => jsx(InternalFormWithIntl, _extends({}, props, {
   formProps: formProps,
   getValues: getValues
 })));

package/dist/es2019/components/ShareHeader.js

@@ -1,15 +1,16 @@
+/** @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';
-const HeaderWrapper = styled.div`
+const headerWrapperStyles = css`
   display: flex;
   justify-content: space-between;
 `;
-export const FormHeaderTitle = styled.h1`
-  ${h500};
+export const getFormHeaderTitleStyles = theme => css`
+  ${h500(theme)}
   line-height: ${gridSize() * 4}px;
   margin-right: ${gridSize() * 4}px;
   margin-top: ${gridSize() * 4}px;
@@ -23,4 +24,11 @@ export const FormHeaderTitle = styled.h1`
 `;
 export const ShareHeader = ({
   title
-}) => /*#__PURE__*/React.createElement(HeaderWrapper, null, /*#__PURE__*/React.createElement(FormHeaderTitle, null, title || /*#__PURE__*/React.createElement(FormattedMessage, messages.formTitle)));
+}) => {
+  const theme = useTheme();
+  return jsx("div", {
+    css: headerWrapperStyles
+  }, jsx("h1", {
+    css: getFormHeaderTitleStyles(theme)
+  }, title || jsx(FormattedMessage, messages.formTitle)));
+};

package/dist/es2019/components/SplitButton.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @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';
@@ -11,7 +13,7 @@ import { token } from '@atlaskit/tokens';
 import { messages } from '../i18n';
 import { shareIntegrationButtonEvent } from './analytics/analytics';
 import IntegrationButton from './IntegrationButton';
-const SplitButtonWrapper = styled.div`
+const splitButtonWrapperStyles = css`
   display: flex;
   button {
     border-radius: ${borderRadius()}px 0 0 ${borderRadius()}px;
@@ -20,7 +22,7 @@ const SplitButtonWrapper = styled.div`
     border-radius: ${borderRadius()}px 0 0 ${borderRadius()}px;
   }
 `;
-const DropdownMenuWrapper = styled.div`
+const dropdownMenuWrapperStyles = css`
   margin-left: 1px;
   button {
     border-radius: 0 ${borderRadius()}px ${borderRadius()}px 0;
@@ -28,14 +30,15 @@ const DropdownMenuWrapper = styled.div`
   button:hover {
     border-radius: 0 ${borderRadius()}px ${borderRadius()}px 0;
   }
-`;
-const DropDownIntegrationButtonWrapper = styled.span`
+`; // span
+
+const dropDownIntegrationButtonWrapperStyles = css`
   button:hover {
     background: transparent;
   }
 `;
 
-const integrationButtonText = integrationName => /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.shareToIntegrationButtonText, {
+const integrationButtonText = integrationName => jsx(FormattedMessage, _extends({}, messages.shareToIntegrationButtonText, {
   values: {
     integrationName
   }
@@ -64,14 +67,16 @@ const 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: ({
       triggerRef,
       ...providedProps
-    }) => /*#__PURE__*/React.createElement(Button, _extends({}, providedProps, {
+    }) => jsx(Button, _extends({}, providedProps, {
       ref: triggerRef,
-      iconBefore: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      iconBefore: jsx(ChevronDownIcon, {
         label: ""
       }),
       appearance: triggerButtonAppearance
@@ -79,10 +84,12 @@ const SplitButtonDropdown = props => {
     placement: "bottom-end",
     isOpen: isUsingSplitButton,
     onOpenChange: onOpenChange
-  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, shareIntegrations.map(integration => /*#__PURE__*/React.createElement(DropdownItem, {
+  }, jsx(DropdownItemGroup, null, shareIntegrations.map(integration => jsx(DropdownItem, {
     key: integration.type,
     testId: `split-button-dropdownitem-${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: () => onIntegrationButtonClick(integration),
@@ -105,9 +112,10 @@ export default function SplitButton({
   dialogPlacement,
   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/es2019/components/analytics/analytics.js

@@ -2,7 +2,7 @@ import { isEmail, isTeam, isUser } from '@atlaskit/smart-user-picker';
 
 const buildAttributes = (attributes = {}) => ({
   packageName: "@atlaskit/share",
-  packageVersion: "3.2.6",
+  packageVersion: "3.4.0",
   ...attributes
 });
 

package/dist/es2019/version.json

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