@atlaskit/smart-card 26.3.3 → 26.3.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 26.3.4
+
+### Patch Changes
+
+- [`d86bc75af82`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d86bc75af82) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+
 ## 26.3.3
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -86,7 +86,7 @@ var _linkProvider = require("@atlaskit/link-provider");
 var _PreviewAction = _interopRequireDefault(require("./actions/PreviewAction"));
 var _templateObject;
 /** @jsx jsx */
-var flexibleBlockCardElevationStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), _token.tokens.elevation);
+var flexibleBlockCardElevationStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), _token.tokens.elevation, "var(--ds-space-025, 2px)");
 var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
   var id = _ref.id,

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -73,6 +73,8 @@ function visible(_ref6) {
 var LinkWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " &:hover {\n    text-decoration: none;\n  }\n"])), function (props) {
   return wrapperStyles(props);
 });
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.LinkWrapper = LinkWrapper;
 var Wrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  margin-top: 10px;\n"])), function (props) {
   return wrapperStyles(props);
@@ -125,24 +127,26 @@ var Image = _styled.default.img(_templateObject7 || (_templateObject7 = (0, _tag
 exports.Image = Image;
 var maxAvatarCount = 6;
 exports.maxAvatarCount = maxAvatarCount;
-var ContentWrapper = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 12px 12px 12px;\n"])));
+var ContentWrapper = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: ", " ", "\n    ", " ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
 exports.ContentWrapper = ContentWrapper;
 var Title = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N900, ")"), 20 / 16, 20 * 4);
 exports.Title = Title;
-var Byline = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), "var(--ds-text-subtlest, ".concat(colors.N300, ")"), 16 / 12, ellipsis('100%'));
+var Byline = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-text-subtlest, ".concat(colors.N300, ")"), 16 / 12, ellipsis('100%'));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.Byline = Byline;
 var Description = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), 18 / 12, 18 * 3);
 exports.Description = Description;
-var ResolvedViewIconWrapper = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n"])));
+var ResolvedViewIconWrapper = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n"])), "var(--ds-space-050, 4px)");
 exports.ResolvedViewIconWrapper = ResolvedViewIconWrapper;
-var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), "var(--ds-skeleton, ".concat(colors.N30, ")"), function (_ref13) {
+var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: ", " 0 ", "\n    ", ";\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), "var(--ds-space-050, 4px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-skeleton, ".concat(colors.N30, ")"), function (_ref13) {
   var src = _ref13.src;
   return src;
 });
 exports.Thumbnail = Thumbnail;
-var UsersWrapper = _styled.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n"])));
+var UsersWrapper = _styled.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n"])), "var(--ds-space-100, 8px)");
 exports.UsersWrapper = UsersWrapper;
-var ActionsWrapper = _styled.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n  text-align: right;\n\n  > * {\n    margin-top: 4px;\n  }\n\n  > * + * {\n    margin-left: 4px;\n  }\n"])));
+var ActionsWrapper = _styled.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  text-align: right;\n\n  > * {\n    margin-top: ", ";\n  }\n\n  > * + * {\n    margin-left: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
 exports.ActionsWrapper = ActionsWrapper;
 var AlertWrapper = _styled.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  /* z-index has to be 1 higher than the number of avatars in the avatar stack */\n  z-index: ", ";\n"])), maxAvatarCount + 1);
 exports.AlertWrapper = AlertWrapper;

package/dist/cjs/view/EmbedModal/components/link-info/styled.js

@@ -8,7 +8,8 @@ exports.titleCss = exports.iconCss = exports.containerStyles = exports.actionCss
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var containerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: 24px 24px 14px 24px;\n"])));
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+var containerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: ", " ", " 14px\n    ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 exports.containerStyles = containerStyles;
 var iconSize = '24px';
 var iconCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
@@ -16,5 +17,5 @@ exports.iconCss = iconCss;
 var height = '20px';
 var titleCss = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: ", ";\n\n    display: -webkit-box;\n    margin-bottom: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: ", ";\n    }\n  }\n"])), height, height);
 exports.titleCss = titleCss;
-var actionCss = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 0 0 auto;\n  gap: 4px;\n  line-height: ", ";\n  span {\n    line-height: ", ";\n  }\n\n  @media only screen and (max-width: 980px) {\n    // Hide resize button if the screen is smaller than the min width\n    // or too small to have enough impact to matter.\n    .smart-link-resize-button {\n      display: none;\n    }\n  }\n"])), height, height);
+var actionCss = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 0 0 auto;\n  gap: ", ";\n  line-height: ", ";\n  span {\n    line-height: ", ";\n  }\n\n  @media only screen and (max-width: 980px) {\n    // Hide resize button if the screen is smaller than the min width\n    // or too small to have enough impact to matter.\n    .smart-link-resize-button {\n      display: none;\n    }\n  }\n"])), "var(--ds-space-050, 4px)", height, height);
 exports.actionCss = actionCss;

package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/styled.js

@@ -14,6 +14,8 @@ var dropdownItemGroupStyles = (0, _react.css)(_templateObject || (_templateObjec
 exports.dropdownItemGroupStyles = dropdownItemGroupStyles;
 var sharedBlockStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 0.5rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  flex-direction: row;\n  align-items: center;\n"])));
 var contentStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  margin-top: ", ";\n  align-items: flex-start;\n\n  > span,\n  > div {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    color: ", ";\n  }\n"])), sharedBlockStyles, "var(--ds-space-025, 2px)", "var(--ds-text, ".concat(_colors.N800, ")"));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.contentStyles = contentStyles;
 var linkStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  cursor: pointer;\n  font-size: 0.875rem;\n  margin-top: 10px;\n  margin-left: ", ";\n  margin-bottom: ", ";\n"])), sharedBlockStyles, "var(--ds-space-400, 32px)", "var(--ds-space-025, 2px)");
 exports.linkStyles = linkStyles;

package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/styled.js

@@ -8,9 +8,11 @@ exports.triggerLozengeStyles = exports.triggerButtonStyles = exports.dropdownIte
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _templateObject, _templateObject2, _templateObject3;
-var triggerButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: 2px;\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-border-focused, #388BFF)");
+var triggerButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: ", ";\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-space-025, 2px)", "var(--ds-border-focused, #388BFF)");
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.triggerButtonStyles = triggerButtonStyles;
-var triggerLozengeStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: -4px -8px -4px -1px;\n  }\n"])));
+var triggerLozengeStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: calc(-1 * ", ")\n      calc(-1 * ", ")\n      calc(-1 * ", ") -1px;\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)");
 exports.triggerLozengeStyles = triggerLozengeStyles;
-var dropdownItemGroupStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  max-height: 300px;\n  overflow-y: auto;\n\n  button {\n    padding: 6px 12px;\n    min-height: 28px;\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n    }\n\n    &:focus,\n    &:focus-visible {\n      background-color: ", ";\n      box-sizing: border-box;\n      box-shadow: inset 2px 0 0 ", ";\n      outline: none;\n    }\n  }\n"])), "var(--ds-background-neutral-subtle-hovered, #091E420F)", "var(--ds-border-selected, #0C66E4)");
+var dropdownItemGroupStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  max-height: 300px;\n  overflow-y: auto;\n\n  button {\n    padding: ", " ", ";\n    min-height: 28px;\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n    }\n\n    &:focus,\n    &:focus-visible {\n      background-color: ", ";\n      box-sizing: border-box;\n      box-shadow: inset 2px 0 0 ", ";\n      outline: none;\n    }\n  }\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-150, 12px)", "var(--ds-background-neutral-subtle-hovered, #091E420F)", "var(--ds-border-selected, #0C66E4)");
 exports.dropdownItemGroupStyles = dropdownItemGroupStyles;

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

@@ -21,7 +21,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var elevationStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), _token.tokens.elevation);
+var elevationStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), _token.tokens.elevation, "var(--ds-space-025, 2px)");
 var getGap = function getGap(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:

package/dist/cjs/view/InlineCard/Icon.js

@@ -15,13 +15,13 @@ var _templateObject, _templateObject2;
 // Current rationale: vertically positioned at the top of
 // the smart card container (when set to 0). Offset this
 // to position it with appropriate whitespace from the top.
-var Icon = _styled.default.img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
+var Icon = _styled.default.img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 14px;\n  width: 14px;\n  margin-right: ", ";\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), "var(--ds-space-050, 4px)");
 
 // Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
 exports.Icon = Icon;
-var AKIconWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: -2px;\n"])));
+var AKIconWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-025, 2px)");
 exports.AKIconWrapper = AKIconWrapper;
 var Shimmer = function Shimmer(_ref) {
   var testId = _ref.testId;

package/dist/cjs/view/InlineCard/IconAndTitleLayout/styled.js

@@ -25,7 +25,7 @@ var IconWrapper = _styled.default.span(_templateObject || (_templateObject = (0,
 
 // Wraps all emoji in Inline Links similar to icon
 exports.IconWrapper = IconWrapper;
-var EmojiWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  margin-right: 2px;\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides);
+var EmojiWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  margin-right: ", ";\n  user-select: none;\n  ", "\n  ", "\n"])), "var(--ds-space-025, 2px)", IconOverrides, IconObjectOverrides);
 
 // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
@@ -38,15 +38,15 @@ exports.IconTitleWrapper = IconTitleWrapper;
 var LozengeWrapper = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: 1px;\n"])));
 // TODO: Replace overrides with proper AtlasKit solution.
 exports.LozengeWrapper = LozengeWrapper;
-var LozengeBlockWrapper = _styled.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > span {\n    margin-left: 4px;\n  }\n"])));
+var LozengeBlockWrapper = _styled.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > span {\n    margin-left: ", ";\n  }\n"])), "var(--ds-space-050, 4px)");
 exports.LozengeBlockWrapper = LozengeBlockWrapper;
-var RightIconPositionWrapper = _styled.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 2px;\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
+var RightIconPositionWrapper = _styled.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", ";\n  margin-right: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)");
 
 // The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
 exports.RightIconPositionWrapper = RightIconPositionWrapper;
-var IconPositionWrapper = _styled.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
+var IconPositionWrapper = _styled.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-050, 4px)");
 exports.IconPositionWrapper = IconPositionWrapper;
 var IconEmptyWrapper = _styled.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 14px;\n  height: 100%;\n  display: inline-block;\n  opacity: 0;\n"])));
 

package/dist/cjs/view/InlineCard/ResolvingView/styled.js

@@ -9,5 +9,5 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _styled2 = require("../IconAndTitleLayout/styled");
 var _templateObject;
-var SpinnerWrapper = (0, _styled.default)(_styled2.IconTitleWrapper)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  vertical-align: text-top;\n  margin-left: 2px;\n"])));
+var SpinnerWrapper = (0, _styled.default)(_styled2.IconTitleWrapper)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  vertical-align: text-top;\n  margin-left: ", ";\n"])), "var(--ds-space-025, 2px)");
 exports.SpinnerWrapper = SpinnerWrapper;

package/dist/es2019/version.json

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

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

@@ -28,7 +28,7 @@ export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResol
 const flexibleBlockCardElevationStyle = css`
   border-radius: 1.5px;
   box-shadow: ${tokens.elevation};
-  margin: 2px;
+  margin: ${"var(--ds-space-025, 2px)"};
 `;
 export const BlockCard = ({
   id,

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -127,6 +127,8 @@ export const LinkWrapper = styled.div`
     text-decoration: none;
   }
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const Wrapper = styled.div`
   ${props => wrapperStyles(props)};
   margin-top: 10px;
@@ -239,7 +241,8 @@ export const ContentWrapper = styled.div`
   display: flex;
   flex-direction: row;
   box-sizing: border-box;
-  padding: 8px 12px 12px 12px;
+  padding: ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-150, 12px)"}
+    ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"};
 `;
 export const Title = styled.div`
   color: ${`var(--ds-text, ${colors.N900})`};
@@ -250,13 +253,15 @@ export const Title = styled.div`
   overflow: hidden;
 `;
 export const Byline = styled.div`
-  margin-top: 4px;
+  margin-top: ${"var(--ds-space-050, 4px)"};
   color: ${`var(--ds-text-subtlest, ${colors.N300})`};
   font-size: 12px;
   font-weight: normal;
   line-height: ${16 / 12};
   ${ellipsis('100%')};
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const Description = styled.div`
   margin-top: 7px;
   color: ${`var(--ds-text, ${colors.N800})`};
@@ -267,13 +272,14 @@ export const Description = styled.div`
   overflow: hidden;
 `;
 export const ResolvedViewIconWrapper = styled.div`
-  margin-top: 4px;
+  margin-top: ${"var(--ds-space-050, 4px)"};
 `;
 export const Thumbnail = styled.div`
   ${borderRadius}
   ${csssize(48)}
   float: right;
-  margin: 4px 0 12px 12px;
+  margin: ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-150, 12px)"}
+    ${"var(--ds-space-150, 12px)"};
   background-color: ${`var(--ds-skeleton, ${colors.N30})`};
   background-image: url(${({
   src
@@ -281,18 +287,18 @@ export const Thumbnail = styled.div`
   background-size: cover;
 `;
 export const UsersWrapper = styled.div`
-  margin-top: 8px;
+  margin-top: ${"var(--ds-space-100, 8px)"};
 `;
 export const ActionsWrapper = styled.div`
-  margin-top: 8px;
+  margin-top: ${"var(--ds-space-100, 8px)"};
   text-align: right;
 
   > * {
-    margin-top: 4px;
+    margin-top: ${"var(--ds-space-050, 4px)"};
   }
 
   > * + * {
-    margin-left: 4px;
+    margin-left: ${"var(--ds-space-050, 4px)"};
   }
 `;
 export const AlertWrapper = styled.div`

package/dist/es2019/view/EmbedModal/components/link-info/styled.js

@@ -1,13 +1,15 @@
 import { css } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const containerStyles = css`
   align-items: center;
   display: flex;
-  gap: 8px;
+  gap: ${"var(--ds-space-100, 8px)"};
   justify-content: space-between;
   // AK ModalBody has 2px padding top and bottom.
   // Using 14px here to create 16px gap between
   // link info and iframe
-  padding: 24px 24px 14px 24px;
+  padding: ${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 14px
+    ${"var(--ds-space-300, 24px)"};
 `;
 const iconSize = '24px';
 export const iconCss = css`
@@ -48,7 +50,7 @@ export const titleCss = css`
 export const actionCss = css`
   display: flex;
   flex: 0 0 auto;
-  gap: 4px;
+  gap: ${"var(--ds-space-050, 4px)"};
   line-height: ${height};
   span {
     line-height: ${height};

package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/styled.js

@@ -33,6 +33,8 @@ export const contentStyles = css`
     color: ${`var(--ds-text, ${N800})`};
   }
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const linkStyles = css`
   ${sharedBlockStyles};
 

package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/styled.js

@@ -14,7 +14,7 @@ export const triggerButtonStyles = css`
   text-transform: unset;
 
   border: 2px solid transparent;
-  margin: 2px;
+  margin: ${"var(--ds-space-025, 2px)"};
 
   &:focus-visible,
   &:focus-within,
@@ -24,12 +24,16 @@ export const triggerButtonStyles = css`
     border-radius: 5px;
   }
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const triggerLozengeStyles = css`
   align-items: center;
   display: flex;
 
   span[role='img'] {
-    margin: -4px -8px -4px -1px;
+    margin: calc(-1 * ${"var(--ds-space-050, 4px)"})
+      calc(-1 * ${"var(--ds-space-100, 8px)"})
+      calc(-1 * ${"var(--ds-space-050, 4px)"}) -1px;
   }
 `;
 export const dropdownItemGroupStyles = css`
@@ -37,7 +41,7 @@ export const dropdownItemGroupStyles = css`
   overflow-y: auto;
 
   button {
-    padding: 6px 12px;
+    padding: ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-150, 12px)"};
     min-height: 28px;
     width: 220px;
 

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

@@ -12,7 +12,7 @@ const elevationStyles = css`
   border: 1px solid transparent;
   border-radius: 1.5px;
   box-shadow: ${tokens.elevation};
-  margin: 2px;
+  margin: ${"var(--ds-space-025, 2px)"};
 `;
 const getGap = size => {
   switch (size) {

package/dist/es2019/view/InlineCard/Icon.js

@@ -10,7 +10,7 @@ import React from 'react';
 export const Icon = styled.img`
   height: 14px;
   width: 14px;
-  margin-right: 4px;
+  margin-right: ${"var(--ds-space-050, 4px)"};
   border-radius: 2px;
   user-select: none;
   position: absolute;
@@ -23,7 +23,7 @@ export const Icon = styled.img`
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
 export const AKIconWrapper = styled.span`
-  margin-right: -2px;
+  margin-right: calc(-1 * ${"var(--ds-space-025, 2px)"});
 `;
 export const Shimmer = ({
   testId

package/dist/es2019/view/InlineCard/IconAndTitleLayout/styled.js

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-
 // TODO: remove this override behaviour for @atlaskit/icon-object
 export const IconObjectOverrides = `
   & > span {
@@ -49,7 +48,7 @@ export const IconWrapper = styled.span`
 // Wraps all emoji in Inline Links similar to icon
 export const EmojiWrapper = styled.span`
   display: inline-block;
-  margin-right: 2px;
+  margin-right: ${"var(--ds-space-025, 2px)"};
   user-select: none;
   ${IconOverrides}
   ${IconObjectOverrides}
@@ -71,12 +70,12 @@ export const LozengeWrapper = styled.span`
 // TODO: Replace overrides with proper AtlasKit solution.
 export const LozengeBlockWrapper = styled.span`
   & > span {
-    margin-left: 4px;
+    margin-left: ${"var(--ds-space-050, 4px)"};
   }
 `;
 export const RightIconPositionWrapper = styled.span`
-  margin-left: 2px;
-  margin-right: 4px;
+  margin-left: ${"var(--ds-space-025, 2px)"};
+  margin-right: ${"var(--ds-space-050, 4px)"};
   position: relative;
   display: inline-block;
 `;
@@ -85,7 +84,7 @@ export const RightIconPositionWrapper = styled.span`
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
 export const IconPositionWrapper = styled.span`
-  margin-right: 4px;
+  margin-right: ${"var(--ds-space-050, 4px)"};
   position: relative;
   display: inline-block;
 `;

package/dist/es2019/view/InlineCard/ResolvingView/styled.js

@@ -2,5 +2,5 @@ import styled from '@emotion/styled';
 import { IconTitleWrapper } from '../IconAndTitleLayout/styled';
 export const SpinnerWrapper = styled(IconTitleWrapper)`
   vertical-align: text-top;
-  margin-left: 2px;
+  margin-left: ${"var(--ds-space-025, 2px)"};
 `;

package/dist/esm/version.json

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

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

@@ -27,7 +27,7 @@ import { handleClickCommon } from './utils/handlers';
 import { useFeatureFlag } from '@atlaskit/link-provider';
 export { default as PreviewAction } from './actions/PreviewAction';
 export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
-var flexibleBlockCardElevationStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), tokens.elevation);
+var flexibleBlockCardElevationStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), tokens.elevation, "var(--ds-space-025, 2px)");
 export var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
   var id = _ref.id,

package/dist/esm/view/EmbedCard/components/styled.js

@@ -58,6 +58,8 @@ function visible(_ref6) {
 export var LinkWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " &:hover {\n    text-decoration: none;\n  }\n"])), function (props) {
   return wrapperStyles(props);
 });
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  margin-top: 10px;\n"])), function (props) {
   return wrapperStyles(props);
 });
@@ -101,15 +103,17 @@ export var Image = styled.img(_templateObject7 || (_templateObject7 = _taggedTem
   return csssize(size);
 }, borderRadius);
 export var maxAvatarCount = 6;
-export var ContentWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 12px 12px 12px;\n"])));
+export var ContentWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: ", " ", "\n    ", " ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
 export var Title = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N900, ")"), 20 / 16, 20 * 4);
-export var Byline = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), "var(--ds-text-subtlest, ".concat(colors.N300, ")"), 16 / 12, ellipsis('100%'));
+export var Byline = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-text-subtlest, ".concat(colors.N300, ")"), 16 / 12, ellipsis('100%'));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var Description = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), 18 / 12, 18 * 3);
-export var ResolvedViewIconWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n"])));
-export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), "var(--ds-skeleton, ".concat(colors.N30, ")"), function (_ref13) {
+export var ResolvedViewIconWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n"])), "var(--ds-space-050, 4px)");
+export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: ", " 0 ", "\n    ", ";\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), "var(--ds-space-050, 4px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-skeleton, ".concat(colors.N30, ")"), function (_ref13) {
   var src = _ref13.src;
   return src;
 });
-export var UsersWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin-top: 8px;\n"])));
-export var ActionsWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  margin-top: 8px;\n  text-align: right;\n\n  > * {\n    margin-top: 4px;\n  }\n\n  > * + * {\n    margin-left: 4px;\n  }\n"])));
+export var UsersWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n"])), "var(--ds-space-100, 8px)");
+export var ActionsWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  text-align: right;\n\n  > * {\n    margin-top: ", ";\n  }\n\n  > * + * {\n    margin-left: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
 export var AlertWrapper = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  /* z-index has to be 1 higher than the number of avatars in the avatar stack */\n  z-index: ", ";\n"])), maxAvatarCount + 1);

package/dist/esm/view/EmbedModal/components/link-info/styled.js

@@ -1,9 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css } from '@emotion/react';
-export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: 24px 24px 14px 24px;\n"])));
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: ", " ", " 14px\n    ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 var iconSize = '24px';
 export var iconCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
 var height = '20px';
 export var titleCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: ", ";\n\n    display: -webkit-box;\n    margin-bottom: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: ", ";\n    }\n  }\n"])), height, height);
-export var actionCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 0 0 auto;\n  gap: 4px;\n  line-height: ", ";\n  span {\n    line-height: ", ";\n  }\n\n  @media only screen and (max-width: 980px) {\n    // Hide resize button if the screen is smaller than the min width\n    // or too small to have enough impact to matter.\n    .smart-link-resize-button {\n      display: none;\n    }\n  }\n"])), height, height);
+export var actionCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 0 0 auto;\n  gap: ", ";\n  line-height: ", ";\n  span {\n    line-height: ", ";\n  }\n\n  @media only screen and (max-width: 980px) {\n    // Hide resize button if the screen is smaller than the min width\n    // or too small to have enough impact to matter.\n    .smart-link-resize-button {\n      display: none;\n    }\n  }\n"])), "var(--ds-space-050, 4px)", height, height);

package/dist/esm/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/styled.js

@@ -6,6 +6,8 @@ import { getTruncateStyles } from '../../../utils';
 export var dropdownItemGroupStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  button {\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n      cursor: default;\n    }\n  }\n"])));
 var sharedBlockStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 0.5rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  flex-direction: row;\n  align-items: center;\n"])));
 export var contentStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n\n  margin-top: ", ";\n  align-items: flex-start;\n\n  > span,\n  > div {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    color: ", ";\n  }\n"])), sharedBlockStyles, "var(--ds-space-025, 2px)", "var(--ds-text, ".concat(N800, ")"));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var linkStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n\n  cursor: pointer;\n  font-size: 0.875rem;\n  margin-top: 10px;\n  margin-left: ", ";\n  margin-bottom: ", ";\n"])), sharedBlockStyles, "var(--ds-space-400, 32px)", "var(--ds-space-025, 2px)");
 export var textStyles = function textStyles(maxLines) {
   return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  line-height: 1rem;\n  white-space: normal;\n  ", ";\n"])), getTruncateStyles(maxLines));

package/dist/esm/view/FlexibleCard/components/common/lozenge-action/styled.js

@@ -1,6 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
-export var triggerButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: 2px;\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-border-focused, #388BFF)");
-export var triggerLozengeStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: -4px -8px -4px -1px;\n  }\n"])));
-export var dropdownItemGroupStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  max-height: 300px;\n  overflow-y: auto;\n\n  button {\n    padding: 6px 12px;\n    min-height: 28px;\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n    }\n\n    &:focus,\n    &:focus-visible {\n      background-color: ", ";\n      box-sizing: border-box;\n      box-shadow: inset 2px 0 0 ", ";\n      outline: none;\n    }\n  }\n"])), "var(--ds-background-neutral-subtle-hovered, #091E420F)", "var(--ds-border-selected, #0C66E4)");
+export var triggerButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: ", ";\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-space-025, 2px)", "var(--ds-border-focused, #388BFF)");
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+export var triggerLozengeStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: calc(-1 * ", ")\n      calc(-1 * ", ")\n      calc(-1 * ", ") -1px;\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)");
+export var dropdownItemGroupStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  max-height: 300px;\n  overflow-y: auto;\n\n  button {\n    padding: ", " ", ";\n    min-height: 28px;\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n    }\n\n    &:focus,\n    &:focus-visible {\n      background-color: ", ";\n      box-sizing: border-box;\n      box-shadow: inset 2px 0 0 ", ";\n      outline: none;\n    }\n  }\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-150, 12px)", "var(--ds-background-neutral-subtle-hovered, #091E420F)", "var(--ds-border-selected, #0C66E4)");

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

@@ -11,7 +11,7 @@ import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import LayeredLink from './layered-link';
 import { HoverCard } from '../../../HoverCard';
 import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
-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 elevationStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), tokens.elevation, "var(--ds-space-025, 2px)");
 var getGap = function getGap(size) {
   switch (size) {
     case SmartLinkSize.XLarge:

package/dist/esm/view/InlineCard/Icon.js

@@ -9,12 +9,12 @@ import React from 'react';
 // Current rationale: vertically positioned at the top of
 // the smart card container (when set to 0). Offset this
 // to position it with appropriate whitespace from the top.
-export var Icon = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
+export var Icon = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 14px;\n  width: 14px;\n  margin-right: ", ";\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), "var(--ds-space-050, 4px)");
 
 // Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
-export var AKIconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: -2px;\n"])));
+export var AKIconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-025, 2px)");
 export var Shimmer = function Shimmer(_ref) {
   var testId = _ref.testId;
   var skeletonCustomStyles = {

package/dist/esm/view/InlineCard/IconAndTitleLayout/styled.js

@@ -1,7 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 import styled from '@emotion/styled';
-
 // TODO: remove this override behaviour for @atlaskit/icon-object
 export var IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    line-height: 14px;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
 // TODO: remove this override behaviour for @atlaskit/icon
@@ -16,7 +15,7 @@ export var IconOverrides = "\n  & > * > span {\n    height: 16px;\n    width: 14
 export var IconWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides);
 
 // Wraps all emoji in Inline Links similar to icon
-export var EmojiWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin-right: 2px;\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides);
+export var EmojiWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin-right: ", ";\n  user-select: none;\n  ", "\n  ", "\n"])), "var(--ds-space-025, 2px)", IconOverrides, IconObjectOverrides);
 
 // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
@@ -26,13 +25,13 @@ export var IconTitleWrapper = styled.span(_templateObject3 || (_templateObject3
 // TODO: Replace overrides with proper AtlasKit solution.
 export var LozengeWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: 1px;\n"])));
 // TODO: Replace overrides with proper AtlasKit solution.
-export var LozengeBlockWrapper = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > span {\n    margin-left: 4px;\n  }\n"])));
-export var RightIconPositionWrapper = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: 2px;\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
+export var LozengeBlockWrapper = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > span {\n    margin-left: ", ";\n  }\n"])), "var(--ds-space-050, 4px)");
+export var RightIconPositionWrapper = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  margin-right: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)");
 
 // The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
-export var IconPositionWrapper = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
+export var IconPositionWrapper = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-050, 4px)");
 export var IconEmptyWrapper = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 14px;\n  height: 100%;\n  display: inline-block;\n  opacity: 0;\n"])));
 
 // With emotion it's not possible to use reference to `TitleWrapper` as part of a selector,

package/dist/esm/view/InlineCard/ResolvingView/styled.js

@@ -2,4 +2,4 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 import styled from '@emotion/styled';
 import { IconTitleWrapper } from '../IconAndTitleLayout/styled';
-export var SpinnerWrapper = styled(IconTitleWrapper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  vertical-align: text-top;\n  margin-left: 2px;\n"])));
+export var SpinnerWrapper = styled(IconTitleWrapper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  vertical-align: text-top;\n  margin-left: ", ";\n"])), "var(--ds-space-025, 2px)");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.3.3",
+  "version": "26.3.4",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -93,7 +93,7 @@
     "@atlaskit/radio": "^5.6.0",
     "@atlaskit/range": "^7.1.0",
     "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/select": "^16.2.0",
+    "@atlaskit/select": "^16.3.0",
     "@atlaskit/table-tree": "^9.4.0",
     "@atlaskit/tabs": "^13.4.0",
     "@atlaskit/textarea": "^4.6.0",
@@ -150,7 +150,8 @@
   "techstack": {
     "@repo/internal": {
       "design-tokens": [
-        "color"
+        "color",
+        "spacing"
       ]
     }
   }