@atlaskit/smart-card 23.14.0 → 23.14.2

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

@@ -1,8 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 /** @jsx jsx */
 import React, { useContext, useState, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -14,64 +12,50 @@ 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 getGap = function getGap(size) {
   switch (size) {
     case SmartLinkSize.XLarge:
       return '1.25rem';
-
     case SmartLinkSize.Large:
       return '1rem';
-
     case SmartLinkSize.Medium:
       return '.5rem';
-
     case SmartLinkSize.Small:
     default:
       return '.25rem';
   }
 };
-
 var getPadding = function getPadding(size) {
   switch (size) {
     case SmartLinkSize.XLarge:
       return '1.5rem';
-
     case SmartLinkSize.Large:
       return '1.25rem';
-
     case SmartLinkSize.Medium:
       return '1rem';
-
     case SmartLinkSize.Small:
     default:
       return '.5rem';
   }
 };
-
 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"])));
-
 var getContainerPaddingStyles = function getContainerPaddingStyles(size, hidePadding, childrenOptions) {
   var padding = hidePadding ? '0rem' : getPadding(size);
   var gap = getGap(size);
   var previewOnLeft = childrenOptions.previewOnLeft,
-      previewOnRight = childrenOptions.previewOnRight;
+    previewOnRight = childrenOptions.previewOnRight;
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    // Set variables for PreviewBlock to use.\n    --container-padding: ", ";\n    --container-gap-left: ", ";\n    --container-gap-right: ", ";\n    --preview-block-width: 30%;\n\n    padding: ", ";\n    ", "\n    ", "\n  "])), padding, previewOnLeft ? gap : padding, previewOnRight ? gap : padding, padding, previewOnLeft ? "padding-left: calc(var(--preview-block-width) + ".concat(gap, ");") : '', previewOnRight ? "padding-right: calc(var(--preview-block-width) + ".concat(gap, ");") : '');
 };
-
 var getChildrenOptions = function getChildrenOptions(children, context) {
   var options = {};
-
   if (isFlexUiPreviewPresent(context)) {
     React.Children.map(children, function (child) {
       if ( /*#__PURE__*/React.isValidElement(child)) {
         if (isFlexibleUiPreviewBlock(child)) {
           var placement = child.props.placement;
-
           if (placement === MediaPlacement.Left) {
             options.previewOnLeft = true;
           }
-
           if (placement === MediaPlacement.Right) {
             options.previewOnRight = true;
           }
@@ -79,21 +63,17 @@ var getChildrenOptions = function getChildrenOptions(children, context) {
       }
     });
   }
-
   return options;
 };
-
 export var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) {
   var paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
   return css(_templateObject4 || (_templateObject4 = _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, ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
-
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick, onActionMenuOpenChange) {
   return React.Children.map(children, function (child) {
     if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
       var blockSize = child.props.size;
       var size = blockSize || containerSize;
-
       if (isFlexibleUiTitleBlock(child)) {
         return /*#__PURE__*/React.cloneElement(child, {
           onClick: onClick,
@@ -109,7 +89,6 @@ var renderChildren = function renderChildren(children, containerSize, containerT
           onActionMenuOpenChange: onActionMenuOpenChange
         });
       }
-
       return /*#__PURE__*/React.cloneElement(child, {
         size: size,
         status: status
@@ -117,27 +96,22 @@ 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, onClick) {
   var _ref = context || {},
-      title = _ref.title,
-      _ref$url = _ref.url,
-      url = _ref$url === void 0 ? '' : _ref$url;
-
+    title = _ref.title,
+    _ref$url = _ref.url,
+    url = _ref$url === void 0 ? '' : _ref$url;
   var _ref2 = getTitleBlockProps(children) || {},
-      target = _ref2.anchorTarget,
-      text = _ref2.text;
-
+    target = _ref2.anchorTarget,
+    text = _ref2.text;
   return jsx(LayeredLink, {
     onClick: onClick,
     target: target,
@@ -146,6 +120,7 @@ var getLayeredLink = function getLayeredLink(testId, context, children, onClick)
     url: url
   });
 };
+
 /**
  * A container is a hidden component that build the Flexible Smart Link.
  * All of the Flexible UI components are wrapped inside the container.
@@ -154,37 +129,33 @@ var getLayeredLink = function getLayeredLink(testId, context, children, onClick)
  * @internal
  * @see Block
  */
-
-
 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,
-      _ref3$showHoverPrevie = _ref3.showHoverPreview,
-      showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
-      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;
+    _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,
+    _ref3$showHoverPrevie = _ref3.showHoverPreview,
+    showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
+    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);
   var childrenOptions = getChildrenOptions(children, context);
-
   var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      hoverCardCanOpen = _useState2[0],
-      setHoverCardCanOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    hoverCardCanOpen = _useState2[0],
+    setHoverCardCanOpen = _useState2[1];
   var onActionMenuOpenChange = useCallback(function (options) {
     return setHoverCardCanOpen(!options.isOpen);
   }, []);
@@ -193,7 +164,6 @@ var Container = function Container(_ref3) {
     "data-smart-link-container": true,
     "data-testid": testId
   }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, showHoverPreview ? onActionMenuOpenChange : undefined));
-
   if (showHoverPreview && context !== null && context !== void 0 && context.url) {
     return jsx(HoverCard, {
       url: context === null || context === void 0 ? void 0 : context.url,
@@ -201,8 +171,6 @@ var Container = function Container(_ref3) {
       closeOnChildClick: true
     }, containerContent);
   }
-
   return containerContent;
 };
-
 export default Container;

package/dist/esm/view/FlexibleCard/components/container/layered-link/index.js

@@ -1,23 +1,21 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 /** @jsx jsx */
 import React from 'react';
 import { jsx, css } from '@emotion/react';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // Stretch the invisible link over the whole of the post.\n  // Hide the link\u2019s text.\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow-x: hidden;\n  text-indent: 100%;\n  white-space: nowrap;\n\n  // Needs a heightened specificity to trump other anchor.\n  // Stack it under all other links in the post text.\n  a&.layered-link {\n    position: absolute;\n    z-index: 0;\n  }\n\n  // When hovering over the layered link, any hidden action buttons inside\n  // the Container should become visible.\n  // As actions resides inside blocks and layered link is expected to be\n  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,\n  // its sibling. Using general sibling combinator here to apply styling to\n  // all the siblings of layered link.\n  // The general sibling combinator (~) separates two selectors and matches all\n  // iterations of the second element, that are following the first element\n  // (though not necessarily immediately), and are children of the same parent\n  // element.\n  &:hover ~ * {\n    .actions-button-group {\n      opacity: 1;\n    }\n  }\n"])));
+
 /**
  * An anchor component to cover the entire container creating a clickable area.
  * @internal
  * @see `clickableContainer`
  */
-
 var LayeredLink = function LayeredLink(_ref) {
   var onClick = _ref.onClick,
-      target = _ref.target,
-      testId = _ref.testId,
-      text = _ref.text,
-      url = _ref.url;
+    target = _ref.target,
+    testId = _ref.testId,
+    text = _ref.text,
+    url = _ref.url;
   return jsx("a", {
     className: "layered-link",
     css: styles,
@@ -26,8 +24,6 @@ var LayeredLink = function LayeredLink(_ref) {
     onClick: onClick,
     target: target,
     tabIndex: -1 // Hide tab index and let the title link be the link.
-
   }, text);
 };
-
 export default LayeredLink;

package/dist/esm/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -1,29 +1,25 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2;
-
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
 var MAX_COUNT = 4;
-
 var getStyles = function getStyles(size) {
   var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: inline-flex;\n  "])));
-
   switch (size) {
     case SmartLinkSize.XLarge:
     case SmartLinkSize.Large:
       // Default AK small size
       return styles;
-
     case SmartLinkSize.Medium:
     case SmartLinkSize.Small:
     default:
       return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        ", "\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])), styles);
   }
 };
+
 /**
  * A base element that displays a group of avatars.
  * @internal
@@ -31,24 +27,20 @@ var getStyles = function getStyles(size) {
  * @see AuthorGroup
  * @see CollaboratorGroup
  */
-
-
 var AvatarGroup = function AvatarGroup(_ref) {
   var _ref$items = _ref.items,
-      items = _ref$items === void 0 ? [] : _ref$items,
-      _ref$maxCount = _ref.maxCount,
-      maxCount = _ref$maxCount === void 0 ? MAX_COUNT : _ref$maxCount,
-      name = _ref.name,
-      overrideCss = _ref.overrideCss,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-element-avatar-group' : _ref$testId;
-
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$maxCount = _ref.maxCount,
+    maxCount = _ref$maxCount === void 0 ? MAX_COUNT : _ref$maxCount,
+    name = _ref.name,
+    overrideCss = _ref.overrideCss,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-element-avatar-group' : _ref$testId;
   if (!items.length) {
     return null;
   }
-
   return jsx("span", {
     css: [getStyles(size), overrideCss],
     "data-fit-to-content": true,
@@ -63,5 +55,4 @@ var AvatarGroup = function AvatarGroup(_ref) {
     testId: testId
   }));
 };
-
 export default AvatarGroup;

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

@@ -1,8 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _messageMapper;
-
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
@@ -16,11 +14,9 @@ var badgeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiter
 var iconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 0;\n  vertical-align: middle;\n  ", "\n  img,\n  span,\n  svg {\n    line-height: 0;\n    vertical-align: middle;\n  }\n"])), tokens.badgeIcon, getIconSizeStyles('1rem'));
 var labelStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n  vertical-align: middle;\n"])), tokens.badgeText);
 var messageMapper = (_messageMapper = {}, _defineProperty(_messageMapper, IconType.PriorityBlocker, messages.priority_blocker), _defineProperty(_messageMapper, IconType.PriorityCritical, messages.priority_critical), _defineProperty(_messageMapper, IconType.PriorityHigh, messages.priority_high), _defineProperty(_messageMapper, IconType.PriorityHighest, messages.priority_highest), _defineProperty(_messageMapper, IconType.PriorityLow, messages.priority_low), _defineProperty(_messageMapper, IconType.PriorityLowest, messages.priority_lowest), _defineProperty(_messageMapper, IconType.PriorityMajor, messages.priority_major), _defineProperty(_messageMapper, IconType.PriorityMedium, messages.priority_medium), _defineProperty(_messageMapper, IconType.PriorityMinor, messages.priority_minor), _defineProperty(_messageMapper, IconType.PriorityTrivial, messages.priority_trivial), _defineProperty(_messageMapper, IconType.PriorityUndefined, messages.priority_undefined), _messageMapper);
-
 var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
   if (icon) {
     var descriptor = messageMapper[icon];
-
     if (descriptor) {
       return getFormattedMessage({
         descriptor: descriptor
@@ -28,7 +24,6 @@ var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
     }
   }
 };
-
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
   if (icon) {
     return jsx(AtlaskitIcon, {
@@ -38,7 +33,6 @@ var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
     });
   }
 };
-
 var renderImageIcon = function renderImageIcon(url, testId) {
   if (url) {
     return jsx(ImageIcon, {
@@ -47,6 +41,7 @@ var renderImageIcon = function renderImageIcon(url, testId) {
     });
   }
 };
+
 /**
  * A base element that displays some text with an associated icon.
  * @internal
@@ -60,23 +55,19 @@ var renderImageIcon = function renderImageIcon(url, testId) {
  * @see ProgrammingLanguage
  * @see Provider
  */
-
-
 var Badge = function Badge(_ref) {
   var icon = _ref.icon,
-      label = _ref.label,
-      name = _ref.name,
-      overrideCss = _ref.overrideCss,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId,
-      url = _ref.url;
+    label = _ref.label,
+    name = _ref.name,
+    overrideCss = _ref.overrideCss,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId,
+    url = _ref.url;
   var formattedMessageOrLabel = getFormattedMessageFromIcon(icon) || label;
   var badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId);
-
   if (!formattedMessageOrLabel || !badgeIcon) {
     return null;
   }
-
   return jsx("span", {
     css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
@@ -90,5 +81,4 @@ var Badge = function Badge(_ref) {
     "data-testid": "".concat(testId, "-label")
   }, formattedMessageOrLabel));
 };
-
 export default Badge;

package/dist/esm/view/FlexibleCard/components/elements/date-time/index.js

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 /** @jsx jsx */
 import React from 'react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
@@ -22,6 +20,7 @@ var typeToDescriptorMap = {
     absolute: messages.modified_on_absolute
   }
 };
+
 /**
  * A base element that displays an ISO Timestamp in text.
  * @internal
@@ -29,28 +28,23 @@ var typeToDescriptorMap = {
  * @see CreatedOn
  * @see ModifiedOn
  */
-
 var DateTime = function DateTime(_ref) {
   var date = _ref.date,
-      name = _ref.name,
-      overrideCss = _ref.overrideCss,
-      type = _ref.type,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-element-date-time' : _ref$testId,
-      text = _ref.text;
-
+    name = _ref.name,
+    overrideCss = _ref.overrideCss,
+    type = _ref.type,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-element-date-time' : _ref$testId,
+    text = _ref.text;
   var _useIntl = useIntl(),
-      formatRelativeTime = _useIntl.formatRelativeTime,
-      formatDate = _useIntl.formatDate;
-
+    formatRelativeTime = _useIntl.formatRelativeTime,
+    formatDate = _useIntl.formatDate;
   if (!type || !date) {
     return null;
   }
-
   var isLongerThenWeek = Math.abs(date.getTime() - Date.now()) > 1000 * 60 * 60 * 24 * 7;
   var context;
   var typeVariant;
-
   if (isLongerThenWeek) {
     typeVariant = 'absolute';
     context = formatDate(date, {
@@ -60,15 +54,13 @@ var DateTime = function DateTime(_ref) {
     });
   } else {
     var _selectUnit = selectUnit(date, Date.now()),
-        value = _selectUnit.value,
-        unit = _selectUnit.unit;
-
+      value = _selectUnit.value,
+      unit = _selectUnit.unit;
     typeVariant = 'relative';
     context = formatRelativeTime(value, unit, {
       numeric: 'auto'
     });
   }
-
   return jsx("span", {
     css: [styles, overrideCss],
     "data-separator": true,
@@ -81,5 +73,4 @@ var DateTime = function DateTime(_ref) {
     }
   })));
 };
-
 export default DateTime;

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

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 /** @jsx jsx */
 import React, { useMemo } from 'react';
 import LinkIcon from '@atlaskit/icon/glyph/link';
@@ -10,26 +8,21 @@ import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 import ImageIcon from '../../common/image-icon';
 import { getIconSizeStyles, getIconWidth, getTruncateStyles } from '../../utils';
-
 var getPositionStyles = function getPositionStyles(size, position) {
   switch (position) {
     case SmartLinkPosition.Center:
       return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        align-self: center;\n      "])));
-
     case SmartLinkPosition.Top:
     default:
       return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        align-self: flex-start;\n        margin: 0;\n      "])));
   }
 };
-
 var getIconStyles = function getIconStyles(size, position, width) {
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), getPositionStyles(size, position), getIconSizeStyles(width));
 };
-
 var getCustomRenderStyles = function getCustomRenderStyles(value) {
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  line-height: ", ";\n  font-size: ", ";\n  text-align: center;\n  text-overflow: clip;\n  -webkit-box-orient: unset;\n  span {\n    margin: 0;\n    padding: 0;\n    vertical-align: baseline;\n  }\n"])), getTruncateStyles(1, value), value, value);
 };
-
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, label, testId) {
   if (icon) {
     return jsx(AtlaskitIcon, {
@@ -39,14 +32,12 @@ var renderAtlaskitIcon = function renderAtlaskitIcon(icon, label, testId) {
     });
   }
 };
-
 var renderDefaultIcon = function renderDefaultIcon(label, testId) {
   return jsx(LinkIcon, {
     label: label,
     testId: "".concat(testId, "-default")
   });
 };
-
 var renderImageIcon = function renderImageIcon(defaultIcon, icon, url, testId) {
   if (url) {
     return jsx(ImageIcon, {
@@ -56,28 +47,27 @@ var renderImageIcon = function renderImageIcon(defaultIcon, icon, url, testId) {
     });
   }
 };
+
 /**
  * A base element that displays an Icon or favicon.
  * @internal
  * @param {IconProps} IconProps - The props necessary for the Icon element.
  * @see LinkIcon
  */
-
-
 var Icon = function Icon(_ref) {
   var icon = _ref.icon,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'Link' : _ref$label,
-      name = _ref.name,
-      _ref$position = _ref.position,
-      position = _ref$position === void 0 ? SmartLinkPosition.Top : _ref$position,
-      overrideCss = _ref.overrideCss,
-      render = _ref.render,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-element-icon' : _ref$testId,
-      url = _ref.url;
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Link' : _ref$label,
+    name = _ref.name,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? SmartLinkPosition.Top : _ref$position,
+    overrideCss = _ref.overrideCss,
+    render = _ref.render,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-element-icon' : _ref$testId,
+    url = _ref.url;
   var element = useMemo(function () {
     var defaultIcon = renderDefaultIcon(label, testId);
     return (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, icon, url, testId) || renderAtlaskitIcon(icon, label, testId) || defaultIcon;
@@ -93,5 +83,4 @@ var Icon = function Icon(_ref) {
     "data-testid": testId
   }, element);
 };
-
 export default Icon;