@atlaskit/teams-public 0.74.4 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/teams-public
 
+## 1.1.0
+
+### Minor Changes
+
+- [`5ad73d0a4dc97`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5ad73d0a4dc97) -
+  Aligned UI to conform with Team'26 US design drop
+
+### Patch Changes
+
+- [`2fee5f9932185`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2fee5f9932185) -
+  Migrate examples to use the playground package
+
+## 1.0.0
+
+### Major Changes
+
+- [`fbc8a506b5b08`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fbc8a506b5b08) -
+  Removed `react-intl-next` alias and replaced all usages with `react-intl` directly.
+
+  What changed: The `react-intl-next` npm alias (which resolved to `react-intl@^5`) has been
+  removed. All imports now reference `react-intl` directly, and `peerDependencies` have been updated
+  to `"^5.25.1 || ^6.0.0 || ^7.0.0"`.
+
+  How consumer should update their code: Ensure `react-intl` is installed at a version satisfying
+  `^5.25.1 || ^6.0.0 || ^7.0.0`. If your application was using `react-intl-next` as an npm alias, it
+  can be safely removed. Replace any remaining `react-intl-next` imports with `react-intl`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.74.4
 
 ### Patch Changes

package/dist/cjs/common/ui/container-icon/index.js

@@ -2,19 +2,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ContainerIcon = void 0;
 require("./index.compiled.css");
 var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _new = require("@atlaskit/button/new");
 var _css = require("@atlaskit/css");
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _tile = _interopRequireDefault(require("@atlaskit/tile"));
 var _loomAvatar = require("../loom-avatar");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   linkIconWrapperSmall: "_19pkv77o _2hwxv77o _otyrv77o _18u0v77o"
 };
@@ -25,16 +30,33 @@ var ContainerIcon = exports.ContainerIcon = function ContainerIcon(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size;
   var isMedium = size === 'medium';
+  var _React$useState = _react.default.useState(false),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    remoteIconFailed = _React$useState2[0],
+    setRemoteIconFailed = _React$useState2[1];
+  (0, _react.useEffect)(function () {
+    setRemoteIconFailed(false);
+  }, [containerIcon]);
   if (containerType === 'LoomSpace') {
     return /*#__PURE__*/_react.default.createElement(_loomAvatar.LoomSpaceAvatar, {
       spaceName: title,
-      size: isMedium ? 'large' : size,
+      size: size,
       testId: "linked-container-".concat(containerType, "-icon")
     });
   }
 
   // This is a fallback icon for WebLink if the containerIcon is not present
-  if (containerType === 'WebLink' && !containerIcon) {
+  if (containerType === 'WebLink' && !containerIcon || remoteIconFailed) {
+    if ((0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences')) {
+      return /*#__PURE__*/_react.default.createElement(_tile.default, {
+        label: "",
+        size: size,
+        testId: "linked-container-WebLink-new-icon",
+        hasBorder: true
+      }, /*#__PURE__*/_react.default.createElement(_link.default, {
+        label: ""
+      }));
+    }
     return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       xcss: (0, _css.cx)(!isMedium && styles.linkIconWrapperSmall)
     }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
@@ -54,6 +76,22 @@ var ContainerIcon = exports.ContainerIcon = function ContainerIcon(_ref) {
       }
     }));
   }
+  if ((0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences')) {
+    return /*#__PURE__*/_react.default.createElement(_tile.default, {
+      label: "",
+      size: size,
+      testId: "linked-container-WebLink-new-icon",
+      isInset: false,
+      backgroundColor: "transparent"
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      as: "img",
+      src: containerIcon,
+      alt: title,
+      onError: function onError() {
+        setRemoteIconFailed(true);
+      }
+    }));
+  }
   return /*#__PURE__*/_react.default.createElement(_avatar.default, {
     appearance: "square",
     borderColor: "transparent",

package/dist/cjs/common/ui/loom-avatar/main.compiled.css

@@ -1,6 +1,7 @@
 ._11c81af2{font:var(--ds-font-heading-medium,normal 653 20px/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11c81qyo{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._18zrv77o{padding-inline:var(--ds-space-025,2px)}
 ._1dqonqa1{border-style:solid}
@@ -8,11 +9,14 @@
 ._18u0v77o{margin-left:var(--ds-space-025,2px)}
 ._19pkv77o{margin-top:var(--ds-space-025,2px)}
 ._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
 ._1bsbzwfg{width:2pc}
 ._1e0c1txw{display:flex}
 ._1ul9qslr{min-width:22px}
 ._2hwxv77o{margin-right:var(--ds-space-025,2px)}
 ._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
 ._4t3iqslr{height:22px}
 ._4t3izwfg{height:2pc}
-._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
+._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
+._vchhusvi{box-sizing:border-box}

package/dist/cjs/common/ui/loom-avatar/main.js

@@ -1,6 +1,7 @@
 /* main.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,8 +10,19 @@ exports.LoomSpaceAvatar = LoomSpaceAvatar;
 require("./main.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _css = require("@atlaskit/css");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _tile = _interopRequireDefault(require("@atlaskit/tile"));
 var _utils = require("./utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var typographyByAvatarSize = {
+  small: "_11c81qyo",
+  medium: "_11c81af2"
+};
+var styles = {
+  loomAvatar: "_2rkol0p1 _189ee4h9 _1dqonqa1 _1h6d1l7x _1e0c1txw _4cvr1h6o _1bah1h6o _vchhusvi _1bsb1osq _4t3i1osq"
+};
 var boxStyle = null;
 var smallBoxStyle = null;
 var largeBoxStyle = null;
@@ -24,6 +36,20 @@ function LoomSpaceAvatar(_ref) {
   var avatarText = (0, _utils.getAvatarText)(spaceName);
   var containerColor = (0, _utils.pickContainerColor)(spaceName);
   var textColor = (0, _utils.pickTextColor)(spaceName);
+  if ((0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences')) {
+    return /*#__PURE__*/React.createElement(_tile.default, {
+      size: size,
+      label: "",
+      isInset: false,
+      testId: testId
+    }, /*#__PURE__*/React.createElement(_compiled.Box, {
+      xcss: (0, _css.cx)(styles.loomAvatar, typographyByAvatarSize[size]),
+      style: {
+        backgroundColor: containerColor,
+        color: textColor
+      }
+    }, avatarText));
+  }
   return /*#__PURE__*/React.createElement("div", {
     style: {
       backgroundColor: containerColor,

package/dist/cjs/common/ui/team-link-card-actions/index.js

@@ -12,7 +12,7 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _new = require("@atlaskit/button/new");
 var _css = require("@atlaskit/css");
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
@@ -29,7 +29,7 @@ var styles = {
   iconHidden: "_1e0cglyw",
   iconVisible: "_1e0c1txw"
 };
-var messages = (0, _reactIntlNext.defineMessages)({
+var messages = (0, _reactIntl.defineMessages)({
   disconnectTooltip: {
     id: 'ptc-directory.team-containers.disconnect-button.tooltip',
     defaultMessage: 'Disconnect',
@@ -57,7 +57,7 @@ var TeamLinkCardActions = exports.TeamLinkCardActions = function TeamLinkCardAct
     onDisconnectButtonClick = _ref.onDisconnectButtonClick,
     onEditLinkClick = _ref.onEditLinkClick,
     onDropdownOpenChange = _ref.onDropdownOpenChange;
-  var _useIntl = (0, _reactIntlNext.useIntl)(),
+  var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useAnalyticsEvents = (0, _teamsAppInternalAnalytics.useAnalyticsEvents)(),
     fireEvent = _useAnalyticsEvents.fireEvent;

package/dist/cjs/common/utils/get-container-properties.js

@@ -10,12 +10,14 @@ require("./get-container-properties.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _css = require("@atlaskit/css");
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
 var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
 var _image = _interopRequireDefault(require("@atlaskit/image"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _tile = _interopRequireDefault(require("@atlaskit/tile"));
 var _ConfluenceIcon = _interopRequireDefault(require("../assets/ConfluenceIcon.svg"));
 var _JiraIcon = _interopRequireDefault(require("../assets/JiraIcon.svg"));
 var _JiraProjectDiscovery = _interopRequireDefault(require("../assets/JiraProjectDiscovery.svg"));
@@ -29,9 +31,10 @@ var styles = {
   smallAvatarWrapper: "_1bsb7vkz _4t3i7vkz",
   smallAvatarMargin: "_195gidpf _1mouidpf",
   linkIconWrapper: "_2rkofajl _1bsb7vkz _4t3i7vkz _1e0c1txw _4cvr1h6o _1bah1h6o _12ji1l7x _1qu2nqa1",
-  linkAvatarWrapper: "_2rko1eiz _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _bfhki8nm"
+  linkAvatarWrapper: "_2rko1eiz _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _bfhki8nm",
+  profileCardWebLinkIconWrapper: "_1bsb7vkz _4t3i7vkz _1e0c1txw _4cvr1h6o _1bah1h6o"
 };
-var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+var messages = exports.messages = (0, _reactIntl.defineMessages)({
   addConfluenceContainerTitle: {
     id: 'ptc-directory.team-profile-page.team-containers.add-confluence-space-title',
     defaultMessage: 'Add space',
@@ -83,6 +86,15 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     description: 'Description displayed for link containers in team profile'
   }
 });
+var ContainerIconWrapper = function ContainerIconWrapper(_ref) {
+  var children = _ref.children,
+    iconSize = _ref.iconSize;
+  return /*#__PURE__*/_react.default.createElement(_tile.default, {
+    label: "",
+    size: iconSize,
+    isInset: false
+  }, children);
+};
 var getJiraIcon = function getJiraIcon(containerSubTypes) {
   switch (containerSubTypes) {
     case 'PRODUCT_DISCOVERY':
@@ -93,24 +105,30 @@ var getJiraIcon = function getJiraIcon(containerSubTypes) {
       return _JiraIcon.default;
   }
 };
-var getJiraContainerProperties = function getJiraContainerProperties(_ref) {
-  var containerTypeProperties = _ref.containerTypeProperties,
-    _ref$iconSize = _ref.iconSize,
-    iconSize = _ref$iconSize === void 0 ? 'medium' : _ref$iconSize;
-  var _ref2 = containerTypeProperties || {},
-    subType = _ref2.subType,
-    name = _ref2.name;
+var getJiraContainerProperties = function getJiraContainerProperties(_ref2) {
+  var containerTypeProperties = _ref2.containerTypeProperties,
+    _ref2$iconSize = _ref2.iconSize,
+    iconSize = _ref2$iconSize === void 0 ? 'medium' : _ref2$iconSize;
+  var _ref3 = containerTypeProperties || {},
+    subType = _ref3.subType,
+    name = _ref3.name;
   var baseProperties = {
-    description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.jiraProjectDescription),
-    icon: /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+    description: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.jiraProjectDescription),
+    icon: (0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences') ? /*#__PURE__*/_react.default.createElement(ContainerIconWrapper, {
+      iconSize: iconSize
+    }, /*#__PURE__*/_react.default.createElement(_image.default, {
+      src: getJiraIcon(subType),
+      alt: "",
+      testId: "jira-project-container-icon"
+    })) : /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
       xcss: (0, _css.cx)(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
     }, /*#__PURE__*/_react.default.createElement(_image.default, {
       src: getJiraIcon(subType),
       alt: "",
       testId: "jira-project-container-icon"
     })),
-    title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addJiraProject),
-    containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.spaceContainerTextOverride)
+    title: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.addJiraProject),
+    containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.spaceContainerTextOverride)
   };
   switch (subType) {
     case 'PRODUCT_DISCOVERY':
@@ -123,21 +141,27 @@ var getJiraContainerProperties = function getJiraContainerProperties(_ref) {
       return baseProperties;
   }
 };
-var getWebLinkContainerProperties = function getWebLinkContainerProperties(_ref3) {
-  var isEmptyContainer = _ref3.isEmptyContainer,
-    isDisplayedOnProfileCard = _ref3.isDisplayedOnProfileCard;
+var getWebLinkContainerProperties = function getWebLinkContainerProperties(_ref4) {
+  var isEmptyContainer = _ref4.isEmptyContainer,
+    isDisplayedOnProfileCard = _ref4.isDisplayedOnProfileCard;
   return {
     description: isEmptyContainer ? /*#__PURE__*/_react.default.createElement(_compiled.Text, {
       size: "medium",
       weight: "medium"
-    }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.emptyLinkContainerDescription)) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.linkContainerDescription),
+    }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.emptyLinkContainerDescription)) : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.linkContainerDescription),
     icon: isEmptyContainer ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       xcss: (0, _css.cx)(styles.linkAvatarWrapper, styles.avatarMargin),
       testId: "team-link-card-globe-icon"
     }, /*#__PURE__*/_react.default.createElement(_link.default, {
       label: "",
       size: "medium"
-    })) : isDisplayedOnProfileCard ? /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
+    })) : isDisplayedOnProfileCard ? (0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.profileCardWebLinkIconWrapper
+    }, /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
+      label: "",
+      size: "small",
+      testId: "team-link-card-external-link-icon"
+    })) : /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
       label: "",
       size: "small",
       testId: "team-link-card-external-link-icon"
@@ -148,43 +172,56 @@ var getWebLinkContainerProperties = function getWebLinkContainerProperties(_ref3
       label: "",
       size: "small"
     })),
-    title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addLink),
+    title: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.addLink),
     containerTypeText: null
   };
 };
-var getContainerProperties = exports.getContainerProperties = function getContainerProperties(_ref4) {
-  var containerType = _ref4.containerType,
-    _ref4$iconSize = _ref4.iconSize,
-    iconSize = _ref4$iconSize === void 0 ? 'medium' : _ref4$iconSize,
-    containerTypeProperties = _ref4.containerTypeProperties,
-    isEmptyContainer = _ref4.isEmptyContainer,
-    isDisplayedOnProfileCard = _ref4.isDisplayedOnProfileCard;
+var getContainerProperties = exports.getContainerProperties = function getContainerProperties(_ref5) {
+  var containerType = _ref5.containerType,
+    _ref5$iconSize = _ref5.iconSize,
+    iconSize = _ref5$iconSize === void 0 ? (0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences') ? 'small' : 'medium' : _ref5$iconSize,
+    containerTypeProperties = _ref5.containerTypeProperties,
+    isEmptyContainer = _ref5.isEmptyContainer,
+    isDisplayedOnProfileCard = _ref5.isDisplayedOnProfileCard;
+  var isT26DesignDropCoreExperiencesEnabled = (0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences');
   switch (containerType) {
     case 'ConfluenceSpace':
       return {
-        description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.confluenceContainerDescription),
-        icon: /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+        description: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.confluenceContainerDescription),
+        icon: isT26DesignDropCoreExperiencesEnabled ? /*#__PURE__*/_react.default.createElement(ContainerIconWrapper, {
+          iconSize: iconSize
+        }, /*#__PURE__*/_react.default.createElement(_image.default, {
+          src: _ConfluenceIcon.default,
+          alt: "",
+          testId: "confluence-space-container-icon"
+        })) : /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
           xcss: (0, _css.cx)(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
         }, /*#__PURE__*/_react.default.createElement(_image.default, {
           src: _ConfluenceIcon.default,
           alt: "",
           testId: "confluence-space-container-icon"
         })),
-        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addConfluenceContainerTitle),
-        containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.spaceContainerTextOverride)
+        title: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.addConfluenceContainerTitle),
+        containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.spaceContainerTextOverride)
       };
     case 'LoomSpace':
       return {
-        description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.loomSpaceDescription),
-        icon: /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+        description: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.loomSpaceDescription),
+        icon: isT26DesignDropCoreExperiencesEnabled ? /*#__PURE__*/_react.default.createElement(ContainerIconWrapper, {
+          iconSize: iconSize
+        }, /*#__PURE__*/_react.default.createElement(_image.default, {
+          src: _LoomIcon.default,
+          alt: "",
+          testId: "loom-space-container-icon"
+        })) : /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
           xcss: (0, _css.cx)(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
         }, /*#__PURE__*/_react.default.createElement(_image.default, {
           src: _LoomIcon.default,
           alt: "",
           testId: "loom-space-container-icon"
         })),
-        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addLoomSpace),
-        containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.spaceContainerTextOverride)
+        title: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.addLoomSpace),
+        containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.spaceContainerTextOverride)
       };
     case 'JiraProject':
       return getJiraContainerProperties({

package/dist/cjs/ui/team-containers/add-container-card/add-container-card-button/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AddContainerCardButton = AddContainerCardButton;
 var _react = _interopRequireDefault(require("react"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _compiled = require("@atlaskit/primitives/compiled");
 function AddContainerCardButton(_ref) {
   var type = _ref.type;
@@ -29,23 +29,23 @@ function getContainerProperties(type) {
   switch (type) {
     case 'ConfluenceSpace':
       return {
-        description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.confluenceContainerDescription),
-        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addConfluenceContainerTitle)
+        description: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.confluenceContainerDescription),
+        title: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.addConfluenceContainerTitle)
       };
     case 'LoomSpace':
       return {
-        description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.loomSpaceDescription),
-        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addLoomContainerTitle)
+        description: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.loomSpaceDescription),
+        title: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.addLoomContainerTitle)
       };
     case 'JiraProject':
       return {
-        description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.jiraProjectDescription),
-        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addJiraProjectTitle)
+        description: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.jiraProjectDescription),
+        title: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.addJiraProjectTitle)
       };
     case 'WebLink':
       return {
         description: null,
-        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addWebLinkTitle)
+        title: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.addWebLinkTitle)
       };
     default:
       return {
@@ -54,7 +54,7 @@ function getContainerProperties(type) {
       };
   }
 }
-var messages = (0, _reactIntlNext.defineMessages)({
+var messages = (0, _reactIntl.defineMessages)({
   addConfluenceContainerTitle: {
     id: 'ptc-directory.team-profile-page.team-containers.create.add-confluence-space-title',
     defaultMessage: 'Confluence space',

package/dist/cjs/ui/team-containers/disconnect-dialog/index.js

@@ -11,13 +11,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+var messages = exports.messages = (0, _reactIntl.defineMessages)({
   disconnectDialogTitle: {
     id: 'ptc-directory.team-profile-page.team-containers.disconnect-dialog.title',
     defaultMessage: 'Disconnect place',
@@ -93,25 +93,25 @@ var DisconnectDialog = exports.DisconnectDialog = function DisconnectDialog(_ref
     hasCloseButton: true
   }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {
     appearance: "warning"
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.disconnectDialogTitle))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.disconnectDialogTitle))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
     space: "space.150"
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, messages.disconnectDialogDescription, {
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, messages.disconnectDialogDescription, {
     values: {
       containerName: /*#__PURE__*/_react.default.createElement(_compiled.Text, {
         weight: "semibold"
       }, containerName),
       containerType: containerType
     }
-  }))), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('workforce_optimization_team_modal_update') ? messages.disconnectDialogDisclaimerNew : messages.disconnectDialogDisclaimer, {
+  }))), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('workforce_optimization_team_modal_update') ? messages.disconnectDialogDisclaimerNew : messages.disconnectDialogDisclaimer, {
     values: {
       containerType: containerType
     }
   })))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "subtle",
     onClick: onClose
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.disconnectDialogCancelButton)), /*#__PURE__*/_react.default.createElement(_new.default, {
+  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.disconnectDialogCancelButton)), /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "warning",
     onClick: handleDisconnect,
     isLoading: isDisconnecting
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.disconnectDialogRemoveButton))));
+  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.disconnectDialogRemoveButton))));
 };

package/dist/cjs/ui/team-containers/linked-container-card/index.js

@@ -12,7 +12,7 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _new = require("@atlaskit/button/new");
 var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
@@ -24,7 +24,7 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _loomAvatar = require("../../../common/ui/loom-avatar");
 var _getContainerProperties = require("../../../common/utils/get-container-properties");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var messages = (0, _reactIntlNext.defineMessages)({
+var messages = (0, _reactIntl.defineMessages)({
   disconnectTooltip: {
     id: 'ptc-directory.team-containers.disconnect-button.tooltip',
     defaultMessage: 'Disconnect',
@@ -82,7 +82,7 @@ var getContainerIcon = function getContainerIcon(containerType, title, container
   if (containerType === 'LoomSpace') {
     return /*#__PURE__*/_react.default.createElement(_loomAvatar.LoomSpaceAvatar, {
       spaceName: title,
-      size: 'large',
+      size: 'medium',
       testId: "linked-container-icon"
     });
   }
@@ -113,7 +113,7 @@ var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainer
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     showCloseIcon = _useState4[0],
     setShowCloseIcon = _useState4[1];
-  var _useIntl = (0, _reactIntlNext.useIntl)(),
+  var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useAnalyticsEvents2 = (0, _teamsAppInternalAnalytics.useAnalyticsEvents)(),
     fireEvent = _useAnalyticsEvents2.fireEvent;

package/dist/cjs/ui/team-containers/main.js

@@ -10,7 +10,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _modalTransition = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-transition"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -362,7 +362,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     appearance: "subtle",
     spacing: "compact",
     onClick: handleShowMore
-  }, showMore ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.showLess) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.showMore)))), /*#__PURE__*/_react.default.createElement(_modalTransition.default, null, isDisconnectDialogOpen && selectedContainerDetails && /*#__PURE__*/_react.default.createElement(_async.DisconnectDialogLazy, {
+  }, showMore ? /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.showLess) : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.showMore)))), /*#__PURE__*/_react.default.createElement(_modalTransition.default, null, isDisconnectDialogOpen && selectedContainerDetails && /*#__PURE__*/_react.default.createElement(_async.DisconnectDialogLazy, {
     containerName: selectedContainerDetails.containerName,
     containerType: selectedContainerDetails.containerType,
     onClose: function onClose() {
@@ -373,7 +373,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     }
   })));
 };
-var messages = (0, _reactIntlNext.defineMessages)({
+var messages = (0, _reactIntl.defineMessages)({
   showMore: {
     id: 'ptc-directory.team-profile-page.team-containers.show-more',
     defaultMessage: 'Show more',

package/dist/cjs/ui/team-containers/no-product-access-empty-state/index.js

@@ -9,7 +9,7 @@ exports.NoProductAccessState = void 0;
 require("./index.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _noProductAccessIcon = require("./no-product-access-icon");
@@ -28,9 +28,9 @@ var NoProductAccessState = exports.NoProductAccessState = function NoProductAcce
     space: "space.200"
   }, /*#__PURE__*/_react.default.createElement(_heading.default, {
     size: "small"
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.teamContainerEmptyStateTitle)), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.teamContainerEmptyStateDescription)))));
+  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.teamContainerEmptyStateTitle)), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.teamContainerEmptyStateDescription)))));
 };
-var messages = (0, _reactIntlNext.defineMessages)({
+var messages = (0, _reactIntl.defineMessages)({
   teamContainerEmptyStateTitle: {
     id: 'ptc.team-profile-page.team-containers.empty-state.title',
     defaultMessage: 'Add the places your team works',

package/dist/cjs/ui/team-containers/team-link-card/index.js

@@ -14,7 +14,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _new = require("@atlaskit/button/new");
 var _css = require("@atlaskit/css");
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
@@ -99,7 +99,7 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
     _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
     showKeyboardFocus = _useState0[0],
     setShowKeyboardFocus = _useState0[1];
-  var _useIntl = (0, _reactIntlNext.useIntl)(),
+  var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useAnalyticsEvents = (0, _teamsAppInternalAnalytics.useAnalyticsEvents)(),
     fireEvent = _useAnalyticsEvents.fireEvent;
@@ -316,7 +316,7 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
     }
   }, formatMessage(messages.removeLink))))))));
 };
-var messages = (0, _reactIntlNext.defineMessages)({
+var messages = (0, _reactIntl.defineMessages)({
   disconnectTooltip: {
     id: 'ptc-directory.team-containers.disconnect-button.tooltip',
     defaultMessage: 'Disconnect',