@atlaskit/smart-card 45.12.0 → 45.13.0

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,

package/dist/esm/view/EmbedCard/views/unauthorized-view/UnauthorizedCarouselView.js

@@ -0,0 +1,182 @@
+import React, { Suspense, useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { di } from 'react-magnetic-di';
+import LinkGlyph from '@atlaskit/icon/core/link';
+import SmartLinkIcon from '@atlaskit/icon/core/smart-link';
+import IconTile from '@atlaskit/icon/icon-tile';
+import Image from '@atlaskit/image/image';
+import { useAnalyticsEvents } from '../../../../common/analytics/generated/use-analytics-events';
+import { messages } from '../../../../messages';
+import useRovoConfig from '../../../../state/hooks/use-rovo-config';
+import Carousel from '../../components/carousel';
+import { ExpandedFrame } from '../../components/ExpandedFrame';
+import { ImageIcon } from '../../components/ImageIcon';
+import LazyRovoChatBenefitImage from './carousel-images/LazyRovoChatBenefitImage';
+import LazyRovoSearchBenefitImage from './carousel-images/LazyRovoSearchBenefitImage';
+import NoAuthAvailableImage from './carousel-images/NoAuthAvailableImage';
+import ProductIcon from './carousel-images/ProductIcon';
+import SmartLinkBenefitImage from './carousel-images/SmartLinkBenefitImage';
+var PARENT_PRODUCT = {
+  ATLAS: 'ATLAS',
+  BITBUCKET: 'BITBUCKET',
+  CONFLUENCE: 'CONFLUENCE',
+  CSM: 'JIRA',
+  JPD: 'JIRA',
+  JSM: 'JIRA',
+  JSW: 'JIRA',
+  JWM: 'JIRA',
+  TRELLO: 'TRELLO'
+};
+var PRODUCT_COMPANION = {
+  ATLAS: 'ATLAS',
+  BITBUCKET: 'BITBUCKET',
+  CONFLUENCE: 'JIRA',
+  JIRA: 'CONFLUENCE',
+  TRELLO: 'TRELLO'
+};
+var UnauthorizedCarouselView = function UnauthorizedCarouselView(_ref) {
+  var context = _ref.context,
+    frameStyle = _ref.frameStyle,
+    inheritDimensions = _ref.inheritDimensions,
+    isSelected = _ref.isSelected,
+    onAuthorize = _ref.onAuthorize,
+    onClick = _ref.onClick,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'embed-card-unauthorized-view' : _ref$testId,
+    url = _ref.url;
+  var intl = useIntl();
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  var _useRovoConfig = useRovoConfig(),
+    rovoOptions = _useRovoConfig.rovoOptions,
+    product = _useRovoConfig.product;
+  var canAuthorize = typeof onAuthorize === 'function';
+  var providerName = context === null || context === void 0 ? void 0 : context.text;
+  var providerIcon = useMemo(function () {
+    var _ref2, _context$iconLabel;
+    var iconLabel = (_ref2 = (_context$iconLabel = context === null || context === void 0 ? void 0 : context.iconLabel) !== null && _context$iconLabel !== void 0 ? _context$iconLabel : context === null || context === void 0 ? void 0 : context.text) !== null && _ref2 !== void 0 ? _ref2 : '';
+    if (typeof (context === null || context === void 0 ? void 0 : context.icon) === 'string') {
+      return /*#__PURE__*/React.createElement(Image, {
+        src: context.icon,
+        alt: iconLabel
+      });
+    }
+    if (context !== null && context !== void 0 && context.icon) {
+      return context.icon;
+    }
+    return /*#__PURE__*/React.createElement(IconTile, {
+      appearance: "blue",
+      icon: SmartLinkIcon,
+      label: iconLabel,
+      size: "small",
+      testId: "embed-card-fallback-icon"
+    });
+  }, [context]);
+  var items = useMemo(function () {
+    if (!canAuthorize) {
+      return [{
+        title: intl.formatMessage(messages.unauthorised_account_name_no_provider),
+        description: intl.formatMessage(messages.unauthorised_account_description_no_provider),
+        image: /*#__PURE__*/React.createElement(NoAuthAvailableImage, null)
+      }];
+    }
+    var parentProduct = product ? PARENT_PRODUCT[product] : undefined;
+    var parentProductIcon = /*#__PURE__*/React.createElement(ProductIcon, {
+      product: parentProduct
+    });
+    var parentProductAlt = parentProduct ? PRODUCT_COMPANION[parentProduct] : parentProduct;
+    var parentProductIconAlt = /*#__PURE__*/React.createElement(ProductIcon, {
+      product: parentProductAlt
+    });
+
+    // We only have special text for Google Drive and i18n select takes only one word (no space).
+    var i18nSelectContext = (context === null || context === void 0 ? void 0 : context.text) === 'Google Drive' ? 'Google' : context === null || context === void 0 ? void 0 : context.text;
+    var slides = [{
+      title: intl.formatMessage(messages.connect_link_account_embed_carousel_sl_title),
+      description: intl.formatMessage(messages.connect_link_account_embed_carousel_sl_description, {
+        context: i18nSelectContext,
+        product: parentProduct
+      }),
+      image: /*#__PURE__*/React.createElement(SmartLinkBenefitImage, {
+        productIcon: parentProductIcon
+      })
+    }];
+
+    // If the link has an unauthorized status and provides an onAuthorize callback,
+    // it is likely a 3P (third-party) link and is supported by Rovo. In that case,
+    // we show additional Rovo-specific teaser slides to encourage the user to connect their account.
+    if (rovoOptions !== null && rovoOptions !== void 0 && rovoOptions.isRovoEnabled) {
+      slides.push({
+        title: intl.formatMessage(messages.connect_link_account_embed_carousel_rovo_title),
+        description: intl.formatMessage(messages.connect_link_account_embed_carousel_rovo_description, {
+          context: providerName,
+          product: parentProduct
+        }),
+        image: /*#__PURE__*/React.createElement(Suspense, {
+          fallback: null
+        }, /*#__PURE__*/React.createElement(LazyRovoSearchBenefitImage, {
+          productIcon: parentProductIcon,
+          productIconAlt: parentProductIconAlt,
+          providerIcon: providerIcon
+        }))
+      });
+    }
+    if (rovoOptions !== null && rovoOptions !== void 0 && rovoOptions.isRovoEnabled && rovoOptions !== null && rovoOptions !== void 0 && rovoOptions.isRovoLLMEnabled) {
+      slides.push({
+        title: intl.formatMessage(messages.connect_link_account_embed_carousel_rovochat_title),
+        description: intl.formatMessage(messages.connect_link_account_embed_carousel_rovochat_description, {
+          context: providerName
+        }),
+        image: /*#__PURE__*/React.createElement(Suspense, {
+          fallback: null
+        }, /*#__PURE__*/React.createElement(LazyRovoChatBenefitImage, {
+          productIcon: parentProductIcon,
+          productIconAlt: parentProductIconAlt,
+          providerIcon: providerIcon
+        }))
+      });
+    }
+    return slides;
+  }, [canAuthorize, context, intl, product, providerName, providerIcon, rovoOptions]);
+  var handleOnAuthorizeClick = useCallback(function () {
+    if (onAuthorize) {
+      fireEvent('track.applicationAccount.authStarted', {});
+      onAuthorize();
+    }
+  }, [onAuthorize, fireEvent]);
+  var buttonLabel = context !== null && context !== void 0 && context.text ? intl.formatMessage(messages.connect_3p_account, {
+    context: context.text
+  }) : intl.formatMessage(messages.connect_link_account_card);
+  var icon = useMemo(function () {
+    if ( /*#__PURE__*/React.isValidElement(context === null || context === void 0 ? void 0 : context.icon)) {
+      return context.icon;
+    }
+    return /*#__PURE__*/React.createElement(ImageIcon, {
+      default: /*#__PURE__*/React.createElement(LinkGlyph, {
+        label: "icon",
+        color: "currentColor"
+      }),
+      src: typeof (context === null || context === void 0 ? void 0 : context.icon) === 'string' ? context.icon : undefined
+    });
+  }, [context === null || context === void 0 ? void 0 : context.icon]);
+  return /*#__PURE__*/React.createElement(ExpandedFrame, {
+    allowScrollBar: true,
+    frameStyle: frameStyle !== null && frameStyle !== void 0 ? frameStyle : 'show',
+    href: url,
+    icon: icon,
+    isSelected: isSelected,
+    inheritDimensions: inheritDimensions,
+    onClick: onClick,
+    setOverflow: true,
+    testId: testId,
+    text: context === null || context === void 0 ? void 0 : context.text
+  }, /*#__PURE__*/React.createElement(Carousel, {
+    icon: context === null || context === void 0 ? void 0 : context.icon,
+    iconLabel: context === null || context === void 0 ? void 0 : context.text,
+    items: items,
+    onPrimaryButtonClick: canAuthorize ? handleOnAuthorizeClick : undefined,
+    primaryButtonLabel: buttonLabel,
+    testId: "".concat(testId, "-carousel")
+  }));
+};
+export default UnauthorizedCarouselView;

package/dist/esm/view/EmbedCard/views/unauthorized-view/carousel-images/IconSlot.compiled.css

@@ -0,0 +1,7 @@
+._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1reo15vq{overflow-x:hidden}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}

package/dist/esm/view/EmbedCard/views/unauthorized-view/carousel-images/IconSlot.js

@@ -0,0 +1,24 @@
+/* IconSlot.tsx generated by @compiled/babel-plugin v0.40.0 */
+import "./IconSlot.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+var iconSlotDivStyles = null;
+var IconSlot = function IconSlot(_ref) {
+  var icon = _ref.icon,
+    x = _ref.x,
+    y = _ref.y,
+    w = _ref.w,
+    h = _ref.h;
+  if (!icon) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("foreignObject", {
+    x: x,
+    y: y,
+    width: w,
+    height: h
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1reo15vq _18m915vq _1bsb1osq _4t3i1osq _1e0c1txw _4cvr1h6o _1bah1h6o"])
+  }, icon));
+};
+export default IconSlot;

package/dist/esm/view/EmbedCard/views/unauthorized-view/carousel-images/LazyRovoChatBenefitImage.js

@@ -0,0 +1,5 @@
+import { lazy } from 'react';
+var LazyRovoChatBenefitImage = /*#__PURE__*/lazy(function () {
+  return import( /* webpackChunkName: "smart-card-embed-carousel-rovo-chat-benefit-image" */'./RovoChatBenefitImage');
+});
+export default LazyRovoChatBenefitImage;

package/dist/esm/view/EmbedCard/views/unauthorized-view/carousel-images/LazyRovoSearchBenefitImage.js

@@ -0,0 +1,5 @@
+import { lazy } from 'react';
+var LazyRovoSearchBenefitImage = /*#__PURE__*/lazy(function () {
+  return import( /* webpackChunkName: "smart-card-embed-carousel-rovo-search-benefit-image" */'./RovoSearchBenefitImage');
+});
+export default LazyRovoSearchBenefitImage;

package/dist/esm/view/EmbedCard/views/unauthorized-view/carousel-images/NoAuthAvailableImage.compiled.css

@@ -0,0 +1,6 @@
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}

package/dist/esm/view/EmbedCard/views/unauthorized-view/carousel-images/NoAuthAvailableImage.js

@@ -0,0 +1,15 @@
+/* NoAuthAvailableImage.tsx generated by @compiled/babel-plugin v0.40.0 */
+import "./NoAuthAvailableImage.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+import { UnauthorizedSVG } from '../unauthorized-svg';
+var styles = {
+  container: "_1bsb1osq _1e0c1txw _4cvr1h6o _1bah1h6o _ca0q1ejb _n3td1ejb"
+};
+var NoAuthAvailableImage = function NoAuthAvailableImage() {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.container
+  }, /*#__PURE__*/React.createElement(UnauthorizedSVG, null));
+};
+export default NoAuthAvailableImage;

package/dist/esm/view/EmbedCard/views/unauthorized-view/carousel-images/ProductIcon.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { AtlassianIcon } from '@atlaskit/logo/atlassian-icon';
+import { BitbucketIcon } from '@atlaskit/logo/bitbucket-icon';
+import { ConfluenceIcon } from '@atlaskit/logo/confluence-icon';
+import { JiraIcon } from '@atlaskit/logo/jira-icon';
+import { ProjectsIcon } from '@atlaskit/logo/projects/icon';
+import { TrelloIcon } from '@atlaskit/logo/trello-icon';
+var ProductIcon = function ProductIcon(_ref) {
+  var product = _ref.product,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'xsmall' : _ref$size;
+  switch (product) {
+    case 'ATLAS':
+      return /*#__PURE__*/React.createElement(ProjectsIcon, {
+        size: size
+      });
+    case 'BITBUCKET':
+      return /*#__PURE__*/React.createElement(BitbucketIcon, {
+        size: size
+      });
+    case 'CONFLUENCE':
+      return /*#__PURE__*/React.createElement(ConfluenceIcon, {
+        size: size
+      });
+    case 'JIRA':
+      return /*#__PURE__*/React.createElement(JiraIcon, {
+        size: size
+      });
+    case 'TRELLO':
+      return /*#__PURE__*/React.createElement(TrelloIcon, {
+        size: size
+      });
+    default:
+      return /*#__PURE__*/React.createElement(AtlassianIcon, {
+        appearance: "brand",
+        size: size
+      });
+  }
+};
+export default ProductIcon;