@atlaskit/teams-public 0.74.4 → 1.1.0

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

@@ -1,12 +1,14 @@
 /* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useEffect } from 'react';
 import Avatar from '@atlaskit/avatar';
 import { IconButton } from '@atlaskit/button/new';
 import { cx } from '@atlaskit/css';
 import LinkIcon from '@atlaskit/icon/core/link';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
+import Tile from '@atlaskit/tile';
 import { LoomSpaceAvatar } from '../loom-avatar';
 const styles = {
   linkIconWrapperSmall: "_19pkv77o _2hwxv77o _otyrv77o _18u0v77o"
@@ -18,16 +20,30 @@ export const ContainerIcon = ({
   size = 'medium'
 }) => {
   const isMedium = size === 'medium';
+  const [remoteIconFailed, setRemoteIconFailed] = React.useState(false);
+  useEffect(() => {
+    setRemoteIconFailed(false);
+  }, [containerIcon]);
   if (containerType === 'LoomSpace') {
     return /*#__PURE__*/React.createElement(LoomSpaceAvatar, {
       spaceName: title,
-      size: isMedium ? 'large' : size,
+      size: size,
       testId: `linked-container-${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 (fg('enable_teams_t26_design_drop_core_experiences')) {
+      return /*#__PURE__*/React.createElement(Tile, {
+        label: "",
+        size: size,
+        testId: "linked-container-WebLink-new-icon",
+        hasBorder: true
+      }, /*#__PURE__*/React.createElement(LinkIcon, {
+        label: ""
+      }));
+    }
     return /*#__PURE__*/React.createElement(Box, {
       xcss: cx(!isMedium && styles.linkIconWrapperSmall)
     }, /*#__PURE__*/React.createElement(IconButton, {
@@ -45,6 +61,22 @@ export const ContainerIcon = ({
       })
     }));
   }
+  if (fg('enable_teams_t26_design_drop_core_experiences')) {
+    return /*#__PURE__*/React.createElement(Tile, {
+      label: "",
+      size: size,
+      testId: "linked-container-WebLink-new-icon",
+      isInset: false,
+      backgroundColor: "transparent"
+    }, /*#__PURE__*/React.createElement(Box, {
+      as: "img",
+      src: containerIcon,
+      alt: title,
+      onError: () => {
+        setRemoteIconFailed(true);
+      }
+    }));
+  }
   return /*#__PURE__*/React.createElement(Avatar, {
     appearance: "square",
     borderColor: "transparent",

package/dist/es2019/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/es2019/common/ui/loom-avatar/main.js

@@ -2,7 +2,18 @@
 import "./main.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
+import Tile from '@atlaskit/tile';
 import { getAvatarText, pickContainerColor, pickTextColor } from './utils';
+const typographyByAvatarSize = {
+  small: "_11c81qyo",
+  medium: "_11c81af2"
+};
+const styles = {
+  loomAvatar: "_2rkol0p1 _189ee4h9 _1dqonqa1 _1h6d1l7x _1e0c1txw _4cvr1h6o _1bah1h6o _vchhusvi _1bsb1osq _4t3i1osq"
+};
 const boxStyle = null;
 const smallBoxStyle = null;
 const largeBoxStyle = null;
@@ -14,6 +25,20 @@ export function LoomSpaceAvatar({
   const avatarText = getAvatarText(spaceName);
   const containerColor = pickContainerColor(spaceName);
   const textColor = pickTextColor(spaceName);
+  if (fg('enable_teams_t26_design_drop_core_experiences')) {
+    return /*#__PURE__*/React.createElement(Tile, {
+      size: size,
+      label: "",
+      isInset: false,
+      testId: testId
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(styles.loomAvatar, typographyByAvatarSize[size]),
+      style: {
+        backgroundColor: containerColor,
+        color: textColor
+      }
+    }, avatarText));
+  }
   return /*#__PURE__*/React.createElement("div", {
     style: {
       backgroundColor: containerColor,

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

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { defineMessages, useIntl } from 'react-intl-next';
+import { defineMessages, useIntl } from 'react-intl';
 import { IconButton } from '@atlaskit/button/new';
 import { cx } from '@atlaskit/css';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';

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

@@ -2,12 +2,14 @@
 import "./get-container-properties.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl-next';
+import { defineMessages, FormattedMessage } from 'react-intl';
 import { cx } from '@atlaskit/css';
 import LinkIcon from '@atlaskit/icon/core/link';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
 import Image from '@atlaskit/image';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Flex, Text } from '@atlaskit/primitives/compiled';
+import Tile from '@atlaskit/tile';
 import ConfluenceIcon from '../assets/ConfluenceIcon.svg';
 import JiraIcon from '../assets/JiraIcon.svg';
 import JiraProjectDiscovery from '../assets/JiraProjectDiscovery.svg';
@@ -19,7 +21,8 @@ const 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"
 };
 export const messages = defineMessages({
   addConfluenceContainerTitle: {
@@ -73,6 +76,16 @@ export const messages = defineMessages({
     description: 'Description displayed for link containers in team profile'
   }
 });
+const ContainerIconWrapper = ({
+  children,
+  iconSize
+}) => {
+  return /*#__PURE__*/React.createElement(Tile, {
+    label: "",
+    size: iconSize,
+    isInset: false
+  }, children);
+};
 const getJiraIcon = containerSubTypes => {
   switch (containerSubTypes) {
     case 'PRODUCT_DISCOVERY':
@@ -93,7 +106,13 @@ const getJiraContainerProperties = ({
   } = containerTypeProperties || {};
   const baseProperties = {
     description: /*#__PURE__*/React.createElement(FormattedMessage, messages.jiraProjectDescription),
-    icon: /*#__PURE__*/React.createElement(Flex, {
+    icon: fg('enable_teams_t26_design_drop_core_experiences') ? /*#__PURE__*/React.createElement(ContainerIconWrapper, {
+      iconSize: iconSize
+    }, /*#__PURE__*/React.createElement(Image, {
+      src: getJiraIcon(subType),
+      alt: "",
+      testId: "jira-project-container-icon"
+    })) : /*#__PURE__*/React.createElement(Flex, {
       xcss: cx(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
     }, /*#__PURE__*/React.createElement(Image, {
       src: getJiraIcon(subType),
@@ -130,7 +149,13 @@ const getWebLinkContainerProperties = ({
     }, /*#__PURE__*/React.createElement(LinkIcon, {
       label: "",
       size: "medium"
-    })) : isDisplayedOnProfileCard ? /*#__PURE__*/React.createElement(LinkExternalIcon, {
+    })) : isDisplayedOnProfileCard ? fg('enable_teams_t26_design_drop_core_experiences') ? /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.profileCardWebLinkIconWrapper
+    }, /*#__PURE__*/React.createElement(LinkExternalIcon, {
+      label: "",
+      size: "small",
+      testId: "team-link-card-external-link-icon"
+    })) : /*#__PURE__*/React.createElement(LinkExternalIcon, {
       label: "",
       size: "small",
       testId: "team-link-card-external-link-icon"
@@ -147,16 +172,23 @@ const getWebLinkContainerProperties = ({
 };
 export const getContainerProperties = ({
   containerType,
-  iconSize = 'medium',
+  iconSize = fg('enable_teams_t26_design_drop_core_experiences') ? 'small' : 'medium',
   containerTypeProperties,
   isEmptyContainer,
   isDisplayedOnProfileCard
 }) => {
+  const isT26DesignDropCoreExperiencesEnabled = fg('enable_teams_t26_design_drop_core_experiences');
   switch (containerType) {
     case 'ConfluenceSpace':
       return {
         description: /*#__PURE__*/React.createElement(FormattedMessage, messages.confluenceContainerDescription),
-        icon: /*#__PURE__*/React.createElement(Flex, {
+        icon: isT26DesignDropCoreExperiencesEnabled ? /*#__PURE__*/React.createElement(ContainerIconWrapper, {
+          iconSize: iconSize
+        }, /*#__PURE__*/React.createElement(Image, {
+          src: ConfluenceIcon,
+          alt: "",
+          testId: "confluence-space-container-icon"
+        })) : /*#__PURE__*/React.createElement(Flex, {
           xcss: cx(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
         }, /*#__PURE__*/React.createElement(Image, {
           src: ConfluenceIcon,
@@ -169,7 +201,13 @@ export const getContainerProperties = ({
     case 'LoomSpace':
       return {
         description: /*#__PURE__*/React.createElement(FormattedMessage, messages.loomSpaceDescription),
-        icon: /*#__PURE__*/React.createElement(Flex, {
+        icon: isT26DesignDropCoreExperiencesEnabled ? /*#__PURE__*/React.createElement(ContainerIconWrapper, {
+          iconSize: iconSize
+        }, /*#__PURE__*/React.createElement(Image, {
+          src: LoomIcon,
+          alt: "",
+          testId: "loom-space-container-icon"
+        })) : /*#__PURE__*/React.createElement(Flex, {
           xcss: cx(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
         }, /*#__PURE__*/React.createElement(Image, {
           src: LoomIcon,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl-next';
+import { defineMessages, FormattedMessage } from 'react-intl';
 import { Flex, Stack, Text } from '@atlaskit/primitives/compiled';
 function AddContainerCardButton({
   type

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl-next';
+import { defineMessages, FormattedMessage } from 'react-intl';
 import Button from '@atlaskit/button/new';
 import ModalDialog, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
 import { fg } from '@atlaskit/platform-feature-flags';

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

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl-next';
+import { defineMessages, useIntl } from 'react-intl';
 import Avatar from '@atlaskit/avatar';
 import { IconButton } from '@atlaskit/button/new';
 import CrossIcon from '@atlaskit/icon/core/cross';
@@ -71,7 +71,7 @@ const getContainerIcon = (containerType, title, containerIcon) => {
   if (containerType === 'LoomSpace') {
     return /*#__PURE__*/React.createElement(LoomSpaceAvatar, {
       spaceName: title,
-      size: 'large',
+      size: 'medium',
       testId: "linked-container-icon"
     });
   }

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl-next';
+import { defineMessages, FormattedMessage } from 'react-intl';
 import Button from '@atlaskit/button/new';
 import ModalTransition from '@atlaskit/modal-dialog/modal-transition';
 import { fg } from '@atlaskit/platform-feature-flags';

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

@@ -2,7 +2,7 @@
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl-next';
+import { defineMessages, FormattedMessage } from 'react-intl';
 import Heading from '@atlaskit/heading';
 import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';
 import { NoProductAccessIcon } from './no-product-access-icon';

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

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl-next';
+import { defineMessages, useIntl } from 'react-intl';
 import { IconButton } from '@atlaskit/button/new';
 import { cx } from '@atlaskit/css';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';

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

@@ -1,12 +1,15 @@
 /* index.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useEffect } from 'react';
 import Avatar from '@atlaskit/avatar';
 import { IconButton } from '@atlaskit/button/new';
 import { cx } from '@atlaskit/css';
 import LinkIcon from '@atlaskit/icon/core/link';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
+import Tile from '@atlaskit/tile';
 import { LoomSpaceAvatar } from '../loom-avatar';
 var styles = {
   linkIconWrapperSmall: "_19pkv77o _2hwxv77o _otyrv77o _18u0v77o"
@@ -18,16 +21,33 @@ export var ContainerIcon = function ContainerIcon(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size;
   var isMedium = size === 'medium';
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    remoteIconFailed = _React$useState2[0],
+    setRemoteIconFailed = _React$useState2[1];
+  useEffect(function () {
+    setRemoteIconFailed(false);
+  }, [containerIcon]);
   if (containerType === 'LoomSpace') {
     return /*#__PURE__*/React.createElement(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 (fg('enable_teams_t26_design_drop_core_experiences')) {
+      return /*#__PURE__*/React.createElement(Tile, {
+        label: "",
+        size: size,
+        testId: "linked-container-WebLink-new-icon",
+        hasBorder: true
+      }, /*#__PURE__*/React.createElement(LinkIcon, {
+        label: ""
+      }));
+    }
     return /*#__PURE__*/React.createElement(Box, {
       xcss: cx(!isMedium && styles.linkIconWrapperSmall)
     }, /*#__PURE__*/React.createElement(IconButton, {
@@ -47,6 +67,22 @@ export var ContainerIcon = function ContainerIcon(_ref) {
       }
     }));
   }
+  if (fg('enable_teams_t26_design_drop_core_experiences')) {
+    return /*#__PURE__*/React.createElement(Tile, {
+      label: "",
+      size: size,
+      testId: "linked-container-WebLink-new-icon",
+      isInset: false,
+      backgroundColor: "transparent"
+    }, /*#__PURE__*/React.createElement(Box, {
+      as: "img",
+      src: containerIcon,
+      alt: title,
+      onError: function onError() {
+        setRemoteIconFailed(true);
+      }
+    }));
+  }
   return /*#__PURE__*/React.createElement(Avatar, {
     appearance: "square",
     borderColor: "transparent",

package/dist/esm/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/esm/common/ui/loom-avatar/main.js

@@ -2,7 +2,18 @@
 import "./main.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
+import Tile from '@atlaskit/tile';
 import { getAvatarText, pickContainerColor, pickTextColor } from './utils';
+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;
@@ -16,6 +27,20 @@ export function LoomSpaceAvatar(_ref) {
   var avatarText = getAvatarText(spaceName);
   var containerColor = pickContainerColor(spaceName);
   var textColor = pickTextColor(spaceName);
+  if (fg('enable_teams_t26_design_drop_core_experiences')) {
+    return /*#__PURE__*/React.createElement(Tile, {
+      size: size,
+      label: "",
+      isInset: false,
+      testId: testId
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(styles.loomAvatar, typographyByAvatarSize[size]),
+      style: {
+        backgroundColor: containerColor,
+        color: textColor
+      }
+    }, avatarText));
+  }
   return /*#__PURE__*/React.createElement("div", {
     style: {
       backgroundColor: containerColor,

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

@@ -5,7 +5,7 @@ var _excluded = ["triggerRef"];
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { defineMessages, useIntl } from 'react-intl-next';
+import { defineMessages, useIntl } from 'react-intl';
 import { IconButton } from '@atlaskit/button/new';
 import { cx } from '@atlaskit/css';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';

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

@@ -5,12 +5,14 @@ import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl-next';
+import { defineMessages, FormattedMessage } from 'react-intl';
 import { cx } from '@atlaskit/css';
 import LinkIcon from '@atlaskit/icon/core/link';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
 import Image from '@atlaskit/image';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Flex, Text } from '@atlaskit/primitives/compiled';
+import Tile from '@atlaskit/tile';
 import ConfluenceIcon from '../assets/ConfluenceIcon.svg';
 import JiraIcon from '../assets/JiraIcon.svg';
 import JiraProjectDiscovery from '../assets/JiraProjectDiscovery.svg';
@@ -22,7 +24,8 @@ 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"
 };
 export var messages = defineMessages({
   addConfluenceContainerTitle: {
@@ -76,6 +79,15 @@ export var messages = 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.createElement(Tile, {
+    label: "",
+    size: iconSize,
+    isInset: false
+  }, children);
+};
 var getJiraIcon = function getJiraIcon(containerSubTypes) {
   switch (containerSubTypes) {
     case 'PRODUCT_DISCOVERY':
@@ -86,16 +98,22 @@ var getJiraIcon = function getJiraIcon(containerSubTypes) {
       return JiraIcon;
   }
 };
-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.createElement(FormattedMessage, messages.jiraProjectDescription),
-    icon: /*#__PURE__*/React.createElement(Flex, {
+    icon: fg('enable_teams_t26_design_drop_core_experiences') ? /*#__PURE__*/React.createElement(ContainerIconWrapper, {
+      iconSize: iconSize
+    }, /*#__PURE__*/React.createElement(Image, {
+      src: getJiraIcon(subType),
+      alt: "",
+      testId: "jira-project-container-icon"
+    })) : /*#__PURE__*/React.createElement(Flex, {
       xcss: cx(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
     }, /*#__PURE__*/React.createElement(Image, {
       src: getJiraIcon(subType),
@@ -116,9 +134,9 @@ 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.createElement(Text, {
       size: "medium",
@@ -130,7 +148,13 @@ var getWebLinkContainerProperties = function getWebLinkContainerProperties(_ref3
     }, /*#__PURE__*/React.createElement(LinkIcon, {
       label: "",
       size: "medium"
-    })) : isDisplayedOnProfileCard ? /*#__PURE__*/React.createElement(LinkExternalIcon, {
+    })) : isDisplayedOnProfileCard ? fg('enable_teams_t26_design_drop_core_experiences') ? /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.profileCardWebLinkIconWrapper
+    }, /*#__PURE__*/React.createElement(LinkExternalIcon, {
+      label: "",
+      size: "small",
+      testId: "team-link-card-external-link-icon"
+    })) : /*#__PURE__*/React.createElement(LinkExternalIcon, {
       label: "",
       size: "small",
       testId: "team-link-card-external-link-icon"
@@ -145,18 +169,25 @@ var getWebLinkContainerProperties = function getWebLinkContainerProperties(_ref3
     containerTypeText: null
   };
 };
-export var 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;
+export var getContainerProperties = function getContainerProperties(_ref5) {
+  var containerType = _ref5.containerType,
+    _ref5$iconSize = _ref5.iconSize,
+    iconSize = _ref5$iconSize === void 0 ? fg('enable_teams_t26_design_drop_core_experiences') ? 'small' : 'medium' : _ref5$iconSize,
+    containerTypeProperties = _ref5.containerTypeProperties,
+    isEmptyContainer = _ref5.isEmptyContainer,
+    isDisplayedOnProfileCard = _ref5.isDisplayedOnProfileCard;
+  var isT26DesignDropCoreExperiencesEnabled = fg('enable_teams_t26_design_drop_core_experiences');
   switch (containerType) {
     case 'ConfluenceSpace':
       return {
         description: /*#__PURE__*/React.createElement(FormattedMessage, messages.confluenceContainerDescription),
-        icon: /*#__PURE__*/React.createElement(Flex, {
+        icon: isT26DesignDropCoreExperiencesEnabled ? /*#__PURE__*/React.createElement(ContainerIconWrapper, {
+          iconSize: iconSize
+        }, /*#__PURE__*/React.createElement(Image, {
+          src: ConfluenceIcon,
+          alt: "",
+          testId: "confluence-space-container-icon"
+        })) : /*#__PURE__*/React.createElement(Flex, {
           xcss: cx(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
         }, /*#__PURE__*/React.createElement(Image, {
           src: ConfluenceIcon,
@@ -169,7 +200,13 @@ export var getContainerProperties = function getContainerProperties(_ref4) {
     case 'LoomSpace':
       return {
         description: /*#__PURE__*/React.createElement(FormattedMessage, messages.loomSpaceDescription),
-        icon: /*#__PURE__*/React.createElement(Flex, {
+        icon: isT26DesignDropCoreExperiencesEnabled ? /*#__PURE__*/React.createElement(ContainerIconWrapper, {
+          iconSize: iconSize
+        }, /*#__PURE__*/React.createElement(Image, {
+          src: LoomIcon,
+          alt: "",
+          testId: "loom-space-container-icon"
+        })) : /*#__PURE__*/React.createElement(Flex, {
           xcss: cx(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
         }, /*#__PURE__*/React.createElement(Image, {
           src: LoomIcon,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl-next';
+import { defineMessages, FormattedMessage } from 'react-intl';
 import { Flex, Stack, Text } from '@atlaskit/primitives/compiled';
 function AddContainerCardButton(_ref) {
   var type = _ref.type;

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

@@ -3,7 +3,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl-next';
+import { defineMessages, FormattedMessage } from 'react-intl';
 import Button from '@atlaskit/button/new';
 import ModalDialog, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
 import { fg } from '@atlaskit/platform-feature-flags';