@atlaskit/smart-card 18.0.16 → 18.0.19

package/dist/esm/i18n/ru.js

@@ -0,0 +1,35 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Russian
+export default {
+  'fabric.linking.cannot_connect': 'Не удается подключиться, повторите попытку',
+  'fabric.linking.cannot_find_link': 'Не удается найти ссылку',
+  'fabric.linking.click_to_join': 'Для просмотра этой задачи выполните подключение к {context}',
+  'fabric.linking.connect_link_account': 'Подключить для просмотра',
+  'fabric.linking.create_on': 'Создано: {context}',
+  'fabric.linking.created_by': 'Создано: {context}',
+  'fabric.linking.delete': 'Удалить',
+  'fabric.linking.edit': 'Изменить',
+  'fabric.linking.forbidden_access': 'Доступ запрещен',
+  'fabric.linking.invalid_permissions': 'Доступ к ссылке ограничен, попробуйте войти в другой аккаунт',
+  'fabric.linking.modified_on': 'Обновлено: {context}',
+  'fabric.linking.pending_request': 'Ваш запрос на доступ ожидает рассмотрения',
+  'fabric.linking.priority_blocker': 'Блокер',
+  'fabric.linking.priority_critical': 'Критический',
+  'fabric.linking.priority_high': 'Высокий',
+  'fabric.linking.priority_highest': 'Самый высокий',
+  'fabric.linking.priority_low': 'Низкий',
+  'fabric.linking.priority_lowest': 'Самый низкий',
+  'fabric.linking.priority_major': 'Серьезный',
+  'fabric.linking.priority_medium': 'Средний',
+  'fabric.linking.priority_minor': 'Незначительный',
+  'fabric.linking.priority_trivial': 'Тривиальный',
+  'fabric.linking.priority_undefined': 'Не определен',
+  'fabric.linking.request_access': 'Для просмотра этой задачи запросите доступ к {context}',
+  'fabric.linking.request_denied': 'Ваш запрос на доступ отклонен',
+  'fabric.linking.updated_by': 'Изменено: {context}'
+};

package/dist/esm/i18n/sk.js

@@ -0,0 +1,8 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Slovak
+export default {};

package/dist/esm/i18n/sv.js

@@ -0,0 +1,35 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Swedish
+export default {
+  'fabric.linking.cannot_connect': 'Det går inte att ansluta, försök igen',
+  'fabric.linking.cannot_find_link': 'Kan inte hitta länk',
+  'fabric.linking.click_to_join': 'Anslut till {context} för att visa ärendet',
+  'fabric.linking.connect_link_account': 'Anslut till förhandsgranskning',
+  'fabric.linking.create_on': 'Skapades {context}',
+  'fabric.linking.created_by': 'Skapades av {context}',
+  'fabric.linking.delete': 'Radera',
+  'fabric.linking.edit': 'Redigera',
+  'fabric.linking.forbidden_access': 'Din åtkomst är förbjuden',
+  'fabric.linking.invalid_permissions': 'Begränsad länk, prova ett annat konto',
+  'fabric.linking.modified_on': 'Uppdaterades {context}',
+  'fabric.linking.pending_request': 'Din åtkomstförfrågan väntar på svar',
+  'fabric.linking.priority_blocker': 'Blockerare',
+  'fabric.linking.priority_critical': 'Kritisk',
+  'fabric.linking.priority_high': 'Hög',
+  'fabric.linking.priority_highest': 'Högst',
+  'fabric.linking.priority_low': 'Låg',
+  'fabric.linking.priority_lowest': 'Lägst',
+  'fabric.linking.priority_major': 'Betydande',
+  'fabric.linking.priority_medium': 'Medium',
+  'fabric.linking.priority_minor': 'Smärre',
+  'fabric.linking.priority_trivial': 'Obetydlig',
+  'fabric.linking.priority_undefined': 'Ej definierad',
+  'fabric.linking.request_access': 'Be om åtkomst till {context} för att visa ärendet',
+  'fabric.linking.request_denied': 'Din åtkomstförfrågan har nekats',
+  'fabric.linking.updated_by': 'Ändrad av {context}'
+};

package/dist/esm/i18n/th.js

@@ -0,0 +1,35 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Thai (Thailand)
+export default {
+  'fabric.linking.cannot_connect': 'ไม่สามารถเชื่อมต่อได้ โปรดลองอีกครั้ง',
+  'fabric.linking.cannot_find_link': 'ไม่พบลิงก์',
+  'fabric.linking.click_to_join': 'เข้าร่วม {context} เพื่อดูปัญหานี้',
+  'fabric.linking.connect_link_account': 'เชื่อมต่อเพื่อดูตัวอย่าง',
+  'fabric.linking.create_on': 'สร้าง {context} แล้ว',
+  'fabric.linking.created_by': 'สร้างโดย {context}',
+  'fabric.linking.delete': 'ลบ',
+  'fabric.linking.edit': 'แก้ไข',
+  'fabric.linking.forbidden_access': 'คุณไม่มีสิทธิ์เข้าถึง',
+  'fabric.linking.invalid_permissions': 'ลิงก์ถูกจำกัดการเข้าถึง โปรดลองใช้บัญชีอื่น',
+  'fabric.linking.modified_on': 'อัปเดต {context} แล้ว',
+  'fabric.linking.pending_request': 'คำขอการเข้าถึงของคุณกำลังรอดำเนินการ',
+  'fabric.linking.priority_blocker': 'ตัวบล็อก',
+  'fabric.linking.priority_critical': 'วิกฤต',
+  'fabric.linking.priority_high': 'สูง',
+  'fabric.linking.priority_highest': 'สูงที่สุด',
+  'fabric.linking.priority_low': 'ต่ำ',
+  'fabric.linking.priority_lowest': 'ต่ำที่สุด',
+  'fabric.linking.priority_major': 'มาก',
+  'fabric.linking.priority_medium': 'ปานกลาง',
+  'fabric.linking.priority_minor': 'น้อย',
+  'fabric.linking.priority_trivial': 'ไม่สำคัญ',
+  'fabric.linking.priority_undefined': 'ไม่ได้ระบุ',
+  'fabric.linking.request_access': 'ส่งคำขอการเข้าถึงที่ {context} เพื่อดูปัญหานี้',
+  'fabric.linking.request_denied': 'คำขอการเข้าถึงของคุณถูกปฏิเสธ',
+  'fabric.linking.updated_by': 'แก้ไขแล้วโดย {context}'
+};

package/dist/esm/i18n/tr.js

@@ -0,0 +1,35 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Turkish (Turkey)
+export default {
+  'fabric.linking.cannot_connect': 'Bağlanılamıyor, tekrar deneyin',
+  'fabric.linking.cannot_find_link': 'Bağlantı bulunamıyor',
+  'fabric.linking.click_to_join': 'Bu konuyu görüntülemek için {context} ürününe katılın',
+  'fabric.linking.connect_link_account': 'Önizlemeye bağlanın',
+  'fabric.linking.create_on': '{context} oluşturuldu',
+  'fabric.linking.created_by': '{context} tarafından oluşturuldu',
+  'fabric.linking.delete': 'Sil',
+  'fabric.linking.edit': 'Düzenle',
+  'fabric.linking.forbidden_access': 'Erişiminiz yasak',
+  'fabric.linking.invalid_permissions': 'Sınırlı bağlantı, başka bir hesap deneyin',
+  'fabric.linking.modified_on': 'Son güncelleme: {context}',
+  'fabric.linking.pending_request': 'Erişim talebiniz beklemede',
+  'fabric.linking.priority_blocker': 'Engelleyici',
+  'fabric.linking.priority_critical': 'Çok Önemli',
+  'fabric.linking.priority_high': 'Yüksek',
+  'fabric.linking.priority_highest': 'En Yüksek',
+  'fabric.linking.priority_low': 'Düşük',
+  'fabric.linking.priority_lowest': 'En Düşük',
+  'fabric.linking.priority_major': 'Önemli',
+  'fabric.linking.priority_medium': 'Orta',
+  'fabric.linking.priority_minor': 'Küçük',
+  'fabric.linking.priority_trivial': 'Önemsiz',
+  'fabric.linking.priority_undefined': 'Tanımlanmamış',
+  'fabric.linking.request_access': 'Bu konuyu görüntülemek için {context} ürününe erişim talep edin',
+  'fabric.linking.request_denied': 'Erişim talebiniz reddedildi',
+  'fabric.linking.updated_by': '{context} tarafından değiştirildi'
+};

package/dist/esm/i18n/uk.js

@@ -0,0 +1,35 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Ukrainian (Ukraine)
+export default {
+  'fabric.linking.cannot_connect': 'Не вдається підключитися, спробуйте ще раз',
+  'fabric.linking.cannot_find_link': 'Не вдається знайти посилання',
+  'fabric.linking.click_to_join': 'Можна приєднатися до {context}, щоб переглянути цю проблему',
+  'fabric.linking.connect_link_account': 'Для перегляду потрібно підключитись',
+  'fabric.linking.create_on': 'Створено {context}',
+  'fabric.linking.created_by': 'Автор: {context}',
+  'fabric.linking.delete': 'Видалити',
+  'fabric.linking.edit': 'Редагувати',
+  'fabric.linking.forbidden_access': 'У вас немає доступу',
+  'fabric.linking.invalid_permissions': 'Посилання з обмеженим доступом; спробуйте інший обліковий запис',
+  'fabric.linking.modified_on': 'Оновлено {context}',
+  'fabric.linking.pending_request': 'Запит на надання доступу в очікуванні',
+  'fabric.linking.priority_blocker': 'Блокувальний',
+  'fabric.linking.priority_critical': 'Критичний',
+  'fabric.linking.priority_high': 'Високий',
+  'fabric.linking.priority_highest': 'Найвищий',
+  'fabric.linking.priority_low': 'Низький',
+  'fabric.linking.priority_lowest': 'Найнижчий',
+  'fabric.linking.priority_major': 'Серйозний',
+  'fabric.linking.priority_medium': 'Середній',
+  'fabric.linking.priority_minor': 'Низький',
+  'fabric.linking.priority_trivial': 'Звичайний',
+  'fabric.linking.priority_undefined': 'Не визначено',
+  'fabric.linking.request_access': 'Надішліть запит на доступ до {context}, щоб переглянути завдання',
+  'fabric.linking.request_denied': 'Ваш запит на надання доступу відхилено',
+  'fabric.linking.updated_by': 'Автор зміни: {context}'
+};

package/dist/esm/i18n/vi.js

@@ -0,0 +1,35 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Vietnamese (Vietnam)
+export default {
+  'fabric.linking.cannot_connect': 'Không thể kết nối, hãy thử lại',
+  'fabric.linking.cannot_find_link': 'Không tìm được liên kết',
+  'fabric.linking.click_to_join': 'Tham gia {context} để xem vấn đề này',
+  'fabric.linking.connect_link_account': 'Kết nối để xem trước',
+  'fabric.linking.create_on': 'Đã tạo {context}',
+  'fabric.linking.created_by': 'Được tạo bởi {context}',
+  'fabric.linking.delete': 'Xóa',
+  'fabric.linking.edit': 'Chỉnh sửa',
+  'fabric.linking.forbidden_access': 'Quyền truy cập của bạn bị cấm',
+  'fabric.linking.invalid_permissions': 'Liên kết bị hạn chế, thử một tài khoản khác',
+  'fabric.linking.modified_on': 'Đã cập nhật {context}',
+  'fabric.linking.pending_request': 'Đang chờ xử lý yêu cầu quyền truy cập của bạn',
+  'fabric.linking.priority_blocker': 'Trở ngại',
+  'fabric.linking.priority_critical': 'Rất cao',
+  'fabric.linking.priority_high': 'Cao',
+  'fabric.linking.priority_highest': 'Cao nhất',
+  'fabric.linking.priority_low': 'Thấp',
+  'fabric.linking.priority_lowest': 'Thấp nhất',
+  'fabric.linking.priority_major': 'Lớn',
+  'fabric.linking.priority_medium': 'Trung bình',
+  'fabric.linking.priority_minor': 'Nhỏ',
+  'fabric.linking.priority_trivial': 'Không đáng kể',
+  'fabric.linking.priority_undefined': 'Chưa xác định',
+  'fabric.linking.request_access': 'Yêu cầu quyền truy cập vào {context} để xem vấn đề này',
+  'fabric.linking.request_denied': 'Yêu cầu quyền truy cập của bạn đã bị từ chối',
+  'fabric.linking.updated_by': 'Được sửa đổi bởi {context}'
+};

package/dist/esm/i18n/zh.js

@@ -0,0 +1,35 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Chinese (Simplified)
+export default {
+  'fabric.linking.cannot_connect': '无法连接，请重试',
+  'fabric.linking.cannot_find_link': '未找到链接',
+  'fabric.linking.click_to_join': '加入{context}以查看此事务',
+  'fabric.linking.connect_link_account': '连接以预览',
+  'fabric.linking.create_on': '{context}已创建',
+  'fabric.linking.created_by': '创建者：{context}',
+  'fabric.linking.delete': '删除',
+  'fabric.linking.edit': '编辑',
+  'fabric.linking.forbidden_access': '您的访问已被禁止',
+  'fabric.linking.invalid_permissions': '受限链接，请尝试其他帐户',
+  'fabric.linking.modified_on': '{context}已更新',
+  'fabric.linking.pending_request': '您的访问请求正等待处理',
+  'fabric.linking.priority_blocker': '阻止程序',
+  'fabric.linking.priority_critical': '紧急',
+  'fabric.linking.priority_high': '高',
+  'fabric.linking.priority_highest': '最高',
+  'fabric.linking.priority_low': '低',
+  'fabric.linking.priority_lowest': '最低',
+  'fabric.linking.priority_major': '重要',
+  'fabric.linking.priority_medium': '中等',
+  'fabric.linking.priority_minor': '次要',
+  'fabric.linking.priority_trivial': '微小',
+  'fabric.linking.priority_undefined': '未定义',
+  'fabric.linking.request_access': '请求访问{context}以查看此事务',
+  'fabric.linking.request_denied': '您的访问请求已被拒绝',
+  'fabric.linking.updated_by': '修改者：{context}'
+};

package/dist/esm/i18n/zh_TW.js

@@ -0,0 +1,35 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Chinese (Traditional)
+export default {
+  'fabric.linking.cannot_connect': '無法連結，請再試一次',
+  'fabric.linking.cannot_find_link': '找不到連結',
+  'fabric.linking.click_to_join': '加入 {context} 以查看此議題',
+  'fabric.linking.connect_link_account': '連線以預覽',
+  'fabric.linking.create_on': '建立時間：{context}',
+  'fabric.linking.created_by': '建立者：{context}',
+  'fabric.linking.delete': '刪除',
+  'fabric.linking.edit': '編輯',
+  'fabric.linking.forbidden_access': '您的存取遭拒',
+  'fabric.linking.invalid_permissions': '連結受到限制，請嘗試其他帳戶',
+  'fabric.linking.modified_on': '更新時間：{context}',
+  'fabric.linking.pending_request': '您的存取要求擱置中',
+  'fabric.linking.priority_blocker': '封鎖程式',
+  'fabric.linking.priority_critical': '重要',
+  'fabric.linking.priority_high': '高',
+  'fabric.linking.priority_highest': '最高',
+  'fabric.linking.priority_low': '低',
+  'fabric.linking.priority_lowest': '最低',
+  'fabric.linking.priority_major': '主要',
+  'fabric.linking.priority_medium': '中',
+  'fabric.linking.priority_minor': '次要',
+  'fabric.linking.priority_trivial': '不太重要',
+  'fabric.linking.priority_undefined': '未定義',
+  'fabric.linking.request_access': '要求存取 {context} 以檢視此議題',
+  'fabric.linking.request_denied': '您的存取要求遭拒',
+  'fabric.linking.updated_by': '修改者：{context}'
+};

package/dist/esm/state/actions/index.js

@@ -71,7 +71,7 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
     var nextStatus = response ? getStatus(response) : 'fatal'; // If we require authorization & do not have an authFlow available,
     // throw an error and render as a normal blue link.
 
-    if (nextStatus === 'unauthorized' && !hasAuthFlowSupported) {
+    if ((nextStatus === 'unauthorized' || nextStatus === 'forbidden') && !hasAuthFlowSupported) {
       handleResolvedLinkError(resourceUrl, new APIError('fallback', hostname, ERROR_MESSAGE_OAUTH));
       return;
     } // Handle any other errors

package/dist/esm/utils/token.js

@@ -11,6 +11,7 @@ export var tokens = {
   elevation: token('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
   errorMessage: token('color.text.disabled', '#6B778C'),
   errorMessageHover: token('color.text.subtle', '#8993A4'),
+  focus: token('color.border.focused', '#388BFF'),
   snippet: token('color.text', '#172B4D'),
   text: token('color.text.subtlest', '#626F86')
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "18.0.16",
+	"version": "18.0.19",
 	"sideEffects": false
 }

package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -14,7 +14,8 @@ import { SmartLinkSize } from '../../../../../constants';
 import Button from '@atlaskit/button/standard-button';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import { sizeToSpacing } from '../../actions/action';
-var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: 1rem;\n"])));
+import { tokens } from '../../../../../utils/token';
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: 1rem;\n  > div {\n    align-items: center;\n    button:focus {\n      // AK button removes the default browser outline on focus and apply\n      // box-shadow styling to create the outline appearance.\n      // Due to our container elements (Container/Block/ElementGroup) has\n      // overflow hidden to prevent the metadata element from leaking outside\n      // of its container, the box-shadow doesn't show properly.\n      // Invert the AK box-shadow styling.\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n"])), tokens.focus);
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
  * preferences.

package/dist/esm/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -19,7 +19,7 @@ var actionStyles = css(_templateObject || (_templateObject = _taggedTemplateLite
 
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = getLinkSizeStyles(size);
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n  "])), hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), tokens.errorMessage);
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n    :focus {\n      outline: ", " solid 2px;\n    }\n  "])), hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), tokens.errorMessage, tokens.focus);
 };
 /**
  * Represents an Errored TitleBlock view.
@@ -54,9 +54,11 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
   }, jsx("span", {
+    className: hasAction ? 'has-action' : '',
     css: getMessageStyles(size, hasAction),
     onClick: onClick,
-    "data-testid": "".concat(testId, "-errored-view-message")
+    "data-testid": "".concat(testId, "-errored-view-message"),
+    tabIndex: hasAction ? 0 : -1
   }, jsx(FormattedMessage, _extends({}, descriptor, {
     values: values
   })))), actionGroup);

package/dist/esm/view/FlexibleCard/components/blocks/title-block/index.js

@@ -17,7 +17,7 @@ import { Title } from '../../elements';
 
 var getActionStyles = function getActionStyles(showOnHover, isOpen) {
   if (showOnHover && !isOpen) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      .actions-button-group {\n        visibility: hidden;\n      }\n\n      &:hover {\n        .actions-button-group {\n          visibility: visible;\n        }\n      }\n    "])));
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      .actions-button-group {\n        opacity: 0;\n      }\n\n      &:hover .actions-button-group,\n      .actions-button-group:focus-within {\n        opacity: 1;\n      }\n    "])));
   }
 };
 

package/dist/esm/view/FlexibleCard/components/blocks/title-block/resolving/index.js

@@ -5,28 +5,10 @@ var _excluded = ["actionGroup", "testId", "title"];
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/core';
-import Spinner from '@atlaskit/spinner';
 import Block from '../../block';
 import { SmartLinkSize } from '../../../../../../constants';
-
-var getSpinnerSize = function getSpinnerSize(size) {
-  // Spinner sizes should be equivalent or smaller than Icon size
-  // to avoid the jumping.
-  switch (size) {
-    case SmartLinkSize.XLarge:
-      return 28;
-
-    case SmartLinkSize.Large:
-      return 24;
-
-    case SmartLinkSize.Medium:
-      return 16;
-
-    case SmartLinkSize.Small:
-    default:
-      return 12;
-  }
-};
+import LoadingSkeleton from '../../../common/loading-skeleton';
+import { getIconSizeStyles, getIconWidth } from '../../../utils';
 /**
  * This represents a TitleBlock for a Smart Link that is currently waiting
  * for a request to finish.
@@ -34,7 +16,6 @@ var getSpinnerSize = function getSpinnerSize(size) {
  * @see TitleBlock
  */
 
-
 var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
   var actionGroup = _ref.actionGroup,
       testId = _ref.testId,
@@ -43,12 +24,16 @@ var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
 
   var _blockProps$size = blockProps.size,
       size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
+  var iconWidth = getIconWidth(size);
+  var iconStyles = getIconSizeStyles(iconWidth);
   return jsx(Block, _extends({}, blockProps, {
     testId: "".concat(testId, "-resolving-view")
-  }), jsx(Spinner, {
-    size: getSpinnerSize(size),
-    testId: "".concat(testId, "-resolving-spinner")
-  }), title, actionGroup);
+  }), jsx("span", {
+    css: iconStyles,
+    "data-testid": "".concat(testId, "-icon")
+  }, jsx(LoadingSkeleton, {
+    testId: "".concat(testId, "-icon-loading")
+  })), title, actionGroup);
 };
 
 export default TitleBlockResolvingView;

package/dist/esm/view/FlexibleCard/components/blocks/utils.js

@@ -50,7 +50,7 @@ export var getGapSize = function getGapSize(size) {
   }
 };
 export var getBaseStyles = function getBaseStyles(direction, size) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  overflow-y: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
 };
 
 var isActionGroup = function isActionGroup(node) {

package/dist/esm/view/FlexibleCard/components/common/image-icon/index.js

@@ -1,14 +1,8 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2;
-
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx, keyframes } from '@emotion/core';
+import { jsx } from '@emotion/core';
 import ImageLoader from 'react-render-image';
-import { token } from '@atlaskit/tokens';
-var placeholderShimmer = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
-var shimmer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  user-select: none;\n  background: ", ";\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n  background-image: linear-gradient(\n    to right,\n    ", " 0%,\n    ", " 20%,\n    ", " 40%,\n    ", "100%\n  );\n  background-repeat: no-repeat;\n  background-size: 280% 100%;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), placeholderShimmer);
+import LoadingSkeleton from '../loading-skeleton';
 
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,
@@ -16,9 +10,8 @@ var ImageIcon = function ImageIcon(_ref) {
       url = _ref.url;
   return jsx(ImageLoader, {
     src: url,
-    loading: jsx("span", {
-      css: shimmer,
-      "data-testid": "".concat(testId, "-loading")
+    loading: jsx(LoadingSkeleton, {
+      testId: "".concat(testId, "-loading")
     }),
     loaded: jsx("img", {
       src: url,

package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -0,0 +1,20 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx, keyframes } from '@emotion/core';
+import { token } from '@atlaskit/tokens';
+var animationNameStyles = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
+var styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  user-select: none;\n  background: ", ";\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n  background-image: linear-gradient(\n    to right,\n    ", " 0%,\n    ", " 20%,\n    ", " 40%,\n    ", "100%\n  );\n  background-repeat: no-repeat;\n  background-size: 280% 100%;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
+
+var LoadingSkeleton = function LoadingSkeleton(_ref) {
+  var testId = _ref.testId;
+  return jsx("span", {
+    css: styles,
+    "data-testid": testId
+  });
+};
+
+export default LoadingSkeleton;

package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/FlexibleCard/components/container/index.js

@@ -1,13 +1,15 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 /** @jsx jsx */
-import React from 'react';
+import React, { useContext } from 'react';
 import { css, jsx } from '@emotion/core';
 import { SmartLinkSize, SmartLinkTheme } from '../../../../constants';
 import { isFlexibleUiBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
 import { tokens } from '../../../../utils/token';
+import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
+import LayeredLink from './layered-link';
 var elevationStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), tokens.elevation);
 
 var getGap = function getGap(size) {
@@ -44,8 +46,9 @@ var getPadding = function getPadding(size) {
   }
 };
 
-export var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: ", " 0;\n  flex-direction: column;\n  min-width: 0;\n  overflow: hidden;\n  ", "\n  ", "\n  ", "\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles);
+var clickableContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  // Position any interactive elements at the top of the z-index stack.\n  a,\n  button,\n  .has-action {\n    position: relative;\n    z-index: 1;\n  }\n"])));
+export var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: ", " 0;\n  flex-direction: column;\n  min-width: 0;\n  overflow-x: hidden;\n  position: relative;\n  ", "\n  ", "\n  ", "\n  ", "\n  &:hover ~ .actions-button-group {\n    opacity: 1;\n  }\n  a:focus,\n  .has-action:focus {\n    outline-offset: -2px;\n  }\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
 
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
@@ -62,34 +65,65 @@ var renderChildren = function renderChildren(children, containerSize, containerT
     }
   });
 };
+
+var getTitleBlockProps = function getTitleBlockProps(children) {
+  var block = React.Children.toArray(children).find(function (child) {
+    return isFlexibleUiTitleBlock(child);
+  });
+
+  if ( /*#__PURE__*/React.isValidElement(block)) {
+    return block.props;
+  }
+};
+
+var getLayeredLink = function getLayeredLink(testId, context, children) {
+  var _ref = context || {},
+      title = _ref.title,
+      _ref$url = _ref.url,
+      url = _ref$url === void 0 ? '' : _ref$url;
+
+  var _ref2 = getTitleBlockProps(children) || {},
+      target = _ref2.anchorTarget,
+      text = _ref2.text;
+
+  return jsx(LayeredLink, {
+    target: target,
+    testId: testId,
+    text: text || title,
+    url: url
+  });
+};
 /**
  * This represents the container in which all Flexible UI Smart Links are rendered.
  * @see Block
  */
 
 
-var Container = function Container(_ref) {
-  var children = _ref.children,
-      _ref$hideBackground = _ref.hideBackground,
-      hideBackground = _ref$hideBackground === void 0 ? false : _ref$hideBackground,
-      _ref$hideElevation = _ref.hideElevation,
-      hideElevation = _ref$hideElevation === void 0 ? false : _ref$hideElevation,
-      _ref$hidePadding = _ref.hidePadding,
-      hidePadding = _ref$hidePadding === void 0 ? false : _ref$hidePadding,
-      retry = _ref.retry,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
-      status = _ref.status,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-links-container' : _ref$testId,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? SmartLinkTheme.Link : _ref$theme,
-      onClick = _ref.onClick;
+var Container = function Container(_ref3) {
+  var children = _ref3.children,
+      _ref3$clickableContai = _ref3.clickableContainer,
+      clickableContainer = _ref3$clickableContai === void 0 ? false : _ref3$clickableContai,
+      _ref3$hideBackground = _ref3.hideBackground,
+      hideBackground = _ref3$hideBackground === void 0 ? false : _ref3$hideBackground,
+      _ref3$hideElevation = _ref3.hideElevation,
+      hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
+      _ref3$hidePadding = _ref3.hidePadding,
+      hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
+      onClick = _ref3.onClick,
+      retry = _ref3.retry,
+      _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? SmartLinkSize.Medium : _ref3$size,
+      status = _ref3.status,
+      _ref3$testId = _ref3.testId,
+      testId = _ref3$testId === void 0 ? 'smart-links-container' : _ref3$testId,
+      _ref3$theme = _ref3.theme,
+      theme = _ref3$theme === void 0 ? SmartLinkTheme.Link : _ref3$theme;
+  var context = useContext(FlexibleUiContext);
   return jsx("div", {
-    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding),
+    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, renderChildren(children, size, theme, status, retry, onClick));
+  }, clickableContainer ? getLayeredLink(testId, context, children) : null, renderChildren(children, size, theme, status, retry, onClick));
 };
 
 export default Container;