@atlaskit/logo 14.3.4 → 15.0.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/logo
 
+## 15.0.0
+
+### Major Changes
+
+- [#170937](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/170937)
+  [`2f502fec31157`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2f502fec31157) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
+
+  Please note, in order to use this version of `@atlaskit/logo`, you will need to ensure that your
+  bundler is configured to handle `.css` imports correctly. Most bundlers come with built-in support
+  for `.css` imports, so you may not need to do anything. If you are using a different bundler,
+  please refer to the documentation for that bundler to understand how to handle `.css` imports.
+
+## 14.3.5
+
+### Patch Changes
+
+- [#165531](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165531)
+  [`57f451bda8919`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/57f451bda8919) -
+  Adds side-effect config to support Compiled css extraction in third-party apps
+
 ## 14.3.4
 
 ### Patch Changes

package/Wrapper/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/wrapper.js",
   "module": "../dist/esm/wrapper.js",
   "module:es2019": "../dist/es2019/wrapper.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/wrapper.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/atlas-icon/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/atlas-logo/icon.js",
   "module": "../dist/esm/atlas-logo/icon.js",
   "module:es2019": "../dist/es2019/atlas-logo/icon.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/atlas-logo/icon.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/atlassian-icon/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/atlassian-logo/icon.js",
   "module": "../dist/esm/atlassian-logo/icon.js",
   "module:es2019": "../dist/es2019/atlassian-logo/icon.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/atlassian-logo/icon.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/bitbucket-icon/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/bitbucket-logo/icon.js",
   "module": "../dist/esm/bitbucket-logo/icon.js",
   "module:es2019": "../dist/es2019/bitbucket-logo/icon.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/bitbucket-logo/icon.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/confluence-icon/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/confluence-logo/icon.js",
   "module": "../dist/esm/confluence-logo/icon.js",
   "module:es2019": "../dist/es2019/confluence-logo/icon.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/confluence-logo/icon.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/constants/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/constants.js",
   "module": "../dist/esm/constants.js",
   "module:es2019": "../dist/es2019/constants.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/constants.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizes = exports.legacyDefaultLogoParams = exports.defaultLogoParams = exports.DefaultProps = void 0;
+exports.legacyDefaultLogoParams = exports.defaultLogoParams = exports.DefaultProps = void 0;
 /**
  * These are the default parameters for LogoProps if the user does not specify values.
  */
@@ -22,14 +22,6 @@ var legacyDefaultLogoParams = exports.legacyDefaultLogoParams = {
  * The props for the <Wrapper /> that takes the svg and turns it into a component.
  */
 
-var sizes = exports.sizes = {
-  xsmall: 16,
-  small: 24,
-  medium: 32,
-  large: 40,
-  xlarge: 48
-};
-
 /**
  * In order to pass linting rules, these props were renamed to be more descriptive i.e. props renamed to LogoProps and
  * defaultParams to defaultLogoParams. However, this is a breaking change as it is a file with public entry points. The code

package/dist/cjs/wrapper.compiled.css

@@ -0,0 +1,15 @@
+._1e0c1o8l{display:inline-block}
+._3se11kw7 >svg{fill:inherit}
+._4t3i1tcg{height:24px}
+._4t3i1ylp{height:40px}
+._4t3i7vkz{height:1pc}
+._4t3ickbl{height:3pc}
+._4t3izwfg{height:2pc}
+._kqswh2mm{position:relative}
+._lswu1xf6{fill:var(--logo-fill)}
+._o5724jg8{white-space:normal}
+._syaz1vry{color:var(--logo-color)}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._vc881r31 stop{stop-color:currentColor}
+._vwz4kb7n{line-height:1}
+._zbji1osq >svg{height:100%}

package/dist/cjs/wrapper.js

@@ -1,85 +1,64 @@
+/* wrapper.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./wrapper.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("@emotion/react");
-var _constants = require("./constants");
 var _excluded = ["label", "svg", "size", "appearance", "iconColor", "textColor", "testId"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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 && {}.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 CSS_VAR_COLOR = '--logo-color';
 var CSS_VAR_FILL = '--logo-fill';
-var baseWrapperStyles = (0, _react.css)({
-  display: 'inline-block',
-  position: 'relative',
-  color: "var(".concat(CSS_VAR_COLOR, ")"),
-  fill: "var(".concat(CSS_VAR_FILL, ")"),
-  lineHeight: 1,
-  userSelect: 'none',
-  whiteSpace: 'normal',
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '> svg': {
-    height: '100%',
-    fill: 'inherit'
-  }
-});
-var stopColorStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  stop: {
-    stopColor: 'currentColor'
-  }
-});
-var sizeStyles = Object.entries(_constants.sizes).reduce(function (acc, _ref) {
-  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-    key = _ref2[0],
-    val = _ref2[1];
-  acc[key] = (0, _react.css)({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: "".concat(val, "px")
-  });
-  return acc;
-}, {});
+var styles = {
+  root: "_1e0c1o8l _kqswh2mm _syaz1vry _lswu1xf6 _vwz4kb7n _uiztglyw _o5724jg8 _zbji1osq _3se11kw7",
+  stop: "_vc881r31",
+  xsmall: "_4t3i7vkz",
+  small: "_4t3i1tcg",
+  medium: "_4t3izwfg",
+  large: "_4t3i1ylp",
+  xlarge: "_4t3ickbl"
+};
 
 /**
  * __Wrapper__
  *
  * An internal component used by `@atlaskit/logo` to render logo SVGs with correct styles.
  */
-var Wrapper = function Wrapper(_ref3) {
-  var _ref4;
-  var label = _ref3.label,
-    svg = _ref3.svg,
-    size = _ref3.size,
-    appearance = _ref3.appearance,
-    iconColor = _ref3.iconColor,
-    textColor = _ref3.textColor,
-    userDefinedTestId = _ref3.testId,
-    rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+var Wrapper = function Wrapper(_ref) {
+  var _ref2;
+  var label = _ref.label,
+    svg = _ref.svg,
+    size = _ref.size,
+    appearance = _ref.appearance,
+    iconColor = _ref.iconColor,
+    textColor = _ref.textColor,
+    userDefinedTestId = _ref.testId,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Only required for old logos with gradients, which set gradient values to `inherit` when no appearance is provided
   var shouldApplyStopColor = appearance === undefined;
   var testId = userDefinedTestId && "".concat(userDefinedTestId, "--wrapper");
-  return (0, _react.jsx)("span", (0, _extends2.default)({
-    css: [baseWrapperStyles, shouldApplyStopColor && stopColorStyles, size && sizeStyles[size]],
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-    style: (_ref4 = {}, (0, _defineProperty2.default)(_ref4, CSS_VAR_COLOR, iconColor), (0, _defineProperty2.default)(_ref4, CSS_VAR_FILL, textColor), _ref4),
+    style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, CSS_VAR_COLOR, iconColor), (0, _defineProperty2.default)(_ref2, CSS_VAR_FILL, textColor), _ref2),
     "aria-label": label ? label : undefined,
     role: label ? 'img' : undefined,
     dangerouslySetInnerHTML: {
       __html: svg
     }
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, rest));
+  }, rest, {
+    className: (0, _runtime.ax)([styles.root, shouldApplyStopColor && styles.stop, size && styles[size]])
+  }));
 };
 var _default = exports.default = Wrapper;

package/dist/es2019/constants.js

@@ -16,14 +16,6 @@ export const legacyDefaultLogoParams = {
  * The props for the <Wrapper /> that takes the svg and turns it into a component.
  */
 
-export const sizes = {
-  xsmall: 16,
-  small: 24,
-  medium: 32,
-  large: 40,
-  xlarge: 48
-};
-
 /**
  * In order to pass linting rules, these props were renamed to be more descriptive i.e. props renamed to LogoProps and
  * defaultParams to defaultLogoParams. However, this is a breaking change as it is a file with public entry points. The code

package/dist/es2019/wrapper.compiled.css

@@ -0,0 +1,15 @@
+._1e0c1o8l{display:inline-block}
+._3se11kw7 >svg{fill:inherit}
+._4t3i1tcg{height:24px}
+._4t3i1ylp{height:40px}
+._4t3i7vkz{height:1pc}
+._4t3ickbl{height:3pc}
+._4t3izwfg{height:2pc}
+._kqswh2mm{position:relative}
+._lswu1xf6{fill:var(--logo-fill)}
+._o5724jg8{white-space:normal}
+._syaz1vry{color:var(--logo-color)}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._vc881r31 stop{stop-color:currentColor}
+._vwz4kb7n{line-height:1}
+._zbji1osq >svg{height:100%}

package/dist/es2019/wrapper.js

@@ -1,41 +1,19 @@
+/* wrapper.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { sizes } from './constants';
+import "./wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 const CSS_VAR_COLOR = '--logo-color';
 const CSS_VAR_FILL = '--logo-fill';
-const baseWrapperStyles = css({
-  display: 'inline-block',
-  position: 'relative',
-  color: `var(${CSS_VAR_COLOR})`,
-  fill: `var(${CSS_VAR_FILL})`,
-  lineHeight: 1,
-  userSelect: 'none',
-  whiteSpace: 'normal',
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '> svg': {
-    height: '100%',
-    fill: 'inherit'
-  }
-});
-const stopColorStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  stop: {
-    stopColor: 'currentColor'
-  }
-});
-const sizeStyles = Object.entries(sizes).reduce((acc, [key, val]) => {
-  acc[key] = css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: `${val}px`
-  });
-  return acc;
-}, {});
+const styles = {
+  root: "_1e0c1o8l _kqswh2mm _syaz1vry _lswu1xf6 _vwz4kb7n _uiztglyw _o5724jg8 _zbji1osq _3se11kw7",
+  stop: "_vc881r31",
+  xsmall: "_4t3i7vkz",
+  small: "_4t3i1tcg",
+  medium: "_4t3izwfg",
+  large: "_4t3i1ylp",
+  xlarge: "_4t3ickbl"
+};
 
 /**
  * __Wrapper__
@@ -55,8 +33,7 @@ const Wrapper = ({
   // Only required for old logos with gradients, which set gradient values to `inherit` when no appearance is provided
   const shouldApplyStopColor = appearance === undefined;
   const testId = userDefinedTestId && `${userDefinedTestId}--wrapper`;
-  return jsx("span", _extends({
-    css: [baseWrapperStyles, shouldApplyStopColor && stopColorStyles, size && sizeStyles[size]],
+  return /*#__PURE__*/React.createElement("span", _extends({
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
@@ -70,6 +47,8 @@ const Wrapper = ({
       __html: svg
     }
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, rest));
+  }, rest, {
+    className: ax([styles.root, shouldApplyStopColor && styles.stop, size && styles[size]])
+  }));
 };
 export default Wrapper;

package/dist/esm/constants.js

@@ -16,14 +16,6 @@ export var legacyDefaultLogoParams = {
  * The props for the <Wrapper /> that takes the svg and turns it into a component.
  */
 
-export var sizes = {
-  xsmall: 16,
-  small: 24,
-  medium: 32,
-  large: 40,
-  xlarge: 48
-};
-
 /**
  * In order to pass linting rules, these props were renamed to be more descriptive i.e. props renamed to LogoProps and
  * defaultParams to defaultLogoParams. However, this is a breaking change as it is a file with public entry points. The code

package/dist/esm/wrapper.compiled.css

@@ -0,0 +1,15 @@
+._1e0c1o8l{display:inline-block}
+._3se11kw7 >svg{fill:inherit}
+._4t3i1tcg{height:24px}
+._4t3i1ylp{height:40px}
+._4t3i7vkz{height:1pc}
+._4t3ickbl{height:3pc}
+._4t3izwfg{height:2pc}
+._kqswh2mm{position:relative}
+._lswu1xf6{fill:var(--logo-fill)}
+._o5724jg8{white-space:normal}
+._syaz1vry{color:var(--logo-color)}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._vc881r31 stop{stop-color:currentColor}
+._vwz4kb7n{line-height:1}
+._zbji1osq >svg{height:100%}

package/dist/esm/wrapper.js

@@ -1,79 +1,54 @@
+/* wrapper.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["label", "svg", "size", "appearance", "iconColor", "textColor", "testId"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { sizes } from './constants';
+import "./wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 var CSS_VAR_COLOR = '--logo-color';
 var CSS_VAR_FILL = '--logo-fill';
-var baseWrapperStyles = css({
-  display: 'inline-block',
-  position: 'relative',
-  color: "var(".concat(CSS_VAR_COLOR, ")"),
-  fill: "var(".concat(CSS_VAR_FILL, ")"),
-  lineHeight: 1,
-  userSelect: 'none',
-  whiteSpace: 'normal',
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '> svg': {
-    height: '100%',
-    fill: 'inherit'
-  }
-});
-var stopColorStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  stop: {
-    stopColor: 'currentColor'
-  }
-});
-var sizeStyles = Object.entries(sizes).reduce(function (acc, _ref) {
-  var _ref2 = _slicedToArray(_ref, 2),
-    key = _ref2[0],
-    val = _ref2[1];
-  acc[key] = css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: "".concat(val, "px")
-  });
-  return acc;
-}, {});
+var styles = {
+  root: "_1e0c1o8l _kqswh2mm _syaz1vry _lswu1xf6 _vwz4kb7n _uiztglyw _o5724jg8 _zbji1osq _3se11kw7",
+  stop: "_vc881r31",
+  xsmall: "_4t3i7vkz",
+  small: "_4t3i1tcg",
+  medium: "_4t3izwfg",
+  large: "_4t3i1ylp",
+  xlarge: "_4t3ickbl"
+};
 
 /**
  * __Wrapper__
  *
  * An internal component used by `@atlaskit/logo` to render logo SVGs with correct styles.
  */
-var Wrapper = function Wrapper(_ref3) {
-  var _ref4;
-  var label = _ref3.label,
-    svg = _ref3.svg,
-    size = _ref3.size,
-    appearance = _ref3.appearance,
-    iconColor = _ref3.iconColor,
-    textColor = _ref3.textColor,
-    userDefinedTestId = _ref3.testId,
-    rest = _objectWithoutProperties(_ref3, _excluded);
+var Wrapper = function Wrapper(_ref) {
+  var _ref2;
+  var label = _ref.label,
+    svg = _ref.svg,
+    size = _ref.size,
+    appearance = _ref.appearance,
+    iconColor = _ref.iconColor,
+    textColor = _ref.textColor,
+    userDefinedTestId = _ref.testId,
+    rest = _objectWithoutProperties(_ref, _excluded);
   // Only required for old logos with gradients, which set gradient values to `inherit` when no appearance is provided
   var shouldApplyStopColor = appearance === undefined;
   var testId = userDefinedTestId && "".concat(userDefinedTestId, "--wrapper");
-  return jsx("span", _extends({
-    css: [baseWrapperStyles, shouldApplyStopColor && stopColorStyles, size && sizeStyles[size]],
+  return /*#__PURE__*/React.createElement("span", _extends({
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-    style: (_ref4 = {}, _defineProperty(_ref4, CSS_VAR_COLOR, iconColor), _defineProperty(_ref4, CSS_VAR_FILL, textColor), _ref4),
+    style: (_ref2 = {}, _defineProperty(_ref2, CSS_VAR_COLOR, iconColor), _defineProperty(_ref2, CSS_VAR_FILL, textColor), _ref2),
     "aria-label": label ? label : undefined,
     role: label ? 'img' : undefined,
     dangerouslySetInnerHTML: {
       __html: svg
     }
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, rest));
+  }, rest, {
+    className: ax([styles.root, shouldApplyStopColor && styles.stop, size && styles[size]])
+  }));
 };
 export default Wrapper;

package/dist/types/constants.d.ts

@@ -14,13 +14,6 @@ export declare const legacyDefaultLogoParams: {
 export type WrapperProps = LogoProps & {
     svg: string;
 };
-export declare const sizes: {
-    readonly xsmall: 16;
-    readonly small: 24;
-    readonly medium: 32;
-    readonly large: 40;
-    readonly xlarge: 48;
-};
 /**
  * In order to pass linting rules, these props were renamed to be more descriptive i.e. props renamed to LogoProps and
  * defaultParams to defaultLogoParams. However, this is a breaking change as it is a file with public entry points. The code

package/dist/types/wrapper.d.ts

@@ -2,12 +2,12 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { type WrapperProps } from './constants';
 /**
  * __Wrapper__
  *
  * An internal component used by `@atlaskit/logo` to render logo SVGs with correct styles.
  */
-declare const Wrapper: ({ label, svg, size, appearance, iconColor, textColor, testId: userDefinedTestId, ...rest }: WrapperProps) => jsx.JSX.Element;
+declare const Wrapper: ({ label, svg, size, appearance, iconColor, textColor, testId: userDefinedTestId, ...rest }: WrapperProps) => JSX.Element;
 export default Wrapper;

package/dist/types-ts4.5/constants.d.ts

@@ -14,13 +14,6 @@ export declare const legacyDefaultLogoParams: {
 export type WrapperProps = LogoProps & {
     svg: string;
 };
-export declare const sizes: {
-    readonly xsmall: 16;
-    readonly small: 24;
-    readonly medium: 32;
-    readonly large: 40;
-    readonly xlarge: 48;
-};
 /**
  * In order to pass linting rules, these props were renamed to be more descriptive i.e. props renamed to LogoProps and
  * defaultParams to defaultLogoParams. However, this is a breaking change as it is a file with public entry points. The code

package/dist/types-ts4.5/wrapper.d.ts

@@ -1,13 +1,13 @@
+/// <reference types="react" />
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { jsx } from '@emotion/react';
 import { type WrapperProps } from './constants';
 /**
  * __Wrapper__
  *
  * An internal component used by `@atlaskit/logo` to render logo SVGs with correct styles.
  */
-declare const Wrapper: ({ label, svg, size, appearance, iconColor, textColor, testId: userDefinedTestId, ...rest }: WrapperProps) => jsx.JSX.Element;
+declare const Wrapper: ({ label, svg, size, appearance, iconColor, textColor, testId: userDefinedTestId, ...rest }: WrapperProps) => JSX.Element;
 export default Wrapper;

package/jira-icon/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/jira-logo/icon.js",
   "module": "../dist/esm/jira-logo/icon.js",
   "module:es2019": "../dist/es2019/jira-logo/icon.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/jira-logo/icon.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/jira-service-management-icon/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/jira-service-management-logo/icon.js",
   "module": "../dist/esm/jira-service-management-logo/icon.js",
   "module:es2019": "../dist/es2019/jira-service-management-logo/icon.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/jira-service-management-logo/icon.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/jira-software-icon/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/jira-software-logo/icon.js",
   "module": "../dist/esm/jira-software-logo/icon.js",
   "module:es2019": "../dist/es2019/jira-software-logo/icon.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/jira-software-logo/icon.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/opsgenie-icon/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/opsgenie-logo/icon.js",
   "module": "../dist/esm/opsgenie-logo/icon.js",
   "module:es2019": "../dist/es2019/opsgenie-logo/icon.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/opsgenie-logo/icon.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/logo",
-	"version": "14.3.4",
+	"version": "15.0.0",
 	"description": "A logo is a visual representation of a brand or product. It can be a word or an image, or a combination of both.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -12,28 +12,32 @@
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
 	"types": "dist/types/index.d.ts",
-	"sideEffects": false,
+	"sideEffects": [
+		"**/*.compiled.css"
+	],
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
 		"team": "Design System Team",
 		"website": {
 			"name": "Logo",
-			"category": "Components"
+			"category": "Images and icons"
 		},
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/ds-lib": "^3.1.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.0.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1"
+		"@compiled/css": "^0.17.1",
+		"@compiled/react": "^0.18.1"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
 	},
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
+		"@af/integration-testing": "*",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@testing-library/react": "^12.1.5",

package/statuspage-icon/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/statuspage-logo/icon.js",
   "module": "../dist/esm/statuspage-logo/icon.js",
   "module:es2019": "../dist/es2019/statuspage-logo/icon.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/statuspage-logo/icon.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/trello-icon/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/trello-logo/icon.js",
   "module": "../dist/esm/trello-logo/icon.js",
   "module:es2019": "../dist/es2019/trello-logo/icon.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/trello-logo/icon.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {