@atlaskit/media-card 79.16.6 → 79.16.8

package/dist/esm/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -10,7 +10,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { B300, R300, N30A, N900 } from '@atlaskit/theme/colors';
 import WarningIcon from '@atlaskit/icon/core/status-warning';
 import { fireMediaCardEvent } from '../utils/analytics';
 var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
@@ -18,7 +17,7 @@ var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
     isSelected = _ref.isSelected;
   var selectedStyle = {
     cursor: 'pointer',
-    boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, ".concat(B300, ")")),
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #1868DB)"),
     outline: 'none',
     userSelect: 'none',
     borderColor: 'transparent'
@@ -48,8 +47,8 @@ var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
     alignItems: 'center',
     // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
     borderRadius: "var(--ds-radius-small, 3px)",
-    color: "var(--ds-text, ".concat(N900, ")"),
-    backgroundColor: "var(--ds-background-neutral, ".concat(N30A, ")"),
+    color: "var(--ds-text, #292A2E)",
+    backgroundColor: "var(--ds-background-neutral, #0515240F)",
     userSelect: 'text',
     transition: 'all 0.1s ease-in-out 0s',
     cursor: 'pointer'
@@ -63,7 +62,7 @@ var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
       style: style
     }, /*#__PURE__*/React.createElement(WarningIcon, {
       label: "error",
-      color: "var(--ds-icon-danger, ".concat(R300, ")"),
+      color: "var(--ds-icon-danger, #C9372C)",
       size: "small"
     }), message)
   );

package/dist/esm/utils/lightCards/errorIcon/styles.js

@@ -4,5 +4,5 @@ import { css } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var errorIconWrapperStyles = css({
   display: 'flex',
-  color: "var(--ds-icon-warning, #ff991f)"
+  color: "var(--ds-icon-warning, #E06C00)"
 });

package/dist/esm/utils/lightCards/styles.js

@@ -1,14 +1,13 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { center, borderRadius } from '@atlaskit/media-ui';
-import { N20, N50 } from '@atlaskit/theme/colors';
 export var wrapperStyles = function wrapperStyles(_ref) {
   var dimensions = _ref.dimensions;
   return css(
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   center, {
-    background: "var(--ds-background-neutral, ".concat(N20, ")"),
-    color: "var(--ds-icon, ".concat(N50, ")")
+    background: "var(--ds-background-neutral, #0515240F)",
+    color: "var(--ds-icon, #292A2E)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius, {

package/dist/esm/utils/ufoExperiences.js

@@ -13,7 +13,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { getMediaGlobalScope } from './globalScope/globalScope';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.16.5";
+var packageVersion = "79.16.7";
 var SAMPLE_RATE = 0.05;
 
 /**

package/dist/types/card/ui/titleBox/styles.d.ts

@@ -6,7 +6,7 @@ type TitleBoxWrapperStyleArgs = {
     display?: 'none' | 'flex';
 };
 export declare const titleBoxWrapperStyles: {
-    ({ breakpoint, display, titleBoxBgColor, }: TitleBoxWrapperStyleArgs): import("@emotion/utils").SerializedStyles;
+    ({ breakpoint, display, }: TitleBoxWrapperStyleArgs): import("@emotion/utils").SerializedStyles;
     displayName: string;
 };
 export declare const titleBoxHeaderStyles: {

package/dist/types-ts4.5/card/ui/titleBox/styles.d.ts

@@ -6,7 +6,7 @@ type TitleBoxWrapperStyleArgs = {
     display?: 'none' | 'flex';
 };
 export declare const titleBoxWrapperStyles: {
-    ({ breakpoint, display, titleBoxBgColor, }: TitleBoxWrapperStyleArgs): import("@emotion/utils").SerializedStyles;
+    ({ breakpoint, display, }: TitleBoxWrapperStyleArgs): import("@emotion/utils").SerializedStyles;
     displayName: string;
 };
 export declare const titleBoxHeaderStyles: {

package/example-helpers/styles.ts

@@ -4,8 +4,8 @@ import { css } from '@emotion/react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const editableCardOptionsStyles = css({
-	padding: token('space.250', '20px'),
-	borderBottom: `1px solid ${token('color.border', '#ccc')}`,
+	padding: token('space.250'),
+	borderBottom: `${token('border.width', '1px')} solid ${token('color.border')}`,
 	maxWidth: '700px',
 });
 
@@ -16,20 +16,17 @@ export const sliderWrapperStyles = css({
 	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
 	'> *': {
 		flex: 1,
-		margin: token('space.100', '8px'),
+		margin: token('space.100'),
 	},
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const editableCardContentStyles = css({
-	padding: token('space.250', '20px'),
+	padding: token('space.250'),
 	border: '2px dashed',
-	margin: `${token('space.0', '0px')} ${token('space.150', '12px')} ${token(
-		'space.600',
-		'48px',
-	)} ${token('space.150', '12px')}`,
+	margin: `${token('space.0')} ${token('space.150')} ${token('space.600')} ${token('space.150')}`,
 	overflow: 'hidden',
-	background: token('color.background.accent.orange.subtlest', 'antiquewhite'),
+	background: token('color.background.accent.orange.subtlest'),
 	boxSizing: 'border-box',
 });
 
@@ -39,22 +36,19 @@ export const optionsWrapperStyles = css({
 	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
 	'> *': {
 		flex: 1,
-		margin: token('space.100', '8px'),
+		margin: token('space.100'),
 	},
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const cardDimensionsWrapperStyles = css({
-	margin: `${token('space.100', '8px')} ${token('space.100', '8px')} ${token(
-		'space.250',
-		'20px',
-	)} ${token('space.100', '8px')}`,
+	margin: `${token('space.100')} ${token('space.100')} ${token('space.250')} ${token('space.100')}`,
 	display: 'flex',
 	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
 	'> div': {
-		border: `1px solid ${token('color.border.bold', 'black')}`,
-		margin: token('space.075', '6px'),
-		padding: token('space.075', '6px'),
+		border: `${token('border.width', '1px')} solid ${token('color.border.bold')}`,
+		margin: token('space.075'),
+		padding: token('space.075'),
 		// eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
 		borderRadius: token('radius.small', '3px'),
 	},
@@ -71,9 +65,9 @@ export const cardPreviewWrapperStyles = css({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const cardWrapperStyles = css({
-	border: `1px solid ${token('color.border.bold', 'black')}`,
-	padding: token('space.150', '12px'),
-	margin: token('space.075', '6px'),
+	border: `${token('border.width', '1px')} solid ${token('color.border.bold')}`,
+	padding: token('space.150'),
+	margin: token('space.075'),
 	flexDirection: 'column',
 	width: '310px',
 	height: '280px',
@@ -83,40 +77,40 @@ export const cardWrapperStyles = css({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const cardFlowHeaderStyles = css({
-	margin: `${token('space.250', '20px')} auto`,
-	padding: `${token('space.150', '12px')} ${token('space.0', '0px')}`,
+	margin: `${token('space.250')} auto`,
+	padding: `${token('space.150')} ${token('space.0')}`,
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const externalIdentifierWrapperStyles = css({
 	display: 'flex',
 	justifyContent: 'space-around',
-	margin: `${token('space.0', '0px')} auto`,
+	margin: `${token('space.0')} auto`,
 	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
 	h2: {
-		marginBottom: token('space.150', '12px'),
+		marginBottom: token('space.150'),
 	},
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const unhandledErrorCardWrapperStyles = css({
-	padding: token('space.250', '20px'),
+	padding: token('space.250'),
 	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
 	'> div:first-child': {
 		display: 'flex',
-		marginBottom: token('space.250', '20px'),
+		marginBottom: token('space.250'),
 	},
 	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
 	label: {
-		marginRight: token('space.250', '20px'),
+		marginRight: token('space.250'),
 	},
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const inlineCardVideoWrapperItemStyles = css({
-	padding: token('space.150', '12px'),
-	border: `1px solid ${token('color.border.bold', 'black')}`,
-	margin: token('space.150', '12px'),
+	padding: token('space.150'),
+	border: `${token('border.width', '1px')} solid ${token('color.border.bold')}`,
+	margin: token('space.150'),
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -134,7 +128,7 @@ export const mediaInlineWrapperStyles = css({
 	display: 'flex',
 	alignItems: 'center',
 	flexDirection: 'column',
-	margin: token('space.1000', '80px'),
+	margin: token('space.1000'),
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -142,6 +136,6 @@ export const mediaInlineTableStyles = css({
 	width: '800px',
 	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
 	'tr, td': {
-		border: `1px solid ${token('color.border', '#ddd')}`,
+		border: `${token('border.width', '1px')} solid ${token('color.border')}`,
 	},
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "79.16.6",
+	"version": "79.16.8",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -49,7 +49,7 @@
 		"@atlaskit/react-ufo": "^5.7.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^50.0.0",
+		"@atlaskit/tmp-editor-statsig": "^51.0.0",
 		"@atlaskit/tokens": "^11.4.0",
 		"@atlaskit/tooltip": "^21.0.0",
 		"@atlaskit/ufo": "^0.4.0",