@atlaskit/smart-card 45.6.7 → 45.6.9

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/smart-card
 
+## 45.6.9
+
+### Patch Changes
+
+- [`5005b8d4da66a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5005b8d4da66a) -
+  Add carousel view for EmbedCard - a contextual teaser that displays provider benefits via a slide
+  carousel.
+
+## 45.6.8
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 45.6.7
 
 ### Patch Changes

package/dist/cjs/messages.js

@@ -166,6 +166,51 @@ var messages = exports.messages = (0, _reactIntl.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',
+    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',
+    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',
+    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_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',
+    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',
+    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_teaser_slide_3_title: {
+    id: 'fabric.linking.connect_link_account_embed_teaser_slide_3_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.",
+    description: 'A description on a teaser slide 3 on benefit of connecting account on Smart Link embed'
+  },
   connect_link_account_success_flag_description: {
     id: 'fabric.linking.connect_link_account_success_flag_description',
     defaultMessage: 'Shared links now display rich previews.',

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card" || '',
-  packageVersion: "45.6.6" || ''
+  packageVersion: "45.6.8" || ''
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -0,0 +1,52 @@
+
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
+._zulp1ejb{gap:var(--ds-space-300,24px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._zulpze3t{gap:var(--ds-space-0,0)}._16jlkb7n{flex-grow:1}
+._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}
+._1bsb1osq{width:100%}
+._1bsb1tcg{width:24px}
+._1bsb7vkz{width:1pc}
+._1bsbi2wt{width:6px}
+._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
+._1n261g80{flex-wrap:wrap}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1oecfnf5{transition-duration:.2s}
+._1reo1wug{overflow-x:auto}
+._2lx21bp4{flex-direction:column}
+._2lx2vrvc{flex-direction:row}
+._4cvr1fhb{align-items:stretch}
+._4cvr1h6o{align-items:center}
+._4cvr1y6m{align-items:flex-start}
+._4t3i1osq{height:100%}
+._4t3i1tcg{height:24px}
+._4t3i7vkz{height:1pc}
+._4t3ii2wt{height:6px}
+._5ral1f51{object-fit:contain}
+._6fl45ucs{transition-timing-function:ease}
+._bfhk1dy8{background-color:var(--ds-background-accent-blue-subtler,#cfe1fd)}
+._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)}
+._c71l1wdt{max-height:220px}
+._ca0q1jfw{padding-top:var(--ds-space-500,40px)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._i0dlghg7{flex-basis:240px}
+._i0dluuw1{flex-basis:200px}
+._k8m01k61{transition-property:background-color}
+._lcxvglyw{pointer-events:none}
+._n3td1jfw{padding-bottom:var(--ds-space-500,40px)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._rsufaqso{object-position:center center}
+._u5f31jfw{padding-right:var(--ds-space-500,40px)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._vchhusvi{box-sizing:border-box}

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

@@ -0,0 +1,124 @@
+/* CarouselSlide.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./CarouselSlide.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _css = require("@atlaskit/css");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _image = _interopRequireDefault(require("@atlaskit/image"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _messages = require("../../../../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",
+  columnContentCompact: "_ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi",
+  dot: "_2rko1rr0 _1bsbi2wt _4t3ii2wt _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",
+  rowButtonCompact: "_1bsb1osq",
+  rowDot: "_zulpze3t _1e0c1txw _2lx2vrvc _4cvr1h6o",
+  rowIcon: "_zulpu2gc _1e0c1txw _4cvr1h6o",
+  slide: "_1reo1wug _18m91wug _1e0c1txw _1n261g80 _1bsb1osq _4t3i1osq _4cvr1fhb _vchhusvi"
+};
+var CarouselSlide = function CarouselSlide(_ref) {
+  var icon = _ref.icon,
+    iconLabel = _ref.iconLabel,
+    title = _ref.title,
+    description = _ref.description,
+    image = _ref.image,
+    primaryButtonLabel = _ref.primaryButtonLabel,
+    onPrimaryButtonClick = _ref.onPrimaryButtonClick,
+    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;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var isCompact = size !== 'full';
+  var showNavigation = totalSlides > 1;
+  var renderedIcon = icon == null ? null : typeof icon === 'string' ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.icon
+  }, /*#__PURE__*/_react.default.createElement(_image.default, {
+    src: icon,
+    alt: iconLabel,
+    className: (0, _runtime.ax)([styles.iconImage])
+  })) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.icon
+  }, icon);
+  var renderedImage = image == null ? null : typeof image === 'string' ? /*#__PURE__*/_react.default.createElement(_image.default, {
+    src: image,
+    alt: title,
+    className: (0, _runtime.ax)([styles.image])
+  }) : image;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.slide,
+    testId: testId
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.columnContent, isCompact && styles.columnContentCompact)
+  }, isCompact && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.rowButton, styles.rowButtonCompact)
+  }, /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "primary",
+    onClick: onPrimaryButtonClick,
+    shouldFitContainer: true,
+    testId: "".concat(testId, "-connect-compact")
+  }, primaryButtonLabel)), renderedIcon && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.rowIcon
+  }, renderedIcon), /*#__PURE__*/_react.default.createElement(_compiled.Box, null, /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "medium",
+    testId: "".concat(testId, "-title")
+  }, title)), /*#__PURE__*/_react.default.createElement(_compiled.Box, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    testId: "".concat(testId, "-description")
+  }, description)), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.rowButton
+  }, !isCompact && /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "primary",
+    onClick: onPrimaryButtonClick,
+    testId: "".concat(testId, "-connect")
+  }, primaryButtonLabel), showNavigation && onNextClick && /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "subtle",
+    onClick: onNextClick,
+    testId: "".concat(testId, "-next")
+  }, formatMessage(_messages.messages.connect_link_account_embed_teaser_button_next)), showNavigation && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.rowDot,
+    role: "group",
+    "aria-label": formatMessage(_messages.messages.connect_link_account_embed_teaser_dot_row_label)
+  }, Array.from({
+    length: totalSlides
+  }, function (_, i) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
+      key: i,
+      xcss: styles.dotPassable,
+      onClick: function onClick() {
+        return onDotClick === null || onDotClick === void 0 ? void 0 : onDotClick(i);
+      },
+      "aria-label": formatMessage(_messages.messages.connect_link_account_embed_teaser_dot_label, {
+        index: i + 1,
+        total: totalSlides
+      }),
+      "aria-current": i === slideIndex ? 'true' : undefined,
+      testId: "".concat(testId, "-dot-").concat(i)
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: (0, _css.cx)(styles.dot, i === slideIndex && styles.dotActive)
+    }));
+  })))), !isCompact && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.columnImage,
+    testId: "".concat(testId, "-image-panel")
+  }, renderedImage));
+};
+var _default = exports.default = CarouselSlide;

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

@@ -0,0 +1,12 @@
+._18m915vq{overflow-y:hidden}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1o511hrf{animation-fill-mode:both}
+._1pglafbj{animation-timing-function:cubic-bezier(.25,.46,.45,.94)}
+._1reo15vq{overflow-x:hidden}
+._4t3i1osq{height:100%}
+._5sagjx92{animation-duration:.28s}
+._j7hql61g{animation-name:kjqoltm}
+._kqswh2mm{position:relative}
+@keyframes kjqoltm{0%{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
+@media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._2hwzhgkh{animation-duration:.01ms}}

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

@@ -0,0 +1,122 @@
+/* index.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
+});
+exports.default = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _CarouselSlide = _interopRequireDefault(require("./CarouselSlide"));
+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 = {
+  carousel: "_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _4t3i1osq _kqswh2mm"
+};
+
+// Slide enters from the right: translates from 40px right + fades in
+var slideInFromRight = null;
+var slideWrapperMap = {
+  static: "_1bsb1osq _4t3i1osq",
+  animated: "_1bsb1osq _4t3i1osq _j7hql61g _5sagjx92 _1pglafbj _1o511hrf _bl8aglyw _2hwzhgkh"
+};
+/**
+ * Derives layout size bucket from pixel dimensions.
+ * Used instead of CSS @container queries (which are blocked by the linter)
+ * to control which elements are shown at different card sizes.
+ */
+var getSize = function getSize(width, height) {
+  if (width < 200 || height < 100) {
+    return 'minimal';
+  }
+  if (width < 400 || height < 140) {
+    return 'compact';
+  }
+  return 'full';
+};
+var Carousel = function Carousel(_ref) {
+  var icon = _ref.icon,
+    iconLabel = _ref.iconLabel,
+    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 = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeIndex = _useState2[0],
+    setActiveIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)('full'),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    size = _useState4[0],
+    setSize = _useState4[1];
+
+  // Tracks whether the user has navigated at least once.
+  // The first slide is rendered statically (no animation) to avoid any
+  // CSS animation running during SSR or on the initial paint.
+  var hasNavigated = (0, _react.useRef)(false);
+  var containerRef = (0, _react.useRef)(null);
+
+  // Observe the carousel container's size and update the layout bucket.
+  (0, _react.useEffect)(function () {
+    var el = containerRef.current;
+    if (!el) {
+      return;
+    }
+    var observer = new ResizeObserver(function (_ref2) {
+      var _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
+        entry = _ref3[0];
+      var _entry$contentRect = entry.contentRect,
+        width = _entry$contentRect.width,
+        height = _entry$contentRect.height;
+      setSize(getSize(width, height));
+    });
+    observer.observe(el);
+    return function () {
+      return observer.disconnect();
+    };
+  }, []);
+  var goNext = (0, _react.useCallback)(function () {
+    hasNavigated.current = true;
+    setActiveIndex(function (current) {
+      return (current + 1) % items.length;
+    });
+  }, [items.length]);
+  var goTo = (0, _react.useCallback)(function (index) {
+    if (index === activeIndex) {
+      return;
+    }
+    hasNavigated.current = true;
+    setActiveIndex(index);
+  }, [activeIndex]);
+  var currentSlide = items[activeIndex];
+  var isLastSlide = activeIndex === items.length - 1;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    ref: containerRef,
+    xcss: styles.carousel,
+    testId: testId
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    key: activeIndex,
+    xcss: slideWrapperMap[hasNavigated.current ? 'animated' : 'static'],
+    "aria-live": "polite"
+  }, /*#__PURE__*/_react.default.createElement(_CarouselSlide.default, {
+    primaryButtonLabel: primaryButtonLabel,
+    description: currentSlide.description,
+    icon: icon,
+    iconLabel: iconLabel,
+    image: currentSlide.image,
+    title: currentSlide.title,
+    onPrimaryButtonClick: onPrimaryButtonClick,
+    onDotClick: goTo,
+    onNextClick: !isLastSlide ? goNext : undefined,
+    size: size,
+    slideIndex: activeIndex,
+    testId: "".concat(testId, "-slide"),
+    totalSlides: items.length
+  })));
+};
+var _default = exports.default = Carousel;

package/dist/cjs/view/EmbedCard/components/carousel/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/view/LinkUrl/index.js

@@ -19,7 +19,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "45.6.6",
+  packageVersion: "45.6.8",
   componentName: 'linkUrl'
 };
 var LinkUrl = function LinkUrl(_ref) {

package/dist/es2019/messages.js

@@ -160,6 +160,51 @@ export const 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',
+    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',
+    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',
+    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_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',
+    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',
+    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_teaser_slide_3_title: {
+    id: 'fabric.linking.connect_link_account_embed_teaser_slide_3_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.",
+    description: 'A description on a teaser slide 3 on benefit of connecting account on Smart Link embed'
+  },
   connect_link_account_success_flag_description: {
     id: 'fabric.linking.connect_link_account_success_flag_description',
     defaultMessage: 'Shared links now display rich previews.',

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card" || '',
-  packageVersion: "45.6.6" || ''
+  packageVersion: "45.6.8" || ''
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -0,0 +1,52 @@
+
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
+._zulp1ejb{gap:var(--ds-space-300,24px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._zulpze3t{gap:var(--ds-space-0,0)}._16jlkb7n{flex-grow:1}
+._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}
+._1bsb1osq{width:100%}
+._1bsb1tcg{width:24px}
+._1bsb7vkz{width:1pc}
+._1bsbi2wt{width:6px}
+._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
+._1n261g80{flex-wrap:wrap}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1oecfnf5{transition-duration:.2s}
+._1reo1wug{overflow-x:auto}
+._2lx21bp4{flex-direction:column}
+._2lx2vrvc{flex-direction:row}
+._4cvr1fhb{align-items:stretch}
+._4cvr1h6o{align-items:center}
+._4cvr1y6m{align-items:flex-start}
+._4t3i1osq{height:100%}
+._4t3i1tcg{height:24px}
+._4t3i7vkz{height:1pc}
+._4t3ii2wt{height:6px}
+._5ral1f51{object-fit:contain}
+._6fl45ucs{transition-timing-function:ease}
+._bfhk1dy8{background-color:var(--ds-background-accent-blue-subtler,#cfe1fd)}
+._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)}
+._c71l1wdt{max-height:220px}
+._ca0q1jfw{padding-top:var(--ds-space-500,40px)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._i0dlghg7{flex-basis:240px}
+._i0dluuw1{flex-basis:200px}
+._k8m01k61{transition-property:background-color}
+._lcxvglyw{pointer-events:none}
+._n3td1jfw{padding-bottom:var(--ds-space-500,40px)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._rsufaqso{object-position:center center}
+._u5f31jfw{padding-right:var(--ds-space-500,40px)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._vchhusvi{box-sizing:border-box}

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

@@ -0,0 +1,114 @@
+/* CarouselSlide.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./CarouselSlide.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { useIntl } from 'react-intl';
+import Button from '@atlaskit/button/new';
+import { cx } from '@atlaskit/css';
+import Heading from '@atlaskit/heading';
+import Image from '@atlaskit/image';
+import { Box, Pressable, Text } from '@atlaskit/primitives/compiled';
+import { messages } from '../../../../messages';
+const 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",
+  columnContentCompact: "_ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi",
+  dot: "_2rko1rr0 _1bsbi2wt _4t3ii2wt _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",
+  rowButtonCompact: "_1bsb1osq",
+  rowDot: "_zulpze3t _1e0c1txw _2lx2vrvc _4cvr1h6o",
+  rowIcon: "_zulpu2gc _1e0c1txw _4cvr1h6o",
+  slide: "_1reo1wug _18m91wug _1e0c1txw _1n261g80 _1bsb1osq _4t3i1osq _4cvr1fhb _vchhusvi"
+};
+const CarouselSlide = ({
+  icon,
+  iconLabel,
+  title,
+  description,
+  image,
+  primaryButtonLabel,
+  onPrimaryButtonClick,
+  onDotClick,
+  onNextClick,
+  slideIndex,
+  totalSlides,
+  size,
+  testId = 'embed-card-teaser-slide'
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const isCompact = size !== 'full';
+  const showNavigation = totalSlides > 1;
+  const 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);
+  const renderedImage = image == null ? null : typeof image === 'string' ? /*#__PURE__*/React.createElement(Image, {
+    src: image,
+    alt: title,
+    className: ax([styles.image])
+  }) : image;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.slide,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.columnContent, isCompact && styles.columnContentCompact)
+  }, isCompact && /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.rowButton, styles.rowButtonCompact)
+  }, /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary",
+    onClick: onPrimaryButtonClick,
+    shouldFitContainer: true,
+    testId: `${testId}-connect-compact`
+  }, primaryButtonLabel)), renderedIcon && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.rowIcon
+  }, renderedIcon), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Heading, {
+    size: "medium",
+    testId: `${testId}-title`
+  }, title)), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Text, {
+    testId: `${testId}-description`
+  }, description)), /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.rowButton
+  }, !isCompact && /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary",
+    onClick: onPrimaryButtonClick,
+    testId: `${testId}-connect`
+  }, primaryButtonLabel), showNavigation && onNextClick && /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: onNextClick,
+    testId: `${testId}-next`
+  }, formatMessage(messages.connect_link_account_embed_teaser_button_next)), showNavigation && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.rowDot,
+    role: "group",
+    "aria-label": formatMessage(messages.connect_link_account_embed_teaser_dot_row_label)
+  }, Array.from({
+    length: totalSlides
+  }, (_, i) => /*#__PURE__*/React.createElement(Pressable, {
+    key: i,
+    xcss: styles.dotPassable,
+    onClick: () => onDotClick === null || onDotClick === void 0 ? void 0 : onDotClick(i),
+    "aria-label": formatMessage(messages.connect_link_account_embed_teaser_dot_label, {
+      index: i + 1,
+      total: totalSlides
+    }),
+    "aria-current": i === slideIndex ? 'true' : undefined,
+    testId: `${testId}-dot-${i}`
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.dot, i === slideIndex && styles.dotActive)
+  })))))), !isCompact && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.columnImage,
+    testId: `${testId}-image-panel`
+  }, renderedImage));
+};
+export default CarouselSlide;

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

@@ -0,0 +1,12 @@
+._18m915vq{overflow-y:hidden}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1o511hrf{animation-fill-mode:both}
+._1pglafbj{animation-timing-function:cubic-bezier(.25,.46,.45,.94)}
+._1reo15vq{overflow-x:hidden}
+._4t3i1osq{height:100%}
+._5sagjx92{animation-duration:.28s}
+._j7hql61g{animation-name:kjqoltm}
+._kqswh2mm{position:relative}
+@keyframes kjqoltm{0%{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
+@media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._2hwzhgkh{animation-duration:.01ms}}