@atlaskit/smart-card 42.0.3 → 42.1.0

package/dist/es2019/extractors/action/extract-invoke-preview-action.js

@@ -37,6 +37,20 @@ export const extractInvokePreviewAction = param => {
   if (!canShowAction(CardAction.PreviewAction, actionOptions)) {
     return;
   }
+
+  /* Analytics UI event for preview action created to support tracking of preview actions as the experiment rolls out */
+  const firePreviewActionUIEvent = ({
+    previewType
+  }) => {
+    if (!expValEquals('platform_hover_card_preview_panel', 'cohort', 'test') || origin !== 'smartLinkPreviewHoverCard' || !fireEvent) {
+      return;
+    }
+    fireEvent('ui.smartLink.clicked.previewHoverCard', {
+      id: id || '',
+      display: 'hoverCardPreview',
+      previewType
+    });
+  };
   const src = (_extractPreviewData = extractPreviewData(data, 'web')) === null || _extractPreviewData === void 0 ? void 0 : _extractPreviewData.src;
   if (src) {
     const extensionKey = getExtensionKey(response);
@@ -55,6 +69,9 @@ export const extractInvokePreviewAction = param => {
               name: name,
               iconUrl: undefined
             });
+            expValEquals('platform_hover_card_preview_panel', 'cohort', 'test') && firePreviewActionUIEvent({
+              previewType: 'panel'
+            });
           } else {
             var _extractSmartLinkProv, _extractSmartLinkEmbe, _actionOptions$previe;
             await openEmbedModal({
@@ -77,6 +94,9 @@ export const extractInvokePreviewAction = param => {
                 isInPreviewPanel
               })
             });
+            expValEquals('platform_hover_card_preview_panel', 'cohort', 'test') && firePreviewActionUIEvent({
+              previewType: 'modal'
+            });
           }
         },
         actionSubjectId: 'invokePreviewScreen',

package/dist/es2019/hooks/useConfluencePageData.js

@@ -66,13 +66,16 @@ export const useConfluencePageData = (url, extensionKey) => {
         colorMode: themeMode
       };
     }
+    const calculatedUserInfo = userId && userIdType ? {
+      userId,
+      userIdType
+    } : undefined;
     return {
       hostname,
       spaceKey,
       contentId,
       parentProduct,
-      userId,
-      userIdType,
+      userInfo: calculatedUserInfo,
       hash: hash || '',
       enableInlineComments,
       enablePageComments,

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

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

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

@@ -1,4 +1,4 @@
-/* ForbiddenView.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ForbiddenView.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./ForbiddenView.compiled.css";
 import * as React from 'react';

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

@@ -1,4 +1,4 @@
-/* NotFoundView.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* NotFoundView.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./NotFoundView.compiled.css";
 import * as React from 'react';

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

@@ -1,4 +1,4 @@
-/* ResolvedView.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ResolvedView.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./ResolvedView.compiled.css";
 import * as React from 'react';

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

@@ -1,4 +1,4 @@
-/* UnauthorisedView.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* UnauthorisedView.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./UnauthorisedView.compiled.css";
 import * as React from 'react';

package/dist/es2019/view/BlockCard/views/unresolved-view/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';

package/dist/es2019/view/BlockCard/views/utils/withFlexibleUIBlockCardStyle.js

@@ -1,4 +1,4 @@
-/* withFlexibleUIBlockCardStyle.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* withFlexibleUIBlockCardStyle.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./withFlexibleUIBlockCardStyle.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/view/CardWithUrl/component.js

@@ -18,6 +18,7 @@ import { BlockCard } from '../BlockCard';
 import { EmbedCard } from '../EmbedCard';
 import FlexibleCard from '../FlexibleCard';
 import { InlineCard } from '../InlineCard';
+import { useFire3PWorkflowsClickEvent } from '../SmartLinkEvents/useSmartLinkEvents';
 const thirdPartyARIPrefix = 'ari:third-party';
 function Component({
   id,
@@ -77,6 +78,9 @@ function Component({
     actionOptions: actionOptionsProp,
     platform
   });
+  const fire3PClickEvent = fg('platform_smartlink_3pclick_analytics') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFire3PWorkflowsClickEvent(firstPartyIdentifier, thirdPartyARI) : undefined;
 
   // Setup UI handlers.
   const handleClickWrapper = useCallback(event => {
@@ -90,23 +94,10 @@ function Component({
     if (fg('platform_smartlink_3pclick_analytics')) {
       if (thirdPartyARI && thirdPartyARI.startsWith(thirdPartyARIPrefix)) {
         const clickURL = getClickUrl(url, state.details);
-        if (clickURL === url) {
+        if (clickURL === url && fire3PClickEvent) {
           // For questions or concerns about this event,
           // please reach out to the 3P Workflows Team via Slack in #help-3p-connector-workflow
-          const smartlinkClickAnalyticsEvent = createAnalyticsEvent({
-            action: 'clicked',
-            actionSubject: 'smartLink',
-            actionSubjectId: 'smartlinkClickAnalyticsWorkflows',
-            eventType: 'ui',
-            attributes: {
-              eventName: 'smartLinkClickAnalyticsThirdPartyWorkflows',
-              firstPartyIdentifier: firstPartyIdentifier
-            },
-            nonPrivacySafeAttributes: {
-              thirdPartyARI: thirdPartyARI
-            }
-          });
-          smartlinkClickAnalyticsEvent.fire('media');
+          fire3PClickEvent();
         }
       }
     }
@@ -153,7 +144,7 @@ function Component({
       }
       fireLinkClickedEvent(createAnalyticsEvent)(event);
     }
-  }, [fireEvent, id, isFlexibleUi, appearance, definitionId, onClick, url, state.details, ari, name, isPreviewPanelAvailable, openPreviewPanel, createAnalyticsEvent, thirdPartyARI, firstPartyIdentifier, disablePreviewPanel]);
+  }, [fireEvent, id, isFlexibleUi, appearance, definitionId, onClick, url, state.details, ari, name, fire3PClickEvent, isPreviewPanelAvailable, openPreviewPanel, createAnalyticsEvent, thirdPartyARI, disablePreviewPanel]);
   const handleAuthorize = useCallback(() => actions.authorize(appearance), [actions, appearance]);
   const handleRetry = useCallback(() => {
     actions.reload();

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

@@ -1,4 +1,4 @@
-/* ErrorFrame.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ErrorFrame.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./ErrorFrame.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

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

@@ -1,4 +1,4 @@
-/* ExpandedFrame.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ExpandedFrame.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./ExpandedFrame.compiled.css";
 import * as React from 'react';

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

@@ -1,4 +1,4 @@
-/* Frame.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Frame.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./Frame.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef, useState } from 'react';
@@ -24,7 +24,8 @@ export const Frame = /*#__PURE__*/React.forwardRef(({
   testId,
   onIframeDwell,
   onIframeFocus,
-  title
+  title,
+  extensionKey
 }, iframeRef) => {
   const [isIframeLoaded, setIframeLoaded] = useState(false);
   const [isMouseOver, setMouseOver] = useState(false);
@@ -96,6 +97,7 @@ export const Frame = /*#__PURE__*/React.forwardRef(({
     },
     sandbox: getIframeSandboxAttribute(isTrusted),
     title: title,
+    extensionKey: extensionKey,
     className: ax(["_19itidpf _1reo15vq _18m915vq _2rkofajl _154iidpf _1ltvidpf _1bsb1osq _4t3i1osq _kqswh2mm"])
   }));
 });

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

@@ -1,15 +1,42 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { Page } from '@atlaskit/embedded-confluence';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useConfluencePageData } from '../../../hooks/useConfluencePageData';
 /**
  * Iframe element isolated for DI purposes
  */
 export const IFrame = ({
   childRef,
   className,
+  extensionKey,
   ...props
 }) => {
+  const confluencePageData = fg('platform_deprecate_lp_cc_embed') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useConfluencePageData(props.src || '', extensionKey || '') : undefined;
+
+  // Conditional rendering: Page component for lp-cc-embed URLs, iframe for everything else
+  return confluencePageData && fg('platform_deprecate_lp_cc_embed') ? /*#__PURE__*/React.createElement(Page, {
+    hostname: confluencePageData.hostname,
+    spaceKey: confluencePageData.spaceKey,
+    contentId: confluencePageData.contentId,
+    parentProduct: confluencePageData.parentProduct,
+    hash: confluencePageData.hash,
+    mode: confluencePageData.mode,
+    locale: confluencePageData.locale,
+    iframeRef: childRef,
+    onLoad: props.onLoad,
+    onMouseEnter: props.onMouseEnter,
+    onMouseLeave: props.onMouseLeave,
+    sandbox: props.sandbox,
+    allowedFeatures: confluencePageData.allowedFeatures,
+    themeState: confluencePageData.themeStateObject,
+    userInfo: confluencePageData.userInfo
+  }) :
+  /*#__PURE__*/
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-  return /*#__PURE__*/React.createElement("iframe", _extends({
+  React.createElement("iframe", _extends({
     className: className
   }, props, {
     ref: childRef,

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

@@ -1,4 +1,4 @@
-/* ImageIcon.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ImageIcon.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./ImageIcon.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* styled.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./styled.compiled.css";
 import { forwardRef } from 'react';

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

@@ -109,7 +109,8 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
           onIframeFocus: onIframeFocus,
           testId: testId,
           CompetitorPrompt: CompetitorPrompt,
-          hideIconLoadingSkeleton: hideIconLoadingSkeleton
+          hideIconLoadingSkeleton: hideIconLoadingSkeleton,
+          extensionKey: extensionKey
         }));
       } else {
         if (platform === 'mobile') {
@@ -167,7 +168,8 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
           isSelected: isSelected,
           inheritDimensions: inheritDimensions,
           onClick: handleFrameClick,
-          ref: iframeRef
+          ref: iframeRef,
+          extensionKey: extensionKey
         }));
       }
       const forbiddenAccessContext = extractRequestAccessContextImproved({

package/dist/es2019/view/EmbedCard/views/ErroredView.js

@@ -1,4 +1,4 @@
-/* ErroredView.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ErroredView.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./ErroredView.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -23,7 +23,8 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
   isSupportTheming,
   type,
   CompetitorPrompt,
-  hideIconLoadingSkeleton
+  hideIconLoadingSkeleton,
+  extensionKey
 }, embedIframeRef) => {
   const iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
   const src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
@@ -75,6 +76,7 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
     ref: embedIframeRef,
     onIframeDwell: onIframeDwell,
     onIframeFocus: onIframeFocus,
-    title: text
+    title: text,
+    extensionKey: extensionKey
   }));
 });

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useMemo } from 'react';

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

@@ -1,9 +1,10 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { di } from 'react-magnetic-di';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getIframeSandboxAttribute } from '../../../../utils';
 import { IFrame } from '../../../EmbedCard/components/IFrame';
 const iframeCss = null;
@@ -12,7 +13,8 @@ const EmbedContent = ({
   name,
   src,
   testId,
-  ariaLabel
+  ariaLabel,
+  extensionKey
 }) => {
   const sandbox = getIframeSandboxAttribute(isTrusted);
   const props = {
@@ -24,7 +26,9 @@ const EmbedContent = ({
   };
   return /*#__PURE__*/React.createElement(IFrame, _extends({
     "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `${testId}-embed`
-  }, props, {
+  }, fg('platform_deprecate_lp_cc_embed') ? {
+    extensionKey
+  } : {}, props, {
     className: ax(["_1bsb1osq _4t3i815d"])
   }));
 };

package/dist/es2019/view/EmbedModal/components/link-info/index.compiled.css

@@ -1,23 +1,58 @@
 
 ._zulp1b66{gap:var(--ds-space-050,4px)}
-._zulpu2gc{gap:var(--ds-space-100,8px)}._16jlidpf{flex-grow:0}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._11hh1tcg [data-smart-element-icon] svg{min-width:24px}
+._15iz1tcg span{min-height:24px}
+._16jlidpf{flex-grow:0}
 ._16jlkb7n{flex-grow:1}
+._17521tcg svg{height:24px}
 ._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._19l31tcg img{max-height:24px}
 ._1bah1h6o{justify-content:center}
-._1bsb1tcg, ._1xyl1tcg [data-smart-element-icon] img, ._1h1b1tcg [data-smart-element-icon] span, ._prfw1tcg [data-smart-element-icon] svg, ._mezj1tcg img, ._e2oo1tcg span, ._w8l51tcg svg{width:24px}
+._1bnm1tcg [data-smart-element-icon] svg{height:24px}
+._1bsb1tcg{width:24px}
 ._1e0c1txw{display:flex}
+._1ekg1tcg [data-smart-element-icon] img{min-width:24px}
+._1h1b1tcg [data-smart-element-icon] span{width:24px}
+._1mj01tcg [data-smart-element-icon] img{max-width:24px}
 ._1o9zidpf{flex-shrink:0}
-._1tke1tcg, ._x9xj1tcg [data-smart-element-icon] img, ._v5981tcg [data-smart-element-icon] span, ._z15s1tcg [data-smart-element-icon] svg, ._qci81tcg img, ._15iz1tcg span, ._erub1tcg svg{min-height:24px}
-._1ul91tcg, ._1ekg1tcg [data-smart-element-icon] img, ._jbhf1tcg [data-smart-element-icon] span, ._11hh1tcg [data-smart-element-icon] svg, ._1rg21tcg img, ._q7cv1tcg span, ._xwbj1tcg svg{min-width:24px}
+._1pr21tcg span{max-height:24px}
+._1q121tcg [data-smart-element-icon] img{max-height:24px}
+._1r9c1tcg [data-smart-element-icon] span{max-width:24px}
+._1rg21tcg img{min-width:24px}
+._1rh41tcg [data-smart-element-icon] svg{max-height:24px}
+._1tke1tcg{min-height:24px}
+._1u5t1tcg svg{max-height:24px}
+._1ul91tcg{min-width:24px}
 ._1wpz1fhb{align-self:stretch}
+._1xch1tcg [data-smart-element-icon] svg{max-width:24px}
+._1xjx1tcg span{height:24px}
+._1xyl1tcg [data-smart-element-icon] img{width:24px}
 ._2lx21bp4{flex-direction:column}
-._4t3i1tcg, ._gire1tcg [data-smart-element-icon] img, ._yrry1tcg [data-smart-element-icon] span, ._1bnm1tcg [data-smart-element-icon] svg, ._bna71tcg img, ._1xjx1tcg span, ._17521tcg svg{height:24px}
+._2s1x1tcg [data-smart-element-icon] span{max-height:24px}
 ._4t3i1tcg{height:24px}
-._c71l1tcg, ._1q121tcg [data-smart-element-icon] img, ._2s1x1tcg [data-smart-element-icon] span, ._1rh41tcg [data-smart-element-icon] svg, ._19l31tcg img, ._1pr21tcg span, ._1u5t1tcg svg{max-height:24px}
+._4x201tcg svg{max-width:24px}
+._b8nk1tcg span{max-width:24px}
+._bna71tcg img{height:24px}
+._c71l1tcg{max-height:24px}
 ._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._e2oo1tcg span{width:24px}
+._erub1tcg svg{min-height:24px}
+._gire1tcg [data-smart-element-icon] img{height:24px}
 ._i0dl1wug{flex-basis:auto}
 ._i0dlf1ug{flex-basis:0%}
+._jbhf1tcg [data-smart-element-icon] span{min-width:24px}
+._mezj1tcg img{width:24px}
 ._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
-._p12f1tcg, ._1mj01tcg [data-smart-element-icon] img, ._1r9c1tcg [data-smart-element-icon] span, ._1xch1tcg [data-smart-element-icon] svg, ._rtys1tcg img, ._b8nk1tcg span, ._4x201tcg svg{max-width:24px}
+._p12f1tcg{max-width:24px}
+._prfw1tcg [data-smart-element-icon] svg{width:24px}
+._q7cv1tcg span{min-width:24px}
+._qci81tcg img{min-height:24px}
+._rtys1tcg img{max-width:24px}
 ._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._v5981tcg [data-smart-element-icon] span{min-height:24px}
+._w8l51tcg svg{width:24px}
+._x9xj1tcg [data-smart-element-icon] img{min-height:24px}
+._xwbj1tcg svg{min-width:24px}
+._yrry1tcg [data-smart-element-icon] span{height:24px}
+._z15s1tcg [data-smart-element-icon] svg{min-height:24px}
 @media only screen and (max-width:980px){._3kllglyw .smart-link-resize-button{display:none}}

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useMemo } from 'react';

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

@@ -30,7 +30,8 @@ const EmbedModal = ({
   src,
   testId = 'smart-embed-preview-modal',
   title,
-  invokeViewAction
+  invokeViewAction,
+  extensionKey
 }) => {
   const defaultWidth = toWidth(size);
   const [isOpen, setIsOpen] = useState(showModal);
@@ -104,7 +105,8 @@ const EmbedModal = ({
     name: iframeName,
     src: previewUrl,
     testId: testId,
-    ariaLabel: title
+    ariaLabel: title,
+    extensionKey: extensionKey
   }))));
 };
 export default withAnalytics(withErrorBoundary(EmbedModal));

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

@@ -1,16 +1,58 @@
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11lv1xvx button, ._192b1xvx button:active, ._vbn71xvx button:focus, ._wfu31xvx button:hover{padding-left:var(--ds-space-025,.125rem)}
-._11lvidpf button, ._192bidpf button:active, ._vbn7idpf button:focus, ._wfu3idpf button:hover{padding-left:0}
-._11lvpdf9 button, ._192bpdf9 button:active, ._vbn7pdf9 button:focus, ._wfu3pdf9 button:hover{padding-left:var(--ds-space-050,.25rem)}
-._1gfl1xvx button, ._or3f1xvx button:active, ._1ddv1xvx button:focus, ._1hha1xvx button:hover{padding-top:var(--ds-space-025,.125rem)}
-._1gflidpf button, ._or3fidpf button:active, ._1ddvidpf button:focus, ._1hhaidpf button:hover{padding-top:0}
-._1gqn1xvx button, ._1qdm1xvx button:active, ._df2r1xvx button:focus, ._j1tw1xvx button:hover{padding-bottom:var(--ds-space-025,.125rem)}
-._1gqnidpf button, ._1qdmidpf button:active, ._df2ridpf button:focus, ._j1twidpf button:hover{padding-bottom:0}
-._1i3bidpf button:active>span, ._13gwidpf button:focus>span, ._4wlcidpf button:hover>span, ._rehaidpf button>span{margin-top:0}
-._1vtwidpf button:active>span, ._ijvwidpf button:focus>span, ._tpwpidpf button:hover>span, ._1ad8idpf button>span{margin-left:0}
-._3kh9idpf button:active>span, ._i2vxidpf button:focus>span, ._8pvjidpf button:hover>span, ._1e1oidpf button>span{margin-bottom:0}
+._11lv1xvx button{padding-left:var(--ds-space-025,.125rem)}
+._11lvidpf button{padding-left:0}
+._11lvpdf9 button{padding-left:var(--ds-space-050,.25rem)}
+._13gwidpf button:focus>span{margin-top:0}
+._1ad8idpf button>span{margin-left:0}
+._1bnaidpf button>span{margin-right:0}
+._1e1oidpf button>span{margin-bottom:0}
+._1gfl1xvx button{padding-top:var(--ds-space-025,.125rem)}
+._1gflidpf button{padding-top:0}
+._1gqn1xvx button{padding-bottom:var(--ds-space-025,.125rem)}
+._1gqnidpf button{padding-bottom:0}
+._1i3bidpf button:active>span{margin-top:0}
+._1l0qidpf button:hover>span{margin-right:0}
+._1vtwidpf button:active>span{margin-left:0}
+._3kh9idpf button:active>span{margin-bottom:0}
+._4wlcidpf button:hover>span{margin-top:0}
+._8pvjidpf button:hover>span{margin-bottom:0}
+._i2vxidpf button:focus>span{margin-bottom:0}
+._ijvwidpf button:focus>span{margin-left:0}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
-._mp2fidpf button:active>span, ._ro8midpf button:focus>span, ._1l0qidpf button:hover>span, ._1bnaidpf button>span{margin-right:0}
-._yhjm1xvx button, ._1trn1xvx button:active, ._1fst1xvx button:focus, ._1xce1xvx button:hover{padding-right:var(--ds-space-025,.125rem)}
-._yhjmidpf button, ._1trnidpf button:active, ._1fstidpf button:focus, ._1xceidpf button:hover{padding-right:0}
-._yhjmpdf9 button, ._1trnpdf9 button:active, ._1fstpdf9 button:focus, ._1xcepdf9 button:hover{padding-right:var(--ds-space-050,.25rem)}
+._mp2fidpf button:active>span{margin-right:0}
+._rehaidpf button>span{margin-top:0}
+._ro8midpf button:focus>span{margin-right:0}
+._tpwpidpf button:hover>span{margin-left:0}
+._yhjm1xvx button{padding-right:var(--ds-space-025,.125rem)}
+._yhjmidpf button{padding-right:0}
+._yhjmpdf9 button{padding-right:var(--ds-space-050,.25rem)}
+._1ddv1xvx button:focus{padding-top:var(--ds-space-025,.125rem)}
+._1ddvidpf button:focus{padding-top:0}
+._1fst1xvx button:focus{padding-right:var(--ds-space-025,.125rem)}
+._1fstidpf button:focus{padding-right:0}
+._1fstpdf9 button:focus{padding-right:var(--ds-space-050,.25rem)}
+._df2r1xvx button:focus{padding-bottom:var(--ds-space-025,.125rem)}
+._df2ridpf button:focus{padding-bottom:0}
+._vbn71xvx button:focus{padding-left:var(--ds-space-025,.125rem)}
+._vbn7idpf button:focus{padding-left:0}
+._vbn7pdf9 button:focus{padding-left:var(--ds-space-050,.25rem)}
+._1hha1xvx button:hover{padding-top:var(--ds-space-025,.125rem)}
+._1hhaidpf button:hover{padding-top:0}
+._1xce1xvx button:hover{padding-right:var(--ds-space-025,.125rem)}
+._1xceidpf button:hover{padding-right:0}
+._1xcepdf9 button:hover{padding-right:var(--ds-space-050,.25rem)}
+._j1tw1xvx button:hover{padding-bottom:var(--ds-space-025,.125rem)}
+._j1twidpf button:hover{padding-bottom:0}
+._wfu31xvx button:hover{padding-left:var(--ds-space-025,.125rem)}
+._wfu3idpf button:hover{padding-left:0}
+._wfu3pdf9 button:hover{padding-left:var(--ds-space-050,.25rem)}
+._192b1xvx button:active{padding-left:var(--ds-space-025,.125rem)}
+._192bidpf button:active{padding-left:0}
+._192bpdf9 button:active{padding-left:var(--ds-space-050,.25rem)}
+._1qdm1xvx button:active{padding-bottom:var(--ds-space-025,.125rem)}
+._1qdmidpf button:active{padding-bottom:0}
+._1trn1xvx button:active{padding-right:var(--ds-space-025,.125rem)}
+._1trnidpf button:active{padding-right:0}
+._1trnpdf9 button:active{padding-right:var(--ds-space-050,.25rem)}
+._or3f1xvx button:active{padding-top:var(--ds-space-025,.125rem)}
+._or3fidpf button:active{padding-top:0}

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useMemo } from 'react';

package/dist/es2019/view/FlexibleCard/components/actions/action/action-icon/index.compiled.css

@@ -1,48 +1,84 @@
+._15iz1j6v span{min-height:1rem}
+._15iz1k8s span{min-height:1.5rem}
+._15izgktf span{min-height:20px}
 ._16jlidpf{flex-grow:0}
+._17521j6v svg{height:1rem}
+._17521k8s svg{height:1.5rem}
+._1752gktf svg{height:20px}
 ._19bvv77o{padding-left:var(--ds-space-025,2px)}
-._19l31j6v img, ._1pr21j6v span, ._1u5t1j6v svg{max-height:1rem}
-._19l31k8s img, ._1pr21k8s span, ._1u5t1k8s svg{max-height:1.5rem}
-._19l3gktf img, ._1pr2gktf span, ._1u5tgktf svg{max-height:20px}
+._19l31j6v img{max-height:1rem}
+._19l31k8s img{max-height:1.5rem}
+._19l3gktf img{max-height:20px}
 ._1bsb1j6v{width:1rem}
 ._1bsb1k8s{width:1.5rem}
 ._1bsbgktf{width:20px}
 ._1e0c1o8l{display:inline-block}
 ._1o9zidpf{flex-shrink:0}
-._1rg21j6v img, ._q7cv1j6v span, ._xwbj1j6v svg{min-width:1rem}
-._1rg21k8s img, ._q7cv1k8s span, ._xwbj1k8s svg{min-width:1.5rem}
-._1rg2gktf img, ._q7cvgktf span, ._xwbjgktf svg{min-width:20px}
+._1pr21j6v span{max-height:1rem}
+._1pr21k8s span{max-height:1.5rem}
+._1pr2gktf span{max-height:20px}
+._1rg21j6v img{min-width:1rem}
+._1rg21k8s img{min-width:1.5rem}
+._1rg2gktf img{min-width:20px}
 ._1tke1j6v{min-height:1rem}
 ._1tke1k8s{min-height:1.5rem}
 ._1tkegktf{min-height:20px}
+._1u5t1j6v svg{max-height:1rem}
+._1u5t1k8s svg{max-height:1.5rem}
+._1u5tgktf svg{max-height:20px}
 ._1ul91j6v{min-width:1rem}
 ._1ul91k8s{min-width:1.5rem}
 ._1ul9gktf{min-width:20px}
+._1xjx1j6v span{height:1rem}
+._1xjx1k8s span{height:1.5rem}
+._1xjxgktf span{height:20px}
 ._4t3i1j6v{height:1rem}
 ._4t3i1k8s{height:1.5rem}
 ._4t3igktf{height:20px}
+._4x201j6v svg{max-width:1rem}
+._4x201k8s svg{max-width:1.5rem}
+._4x20gktf svg{max-width:20px}
 ._5jw9idpf svg{padding-bottom:0}
 ._7wy9idpf svg{padding-left:0}
-._bna71j6v img, ._1xjx1j6v span, ._17521j6v svg{height:1rem}
-._bna71k8s img, ._1xjx1k8s span, ._17521k8s svg{height:1.5rem}
-._bna7gktf img, ._1xjxgktf span, ._1752gktf svg{height:20px}
+._b8nk1j6v span{max-width:1rem}
+._b8nk1k8s span{max-width:1.5rem}
+._b8nkgktf span{max-width:20px}
+._bna71j6v img{height:1rem}
+._bna71k8s img{height:1.5rem}
+._bna7gktf img{height:20px}
 ._c71l1j6v{max-height:1rem}
 ._c71l1k8s{max-height:1.5rem}
 ._c71lgktf{max-height:20px}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._e2oo1j6v span{width:1rem}
+._e2oo1k8s span{width:1.5rem}
+._e2oogktf span{width:20px}
+._erub1j6v svg{min-height:1rem}
+._erub1k8s svg{min-height:1.5rem}
+._erubgktf svg{min-height:20px}
 ._i0dl1wug{flex-basis:auto}
 ._i2i3idpf svg{padding-top:0}
-._mezj1j6v img, ._e2oo1j6v span, ._w8l51j6v svg{width:1rem}
-._mezj1k8s img, ._e2oo1k8s span, ._w8l51k8s svg{width:1.5rem}
-._mezjgktf img, ._e2oogktf span, ._w8l5gktf svg{width:20px}
+._mezj1j6v img{width:1rem}
+._mezj1k8s img{width:1.5rem}
+._mezjgktf img{width:20px}
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._p12f1j6v{max-width:1rem}
 ._p12f1k8s{max-width:1.5rem}
 ._p12fgktf{max-width:20px}
-._qci81j6v img, ._15iz1j6v span, ._erub1j6v svg{min-height:1rem}
-._qci81k8s img, ._15iz1k8s span, ._erub1k8s svg{min-height:1.5rem}
-._qci8gktf img, ._15izgktf span, ._erubgktf svg{min-height:20px}
-._rtys1j6v img, ._b8nk1j6v span, ._4x201j6v svg{max-width:1rem}
-._rtys1k8s img, ._b8nk1k8s span, ._4x201k8s svg{max-width:1.5rem}
-._rtysgktf img, ._b8nkgktf span, ._4x20gktf svg{max-width:20px}
+._q7cv1j6v span{min-width:1rem}
+._q7cv1k8s span{min-width:1.5rem}
+._q7cvgktf span{min-width:20px}
+._qci81j6v img{min-height:1rem}
+._qci81k8s img{min-height:1.5rem}
+._qci8gktf img{min-height:20px}
+._rtys1j6v img{max-width:1rem}
+._rtys1k8s img{max-width:1.5rem}
+._rtysgktf img{max-width:20px}
 ._u5f3v77o{padding-right:var(--ds-space-025,2px)}
-._uhasidpf svg{padding-right:0}
+._uhasidpf svg{padding-right:0}
+._w8l51j6v svg{width:1rem}
+._w8l51k8s svg{width:1.5rem}
+._w8l5gktf svg{width:20px}
+._xwbj1j6v svg{min-width:1rem}
+._xwbj1k8s svg{min-width:1.5rem}
+._xwbjgktf svg{min-width:20px}

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";