@atlaskit/smart-card 26.55.2 → 26.56.1

package/dist/cjs/view/common/ai-icon-loading/index.js

@@ -5,19 +5,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
 var _constants = require("../ai-prism/constants");
-var _templateObject;
 /** @jsx jsx */
+
 /**
  * The bulk of this file is originally from
  * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
  * with modifications
  */
 
-var bounce = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    transform: translateY(0);\n  }\n\n  // 200ms of 1200ms = 16.67%\n  16.67% {\n    transform: translateY(-2px);\n  }\n\n  // 400ms of 1200ms = 33.33%\n  33.33% {\n    transform: translateY(0px);\n  }\n"])));
+var bounce = (0, _react.keyframes)({
+  from: {
+    transform: 'translateY(0)'
+  },
+  '16.67%': {
+    transform: 'translateY(-2px)'
+  },
+  '33.33%': {
+    transform: 'translateY(0px)'
+  }
+});
 var BASE_DELAY = 400;
 var QUEUE_DELAY = 200;
 var animationStyles = (0, _react.css)({

package/dist/es2019/constants.js

@@ -145,6 +145,7 @@ export let ElementName = /*#__PURE__*/function (ElementName) {
  * Flexible UI action (button)
  */
 export let ActionName = /*#__PURE__*/function (ActionName) {
+  ActionName["CopyLinkAction"] = "CopyLinkAction";
   ActionName["DeleteAction"] = "DeleteAction";
   ActionName["EditAction"] = "EditAction";
   ActionName["FollowAction"] = "FollowAction";

package/dist/es2019/extractors/flexible/actions/extract-copy-link-action.js

@@ -0,0 +1,15 @@
+import { extractLink } from '@atlaskit/link-extractors';
+import { CardAction } from '../../../view/Card/types';
+import { canShowAction } from '../../../utils/actions/can-show-action';
+export const extractCopyLinkAction = (data, actionOptions) => {
+  if (!canShowAction(CardAction.CopyLinkAction, actionOptions)) {
+    return;
+  }
+  const url = extractLink(data);
+  if (!url) {
+    return;
+  }
+  return {
+    url
+  };
+};

package/dist/es2019/extractors/flexible/actions/index.js

@@ -2,8 +2,10 @@ import { ActionName } from '../../../constants';
 import { extractDownloadAction } from './extract-download-action';
 import { extractPreviewAction } from './extract-preview-action';
 import extractFollowAction from './extract-follow-action';
+import { extractCopyLinkAction } from './extract-copy-link-action';
 const extractActions = (response, data, actionOptions, id) => {
   const action = {
+    [ActionName.CopyLinkAction]: extractCopyLinkAction(data, actionOptions),
     [ActionName.DownloadAction]: extractDownloadAction(data, actionOptions),
     [ActionName.FollowAction]: extractFollowAction(response, actionOptions, id),
     [ActionName.PreviewAction]: extractPreviewAction(response, actionOptions)

package/dist/es2019/messages.js

@@ -45,6 +45,11 @@ export const messages = defineMessages({
     defaultMessage: "We cannot show the results of this summary as it goes against <a>Atlassian's Acceptable Use Policy</a>.",
     description: 'Shown when AI summary is summarising the link resource content and the content violates atlassians acceptable use policy.'
   },
+  ai_summary_error_hipaa_content_detected: {
+    id: 'fabric.linking.ai_summary_error_hipaa_content_detected',
+    defaultMessage: 'Atlassian Intelligence was unable to process your request as your content contains links to HIPAA restricted content.',
+    description: 'Shown when the AI summary is summarising the link resource content and the content contains HIPAA restricted content.'
+  },
   assigned_to: {
     id: 'fabric.linking.assigned_to',
     defaultMessage: 'Assigned to {context}',
@@ -145,6 +150,11 @@ export const messages = defineMessages({
     defaultMessage: 'Copy link',
     description: ''
   },
+  copied_url_to_clipboard: {
+    id: 'fabric.linking.copied_url_to_clipboard.nonfinal',
+    defaultMessage: 'Copied!',
+    description: 'Url has been copied to the clipboard'
+  },
   could_not_load_link: {
     id: 'fabric.linking.couldnt_load_link',
     defaultMessage: "We couldn't load this link for an unknown reason.",

package/dist/es2019/state/hooks/use-ai-summary/ai-summary-service/types.js

@@ -1 +1 @@
-export const errorMessages = ['NETWORK_ERROR', 'NO_ANSWER', 'RATE_LIMIT', 'NO_AGENT', 'PLUGIN_ERRORED', 'OPENAI_RATE_LIMIT_USER_ABUSE', 'ACCEPTABLE_USE_VIOLATIONS', 'AI_DISABLED', 'UNEXPECTED'];
+export const errorMessages = ['NETWORK_ERROR', 'NO_ANSWER', 'RATE_LIMIT', 'NO_AGENT', 'PLUGIN_ERRORED', 'OPENAI_RATE_LIMIT_USER_ABUSE', 'ACCEPTABLE_USE_VIOLATIONS', 'AI_DISABLED', 'UNEXPECTED', 'HIPAA_CONTENT_DETECTED'];

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.55.2"
+  packageVersion: "26.56.1"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js

@@ -10,11 +10,11 @@ import UnauthorisedViewContent from '../../../common/UnauthorisedViewContent';
 import { messages } from '../../../../messages';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
-const contentStyles = css`
-  color: ${"var(--ds-text-subtlest, #626F86)"};
-  margin-top: 0.5rem;
-  font-size: 0.75rem;
-`;
+const contentStyles = css({
+  color: "var(--ds-text-subtlest, #626F86)",
+  marginTop: "var(--ds-space-100, 0.5rem)",
+  fontSize: '0.75rem'
+});
 
 /**
  * This view represents a Block card that has an 'Unauthorized' status .

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

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 // TODO: Replace overrides with proper AtlasKit solution.
-export const LozengeBlockWrapper = styled.span`
-  & > span {
-    margin-left: ${"var(--ds-space-050, 4px)"};
+export const LozengeBlockWrapper = styled.span({
+  '& > span': {
+    marginLeft: "var(--ds-space-050, 4px)"
   }
-`;
+});

package/dist/es2019/view/Card/types.js

@@ -4,5 +4,6 @@ export let CardAction = /*#__PURE__*/function (CardAction) {
   CardAction["ViewAction"] = "ViewAction";
   CardAction["ChangeStatusAction"] = "ChangeStatusAction";
   CardAction["FollowAction"] = "FollowAction";
+  CardAction["CopyLinkAction"] = "CopyLinkAction";
   return CardAction;
 }({});

package/dist/es2019/view/EmbedCard/views/unresolved-view/styled.js

@@ -1,31 +1,31 @@
 import { css } from '@emotion/react';
 import { gs } from '../../../common/utils';
-export const containerStyles = css`
-  display: grid;
-  height: inherit;
-`;
-export const contentStyles = css`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin: auto;
-  padding: ${"var(--ds-space-200, 16px)"};
-  gap: ${"var(--ds-space-250, 20px)"};
-  max-width: ${gs(50)};
-`;
-export const imageStyles = css`
-  height: 120px;
-  width: 180px;
-  object-fit: contain;
-  object-position: center center;
-`;
-export const titleStyles = css`
-  text-align: center;
-  margin: 0;
-  padding: 0;
-`;
-export const descriptionStyles = css`
-  font-size: 1em;
-  text-align: center;
-`;
+export const containerStyles = css({
+  display: 'grid',
+  height: 'inherit'
+});
+export const contentStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  margin: 'auto',
+  padding: "var(--ds-space-200, 16px)",
+  gap: "var(--ds-space-250, 20px)",
+  maxWidth: gs(50)
+});
+export const imageStyles = css({
+  height: '120px',
+  width: '180px',
+  objectFit: 'contain',
+  objectPosition: 'center center'
+});
+export const titleStyles = css({
+  textAlign: 'center',
+  margin: 0,
+  padding: 0
+});
+export const descriptionStyles = css({
+  fontSize: '1em',
+  textAlign: 'center'
+});

package/dist/es2019/view/EmbedModal/components/embed-content/index.js

@@ -4,10 +4,10 @@ import { di } from 'react-magnetic-di';
 import { css, jsx } from '@emotion/react';
 import { getIframeSandboxAttribute } from '../../../../utils';
 import { IFrame } from '../../../EmbedCard/components/IFrame';
-const iframeCss = css`
-  width: 100%;
-  height: calc(100vh - 208px);
-`;
+const iframeCss = css({
+  width: '100%',
+  height: 'calc(100vh - 208px)'
+});
 const EmbedContent = ({
   isTrusted,
   name,

package/dist/es2019/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -8,35 +8,28 @@ import { sizeToButtonSpacing } from '../../../utils';
 const getButtonStyle = (size, iconOnly) => {
   switch (size) {
     case SmartLinkSize.Large:
-      return iconOnly ? css`
-            button,
-            button:hover,
-            button:focus,
-            button:active {
-              padding: 0;
-              > span {
-                margin: 0;
-              }
-            }
-          ` : '';
+      return iconOnly ? css({
+        'button, button:hover, button:focus, button:active': {
+          padding: 0,
+          '> span': {
+            margin: 0
+          }
+        }
+      }) : '';
     case SmartLinkSize.Small:
-      return css`
-        font-size: 0.75rem;
-        font-weight: 500;
-        line-height: 1rem;
-        button,
-        button:hover,
-        button:focus,
-        button:active {
-          line-height: 1rem;
-          ${iconOnly ? `
+      return css({
+        fontSize: '0.75rem',
+        fontWeight: 500,
+        lineHeight: '1rem',
+        'button, button:hover, button:focus, button:active': [{
+          lineHeight: '1rem'
+        }, iconOnly ? `
             padding: 0.125rem;
           ` : `
             padding-left: 0.25rem;
             padding-right: 0.25rem;
-          `}
-        }
-      `;
+          `]
+      });
     case SmartLinkSize.XLarge:
     case SmartLinkSize.Medium:
     default:
@@ -54,7 +47,9 @@ const ActionButton = ({
   size,
   testId,
   tooltipMessage,
-  isDisabled
+  isDisabled,
+  href,
+  ariaLabel
 }) => {
   const iconOnly = !content;
   const onButtonClick = useCallback(handler => e => {
@@ -76,7 +71,9 @@ const ActionButton = ({
     isLoading: isLoading,
     onClick: onButtonClick(onClick),
     spacing: sizeToButtonSpacing[size],
-    testId: testId
+    testId: testId,
+    href: href,
+    "aria-label": ariaLabel
   }, content)));
 };
 export default ActionButton;

package/dist/es2019/view/FlexibleCard/components/actions/action/action-stack-item/index.js

@@ -46,7 +46,8 @@ const ActionStackItem = ({
   space: spaceOption,
   testId,
   tooltipMessage,
-  xcss
+  xcss,
+  tooltipOnHide
 }) => {
   const space = spaceOption !== null && spaceOption !== void 0 ? spaceOption : getPrimitivesInlineSpaceBySize(size);
   const onClick = useCallback(() => {
@@ -65,17 +66,18 @@ const ActionStackItem = ({
   // Replace Box with Pressable once it becomes stable (currently beta)
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: tooltipMessage || content,
+    onHide: tooltipOnHide,
     hideTooltipOnMouseDown: true
   }, tooltipProps => /*#__PURE__*/React.createElement(Box, _extends({
     as: "button",
     xcss: [buttonStyles, xcss]
   }, tooltipProps, {
-    onClick: onClick
+    onClick: onClick,
+    testId: testId
   }), /*#__PURE__*/React.createElement(Inline, {
     alignBlock: "center",
     grow: "fill",
-    space: space,
-    testId: testId
+    space: space
   }, icon, /*#__PURE__*/React.createElement(Box, {
     xcss: contentStyles
   }, content))));

package/dist/es2019/view/FlexibleCard/components/actions/action/index.js

@@ -24,10 +24,14 @@ const Action = ({
   iconPosition = 'before',
   spaceInline,
   tooltipMessage,
+  tooltipOnHide,
   xcss,
   asDropDownItem,
   overrideCss,
-  isDisabled
+  isDisabled,
+  href,
+  ariaLabel,
+  wrapper: Wrapper
 }) => {
   if (!onClick) {
     return null;
@@ -54,7 +58,8 @@ const Action = ({
       size: size,
       testId: testId,
       tooltipMessage: tooltipMessage || content,
-      xcss: xcss
+      xcss: xcss,
+      tooltipOnHide: tooltipOnHide
     });
   }
   if (isDropdownItem) {
@@ -67,7 +72,7 @@ const Action = ({
       testId: testId
     });
   }
-  return jsx(ActionButton, {
+  const button = jsx(ActionButton, {
     appearance: appearance,
     content: content,
     iconAfter: iconAfter,
@@ -78,7 +83,10 @@ const Action = ({
     size: size,
     testId: testId,
     tooltipMessage: tooltipMessage || content,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    href: href,
+    ariaLabel: ariaLabel
   });
+  return Wrapper !== undefined ? jsx(Wrapper, null, button) : button;
 };
 export default Action;

package/dist/es2019/view/FlexibleCard/components/actions/copy-link-action/index.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState } from 'react';
+import Action from '../action';
+import { messages } from '../../../../../messages';
+import { FormattedMessage } from 'react-intl-next';
+import LinkIcon from '@atlaskit/icon/glyph/link';
+import { useFlexibleUiAnalyticsContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { ActionName } from '../../../../../constants';
+import useInvokeClientAction from '../../../../../state/hooks/use-invoke-client-action';
+const CopyLinkAction = ({
+  onClick: onClickCallback,
+  ...props
+}) => {
+  var _context$actions;
+  const context = useFlexibleUiContext();
+  const analytics = useFlexibleUiAnalyticsContext();
+  const invoke = useInvokeClientAction({
+    analytics
+  });
+  const data = context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[ActionName.CopyLinkAction];
+  const [tooltipMessage, setTooltipMessage] = useState(messages.copy_url_to_clipboard);
+  const onClick = useCallback(() => {
+    if (data && data.url) {
+      invoke({
+        actionType: ActionName.CopyLinkAction,
+        actionFn: async () => {
+          var _data$url;
+          await navigator.clipboard.writeText((_data$url = data.url) !== null && _data$url !== void 0 ? _data$url : '');
+          setTooltipMessage(messages.copied_url_to_clipboard);
+        },
+        // These values have already been set in analytics context.
+        // We only pass these here for ufo experience.
+        display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
+        extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
+      });
+    }
+    if (onClickCallback) {
+      onClickCallback();
+    }
+  }, [analytics, data, invoke, onClickCallback]);
+  return data ? /*#__PURE__*/React.createElement(Action, _extends({
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.copy_url_to_clipboard),
+    icon: /*#__PURE__*/React.createElement(LinkIcon, {
+      label: "copy url",
+      size: "medium"
+    }),
+    onClick: onClick,
+    testId: "smart-action-copy-link-action",
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, tooltipMessage),
+    tooltipOnHide: () => setTooltipMessage(messages.copy_url_to_clipboard)
+  }, data, props)) : null;
+};
+export default CopyLinkAction;

package/dist/es2019/view/FlexibleCard/components/actions/copy-link-action/types.js

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

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

@@ -3,4 +3,5 @@ export { default as DeleteAction } from './delete-action';
 export { default as EditAction } from './edit-action';
 export { default as DownloadAction } from './download-action';
 export { default as FollowAction } from './follow-action';
-export { default as PreviewAction } from './preview-action';
+export { default as PreviewAction } from './preview-action';
+export { default as CopyLinkAction } from './copy-link-action';

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/ai-motion-wrapper/types.js

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

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-state-error.js

@@ -14,7 +14,7 @@ const contentStyles = xcss({
   fontWeight: '400',
   lineHeight: '14px'
 });
-const MessageWithAnchor = ({
+const FormattedErrorMessage = ({
   message,
   url
 }) => /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, message, {
@@ -31,6 +31,10 @@ const getErrorMesssageProps = error => {
         message: messages.ai_summary_error_acceptable_use_violation,
         url: CONTENT_URL_ACCEPTABLE_USE_POLICY
       };
+    case 'HIPAA_CONTENT_DETECTED':
+      return {
+        message: messages.ai_summary_error_hipaa_content_detected
+      };
     default:
       return {
         message: messages.ai_summary_error_generic,
@@ -61,7 +65,7 @@ const AIStateError = ({
         content: /*#__PURE__*/React.createElement(Box, {
           testId: `${testId}-error-message`,
           xcss: contentStyles
-        }, /*#__PURE__*/React.createElement(MessageWithAnchor, {
+        }, /*#__PURE__*/React.createElement(FormattedErrorMessage, {
           message: message,
           url: url
         })),

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/feature-discovery/index.js

@@ -0,0 +1,44 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useEffect, useMemo, useRef } from 'react';
+import { StorageClient } from '@atlaskit/frontend-utilities/storage-client';
+import { getPulseStyles } from './styled';
+const LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/smart-card';
+const LOCAL_STORAGE_DISCOVERY_KEY = 'action-discovery-ai-summarise';
+const LOCAL_STORAGE_DISCOVERY_VALUE = 'discovered';
+const LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS = 15552000000; // 180 days
+const LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME = 2000;
+/**
+ * This is a hacky solution to help with the feature discovery.
+ * This implementation must be removed once the experiment is completed.
+ * Cleanup on https://product-fabric.atlassian.net/browse/EDM-9649
+ */
+const FeatureDiscovery = ({
+  children,
+  testId
+}) => {
+  const renderedTime = useRef();
+  const storageClient = useMemo(() => new StorageClient(LOCAL_STORAGE_CLIENT_KEY), []);
+  const discovered = useMemo(() => storageClient.getItem(LOCAL_STORAGE_DISCOVERY_KEY) === LOCAL_STORAGE_DISCOVERY_VALUE, [storageClient]);
+  useEffect(() => {
+    renderedTime.current = Date.now();
+    return () => {
+      if (!discovered && renderedTime.current) {
+        const duration = Date.now() - renderedTime.current;
+        if (duration > LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME) {
+          storageClient.setItemWithExpiry(LOCAL_STORAGE_DISCOVERY_KEY, LOCAL_STORAGE_DISCOVERY_VALUE, LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS);
+        }
+      }
+    };
+  }, [storageClient, discovered]);
+  const component = useMemo(() => {
+    if (!discovered) {
+      return jsx("span", {
+        css: getPulseStyles(),
+        "data-testid": `${testId}-discovery`
+      }, children);
+    }
+  }, [children, discovered, testId]);
+  return component !== null && component !== void 0 ? component : children;
+};
+export default FeatureDiscovery;

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/feature-discovery/styled.js

@@ -0,0 +1,15 @@
+import { css, keyframes } from '@emotion/react';
+export const getPulseStyles = () => {
+  const color = "var(--ds-border-discovery, #8270DB)";
+  const pulseKeyframes = keyframes({
+    to: {
+      boxShadow: '0 0 0 7px rgba(0, 0, 0, 0)'
+    }
+  });
+  return css({
+    display: 'inline-flex',
+    borderRadius: '3px',
+    boxShadow: `0 0 0 0 ${color}`,
+    animation: `${pulseKeyframes} 2s cubic-bezier(0.5, 0, 0, 1) 0.25s both 2`
+  });
+};

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/resolved/index.js

@@ -19,6 +19,8 @@ import { useAnalyticsEvents } from '../../../../../../common/analytics/generated
 import AIEventSummaryViewed from '../ai-event-summary-viewed';
 import AIEventErrorViewed from '../ai-event-error-viewed';
 import { di } from 'react-magnetic-di';
+import { css } from '@emotion/react';
+import FeatureDiscovery from '../feature-discovery';
 export const AISummaryBlockErrorIndicator = ({
   showErrorIndicator,
   error,
@@ -109,7 +111,12 @@ const AISummaryBlockResolvedView = props => {
         testId: `${testId}-ai-summary-action`,
         icon: /*#__PURE__*/React.createElement(AIIcon, {
           label: "AIIcon"
-        })
+        }),
+        /**
+         * Enabling feature discovery pulse
+         * Cleanup: https://product-fabric.atlassian.net/browse/EDM-9693
+         */
+        wrapper: FeatureDiscovery
       };
       return [aiAction, ...actions];
     }
@@ -125,6 +132,13 @@ const AISummaryBlockResolvedView = props => {
   return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
     direction: SmartLinkDirection.Vertical,
     testId: `${testId}-resolved-view`
+    /**
+     * Enabled for feature discovery to allow box shadow to overflow
+     * Cleanup: https://product-fabric.atlassian.net/browse/EDM-8681
+     */,
+    overrideCss: css({
+      overflow: 'visible'
+    }, props.overrideCss)
   }), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
     fromCache: isSummarisedOnMountRef.current
   }), /*#__PURE__*/React.createElement(AIMotionWrapper, {

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

@@ -3,7 +3,9 @@ import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
 import { getBaseStyles, getGapSize, highlightRemoveStyles, renderChildren } from '../utils';
-const getBlockStyles = (direction, size) => css`
+const getBlockStyles = (direction, size
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+) => css`
   ${getBaseStyles(direction, size)}
   ${highlightRemoveStyles}
   justify-content: flex-start;