@atlaskit/icon 22.6.0 → 22.8.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/icon
 
+## 22.8.0
+
+### Minor Changes
+
+- [#124884](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124884)
+  [`3108a1a229e07`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3108a1a229e07) - -
+  Icons in `@atlaskit/icon/glyph` can now switch to updated designs behind a feature flag.
+  - SVGs in `/svgs`, used by icons in `@atlaskit/icon/glyph`, have been re-optimised with the latest
+    version of SVGO; some slight changes to SVG code or subpixel aliasing may occur
+
+## 22.7.0
+
+### Minor Changes
+
+- [#122612](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122612)
+  [`0c9d2190a14f2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0c9d2190a14f2) -
+  Adds a new prop, LEGACY_margin, to the new icon API to allow for spacing adjustments between old
+  and new icons API.
+
+### Patch Changes
+
+- [#122977](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122977)
+  [`41748db2c12de`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/41748db2c12de) -
+  [ux]ED-24225 add wrap button inside editor-plugin-block
+
 ## 22.6.0
 
 ### Minor Changes

package/afm-post-office/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../../../tsconfig.entry-points.post-office.json",
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es5",
+    "outDir": "../../../../../tsDist/@atlaskit__icon/app",
+    "composite": true,
+    "rootDir": "../"
+  },
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ],
+  "references": [
+    {
+      "path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
+    },
+    {
+      "path": "../../tokens/afm-post-office/tsconfig.json"
+    }
+  ]
+}

package/build/index.tsx

@@ -1,6 +1,10 @@
 import path from 'path';
-import { UNSAFE_buildNew as buildIconsNew, UNSAFE_createIconDocsNew } from '@af/icon-build-process';
-import type { UNSAFE_NewIconBuildConfig } from '@af/icon-build-process';
+import buildIcons, {
+	UNSAFE_buildNew as buildIconsNew,
+	UNSAFE_createIconDocsNew,
+	createIconDocs,
+} from '@af/icon-build-process';
+import type { UNSAFE_NewIconBuildConfig, IconBuildConfig } from '@af/icon-build-process';
 import pkgDir from 'pkg-dir';
 import fs from 'fs-extra';
 import synonyms from '../utils/synonyms';
@@ -22,22 +26,21 @@ if (!root) {
  * To avoid unnecessary churn, this step is switched off, and any updates to the old icon set can be done piecemeal.
  */
 
-// const config: IconBuildConfig = {
-//   srcDir: path.resolve(root, 'svgs_raw'),
-//   processedDir: path.resolve(root, 'svgs'),
-//   destDir: path.resolve(root, 'glyph'),
-//   maxWidth: 24,
-//   maxHeight: 24,
-//   glob: '**/*.svg',
-//   baseIconEntryPoint: '@atlaskit/icon/base',
-// };
-// buildIcons(config).then((icons) => {
-//   const iconDocs = createIconDocs(icons, '@atlaskit/icon', synonyms, [
-//     'icon',
-//     'core',
-//   ]);
-//   return fs.outputFile(path.resolve(root, 'src/metadata.tsx'), iconDocs);
-// });
+const config: IconBuildConfig = {
+	srcDir: path.resolve(root, 'svgs_raw'),
+	processedDir: path.resolve(root, 'svgs'),
+	destDir: path.resolve(root, 'glyph'),
+	maxWidth: 24,
+	maxHeight: 24,
+	glob: '**/*.svg',
+	baseIconEntryPoint: '@atlaskit/icon/base',
+	newIconsDir: path.resolve(root, 'icons_raw'),
+	migrationMap,
+};
+buildIcons(config).then((icons) => {
+	const iconDocs = createIconDocs(icons, '@atlaskit/icon', synonyms, ['icon', 'core']);
+	return fs.outputFile(path.resolve(root, 'src/metadata.tsx'), iconDocs);
+});
 
 /**
  * The updated icon build process for the new icons under `@atlaskit/icon/core/*`

package/dist/cjs/components/icon-facade.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.IconFacade = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _icon = _interopRequireDefault(require("./icon"));
+var _excluded = ["dangerouslySetGlyph"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var sizesEligibleForNewIcons = ['small', 'medium'];
+
+/**
+ * `IconFacade` is a component that conditionally renders either a new or legacy icon based on a feature flag.
+ *
+ * @param {IconFacadeProps} props - The props for the IconFacade component. Includes properties for configuring
+ * the icon such as `size`, `spacing`, `primaryColor`, `iconType`, and potentially others depending on the icon.
+ * `dangerouslySetGlyph` is a prop specific to the legacy icon component for setting the icon glyph directly.
+ * @returns A React element representing either the new or legacy icon based on the feature flag and icon size.
+ */
+var IconFacade = exports.IconFacade = /*#__PURE__*/(0, _react.memo)(function IconFacade(_ref) {
+  var _props$size;
+  var dangerouslySetGlyph = _ref.dangerouslySetGlyph,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var NewIcon = props.newIcon;
+
+  // By default, the icon size will be medium and spacing will be none for small icons
+  var size = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 'medium';
+  var spacing = size === 'small' ? 'none' : 'spacious';
+
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  var useNewIcon = (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons-legacy-facade') && sizesEligibleForNewIcons.includes(size);
+  if (useNewIcon && NewIcon) {
+    return /*#__PURE__*/_react.default.createElement(NewIcon, (0, _extends2.default)({}, props, {
+      spacing: spacing,
+      color: props.primaryColor || 'currentColor',
+      type: props.iconType
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
+    dangerouslySetGlyph: dangerouslySetGlyph
+  }, props));
+});
+var _default = exports.default = IconFacade;

package/dist/cjs/components/icon-new.js

@@ -9,8 +9,8 @@ var _react2 = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -107,7 +107,8 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'global' : _ref$type,
     dangerouslySetGlyph = _ref.dangerouslySetGlyph,
-    shouldScale = _ref.shouldScale;
+    shouldScale = _ref.shouldScale,
+    LEGACY_margin = _ref.LEGACY_margin;
   var dangerouslySetInnerHTML = dangerouslySetGlyph ? {
     __html: dangerouslySetGlyph
   } : undefined;
@@ -121,6 +122,9 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
       size: LEGACY_size,
       label: label,
       testId: testId
+      // @ts-ignore-next-line
+      ,
+      UNSAFE_margin: LEGACY_margin
     });
   }
 

package/dist/cjs/components/icon-tile.js

@@ -7,8 +7,8 @@ exports.default = IconTile;
 var _react = require("@emotion/react");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/components/icon.js

@@ -9,12 +9,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _utils = require("./utils");
 var _styles = require("./styles");
+var _utils = require("./utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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) { (0, _defineProperty2.default)(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; } /**
  * @jsxRuntime classic
- */ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 /**
  * We are hiding these props from consumers as they're used to
  * hack around icon sizing specifically for icon-file-type.
@@ -86,7 +87,8 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     testId = _ref.testId,
     label = _ref.label,
     width = _ref.width,
-    height = _ref.height;
+    height = _ref.height,
+    UNSAFE_margin = _ref.UNSAFE_margin;
   var glyphProps = dangerouslySetGlyph ? {
     dangerouslySetInnerHTML: {
       __html: dangerouslySetGlyph
@@ -108,12 +110,13 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     "aria-hidden": label ? undefined : true
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-    style: {
+    style: _objectSpread({
       '--icon-primary-color': primaryColor,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       '--icon-secondary-color': secondaryColor || (0, _utils.getBackground)()
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    }
+    }, UNSAFE_margin ? {
+      margin: UNSAFE_margin
+    } : {})
   }, glyphProps, {
     css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles,
     // NB: This can be resolved if this component, composes base SVG / and/or skeleton

package/dist/cjs/components/skeleton.js

@@ -9,8 +9,8 @@ var _react2 = require("react");
 var _styles = require("./styles");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var skeletonStyles = (0, _react.css)({

package/dist/cjs/components/svg.js

@@ -10,8 +10,8 @@ var _utils = require("./utils");
 var _styles = require("./styles");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/entry-points/base.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "Icon", {
     return _icon.Icon;
   }
 });
+Object.defineProperty(exports, "UNSAFE_IconFacade", {
+  enumerable: true,
+  get: function get() {
+    return _iconFacade.IconFacade;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -17,5 +23,6 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _icon = _interopRequireWildcard(require("../components/icon"));
+var _iconFacade = require("../components/icon-facade");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/dist/cjs/migration-map.js

@@ -122,19 +122,15 @@ var migrationMap = {
       xlarge: 'icon-tile'
     }
   },
-  'app-switcher': {
-    newIcon: {
-      name: 'app-switcher',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'top-nav',
-      medium: 'top-nav',
-      large: 'top-nav',
-      xlarge: 'top-nav'
-    }
-  },
+  // 'app-switcher': {
+  // 	newIcon: { name: 'app-switcher', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'top-nav',
+  // 		medium: 'top-nav',
+  // 		large: 'top-nav',
+  // 		xlarge: 'top-nav',
+  // 	},
+  // },
   archive: {
     newIcon: {
       name: 'archive-box',
@@ -1043,19 +1039,15 @@ var migrationMap = {
       xlarge: 'icon-tile'
     }
   },
-  download: {
-    newIcon: {
-      name: 'cloud-arrow-down',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap',
-      medium: 'swap',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
+  // download: {
+  // 	newIcon: { name: 'cloud-arrow-down', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap',
+  // 		medium: 'swap',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
   'drag-handler': {
     newIcon: {
       name: 'drag-handle',
@@ -2878,32 +2870,24 @@ var migrationMap = {
       xlarge: 'icon-lab'
     }
   },
-  'menu-expand': {
-    newIcon: {
-      name: 'menu',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap',
-      medium: 'swap',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
-  menu: {
-    newIcon: {
-      name: 'menu',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap',
-      medium: 'swap',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
+  // 'menu-expand': {
+  // 	newIcon: { name: 'menu', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap',
+  // 		medium: 'swap',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
+  // menu: {
+  // 	newIcon: { name: 'menu', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap',
+  // 		medium: 'swap',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
   mobile: {
     newIcon: {
       name: 'device-mobile',
@@ -2951,32 +2935,24 @@ var migrationMap = {
       xlarge: 'icon-lab'
     }
   },
-  'notification-direct': {
-    newIcon: {
-      name: 'notification',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap-slight-visual-change',
-      medium: 'swap-slight-visual-change',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
-  notification: {
-    newIcon: {
-      name: 'notification',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap-visual-change',
-      medium: 'swap-visual-change',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
+  // 'notification-direct': {
+  // 	newIcon: { name: 'notification', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap-slight-visual-change',
+  // 		medium: 'swap-slight-visual-change',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
+  // notification: {
+  // 	newIcon: { name: 'notification', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap-visual-change',
+  // 		medium: 'swap-visual-change',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
   'office-building-filled': {
     newIcon: {
       name: 'office-building',
@@ -3604,19 +3580,15 @@ var migrationMap = {
       xlarge: 'icon-tile'
     }
   },
-  switcher: {
-    newIcon: {
-      name: 'app-switcher',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap-visual-change',
-      medium: 'swap-visual-change',
-      large: 'not-recommended',
-      xlarge: 'not-recommended'
-    }
-  },
+  // switcher: {
+  // 	newIcon: { name: 'app-switcher', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap-visual-change',
+  // 		medium: 'swap-visual-change',
+  // 		large: 'not-recommended',
+  // 		xlarge: 'not-recommended',
+  // 	},
+  // },
   table: {
     newIcon: {
       name: 'grid',

package/dist/es2019/components/icon-facade.js

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { memo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import LegacyIcon from './icon';
+const sizesEligibleForNewIcons = ['small', 'medium'];
+
+/**
+ * `IconFacade` is a component that conditionally renders either a new or legacy icon based on a feature flag.
+ *
+ * @param {IconFacadeProps} props - The props for the IconFacade component. Includes properties for configuring
+ * the icon such as `size`, `spacing`, `primaryColor`, `iconType`, and potentially others depending on the icon.
+ * `dangerouslySetGlyph` is a prop specific to the legacy icon component for setting the icon glyph directly.
+ * @returns A React element representing either the new or legacy icon based on the feature flag and icon size.
+ */
+export const IconFacade = /*#__PURE__*/memo(function IconFacade({
+  dangerouslySetGlyph,
+  ...props
+}) {
+  var _props$size;
+  const NewIcon = props.newIcon;
+
+  // By default, the icon size will be medium and spacing will be none for small icons
+  const size = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 'medium';
+  const spacing = size === 'small' ? 'none' : 'spacious';
+
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  const useNewIcon = fg('platform-visual-refresh-icons-legacy-facade') && sizesEligibleForNewIcons.includes(size);
+  if (useNewIcon && NewIcon) {
+    return /*#__PURE__*/React.createElement(NewIcon, _extends({}, props, {
+      spacing: spacing,
+      color: props.primaryColor || 'currentColor',
+      type: props.iconType
+    }));
+  }
+  return /*#__PURE__*/React.createElement(LegacyIcon, _extends({
+    dangerouslySetGlyph: dangerouslySetGlyph
+  }, props));
+});
+export default IconFacade;

package/dist/es2019/components/icon-new.js

@@ -1,8 +1,9 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { memo } from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -100,7 +101,8 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
     // Used to set icon glyphs in codegen
     dangerouslySetGlyph,
     // Used with iconTile to scale icon up and down
-    shouldScale
+    shouldScale,
+    LEGACY_margin
   } = props;
   const dangerouslySetInnerHTML = dangerouslySetGlyph ? {
     __html: dangerouslySetGlyph
@@ -115,6 +117,9 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
       size: LEGACY_size,
       label: label,
       testId: testId
+      // @ts-ignore-next-line
+      ,
+      UNSAFE_margin: LEGACY_margin
     });
   }
 

package/dist/es2019/components/icon-tile.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/es2019/components/icon.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { memo } from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { getBackground } from './utils';
 import { commonSVGStyles, getIconSize } from './styles';
+import { getBackground } from './utils';
 
 /**
  * We are hiding these props from consumers as they're used to
@@ -81,7 +82,8 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
     testId,
     label,
     width,
-    height
+    height,
+    UNSAFE_margin
   } = props;
   const glyphProps = dangerouslySetGlyph ? {
     dangerouslySetInnerHTML: {
@@ -107,7 +109,11 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
     style: {
       '--icon-primary-color': primaryColor,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      '--icon-secondary-color': secondaryColor || getBackground()
+      '--icon-secondary-color': secondaryColor || getBackground(),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      ...(UNSAFE_margin ? {
+        margin: UNSAFE_margin
+      } : {})
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     }
   }, glyphProps, {

package/dist/es2019/components/skeleton.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { memo } from 'react';

package/dist/es2019/components/svg.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { memo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/es2019/entry-points/base.js

@@ -1 +1,2 @@
-export { default, Icon } from '../components/icon';
+export { default, Icon } from '../components/icon';
+export { IconFacade as UNSAFE_IconFacade } from '../components/icon-facade';