@atlaskit/logo 14.3.5 → 15.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/logo
 
+## 15.1.0
+
+### Minor Changes
+
+- [#174515](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/174515)
+  [`e948b27b6716a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e948b27b6716a) -
+  [ux] Add Focus product 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

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/focus-logo/icon.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FocusIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _tokens = require("@atlaskit/tokens");
+var _constants = require("../constants");
+var _utils = require("../utils");
+var _wrapper = _interopRequireDefault(require("../wrapper"));
+/* eslint-disable max-len */
+
+var svg = function svg(_ref, colorMode) {
+  var appearance = _ref.appearance,
+    iconColor = _ref.iconColor;
+  var colors = {
+    iconColor: iconColor
+  };
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance, colorMode);
+  }
+  return "<svg fill=\"none\" height=\"32\" viewBox=\"0 0 48 48\" focusable=\"false\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path fill=\"".concat(colors.iconColor, "\" d=\"M45.4277 24.5018C41.4108 20.4849 34.8821 20.5276 30.908 24.5018L27.5636 27.8462C25.717 29.6927 22.7177 29.6927 20.8712 27.8462L18.0925 25.0675L10.8309 32.3291L13.6096 35.1078C19.4658 40.9641 28.9654 40.9641 34.8216 35.1078L45.4277 24.5018ZM3 23.5018C7.01684 27.5186 13.4637 27.5578 17.4805 23.5409L20.8676 20.1538C22.7142 18.3073 25.7135 18.3073 27.56 20.1538L30.3387 22.9325L37.6003 15.6709L34.8216 12.8922C28.9654 7.03593 19.4658 7.03593 13.6096 12.8922L3.00356 23.4982L3 23.5018Z\"/>\n\t\t</svg>\n\t\t");
+};
+
+/**
+ * __Focus icon__
+ *
+ * The Focus icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+var FocusIcon = exports.FocusIcon = function FocusIcon(_ref2) {
+  var appearance = _ref2.appearance,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? 'Focus' : _ref2$label,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
+    testId = _ref2.testId,
+    _ref2$iconColor = _ref2.iconColor,
+    iconColor = _ref2$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref2$iconColor,
+    _ref2$textColor = _ref2.textColor,
+    textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
+  return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
+    appearance: appearance,
+    label: label,
+    svg: svg({
+      appearance: appearance,
+      iconColor: iconColor
+    }, colorMode),
+    iconColor: iconColor,
+    size: size,
+    testId: testId,
+    textColor: textColor
+  });
+};

package/dist/cjs/focus-logo/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FocusIcon", {
+  enumerable: true,
+  get: function get() {
+    return _icon.FocusIcon;
+  }
+});
+Object.defineProperty(exports, "FocusLogo", {
+  enumerable: true,
+  get: function get() {
+    return _logo.FocusLogo;
+  }
+});
+var _icon = require("./icon");
+var _logo = require("./logo");

package/dist/cjs/focus-logo/logo.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FocusLogo = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _tokens = require("@atlaskit/tokens");
+var _constants = require("../constants");
+var _utils = require("../utils");
+var _wrapper = _interopRequireDefault(require("../wrapper"));
+/* eslint-disable max-len */
+
+var svg = function svg(_ref, colorMode) {
+  var appearance = _ref.appearance,
+    iconColor = _ref.iconColor,
+    textColor = _ref.textColor;
+  var colors = {
+    iconColor: iconColor,
+    textColor: textColor
+  };
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance, colorMode);
+  }
+  return "<svg fill=\"none\" height=\"32\" viewBox=\"0 0 168 48\" focusable=\"false\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path fill=\"".concat(colors.iconColor, "\" d=\"M42.4277 24.5018C38.4108 20.4849 31.8821 20.5276 27.908 24.5018L24.5636 27.8462C22.717 29.6927 19.7177 29.6927 17.8712 27.8462L15.0925 25.0675L7.83088 32.3291L10.6096 35.1078C16.4658 40.9641 25.9654 40.9641 31.8216 35.1078L42.4277 24.5018ZM0 23.5018C4.01684 27.5186 10.4637 27.5578 14.4805 23.5409L17.8676 20.1538C19.7142 18.3073 22.7135 18.3073 24.56 20.1538L27.3387 22.9325L34.6003 15.6709L31.8216 12.8922C25.9654 7.03593 16.4658 7.03593 10.6096 12.8922L0.00355592 23.4982L0 23.5018Z\"/>\n\t\t<path fill=\"").concat(colors.textColor, "\" d=\"M167.405 31.746C167.405 35.564 164.921 38.462 158.757 38.462C155.307 38.462 152.501 37.68 150.753 36.76V32.574C152.731 33.724 156.043 34.828 158.941 34.828C161.977 34.828 163.541 33.586 163.541 31.792C163.541 30.044 162.207 29.032 157.837 27.974C152.731 26.732 150.569 24.754 150.569 20.982C150.569 16.98 153.651 14.542 158.895 14.542C161.885 14.542 164.599 15.278 166.301 16.198V20.292C163.541 18.912 161.287 18.176 158.849 18.176C155.951 18.176 154.387 19.188 154.387 20.982C154.387 22.592 155.491 23.604 159.723 24.616C164.829 25.858 167.405 27.744 167.405 31.746Z\"/>\n\t\t<path fill=\"").concat(colors.textColor, "\" d=\"M126.009 28.48V15.002H129.965V28.894C129.965 33.034 131.621 34.874 135.393 34.874C139.073 34.874 141.603 32.436 141.603 27.79V15.002H145.559V38.002H141.603V34.23C140.131 36.944 137.417 38.462 134.335 38.462C129.045 38.462 126.009 34.828 126.009 28.48Z\"/>\n\t\t<path fill=\"").concat(colors.textColor, "\" d=\"M121.953 33.862V37.404C120.573 38.14 118.457 38.462 116.341 38.462C108.153 38.462 104.335 33.494 104.335 26.456C104.335 19.51 108.153 14.542 116.341 14.542C118.411 14.542 120.021 14.818 121.815 15.646V19.326C120.343 18.636 118.779 18.222 116.617 18.222C110.637 18.222 108.199 21.994 108.199 26.456C108.199 30.918 110.683 34.69 116.709 34.69C119.055 34.69 120.527 34.368 121.953 33.862Z\"/>\n\t\t<path fill=\"").concat(colors.textColor, "\" d=\"M90.2616 38.462C83.3616 38.462 79.3136 33.356 79.3136 26.456C79.3136 19.556 83.3616 14.542 90.2616 14.542C97.1156 14.542 101.118 19.556 101.118 26.456C101.118 33.356 97.1156 38.462 90.2616 38.462ZM90.2616 18.222C85.3396 18.222 83.1776 22.086 83.1776 26.456C83.1776 30.826 85.3396 34.782 90.2616 34.782C95.1376 34.782 97.2536 30.826 97.2536 26.456C97.2536 22.086 95.1376 18.222 90.2616 18.222Z\"/>\n\t\t<path fill=\"").concat(colors.textColor, "\" d=\"M75.298 26.732H61.59V38.002H57.45V7.78003H76.862V11.736H61.59V22.776H75.298V26.732Z\"/>\n\t\t</svg>\n\t\t");
+};
+
+/**
+ * __Focus logo__
+ *
+ * The Focus logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+var FocusLogo = exports.FocusLogo = function FocusLogo(_ref2) {
+  var appearance = _ref2.appearance,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? 'Focus' : _ref2$label,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
+    testId = _ref2.testId,
+    _ref2$iconColor = _ref2.iconColor,
+    iconColor = _ref2$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref2$iconColor,
+    _ref2$textColor = _ref2.textColor,
+    textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
+  return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
+    appearance: appearance,
+    label: label,
+    iconColor: iconColor,
+    size: size,
+    svg: svg({
+      appearance: appearance,
+      iconColor: iconColor,
+      textColor: textColor
+    }, colorMode),
+    testId: testId,
+    textColor: textColor
+  });
+};

package/dist/cjs/index.js

@@ -129,6 +129,18 @@ Object.defineProperty(exports, "ConfluenceLogo", {
     return _confluenceLogo.ConfluenceLogo;
   }
 });
+Object.defineProperty(exports, "FocusIcon", {
+  enumerable: true,
+  get: function get() {
+    return _focusLogo.FocusIcon;
+  }
+});
+Object.defineProperty(exports, "FocusLogo", {
+  enumerable: true,
+  get: function get() {
+    return _focusLogo.FocusLogo;
+  }
+});
 Object.defineProperty(exports, "GuardIcon", {
   enumerable: true,
   get: function get() {
@@ -319,6 +331,7 @@ var _atlasLogo = require("./atlas-logo");
 var _atlassianMarketplaceLogo = require("./atlassian-marketplace-logo");
 var _rovoLogo = require("./rovo-logo");
 var _guardLogo = require("./guard-logo");
+var _focusLogo = require("./focus-logo");
 var _atlassianAccessLogo = require("./atlassian-access-logo");
 var _atlassianAdministrationLogo = require("./atlassian-administration-logo");
 var _atlassianAdminLogo = require("./atlassian-admin-logo");

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/focus-logo/icon.js

@@ -0,0 +1,55 @@
+/* eslint-disable max-len */
+import React from 'react';
+import { useThemeObserver } from '@atlaskit/tokens';
+import { defaultLogoParams } from '../constants';
+import { getColorsFromAppearance } from '../utils';
+import Wrapper from '../wrapper';
+const svg = ({
+  appearance,
+  iconColor
+}, colorMode) => {
+  let colors = {
+    iconColor
+  };
+  if (appearance) {
+    colors = getColorsFromAppearance(appearance, colorMode);
+  }
+  return `<svg fill="none" height="32" viewBox="0 0 48 48" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+		<path fill="${colors.iconColor}" d="M45.4277 24.5018C41.4108 20.4849 34.8821 20.5276 30.908 24.5018L27.5636 27.8462C25.717 29.6927 22.7177 29.6927 20.8712 27.8462L18.0925 25.0675L10.8309 32.3291L13.6096 35.1078C19.4658 40.9641 28.9654 40.9641 34.8216 35.1078L45.4277 24.5018ZM3 23.5018C7.01684 27.5186 13.4637 27.5578 17.4805 23.5409L20.8676 20.1538C22.7142 18.3073 25.7135 18.3073 27.56 20.1538L30.3387 22.9325L37.6003 15.6709L34.8216 12.8922C28.9654 7.03593 19.4658 7.03593 13.6096 12.8922L3.00356 23.4982L3 23.5018Z"/>
+		</svg>
+		`;
+};
+
+/**
+ * __Focus icon__
+ *
+ * The Focus icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export const FocusIcon = ({
+  appearance,
+  label = 'Focus',
+  size = defaultLogoParams.size,
+  testId,
+  iconColor = defaultLogoParams.iconColor,
+  textColor = defaultLogoParams.textColor
+}) => {
+  const {
+    colorMode
+  } = useThemeObserver();
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    appearance: appearance,
+    label: label,
+    svg: svg({
+      appearance,
+      iconColor
+    }, colorMode),
+    iconColor: iconColor,
+    size: size,
+    testId: testId,
+    textColor: textColor
+  });
+};

package/dist/es2019/focus-logo/index.js

@@ -0,0 +1,2 @@
+export { FocusIcon } from './icon';
+export { FocusLogo } from './logo';

package/dist/es2019/focus-logo/logo.js

@@ -0,0 +1,63 @@
+/* eslint-disable max-len */
+import React from 'react';
+import { useThemeObserver } from '@atlaskit/tokens';
+import { defaultLogoParams } from '../constants';
+import { getColorsFromAppearance } from '../utils';
+import Wrapper from '../wrapper';
+const svg = ({
+  appearance,
+  iconColor,
+  textColor
+}, colorMode) => {
+  let colors = {
+    iconColor,
+    textColor
+  };
+  if (appearance) {
+    colors = getColorsFromAppearance(appearance, colorMode);
+  }
+  return `<svg fill="none" height="32" viewBox="0 0 168 48" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+		<path fill="${colors.iconColor}" d="M42.4277 24.5018C38.4108 20.4849 31.8821 20.5276 27.908 24.5018L24.5636 27.8462C22.717 29.6927 19.7177 29.6927 17.8712 27.8462L15.0925 25.0675L7.83088 32.3291L10.6096 35.1078C16.4658 40.9641 25.9654 40.9641 31.8216 35.1078L42.4277 24.5018ZM0 23.5018C4.01684 27.5186 10.4637 27.5578 14.4805 23.5409L17.8676 20.1538C19.7142 18.3073 22.7135 18.3073 24.56 20.1538L27.3387 22.9325L34.6003 15.6709L31.8216 12.8922C25.9654 7.03593 16.4658 7.03593 10.6096 12.8922L0.00355592 23.4982L0 23.5018Z"/>
+		<path fill="${colors.textColor}" d="M167.405 31.746C167.405 35.564 164.921 38.462 158.757 38.462C155.307 38.462 152.501 37.68 150.753 36.76V32.574C152.731 33.724 156.043 34.828 158.941 34.828C161.977 34.828 163.541 33.586 163.541 31.792C163.541 30.044 162.207 29.032 157.837 27.974C152.731 26.732 150.569 24.754 150.569 20.982C150.569 16.98 153.651 14.542 158.895 14.542C161.885 14.542 164.599 15.278 166.301 16.198V20.292C163.541 18.912 161.287 18.176 158.849 18.176C155.951 18.176 154.387 19.188 154.387 20.982C154.387 22.592 155.491 23.604 159.723 24.616C164.829 25.858 167.405 27.744 167.405 31.746Z"/>
+		<path fill="${colors.textColor}" d="M126.009 28.48V15.002H129.965V28.894C129.965 33.034 131.621 34.874 135.393 34.874C139.073 34.874 141.603 32.436 141.603 27.79V15.002H145.559V38.002H141.603V34.23C140.131 36.944 137.417 38.462 134.335 38.462C129.045 38.462 126.009 34.828 126.009 28.48Z"/>
+		<path fill="${colors.textColor}" d="M121.953 33.862V37.404C120.573 38.14 118.457 38.462 116.341 38.462C108.153 38.462 104.335 33.494 104.335 26.456C104.335 19.51 108.153 14.542 116.341 14.542C118.411 14.542 120.021 14.818 121.815 15.646V19.326C120.343 18.636 118.779 18.222 116.617 18.222C110.637 18.222 108.199 21.994 108.199 26.456C108.199 30.918 110.683 34.69 116.709 34.69C119.055 34.69 120.527 34.368 121.953 33.862Z"/>
+		<path fill="${colors.textColor}" d="M90.2616 38.462C83.3616 38.462 79.3136 33.356 79.3136 26.456C79.3136 19.556 83.3616 14.542 90.2616 14.542C97.1156 14.542 101.118 19.556 101.118 26.456C101.118 33.356 97.1156 38.462 90.2616 38.462ZM90.2616 18.222C85.3396 18.222 83.1776 22.086 83.1776 26.456C83.1776 30.826 85.3396 34.782 90.2616 34.782C95.1376 34.782 97.2536 30.826 97.2536 26.456C97.2536 22.086 95.1376 18.222 90.2616 18.222Z"/>
+		<path fill="${colors.textColor}" d="M75.298 26.732H61.59V38.002H57.45V7.78003H76.862V11.736H61.59V22.776H75.298V26.732Z"/>
+		</svg>
+		`;
+};
+
+/**
+ * __Focus logo__
+ *
+ * The Focus logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export const FocusLogo = ({
+  appearance,
+  label = 'Focus',
+  size = defaultLogoParams.size,
+  testId,
+  iconColor = defaultLogoParams.iconColor,
+  textColor = defaultLogoParams.textColor
+}) => {
+  const {
+    colorMode
+  } = useThemeObserver();
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    appearance: appearance,
+    label: label,
+    iconColor: iconColor,
+    size: size,
+    svg: svg({
+      appearance,
+      iconColor,
+      textColor
+    }, colorMode),
+    testId: testId,
+    textColor: textColor
+  });
+};

package/dist/es2019/index.js

@@ -20,6 +20,7 @@ export { AtlasIcon, AtlasLogo } from './atlas-logo';
 export { AtlassianMarketplaceIcon, AtlassianMarketplaceLogo } from './atlassian-marketplace-logo';
 export { RovoIcon, RovoLogo } from './rovo-logo';
 export { GuardIcon, GuardLogo } from './guard-logo';
+export { FocusIcon, FocusLogo } from './focus-logo';
 export { AtlassianAccessIcon, AtlassianAccessLogo } from './atlassian-access-logo';
 export { AtlassianAdministrationIcon, AtlassianAdministrationLogo } from './atlassian-administration-logo';
 export { AtlassianAdminIcon, AtlassianAdminLogo } from './atlassian-admin-logo';

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/focus-logo/icon.js

@@ -0,0 +1,53 @@
+/* eslint-disable max-len */
+import React from 'react';
+import { useThemeObserver } from '@atlaskit/tokens';
+import { defaultLogoParams } from '../constants';
+import { getColorsFromAppearance } from '../utils';
+import Wrapper from '../wrapper';
+var svg = function svg(_ref, colorMode) {
+  var appearance = _ref.appearance,
+    iconColor = _ref.iconColor;
+  var colors = {
+    iconColor: iconColor
+  };
+  if (appearance) {
+    colors = getColorsFromAppearance(appearance, colorMode);
+  }
+  return "<svg fill=\"none\" height=\"32\" viewBox=\"0 0 48 48\" focusable=\"false\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path fill=\"".concat(colors.iconColor, "\" d=\"M45.4277 24.5018C41.4108 20.4849 34.8821 20.5276 30.908 24.5018L27.5636 27.8462C25.717 29.6927 22.7177 29.6927 20.8712 27.8462L18.0925 25.0675L10.8309 32.3291L13.6096 35.1078C19.4658 40.9641 28.9654 40.9641 34.8216 35.1078L45.4277 24.5018ZM3 23.5018C7.01684 27.5186 13.4637 27.5578 17.4805 23.5409L20.8676 20.1538C22.7142 18.3073 25.7135 18.3073 27.56 20.1538L30.3387 22.9325L37.6003 15.6709L34.8216 12.8922C28.9654 7.03593 19.4658 7.03593 13.6096 12.8922L3.00356 23.4982L3 23.5018Z\"/>\n\t\t</svg>\n\t\t");
+};
+
+/**
+ * __Focus icon__
+ *
+ * The Focus icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export var FocusIcon = function FocusIcon(_ref2) {
+  var appearance = _ref2.appearance,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? 'Focus' : _ref2$label,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? defaultLogoParams.size : _ref2$size,
+    testId = _ref2.testId,
+    _ref2$iconColor = _ref2.iconColor,
+    iconColor = _ref2$iconColor === void 0 ? defaultLogoParams.iconColor : _ref2$iconColor,
+    _ref2$textColor = _ref2.textColor,
+    textColor = _ref2$textColor === void 0 ? defaultLogoParams.textColor : _ref2$textColor;
+  var _useThemeObserver = useThemeObserver(),
+    colorMode = _useThemeObserver.colorMode;
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    appearance: appearance,
+    label: label,
+    svg: svg({
+      appearance: appearance,
+      iconColor: iconColor
+    }, colorMode),
+    iconColor: iconColor,
+    size: size,
+    testId: testId,
+    textColor: textColor
+  });
+};

package/dist/esm/focus-logo/index.js

@@ -0,0 +1,2 @@
+export { FocusIcon } from './icon';
+export { FocusLogo } from './logo';

package/dist/esm/focus-logo/logo.js

@@ -0,0 +1,56 @@
+/* eslint-disable max-len */
+import React from 'react';
+import { useThemeObserver } from '@atlaskit/tokens';
+import { defaultLogoParams } from '../constants';
+import { getColorsFromAppearance } from '../utils';
+import Wrapper from '../wrapper';
+var svg = function svg(_ref, colorMode) {
+  var appearance = _ref.appearance,
+    iconColor = _ref.iconColor,
+    textColor = _ref.textColor;
+  var colors = {
+    iconColor: iconColor,
+    textColor: textColor
+  };
+  if (appearance) {
+    colors = getColorsFromAppearance(appearance, colorMode);
+  }
+  return "<svg fill=\"none\" height=\"32\" viewBox=\"0 0 168 48\" focusable=\"false\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path fill=\"".concat(colors.iconColor, "\" d=\"M42.4277 24.5018C38.4108 20.4849 31.8821 20.5276 27.908 24.5018L24.5636 27.8462C22.717 29.6927 19.7177 29.6927 17.8712 27.8462L15.0925 25.0675L7.83088 32.3291L10.6096 35.1078C16.4658 40.9641 25.9654 40.9641 31.8216 35.1078L42.4277 24.5018ZM0 23.5018C4.01684 27.5186 10.4637 27.5578 14.4805 23.5409L17.8676 20.1538C19.7142 18.3073 22.7135 18.3073 24.56 20.1538L27.3387 22.9325L34.6003 15.6709L31.8216 12.8922C25.9654 7.03593 16.4658 7.03593 10.6096 12.8922L0.00355592 23.4982L0 23.5018Z\"/>\n\t\t<path fill=\"").concat(colors.textColor, "\" d=\"M167.405 31.746C167.405 35.564 164.921 38.462 158.757 38.462C155.307 38.462 152.501 37.68 150.753 36.76V32.574C152.731 33.724 156.043 34.828 158.941 34.828C161.977 34.828 163.541 33.586 163.541 31.792C163.541 30.044 162.207 29.032 157.837 27.974C152.731 26.732 150.569 24.754 150.569 20.982C150.569 16.98 153.651 14.542 158.895 14.542C161.885 14.542 164.599 15.278 166.301 16.198V20.292C163.541 18.912 161.287 18.176 158.849 18.176C155.951 18.176 154.387 19.188 154.387 20.982C154.387 22.592 155.491 23.604 159.723 24.616C164.829 25.858 167.405 27.744 167.405 31.746Z\"/>\n\t\t<path fill=\"").concat(colors.textColor, "\" d=\"M126.009 28.48V15.002H129.965V28.894C129.965 33.034 131.621 34.874 135.393 34.874C139.073 34.874 141.603 32.436 141.603 27.79V15.002H145.559V38.002H141.603V34.23C140.131 36.944 137.417 38.462 134.335 38.462C129.045 38.462 126.009 34.828 126.009 28.48Z\"/>\n\t\t<path fill=\"").concat(colors.textColor, "\" d=\"M121.953 33.862V37.404C120.573 38.14 118.457 38.462 116.341 38.462C108.153 38.462 104.335 33.494 104.335 26.456C104.335 19.51 108.153 14.542 116.341 14.542C118.411 14.542 120.021 14.818 121.815 15.646V19.326C120.343 18.636 118.779 18.222 116.617 18.222C110.637 18.222 108.199 21.994 108.199 26.456C108.199 30.918 110.683 34.69 116.709 34.69C119.055 34.69 120.527 34.368 121.953 33.862Z\"/>\n\t\t<path fill=\"").concat(colors.textColor, "\" d=\"M90.2616 38.462C83.3616 38.462 79.3136 33.356 79.3136 26.456C79.3136 19.556 83.3616 14.542 90.2616 14.542C97.1156 14.542 101.118 19.556 101.118 26.456C101.118 33.356 97.1156 38.462 90.2616 38.462ZM90.2616 18.222C85.3396 18.222 83.1776 22.086 83.1776 26.456C83.1776 30.826 85.3396 34.782 90.2616 34.782C95.1376 34.782 97.2536 30.826 97.2536 26.456C97.2536 22.086 95.1376 18.222 90.2616 18.222Z\"/>\n\t\t<path fill=\"").concat(colors.textColor, "\" d=\"M75.298 26.732H61.59V38.002H57.45V7.78003H76.862V11.736H61.59V22.776H75.298V26.732Z\"/>\n\t\t</svg>\n\t\t");
+};
+
+/**
+ * __Focus logo__
+ *
+ * The Focus logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export var FocusLogo = function FocusLogo(_ref2) {
+  var appearance = _ref2.appearance,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? 'Focus' : _ref2$label,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? defaultLogoParams.size : _ref2$size,
+    testId = _ref2.testId,
+    _ref2$iconColor = _ref2.iconColor,
+    iconColor = _ref2$iconColor === void 0 ? defaultLogoParams.iconColor : _ref2$iconColor,
+    _ref2$textColor = _ref2.textColor,
+    textColor = _ref2$textColor === void 0 ? defaultLogoParams.textColor : _ref2$textColor;
+  var _useThemeObserver = useThemeObserver(),
+    colorMode = _useThemeObserver.colorMode;
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    appearance: appearance,
+    label: label,
+    iconColor: iconColor,
+    size: size,
+    svg: svg({
+      appearance: appearance,
+      iconColor: iconColor,
+      textColor: textColor
+    }, colorMode),
+    testId: testId,
+    textColor: textColor
+  });
+};

package/dist/esm/index.js

@@ -20,6 +20,7 @@ export { AtlasIcon, AtlasLogo } from './atlas-logo';
 export { AtlassianMarketplaceIcon, AtlassianMarketplaceLogo } from './atlassian-marketplace-logo';
 export { RovoIcon, RovoLogo } from './rovo-logo';
 export { GuardIcon, GuardLogo } from './guard-logo';
+export { FocusIcon, FocusLogo } from './focus-logo';
 export { AtlassianAccessIcon, AtlassianAccessLogo } from './atlassian-access-logo';
 export { AtlassianAdministrationIcon, AtlassianAdministrationLogo } from './atlassian-administration-logo';
 export { AtlassianAdminIcon, AtlassianAdminLogo } from './atlassian-admin-logo';

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/focus-logo/icon.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { LogoProps } from '../types';
+/**
+ * __Focus icon__
+ *
+ * The Focus icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const FocusIcon: ({ appearance, label, size, testId, iconColor, textColor, }: LogoProps) => JSX.Element;

package/dist/types/focus-logo/index.d.ts

@@ -0,0 +1,2 @@
+export { FocusIcon } from './icon';
+export { FocusLogo } from './logo';

package/dist/types/focus-logo/logo.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { LogoProps } from '../types';
+/**
+ * __Focus logo__
+ *
+ * The Focus logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const FocusLogo: ({ appearance, label, size, testId, iconColor, textColor, }: LogoProps) => JSX.Element;

package/dist/types/index.d.ts

@@ -21,6 +21,7 @@ export { AtlasIcon, AtlasLogo } from './atlas-logo';
 export { AtlassianMarketplaceIcon, AtlassianMarketplaceLogo } from './atlassian-marketplace-logo';
 export { RovoIcon, RovoLogo } from './rovo-logo';
 export { GuardIcon, GuardLogo } from './guard-logo';
+export { FocusIcon, FocusLogo } from './focus-logo';
 export { AtlassianAccessIcon, AtlassianAccessLogo } from './atlassian-access-logo';
 export { AtlassianAdministrationIcon, AtlassianAdministrationLogo, } from './atlassian-administration-logo';
 export { AtlassianAdminIcon, AtlassianAdminLogo } from './atlassian-admin-logo';

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/focus-logo/icon.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { LogoProps } from '../types';
+/**
+ * __Focus icon__
+ *
+ * The Focus icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const FocusIcon: ({ appearance, label, size, testId, iconColor, textColor, }: LogoProps) => JSX.Element;

package/dist/types-ts4.5/focus-logo/index.d.ts

@@ -0,0 +1,2 @@
+export { FocusIcon } from './icon';
+export { FocusLogo } from './logo';

package/dist/types-ts4.5/focus-logo/logo.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { LogoProps } from '../types';
+/**
+ * __Focus logo__
+ *
+ * The Focus logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const FocusLogo: ({ appearance, label, size, testId, iconColor, textColor, }: LogoProps) => JSX.Element;

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

@@ -21,6 +21,7 @@ export { AtlasIcon, AtlasLogo } from './atlas-logo';
 export { AtlassianMarketplaceIcon, AtlassianMarketplaceLogo } from './atlassian-marketplace-logo';
 export { RovoIcon, RovoLogo } from './rovo-logo';
 export { GuardIcon, GuardLogo } from './guard-logo';
+export { FocusIcon, FocusLogo } from './focus-logo';
 export { AtlassianAccessIcon, AtlassianAccessLogo } from './atlassian-access-logo';
 export { AtlassianAdministrationIcon, AtlassianAdministrationLogo, } from './atlassian-administration-logo';
 export { AtlassianAdminIcon, AtlassianAdminLogo } from './atlassian-admin-logo';

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/logo",
-	"version": "14.3.5",
+	"version": "15.1.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/"
@@ -20,22 +20,24 @@
 		"team": "Design System Team",
 		"website": {
 			"name": "Logo",
-			"category": "Components"
+			"category": "Images and icons"
 		},
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/ds-lib": "^3.2.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.2.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",