@atlaskit/smart-card 45.11.2 → 45.12.1

package/dist/esm/messages.js

@@ -165,49 +165,54 @@ export var messages = defineMessages({
     defaultMessage: 'To show a preview of this link, connect your {context} account.',
     description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view. Displayed in byline.'
   },
-  connect_link_account_embed_teaser_dot_label: {
-    id: 'fabric.linking.connect_link_account_embed_teaser_dot_label.non-final',
+  connect_link_account_embed_carousel_dot_label: {
+    id: 'fabric.linking.connect_link_account_embed_carousel_dot_label.non-final',
     defaultMessage: 'Go to slide {index} of {total}',
     description: 'Accessible label for a dot indicator button in the teaser carousel, describing which slide it navigates to'
   },
-  connect_link_account_embed_teaser_dot_row_label: {
-    id: 'fabric.linking.connect_link_account_embed_teaser_dot_row_label.non-final',
+  connect_link_account_embed_carousel_dot_row_label: {
+    id: 'fabric.linking.connect_link_account_embed_carousel_dot_row_label.non-final',
     defaultMessage: 'Slides',
     description: 'Accessible label for the group of dot indicator buttons in the teaser carousel'
   },
-  connect_link_account_embed_teaser_button_next: {
-    id: 'fabric.linking.connect_link_account_embed_teaser_button_next.non-final',
+  connect_link_account_embed_carousel_button_back: {
+    id: 'fabric.linking.connect_link_account_embed_carousel_button_back.non-final',
+    defaultMessage: 'Back',
+    description: 'Label for the back button in the embed card carousel teaser'
+  },
+  connect_link_account_embed_carousel_button_next: {
+    id: 'fabric.linking.connect_link_account_embed_carousel_button_next.non-final',
     defaultMessage: 'Next',
     description: 'A button to view next teaser on benefit of connecting account on Smart Link embed'
   },
-  connect_link_account_embed_teaser_slide_1_description: {
-    id: 'fabric.linking.connect_link_account_embed_teaser_slide_1_description.non-final',
-    defaultMessage: 'Connect your account to preview {context} files and documents directly inside Atlassian. No more context switching.',
-    description: 'A description on a teaser slide 1 on benefit of connecting account on Smart Link embed'
+  connect_link_account_embed_carousel_sl_description: {
+    id: 'fabric.linking.connect_link_account_embed_carousel_sl_description.non-final',
+    defaultMessage: "Embed live previews of {context, select, \n\t\t\t\tGoogle {Google Docs, Sheets, and Slides} \n\t\t\t\tother {{context}}} {product, select, \n\t\t\t\tBITBUCKET {right inside Bitbucket}\n\t\t\t\tCONFLUENCE {right inside Confluence and Jira}\n\t\t\t\tJIRA {right inside Confluence and Jira}\n\t\t\t\tTRELLO {right inside Trello}\n\t\t\t\tother {across Atlassian}}.",
+    description: 'A description on a teaser slide 1 on benefit of connecting account on Smart Link embed.' + ' Example Google+CONFLUENCE: Embed live previews of Google Docs, Sheets, and Slides right inside Confluence and Jira.' + ' Example Google+TRELLO: Embed live previews of Google Docs, Sheets, and Slides right inside Trello.' + ' Example other+TRELLO: Embed live previews of Figma right inside Trello.' + ' Example other+other: Embed live previews of Figma across Atlassian.'
   },
-  connect_link_account_embed_teaser_slide_1_title: {
-    id: 'fabric.linking.connect_link_account_embed_teaser_slide_1_title.non-final',
-    defaultMessage: 'See your {context} work without leaving Atlassian',
+  connect_link_account_embed_carousel_sl_title: {
+    id: 'fabric.linking.connect_link_account_embed_carousel_sl_title.non-final',
+    defaultMessage: 'Turn smart links into rich previews',
     description: 'A title on a teaser slide 1 on benefit of connecting account on Smart Link embed'
   },
-  connect_link_account_embed_teaser_slide_2_title: {
-    id: 'fabric.linking.connect_link_account_embed_teaser_slide_2_title.non-final',
-    defaultMessage: 'Search once, find it everywhere',
+  connect_link_account_embed_carousel_rovo_title: {
+    id: 'fabric.linking.connect_link_account_embed_carousel_rovo_title.non-final',
+    defaultMessage: 'Find everything in one search',
     description: 'A title on a teaser slide 2 on benefit of connecting account on Smart Link embed'
   },
-  connect_link_account_embed_teaser_slide_2_description: {
-    id: 'fabric.linking.connect_link_account_embed_teaser_slide_2_description.non-final',
-    defaultMessage: 'Search relevant {context} files alongside your Confluence pages and Jira issues, always respecting your {context} permissions.',
-    description: 'A description on a teaser slide 2 on benefit of connecting account on Smart Link embed'
+  connect_link_account_embed_carousel_rovo_description: {
+    id: 'fabric.linking.connect_link_account_embed_carousel_rovo_description.non-final',
+    defaultMessage: "Access {context} files alongside your work in {product, select, \n\t\t\t\tBITBUCKET {Bitbucket}\n\t\t\t\tCONFLUENCE {Confluence and Jira}\n\t\t\t\tJIRA {Confluence and Jira}\n\t\t\t\tTRELLO {Trello}\n\t\t\t\tother {Atlassian}}. We'll always respect your {context} permissions.",
+    description: 'A description on a teaser slide 2 on benefit of connecting account on Smart Link embed.' + " Example Figma+JIRA: Access Figma files alongside your work in Confluence and Jira. We'll always respect your Figma permissions." + " Example Figma+BITBUCKET: Access Figma files alongside your work in Bitbucket. We'll always respect your Figma permissions." + " Example Figma+other: Access Figma files alongside your work in Atlassian. We'll always respect your Figma permissions."
   },
-  connect_link_account_embed_teaser_slide_3_title: {
-    id: 'fabric.linking.connect_link_account_embed_teaser_slide_3_title.non-final',
+  connect_link_account_embed_carousel_rovochat_title: {
+    id: 'fabric.linking.connect_link_account_embed_carousel_rovochat_title.non-final',
     defaultMessage: 'Get help from Rovo',
     description: 'A title on a teaser slide 3 on benefit of connecting account on Smart Link embed'
   },
-  connect_link_account_embed_teaser_slide_3_description: {
-    id: 'fabric.linking.connect_link_account_embed_teaser_slide_3_description.non-final',
-    defaultMessage: "Rovo uses your {context} content to answer questions, summarise docs, and draft updates using the work you've already done.",
+  connect_link_account_embed_carousel_rovochat_description: {
+    id: 'fabric.linking.connect_link_account_embed_carousel_rovochat_description.non-final',
+    defaultMessage: 'Rovo uses your {context} content to answer questions, summarise docs, and draft updates using the work you’ve already done.',
     description: 'A description on a teaser slide 3 on benefit of connecting account on Smart Link embed'
   },
   connect_link_account_success_flag_description: {
@@ -230,6 +235,11 @@ export var messages = defineMessages({
     defaultMessage: 'Connect to {context}',
     description: 'Shown on a button to connect user external account to their Atlassian account.'
   },
+  connect_3p_account: {
+    id: 'fabric.linking.connect_3p_account.non-final',
+    defaultMessage: 'Connect {context}',
+    description: 'Shown on a button to connect user external 3P account to their Atlassian account, e.g. Connect Figma'
+  },
   connect_inline_social_proof: {
     id: 'fabric.linking.connect_inline_social_proof',
     defaultMessage: 'Connect',

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card" || '',
-  packageVersion: "45.11.1" || ''
+  packageVersion: "45.12.0" || ''
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/utils/analytics/click.js

@@ -3,8 +3,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 { browser } from '@atlaskit/linking-common/user-agent';
-import { functionWithCondition } from '@atlaskit/platform-feature-flags-react';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useLinkClicked, useMouseDownEvent } from '../../state/analytics/useLinkClicked';
 import { ANALYTICS_CHANNEL } from './analytics';
 export var buttonMap = new Map([[undefined, 'none'], [0, 'left'], [1, 'middle'], [2, 'right']]);
@@ -71,7 +69,7 @@ export function getLinkClickOutcome(e, clickType) {
   }
   return 'unknown';
 }
-var linkClickedEventOld = function linkClickedEventOld(_ref) {
+var linkClickedEvent = function linkClickedEvent(_ref) {
   var clickType = _ref.clickType,
     clickOutcome = _ref.clickOutcome,
     keysHeld = _ref.keysHeld,
@@ -88,26 +86,7 @@ var linkClickedEventOld = function linkClickedEventOld(_ref) {
     }
   };
 };
-var linkClickedEventWithShortLink = function linkClickedEventWithShortLink(_ref2) {
-  var clickType = _ref2.clickType,
-    clickOutcome = _ref2.clickOutcome,
-    keysHeld = _ref2.keysHeld,
-    defaultPrevented = _ref2.defaultPrevented,
-    isConfluenceShortLink = _ref2.isConfluenceShortLink;
-  return {
-    action: 'clicked',
-    actionSubject: 'link',
-    eventType: 'ui',
-    attributes: {
-      clickType: clickType,
-      clickOutcome: clickOutcome,
-      keysHeld: keysHeld,
-      defaultPrevented: defaultPrevented,
-      isConfluenceShortLink: isConfluenceShortLink
-    }
-  };
-};
-export var createLinkClickedPayloadOld = function createLinkClickedPayloadOld(event) {
+export var createLinkClickedPayload = function createLinkClickedPayload(event) {
   // Through the `detail` property, we're able to determine if the event is (most likely) triggered via keyboard
   // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
   var isKeyboard = event.nativeEvent.detail === 0;
@@ -118,7 +97,7 @@ export var createLinkClickedPayloadOld = function createLinkClickedPayloadOld(ev
   var clickOutcome = getLinkClickOutcome(event, clickType);
   var keysHeld = getKeys(event);
   var defaultPrevented = event.defaultPrevented;
-  var linkClickedEventResult = linkClickedEventOld({
+  var linkClickedEventResult = linkClickedEvent({
     clickType: clickType,
     clickOutcome: clickOutcome,
     keysHeld: keysHeld,
@@ -138,50 +117,6 @@ export var createLinkClickedPayloadOld = function createLinkClickedPayloadOld(ev
     return linkClickedEventResult;
   }
 };
-export var createLinkClickedPayloadNew = function createLinkClickedPayloadNew(event) {
-  // Through the `detail` property, we're able to determine if the event is (most likely) triggered via keyboard
-  // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
-  var isKeyboard = event.nativeEvent.detail === 0;
-  var clickType = isKeyboard ? 'keyboard' : buttonMap.get(event.button);
-  if (!clickType) {
-    return;
-  }
-  var clickOutcome = getLinkClickOutcome(event, clickType);
-  var keysHeld = getKeys(event);
-  var defaultPrevented = event.defaultPrevented;
-
-  // Check if the URL is a Confluence shortLink (contains "/l/cp/")
-  var isConfluenceShortLink = false;
-  if (event.currentTarget instanceof HTMLAnchorElement) {
-    var url = event.currentTarget.href;
-    isConfluenceShortLink = url.includes('/l/cp/');
-  }
-  var linkClickedEventResult = linkClickedEventWithShortLink({
-    clickType: clickType,
-    clickOutcome: clickOutcome,
-    keysHeld: keysHeld,
-    defaultPrevented: defaultPrevented,
-    isConfluenceShortLink: isConfluenceShortLink
-  });
-
-  // if the current target is an anchor tag, we can get the href from it and use that as the url being navigated too.
-  if (event.currentTarget instanceof HTMLAnchorElement) {
-    var _url = event.currentTarget.href;
-    return _objectSpread(_objectSpread({}, linkClickedEventResult), {}, {
-      nonPrivacySafeAttributes: {
-        url: _url
-      }
-    });
-  } else {
-    // We can't get the href from the event target, so dont include the url or any non privacy safe attributes
-    return linkClickedEventResult;
-  }
-};
-export var createLinkClickedPayload = functionWithCondition(function () {
-  return expValEquals('smart_link_confluence_short_link_analytics', 'cohort', 'test');
-},
-// 12/17/2025: Clean up this feature gate once it's out in prod for 2 weeks - https://product-fabric.atlassian.net/browse/CCPERMS-5030
-createLinkClickedPayloadNew, createLinkClickedPayloadOld);
 export var fireLinkClickedEvent = function fireLinkClickedEvent(createAnalyticsEvent) {
   return function (event) {
     var overrides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

package/dist/esm/view/EmbedCard/components/carousel/CarouselSlide.compiled.css

@@ -1,23 +1,33 @@
 ._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
 ._zulp1ejb{gap:var(--ds-space-300,24px)}
+._zulppxbi{gap:var(--ds-space-200,1pc)}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
-._zulpze3t{gap:var(--ds-space-0,0)}._16jlkb7n{flex-grow:1}
+._zulpze3t{gap:var(--ds-space-0,0)}._154iidpf{top:0}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
 ._18m91wug{overflow-y:auto}
 ._19bv1jfw{padding-left:var(--ds-space-500,40px)}
 ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._1bah1h6o{justify-content:center}
+._1bah1y6m{justify-content:flex-start}
+._1bah1yb4{justify-content:space-between}
 ._1bsb1osq{width:100%}
 ._1bsb1tcg{width:24px}
 ._1bsb7vkz{width:1pc}
-._1bsbi2wt{width:6px}
+._1bsbftgi{width:8px}
 ._1e0c1txw{display:flex}
 ._1e0c1ule{display:block}
+._1ltvidpf{left:0}
 ._1n261g80{flex-wrap:wrap}
+._1n261q9c{flex-wrap:nowrap}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
 ._1oecfnf5{transition-duration:.2s}
+._1reo15vq{overflow-x:hidden}
 ._1reo1wug{overflow-x:auto}
+._1tkeidpf{min-height:0}
+._1ul9idpf{min-width:0}
 ._2lx21bp4{flex-direction:column}
 ._2lx2vrvc{flex-direction:row}
 ._4cvr1fhb{align-items:stretch}
@@ -26,10 +36,10 @@
 ._4t3i1osq{height:100%}
 ._4t3i1tcg{height:24px}
 ._4t3i7vkz{height:1pc}
-._4t3ii2wt{height:6px}
+._4t3iftgi{height:8px}
 ._5ral1f51{object-fit:contain}
 ._6fl45ucs{transition-timing-function:ease}
-._bfhk1dy8{background-color:var(--ds-background-accent-blue-subtler,#cfe1fd)}
+._bfhk9pm7{background-color:var(--ds-background-information-subtle,#8fb8f6)}
 ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
 ._bfhkjmqp{background-color:var(--ds-background-selected-bold,#1868db)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
@@ -40,6 +50,8 @@
 ._i0dlghg7{flex-basis:240px}
 ._i0dluuw1{flex-basis:200px}
 ._k8m01k61{transition-property:background-color}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
 ._lcxvglyw{pointer-events:none}
 ._n3td1jfw{padding-bottom:var(--ds-space-500,40px)}
 ._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}

package/dist/esm/view/EmbedCard/components/carousel/CarouselSlide.js

@@ -1,58 +1,82 @@
 /* CarouselSlide.tsx generated by @compiled/babel-plugin v0.40.0 */
 import "./CarouselSlide.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import Button from '@atlaskit/button/new';
 import { cx } from '@atlaskit/css';
 import Heading from '@atlaskit/heading';
+import SmartLinkIcon from '@atlaskit/icon/core/smart-link';
+import IconTile from '@atlaskit/icon/icon-tile';
 import Image from '@atlaskit/image';
 import { Box, Pressable, Text } from '@atlaskit/primitives/compiled';
 import { messages } from '../../../../messages';
 var styles = {
-  columnImage: "_16jlkb7n _1o9zkb7n _i0dlghg7 _1e0c1txw _4cvr1h6o _1bah1h6o _ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi _bfhk1dy8",
-  columnContent: "_zulp1ejb _16jlkb7n _1o9zkb7n _i0dluuw1 _1e0c1txw _2lx21bp4 _ca0q1jfw _u5f31jfw _n3td1jfw _19bv1jfw _4cvr1y6m _1bah1h6o",
+  columnImage: "_16jlkb7n _1o9zkb7n _i0dlghg7 _1reo15vq _18m915vq _1e0c1txw _4cvr1fhb _1bah1y6m _1tkeidpf _1ul9idpf _bfhk9pm7",
+  imageContainer: "_kqswh2mm _1bsb1osq _4t3i1osq",
+  imageAbsolute: "_kqswstnw _154iidpf _1ltvidpf _1bsb1osq",
+  columnContent: "_zulp1ejb _16jlkb7n _1o9zkb7n _i0dluuw1 _1reo1wug _18m91wug _1e0c1txw _2lx21bp4 _1tkeidpf _ca0q1jfw _u5f31jfw _n3td1jfw _19bv1jfw _4cvr1y6m _1bah1yb4",
+  columnContentTop: "_zulppxbi _1e0c1txw _2lx21bp4 _4cvr1y6m _1bsb1osq",
+  columnContentBody: "_zulp1ejb _1e0c1txw _2lx21bp4 _4cvr1y6m _1bsb1osq",
   columnContentCompact: "_ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi",
-  dot: "_2rko1rr0 _1bsbi2wt _4t3ii2wt _bfhki8nm _1oecfnf5 _k8m01k61 _6fl45ucs _lcxvglyw",
+  dot: "_2rko1rr0 _1bsbftgi _4t3iftgi _bfhki8nm _1oecfnf5 _k8m01k61 _6fl45ucs _lcxvglyw",
   dotActive: "_bfhkjmqp",
   dotPassable: "_2rko1rr0 _1e0c1txw _4cvr1h6o _1bah1h6o _1bsb7vkz _4t3i7vkz _bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
   icon: "_1o9zidpf _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o",
   iconImage: "_1bsb1osq _4t3i1osq _5ral1f51",
   image: "_1bsb1osq _c71l1wdt _5ral1f51 _rsufaqso _1e0c1ule",
   rowButton: "_zulpu2gc _1e0c1txw _2lx2vrvc _1n261g80 _4cvr1h6o",
+  rowButtonNavGroup: "_zulpu2gc _1e0c1txw _2lx2vrvc _4cvr1h6o _1o9zidpf",
   rowButtonCompact: "_1bsb1osq",
   rowDot: "_zulpze3t _1e0c1txw _2lx2vrvc _4cvr1h6o",
   rowIcon: "_zulpu2gc _1e0c1txw _4cvr1h6o",
-  slide: "_1reo1wug _18m91wug _1e0c1txw _1n261g80 _1bsb1osq _4t3i1osq _4cvr1fhb _vchhusvi"
+  slide: "_1reo15vq _18m915vq _1e0c1txw _1n261q9c _1bsb1osq _4t3i1osq _4cvr1fhb _vchhusvi"
 };
 var CarouselSlide = function CarouselSlide(_ref) {
   var icon = _ref.icon,
-    iconLabel = _ref.iconLabel,
+    _ref$iconLabel = _ref.iconLabel,
+    iconLabel = _ref$iconLabel === void 0 ? '' : _ref$iconLabel,
     title = _ref.title,
     description = _ref.description,
     image = _ref.image,
     primaryButtonLabel = _ref.primaryButtonLabel,
     onPrimaryButtonClick = _ref.onPrimaryButtonClick,
+    onBackClick = _ref.onBackClick,
     onDotClick = _ref.onDotClick,
     onNextClick = _ref.onNextClick,
     slideIndex = _ref.slideIndex,
     totalSlides = _ref.totalSlides,
     size = _ref.size,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'embed-card-teaser-slide' : _ref$testId;
+    testId = _ref$testId === void 0 ? 'embed-card-carousel-slide' : _ref$testId;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var isCompact = size !== 'full';
+  var showPrimaryButton = typeof onPrimaryButtonClick === 'function';
   var showNavigation = totalSlides > 1;
-  var renderedIcon = icon == null ? null : typeof icon === 'string' ? /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.icon
-  }, /*#__PURE__*/React.createElement(Image, {
-    src: icon,
-    alt: iconLabel,
-    className: ax([styles.iconImage])
-  })) : /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.icon
-  }, icon);
+  var renderedIcon = useMemo(function () {
+    if (typeof icon === 'string') {
+      return /*#__PURE__*/React.createElement(Box, {
+        xcss: styles.icon
+      }, /*#__PURE__*/React.createElement(Image, {
+        src: icon,
+        alt: iconLabel,
+        className: ax([styles.iconImage])
+      }));
+    }
+    if (icon) {
+      return /*#__PURE__*/React.createElement(Box, {
+        xcss: styles.icon
+      }, icon);
+    }
+    return /*#__PURE__*/React.createElement(IconTile, {
+      appearance: "blue",
+      icon: SmartLinkIcon,
+      label: iconLabel,
+      size: "small",
+      testId: "embed-card-fallback-icon"
+    });
+  }, [icon, iconLabel]);
   var renderedImage = image == null ? null : typeof image === 'string' ? /*#__PURE__*/React.createElement(Image, {
     src: image,
     alt: title,
@@ -63,7 +87,9 @@ var CarouselSlide = function CarouselSlide(_ref) {
     testId: testId
   }, /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.columnContent, isCompact && styles.columnContentCompact)
-  }, isCompact && /*#__PURE__*/React.createElement(Box, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.columnContentTop
+  }, showPrimaryButton && isCompact && /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.rowButton, styles.rowButtonCompact)
   }, /*#__PURE__*/React.createElement(Button, {
     appearance: "primary",
@@ -75,22 +101,30 @@ var CarouselSlide = function CarouselSlide(_ref) {
   }, renderedIcon), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Heading, {
     size: "medium",
     testId: "".concat(testId, "-title")
-  }, title)), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Text, {
+  }, title)), /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.columnContentBody
+  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Text, {
     testId: "".concat(testId, "-description")
-  }, description)), /*#__PURE__*/React.createElement(Box, {
+  }, description)), (showPrimaryButton && !isCompact || showNavigation && (onNextClick || onBackClick)) && /*#__PURE__*/React.createElement(Box, {
     xcss: styles.rowButton
-  }, !isCompact && /*#__PURE__*/React.createElement(Button, {
+  }, showPrimaryButton && !isCompact && /*#__PURE__*/React.createElement(Button, {
     appearance: "primary",
     onClick: onPrimaryButtonClick,
     testId: "".concat(testId, "-connect")
-  }, primaryButtonLabel), showNavigation && onNextClick && /*#__PURE__*/React.createElement(Button, {
+  }, primaryButtonLabel), showNavigation && (onBackClick || onNextClick) && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.rowButtonNavGroup
+  }, onBackClick && /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: onBackClick,
+    testId: "".concat(testId, "-back")
+  }, formatMessage(messages.connect_link_account_embed_carousel_button_back)), onNextClick && /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     onClick: onNextClick,
     testId: "".concat(testId, "-next")
-  }, formatMessage(messages.connect_link_account_embed_teaser_button_next)), showNavigation && /*#__PURE__*/React.createElement(Box, {
+  }, formatMessage(messages.connect_link_account_embed_carousel_button_next)))))), showNavigation && /*#__PURE__*/React.createElement(Box, {
     xcss: styles.rowDot,
     role: "group",
-    "aria-label": formatMessage(messages.connect_link_account_embed_teaser_dot_row_label)
+    "aria-label": formatMessage(messages.connect_link_account_embed_carousel_dot_row_label)
   }, Array.from({
     length: totalSlides
   }, function (_, i) {
@@ -100,7 +134,7 @@ var CarouselSlide = function CarouselSlide(_ref) {
       onClick: function onClick() {
         return onDotClick === null || onDotClick === void 0 ? void 0 : onDotClick(i);
       },
-      "aria-label": formatMessage(messages.connect_link_account_embed_teaser_dot_label, {
+      "aria-label": formatMessage(messages.connect_link_account_embed_carousel_dot_label, {
         index: i + 1,
         total: totalSlides
       }),
@@ -109,9 +143,13 @@ var CarouselSlide = function CarouselSlide(_ref) {
     }, /*#__PURE__*/React.createElement(Box, {
       xcss: cx(styles.dot, i === slideIndex && styles.dotActive)
     }));
-  })))), !isCompact && /*#__PURE__*/React.createElement(Box, {
+  }))), !isCompact && /*#__PURE__*/React.createElement(Box, {
     xcss: styles.columnImage,
-    testId: "".concat(testId, "-image-panel")
-  }, renderedImage));
+    testId: "".concat(testId, "-image-panel-").concat(slideIndex)
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.imageContainer
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.imageAbsolute
+  }, renderedImage))));
 };
 export default CarouselSlide;

package/dist/esm/view/EmbedCard/components/carousel/index.compiled.css

@@ -6,7 +6,7 @@
 ._1reo15vq{overflow-x:hidden}
 ._4t3i1osq{height:100%}
 ._5sagjx92{animation-duration:.28s}
-._j7hql61g{animation-name:kjqoltm}
+._j7hq1wwu{animation-name:kgnpaw5}
 ._kqswh2mm{position:relative}
-@keyframes kjqoltm{0%{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
+@keyframes kgnpaw5{0%{opacity:0}to{opacity:1}}
 @media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._2hwzhgkh{animation-duration:.01ms}}

package/dist/esm/view/EmbedCard/components/carousel/index.js

@@ -8,12 +8,10 @@ import CarouselSlide from './CarouselSlide';
 var styles = {
   carousel: "_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _4t3i1osq _kqswh2mm"
 };
-
-// Slide enters from the right: translates from 40px right + fades in
-var slideInFromRight = null;
+var fadeIn = null;
 var slideWrapperMap = {
   static: "_1bsb1osq _4t3i1osq",
-  animated: "_1bsb1osq _4t3i1osq _j7hql61g _5sagjx92 _1pglafbj _1o511hrf _bl8aglyw _2hwzhgkh"
+  animated: "_1bsb1osq _4t3i1osq _j7hq1wwu _5sagjx92 _1pglafbj _1o511hrf _bl8aglyw _2hwzhgkh"
 };
 /**
  * Derives layout size bucket from pixel dimensions.
@@ -32,12 +30,14 @@ var getSize = function getSize(width, height) {
 var Carousel = function Carousel(_ref) {
   var icon = _ref.icon,
     iconLabel = _ref.iconLabel,
+    _ref$initialSlideInde = _ref.initialSlideIndex,
+    initialSlideIndex = _ref$initialSlideInde === void 0 ? 0 : _ref$initialSlideInde,
     items = _ref.items,
     onPrimaryButtonClick = _ref.onPrimaryButtonClick,
     primaryButtonLabel = _ref.primaryButtonLabel,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'embed-card-teaser-carousel' : _ref$testId;
-  var _useState = useState(0),
+  var _useState = useState(initialSlideIndex),
     _useState2 = _slicedToArray(_useState, 2),
     activeIndex = _useState2[0],
     setActiveIndex = _useState2[1];
@@ -77,6 +77,12 @@ var Carousel = function Carousel(_ref) {
       return (current + 1) % items.length;
     });
   }, [items.length]);
+  var goPrev = useCallback(function () {
+    hasNavigated.current = true;
+    setActiveIndex(function (current) {
+      return Math.max(0, current - 1);
+    });
+  }, []);
   var goTo = useCallback(function (index) {
     if (index === activeIndex) {
       return;
@@ -85,6 +91,7 @@ var Carousel = function Carousel(_ref) {
     setActiveIndex(index);
   }, [activeIndex]);
   var currentSlide = items[activeIndex];
+  var isFirstSlide = activeIndex === 0;
   var isLastSlide = activeIndex === items.length - 1;
   return /*#__PURE__*/React.createElement(Box, {
     ref: containerRef,
@@ -102,6 +109,7 @@ var Carousel = function Carousel(_ref) {
     image: currentSlide.image,
     title: currentSlide.title,
     onPrimaryButtonClick: onPrimaryButtonClick,
+    onBackClick: !isFirstSlide ? goPrev : undefined,
     onDotClick: goTo,
     onNextClick: !isLastSlide ? goNext : undefined,
     size: size,