@atlaskit/smart-card 26.58.0 → 26.58.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 26.58.1
+
+### Patch Changes
+
+- [#95182](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/95182) [`3d3dd335b8e8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3d3dd335b8e8) - The internal composition of this component has changed. There is no expected change in behavior.
+
 ## 26.58.0
 
 ### Minor Changes

package/dist/cjs/extractors/common/lozenge/extractState.js

@@ -5,6 +5,49 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractState = void 0;
 var _utils = require("./utils");
+// Maps accent color short names to their corresponding background and text colors
+var lozengeAccentStyles = {
+  blue: {
+    backgroundColor: "var(--ds-background-accent-blue-subtler, #CCE0FF)",
+    color: "var(--ds-text-accent-blue, #0055CC)"
+  },
+  gray: {
+    backgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)",
+    color: "var(--ds-text-accent-gray, #44546F)"
+  },
+  green: {
+    backgroundColor: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+    color: "var(--ds-text-accent-green, #216E4E)"
+  },
+  lime: {
+    backgroundColor: "var(--ds-background-accent-lime-subtler, #D3F1A7)",
+    color: "var(--ds-text-accent-lime, #4C6B1F)"
+  },
+  magenta: {
+    backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
+    color: "var(--ds-text-accent-magenta, #943D73)"
+  },
+  orange: {
+    backgroundColor: "var(--ds-background-accent-orange-subtler, #FEDEC8)",
+    color: "var(--ds-text-accent-orange, #A54800)"
+  },
+  purple: {
+    backgroundColor: "var(--ds-background-accent-purple-subtler, #DFD8FD)",
+    color: "var(--ds-text-accent-purple, #5E4DB2)"
+  },
+  red: {
+    backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
+    color: "var(--ds-text-accent-red, #AE2E24)"
+  },
+  teal: {
+    backgroundColor: "var(--ds-background-accent-teal-subtler, #C6EDFB)",
+    color: "var(--ds-text-accent-teal, #206A83)"
+  },
+  yellow: {
+    backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
+    color: "var(--ds-text-accent-yellow, #7F5F01)"
+  }
+};
 var extractState = exports.extractState = function extractState(jsonLd) {
   var state = jsonLd['atlassian:state'];
   if (state) {
@@ -16,18 +59,13 @@ var extractState = exports.extractState = function extractState(jsonLd) {
           appearance: _utils.VALID_STATES[linkState] || 'default'
         };
       }
-    } else if (state['@type'] === 'Link') {
-      if (state.name) {
-        return {
-          text: state.name,
-          appearance: state.appearance || 'default'
-        };
-      }
-    } else if (state['@type'] === 'Object') {
+    } else if (state['@type'] === 'Link' || state['@type'] === 'Object') {
       if (state.name) {
+        var accent = state.accent;
         return {
           text: state.name,
-          appearance: state.appearance || 'default'
+          appearance: state.appearance || 'default',
+          style: accent ? lozengeAccentStyles[accent] : undefined
         };
       }
     }

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

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

package/dist/cjs/view/BlockCard/views/ResolvedView.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.blockCardResolvedViewClassName = exports.blockCardResolvedViewByClassName = exports.ResolvedView = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _Frame = require("../components/Frame");
@@ -25,6 +26,11 @@ var _utils = require("../../common/utils");
 var _handlers = require("../utils/handlers");
 /** @jsx jsx */
 
+var styles = (0, _react.css)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start'
+});
 /**
  * Class name for selecting non-flexible resolved block card
  *
@@ -89,11 +95,7 @@ var ResolvedView = exports.ResolvedView = function ResolvedView(_ref) {
     testId: testId,
     className: blockCardResolvedViewClassName
   }, (0, _react.jsx)(_Content.Content, null, (0, _react.jsx)("div", null, (0, _react.jsx)("div", {
-    css: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'flex-start'
-    }
+    css: styles
   }, (0, _react.jsx)(_ContentHeader.ContentHeader, {
     onClick: handleClick,
     link: link
@@ -109,7 +111,9 @@ var ResolvedView = exports.ResolvedView = function ResolvedView(_ref) {
       alignItems: 'center',
       justifyContent: 'center'
     }
-  }, (0, _react.jsx)(_lozenge.default, lozenge, lozenge.text))), (0, _react.jsx)(_CollaboratorList.CollaboratorList, {
+  }, (0, _react.jsx)(_lozenge.default, (0, _extends2.default)({
+    style: lozenge.style
+  }, lozenge), lozenge.text))), (0, _react.jsx)(_CollaboratorList.CollaboratorList, {
     items: users,
     handleAvatarClick: handleAvatarClick,
     handleMoreAvatarsClick: handleMoreAvatarsClick,

package/dist/cjs/view/FlexibleCard/components/blocks/action-block/index.js

@@ -5,17 +5,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = require("@emotion/react");
 var _primitives = require("@atlaskit/primitives");
-var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("react");
 var _constants = require("../../../../../constants");
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var Actions = _interopRequireWildcard(require("../../actions"));
 var _utils = require("../../utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// We have to find a better way to ignore container padding
-// This has become more and more of a common use case.
-var ignoreContainerPaddingStyles = (0, _primitives.xcss)({
+/** @jsx jsx */
+
+var ignoreContainerPaddingStyles = (0, _react.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  flexGrow: 1,
+  width: '100%',
+  // We have to find a better way to ignore container padding
+  // This has become more and more of a common use case.
   marginLeft: 'calc(var(--container-gap-left) * -1)',
   marginRight: 'calc(var(--container-gap-right) * -1)'
 });
@@ -41,7 +49,7 @@ var ActionBlock = function ActionBlock(_ref) {
   var context = (0, _flexibleUiContext.useFlexibleUiContext)();
   var ui = (0, _flexibleUiContext.useFlexibleUiOptionContext)();
   var padding = !(ui !== null && ui !== void 0 && ui.hidePadding) ? (0, _utils.getPrimitivesPaddingSpaceBySize)((ui === null || ui === void 0 ? void 0 : ui.size) || _constants.SmartLinkSize.Medium) : undefined;
-  var actions = (0, _react.useMemo)(function () {
+  var actions = (0, _react2.useMemo)(function () {
     if (!(context !== null && context !== void 0 && context.actions)) {
       return;
     }
@@ -49,7 +57,7 @@ var ActionBlock = function ActionBlock(_ref) {
     arr.sort(sort);
     return arr.map(function (name) {
       var Action = name in Actions ? Actions[name] : undefined;
-      return Action ? /*#__PURE__*/_react.default.createElement(Action, {
+      return Action ? (0, _react.jsx)(Action, {
         as: "stack-item",
         spaceInline: spaceInline,
         key: name,
@@ -63,11 +71,10 @@ var ActionBlock = function ActionBlock(_ref) {
       }) : null;
     });
   }, [context === null || context === void 0 ? void 0 : context.actions, onClickCallback, padding, size, spaceInline]);
-  return actions ? /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
-    grow: "fill",
-    xcss: ignoreContainerPaddingStyles,
+  return actions ? (0, _react.jsx)("div", {
+    css: ignoreContainerPaddingStyles,
     ref: blockRef,
-    testId: testId
+    "data-testid": testId
   }, actions) : null;
 };
 var _default = exports.default = ActionBlock;

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/index.js

@@ -29,6 +29,7 @@ var Lozenge = function Lozenge(_ref) {
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     name = _ref.name,
     overrideCss = _ref.overrideCss,
+    style = _ref.style,
     text = _ref.text,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
@@ -44,6 +45,7 @@ var Lozenge = function Lozenge(_ref) {
     zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
   }) : (0, _react2.jsx)(_lozenge.default, {
     appearance: appearance,
+    style: style,
     testId: "".concat(testId, "-lozenge")
   }, text);
   return (0, _react2.jsx)("span", {

package/dist/cjs/view/InlineCard/ResolvedView/index.js

@@ -32,9 +32,11 @@ var InlineCardResolvedView = exports.InlineCardResolvedView = /*#__PURE__*/funct
       if (!lozenge) {
         return null;
       }
+      var appearance = lozenge.appearance || 'default';
       return /*#__PURE__*/_react.default.createElement(_styled.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
         testId: "inline-card-resolved-view-lozenge",
-        appearance: lozenge.appearance || 'default',
+        appearance: appearance,
+        style: lozenge.style,
         isBold: lozenge.isBold
       }, lozenge.text));
     }

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

@@ -17,7 +17,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.58.0",
+  packageVersion: "26.58.1",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/extractors/common/lozenge/extractState.js

@@ -1,4 +1,48 @@
-import { VALID_STATES, OMIT_STATES } from './utils';
+import { OMIT_STATES, VALID_STATES } from './utils';
+
+// Maps accent color short names to their corresponding background and text colors
+const lozengeAccentStyles = {
+  blue: {
+    backgroundColor: "var(--ds-background-accent-blue-subtler, #CCE0FF)",
+    color: "var(--ds-text-accent-blue, #0055CC)"
+  },
+  gray: {
+    backgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)",
+    color: "var(--ds-text-accent-gray, #44546F)"
+  },
+  green: {
+    backgroundColor: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+    color: "var(--ds-text-accent-green, #216E4E)"
+  },
+  lime: {
+    backgroundColor: "var(--ds-background-accent-lime-subtler, #D3F1A7)",
+    color: "var(--ds-text-accent-lime, #4C6B1F)"
+  },
+  magenta: {
+    backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
+    color: "var(--ds-text-accent-magenta, #943D73)"
+  },
+  orange: {
+    backgroundColor: "var(--ds-background-accent-orange-subtler, #FEDEC8)",
+    color: "var(--ds-text-accent-orange, #A54800)"
+  },
+  purple: {
+    backgroundColor: "var(--ds-background-accent-purple-subtler, #DFD8FD)",
+    color: "var(--ds-text-accent-purple, #5E4DB2)"
+  },
+  red: {
+    backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
+    color: "var(--ds-text-accent-red, #AE2E24)"
+  },
+  teal: {
+    backgroundColor: "var(--ds-background-accent-teal-subtler, #C6EDFB)",
+    color: "var(--ds-text-accent-teal, #206A83)"
+  },
+  yellow: {
+    backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
+    color: "var(--ds-text-accent-yellow, #7F5F01)"
+  }
+};
 export const extractState = jsonLd => {
   const state = jsonLd['atlassian:state'];
   if (state) {
@@ -10,18 +54,13 @@ export const extractState = jsonLd => {
           appearance: VALID_STATES[linkState] || 'default'
         };
       }
-    } else if (state['@type'] === 'Link') {
-      if (state.name) {
-        return {
-          text: state.name,
-          appearance: state.appearance || 'default'
-        };
-      }
-    } else if (state['@type'] === 'Object') {
+    } else if (state['@type'] === 'Link' || state['@type'] === 'Object') {
       if (state.name) {
+        const accent = state.accent;
         return {
           text: state.name,
-          appearance: state.appearance || 'default'
+          appearance: state.appearance || 'default',
+          style: accent ? lozengeAccentStyles[accent] : undefined
         };
       }
     }

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

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

package/dist/es2019/view/BlockCard/views/ResolvedView.js

@@ -1,5 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
 import { Frame } from '../components/Frame';
 import { Thumbnail } from '../components/Thumbnail';
@@ -17,6 +18,11 @@ import { ContentHeader } from '../components/ContentHeader';
 import { ContentFooter } from '../components/ContentFooter';
 import { gs } from '../../common/utils';
 import { handleClickCommon } from '../utils/handlers';
+const styles = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start'
+});
 /**
  * Class name for selecting non-flexible resolved block card
  *
@@ -67,11 +73,7 @@ export const ResolvedView = ({
     testId: testId,
     className: blockCardResolvedViewClassName
   }, jsx(Content, null, jsx("div", null, jsx("div", {
-    css: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'flex-start'
-    }
+    css: styles
   }, jsx(ContentHeader, {
     onClick: handleClick,
     link: link
@@ -87,7 +89,9 @@ export const ResolvedView = ({
       alignItems: 'center',
       justifyContent: 'center'
     }
-  }, jsx(Lozenge, lozenge, lozenge.text))), jsx(CollaboratorList, {
+  }, jsx(Lozenge, _extends({
+    style: lozenge.style
+  }, lozenge), lozenge.text))), jsx(CollaboratorList, {
     items: users,
     handleAvatarClick: handleAvatarClick,
     handleMoreAvatarsClick: handleMoreAvatarsClick,

package/dist/es2019/view/FlexibleCard/components/blocks/action-block/index.js

@@ -1,12 +1,19 @@
-import { Stack, xcss } from '@atlaskit/primitives';
-import React, { useMemo } from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { xcss } from '@atlaskit/primitives';
+import { useMemo } from 'react';
 import { SmartLinkSize } from '../../../../../constants';
 import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import * as Actions from '../../actions';
 import { getPrimitivesPaddingSpaceBySize } from '../../utils';
-// We have to find a better way to ignore container padding
-// This has become more and more of a common use case.
-const ignoreContainerPaddingStyles = xcss({
+const ignoreContainerPaddingStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  flexGrow: 1,
+  width: '100%',
+  // We have to find a better way to ignore container padding
+  // This has become more and more of a common use case.
   marginLeft: 'calc(var(--container-gap-left) * -1)',
   marginRight: 'calc(var(--container-gap-right) * -1)'
 });
@@ -40,7 +47,7 @@ const ActionBlock = ({
     arr.sort(sort);
     return arr.map(name => {
       const Action = name in Actions ? Actions[name] : undefined;
-      return Action ? /*#__PURE__*/React.createElement(Action, {
+      return Action ? jsx(Action, {
         as: "stack-item",
         spaceInline: spaceInline,
         key: name,
@@ -52,11 +59,10 @@ const ActionBlock = ({
       }) : null;
     });
   }, [context === null || context === void 0 ? void 0 : context.actions, onClickCallback, padding, size, spaceInline]);
-  return actions ? /*#__PURE__*/React.createElement(Stack, {
-    grow: "fill",
-    xcss: ignoreContainerPaddingStyles,
+  return actions ? jsx("div", {
+    css: ignoreContainerPaddingStyles,
     ref: blockRef,
-    testId: testId
+    "data-testid": testId
   }, actions) : null;
 };
 export default ActionBlock;

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/index.js

@@ -20,6 +20,7 @@ const Lozenge = ({
   appearance = 'default',
   name,
   overrideCss,
+  style,
   text,
   testId = 'smart-element-lozenge'
 }) => {
@@ -35,6 +36,7 @@ const Lozenge = ({
     zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
   }) : jsx(AtlaskitLozenge, {
     appearance: appearance,
+    style: style,
     testId: `${testId}-lozenge`
   }, text);
   return jsx("span", {

package/dist/es2019/view/InlineCard/ResolvedView/index.js

@@ -12,9 +12,11 @@ export class InlineCardResolvedView extends React.Component {
     if (!lozenge) {
       return null;
     }
+    const appearance = lozenge.appearance || 'default';
     return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
       testId: "inline-card-resolved-view-lozenge",
-      appearance: lozenge.appearance || 'default',
+      appearance: appearance,
+      style: lozenge.style,
       isBold: lozenge.isBold
     }, lozenge.text));
   }

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

@@ -7,7 +7,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.58.0",
+  packageVersion: "26.58.1",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/esm/extractors/common/lozenge/extractState.js

@@ -1,4 +1,48 @@
-import { VALID_STATES, OMIT_STATES } from './utils';
+import { OMIT_STATES, VALID_STATES } from './utils';
+
+// Maps accent color short names to their corresponding background and text colors
+var lozengeAccentStyles = {
+  blue: {
+    backgroundColor: "var(--ds-background-accent-blue-subtler, #CCE0FF)",
+    color: "var(--ds-text-accent-blue, #0055CC)"
+  },
+  gray: {
+    backgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)",
+    color: "var(--ds-text-accent-gray, #44546F)"
+  },
+  green: {
+    backgroundColor: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+    color: "var(--ds-text-accent-green, #216E4E)"
+  },
+  lime: {
+    backgroundColor: "var(--ds-background-accent-lime-subtler, #D3F1A7)",
+    color: "var(--ds-text-accent-lime, #4C6B1F)"
+  },
+  magenta: {
+    backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
+    color: "var(--ds-text-accent-magenta, #943D73)"
+  },
+  orange: {
+    backgroundColor: "var(--ds-background-accent-orange-subtler, #FEDEC8)",
+    color: "var(--ds-text-accent-orange, #A54800)"
+  },
+  purple: {
+    backgroundColor: "var(--ds-background-accent-purple-subtler, #DFD8FD)",
+    color: "var(--ds-text-accent-purple, #5E4DB2)"
+  },
+  red: {
+    backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
+    color: "var(--ds-text-accent-red, #AE2E24)"
+  },
+  teal: {
+    backgroundColor: "var(--ds-background-accent-teal-subtler, #C6EDFB)",
+    color: "var(--ds-text-accent-teal, #206A83)"
+  },
+  yellow: {
+    backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
+    color: "var(--ds-text-accent-yellow, #7F5F01)"
+  }
+};
 export var extractState = function extractState(jsonLd) {
   var state = jsonLd['atlassian:state'];
   if (state) {
@@ -10,18 +54,13 @@ export var extractState = function extractState(jsonLd) {
           appearance: VALID_STATES[linkState] || 'default'
         };
       }
-    } else if (state['@type'] === 'Link') {
-      if (state.name) {
-        return {
-          text: state.name,
-          appearance: state.appearance || 'default'
-        };
-      }
-    } else if (state['@type'] === 'Object') {
+    } else if (state['@type'] === 'Link' || state['@type'] === 'Object') {
       if (state.name) {
+        var accent = state.accent;
         return {
           text: state.name,
-          appearance: state.appearance || 'default'
+          appearance: state.appearance || 'default',
+          style: accent ? lozengeAccentStyles[accent] : undefined
         };
       }
     }

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

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

package/dist/esm/view/BlockCard/views/ResolvedView.js

@@ -1,5 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
 import { Frame } from '../components/Frame';
 import { Thumbnail } from '../components/Thumbnail';
@@ -17,6 +18,11 @@ import { ContentHeader } from '../components/ContentHeader';
 import { ContentFooter } from '../components/ContentFooter';
 import { gs } from '../../common/utils';
 import { handleClickCommon } from '../utils/handlers';
+var styles = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start'
+});
 /**
  * Class name for selecting non-flexible resolved block card
  *
@@ -81,11 +87,7 @@ export var ResolvedView = function ResolvedView(_ref) {
     testId: testId,
     className: blockCardResolvedViewClassName
   }, jsx(Content, null, jsx("div", null, jsx("div", {
-    css: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'flex-start'
-    }
+    css: styles
   }, jsx(ContentHeader, {
     onClick: handleClick,
     link: link
@@ -101,7 +103,9 @@ export var ResolvedView = function ResolvedView(_ref) {
       alignItems: 'center',
       justifyContent: 'center'
     }
-  }, jsx(Lozenge, lozenge, lozenge.text))), jsx(CollaboratorList, {
+  }, jsx(Lozenge, _extends({
+    style: lozenge.style
+  }, lozenge), lozenge.text))), jsx(CollaboratorList, {
     items: users,
     handleAvatarClick: handleAvatarClick,
     handleMoreAvatarsClick: handleMoreAvatarsClick,

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

@@ -1,12 +1,19 @@
-import { Stack, xcss } from '@atlaskit/primitives';
-import React, { useMemo } from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { xcss } from '@atlaskit/primitives';
+import { useMemo } from 'react';
 import { SmartLinkSize } from '../../../../../constants';
 import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import * as Actions from '../../actions';
 import { getPrimitivesPaddingSpaceBySize } from '../../utils';
-// We have to find a better way to ignore container padding
-// This has become more and more of a common use case.
-var ignoreContainerPaddingStyles = xcss({
+var ignoreContainerPaddingStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  flexGrow: 1,
+  width: '100%',
+  // We have to find a better way to ignore container padding
+  // This has become more and more of a common use case.
   marginLeft: 'calc(var(--container-gap-left) * -1)',
   marginRight: 'calc(var(--container-gap-right) * -1)'
 });
@@ -40,7 +47,7 @@ var ActionBlock = function ActionBlock(_ref) {
     arr.sort(sort);
     return arr.map(function (name) {
       var Action = name in Actions ? Actions[name] : undefined;
-      return Action ? /*#__PURE__*/React.createElement(Action, {
+      return Action ? jsx(Action, {
         as: "stack-item",
         spaceInline: spaceInline,
         key: name,
@@ -54,11 +61,10 @@ var ActionBlock = function ActionBlock(_ref) {
       }) : null;
     });
   }, [context === null || context === void 0 ? void 0 : context.actions, onClickCallback, padding, size, spaceInline]);
-  return actions ? /*#__PURE__*/React.createElement(Stack, {
-    grow: "fill",
-    xcss: ignoreContainerPaddingStyles,
+  return actions ? jsx("div", {
+    css: ignoreContainerPaddingStyles,
     ref: blockRef,
-    testId: testId
+    "data-testid": testId
   }, actions) : null;
 };
 export default ActionBlock;

package/dist/esm/view/FlexibleCard/components/elements/lozenge/index.js

@@ -21,6 +21,7 @@ var Lozenge = function Lozenge(_ref) {
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     name = _ref.name,
     overrideCss = _ref.overrideCss,
+    style = _ref.style,
     text = _ref.text,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
@@ -36,6 +37,7 @@ var Lozenge = function Lozenge(_ref) {
     zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
   }) : jsx(AtlaskitLozenge, {
     appearance: appearance,
+    style: style,
     testId: "".concat(testId, "-lozenge")
   }, text);
   return jsx("span", {

package/dist/esm/view/InlineCard/ResolvedView/index.js

@@ -25,9 +25,11 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
       if (!lozenge) {
         return null;
       }
+      var appearance = lozenge.appearance || 'default';
       return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
         testId: "inline-card-resolved-view-lozenge",
-        appearance: lozenge.appearance || 'default',
+        appearance: appearance,
+        style: lozenge.style,
         isBold: lozenge.isBold
       }, lozenge.text));
     }

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

@@ -10,7 +10,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.58.0",
+  packageVersion: "26.58.1",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/types/extractors/common/lozenge/types.d.ts

@@ -1,10 +1,13 @@
+import { LozengeProps as AtlaskitLozengeProps } from '@atlaskit/lozenge';
 import { InvokeActions } from '../../../state/hooks/use-invoke/types';
 export type LinkLozengeColor = 'default' | 'success' | 'removed' | 'inprogress' | 'new' | 'moved';
+export type AccentShortName = 'blue' | 'gray' | 'green' | 'lime' | 'magenta' | 'orange' | 'purple' | 'red' | 'teal' | 'yellow';
 export type LinkLozengeInvokeActions = InvokeActions;
 export interface LinkLozenge {
     action?: LinkLozengeInvokeActions;
     text: string;
     appearance?: LinkLozengeColor;
+    style?: AtlaskitLozengeProps['style'];
 }
 export type LinkDocumentState = 'archived' | 'draft' | 'current';
 export type LinkPullRequestState = 'open' | 'merged' | 'declined' | 'closed';

package/dist/types/types.d.ts

@@ -1,6 +1,7 @@
 import { JsonLd } from 'json-ld-types';
 import { RequestAccessMessageKey } from './messages';
 export type { CardContext } from '@atlaskit/link-provider';
+import type { LozengeProps as AtlaskitLozengeProps } from '@atlaskit/lozenge';
 import { AccessContext } from './view/types';
 import { ActionProps } from './view/BlockCard/components/Action';
 export type ResolveResponse = JsonLd.Response;
@@ -16,5 +17,6 @@ export type LozengeColor = 'default' | 'success' | 'removed' | 'inprogress' | 'n
 export interface LozengeProps {
     text: string;
     appearance?: LozengeColor;
+    style?: AtlaskitLozengeProps['style'];
     isBold?: boolean;
 }

package/dist/types/view/FlexibleCard/components/blocks/action-block/index.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
-import { ActionBlockProps } from './types';
-declare const ActionBlock: ({ blockRef, onClick: onClickCallback, size, spaceInline, testId, }: ActionBlockProps) => JSX.Element | null;
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { type ActionBlockProps } from './types';
+declare const ActionBlock: ({ blockRef, onClick: onClickCallback, size, spaceInline, testId, }: ActionBlockProps) => jsx.JSX.Element | null;
 export default ActionBlock;

package/dist/types/view/FlexibleCard/components/elements/lozenge/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { LozengeProps as AtlaskitLozengeProps } from '@atlaskit/lozenge';
 import { ElementProps } from '../types';
 import type { LinkLozengeInvokeActions } from '../../../../../extractors/common/lozenge/types';
 export type LozengeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
@@ -11,6 +12,10 @@ export type LozengeProps = ElementProps & {
      * Determines the appearance of the Atlaskit lozenge.
      */
     appearance?: LozengeAppearance;
+    /**
+     * Determines the custom styles of the Atlaskit lozenge.
+     */
+    style?: AtlaskitLozengeProps['style'];
     /**
      * The text to display within the lozenge.
      */

package/dist/types-ts4.5/extractors/common/lozenge/types.d.ts

@@ -1,10 +1,13 @@
+import { LozengeProps as AtlaskitLozengeProps } from '@atlaskit/lozenge';
 import { InvokeActions } from '../../../state/hooks/use-invoke/types';
 export type LinkLozengeColor = 'default' | 'success' | 'removed' | 'inprogress' | 'new' | 'moved';
+export type AccentShortName = 'blue' | 'gray' | 'green' | 'lime' | 'magenta' | 'orange' | 'purple' | 'red' | 'teal' | 'yellow';
 export type LinkLozengeInvokeActions = InvokeActions;
 export interface LinkLozenge {
     action?: LinkLozengeInvokeActions;
     text: string;
     appearance?: LinkLozengeColor;
+    style?: AtlaskitLozengeProps['style'];
 }
 export type LinkDocumentState = 'archived' | 'draft' | 'current';
 export type LinkPullRequestState = 'open' | 'merged' | 'declined' | 'closed';

package/dist/types-ts4.5/types.d.ts

@@ -1,6 +1,7 @@
 import { JsonLd } from 'json-ld-types';
 import { RequestAccessMessageKey } from './messages';
 export type { CardContext } from '@atlaskit/link-provider';
+import type { LozengeProps as AtlaskitLozengeProps } from '@atlaskit/lozenge';
 import { AccessContext } from './view/types';
 import { ActionProps } from './view/BlockCard/components/Action';
 export type ResolveResponse = JsonLd.Response;
@@ -16,5 +17,6 @@ export type LozengeColor = 'default' | 'success' | 'removed' | 'inprogress' | 'n
 export interface LozengeProps {
     text: string;
     appearance?: LozengeColor;
+    style?: AtlaskitLozengeProps['style'];
     isBold?: boolean;
 }

package/dist/types-ts4.5/view/FlexibleCard/components/blocks/action-block/index.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
-import { ActionBlockProps } from './types';
-declare const ActionBlock: ({ blockRef, onClick: onClickCallback, size, spaceInline, testId, }: ActionBlockProps) => JSX.Element | null;
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { type ActionBlockProps } from './types';
+declare const ActionBlock: ({ blockRef, onClick: onClickCallback, size, spaceInline, testId, }: ActionBlockProps) => jsx.JSX.Element | null;
 export default ActionBlock;

package/dist/types-ts4.5/view/FlexibleCard/components/elements/lozenge/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { LozengeProps as AtlaskitLozengeProps } from '@atlaskit/lozenge';
 import { ElementProps } from '../types';
 import type { LinkLozengeInvokeActions } from '../../../../../extractors/common/lozenge/types';
 export type LozengeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
@@ -11,6 +12,10 @@ export type LozengeProps = ElementProps & {
      * Determines the appearance of the Atlaskit lozenge.
      */
     appearance?: LozengeAppearance;
+    /**
+     * Determines the custom styles of the Atlaskit lozenge.
+     */
+    style?: AtlaskitLozengeProps['style'];
     /**
      * The text to display within the lozenge.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.58.0",
+  "version": "26.58.1",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/avatar": "^21.5.0",
     "@atlaskit/avatar-group": "^9.5.0",
-    "@atlaskit/badge": "^16.0.0",
+    "@atlaskit/badge": "^16.1.0",
     "@atlaskit/button": "^17.14.0",
     "@atlaskit/dropdown-menu": "^12.9.0",
     "@atlaskit/frontend-utilities": "^2.7.0",
@@ -48,14 +48,14 @@
     "@atlaskit/linking-types": "^8.8.0",
     "@atlaskit/logo": "^13.15.0",
     "@atlaskit/lozenge": "^11.7.0",
-    "@atlaskit/modal-dialog": "^12.11.0",
+    "@atlaskit/modal-dialog": "^12.12.0",
     "@atlaskit/outbound-auth-flow-client": "^3.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
-    "@atlaskit/popup": "^1.14.0",
+    "@atlaskit/popup": "^1.15.0",
     "@atlaskit/primitives": "^5.6.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/tokens": "^1.44.0",
     "@atlaskit/tooltip": "^18.2.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",