@atlaskit/tokens 1.2.4 → 1.2.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tokens
 
+## 1.2.6
+
+### Patch Changes
+
+- [`cfe48bb7ece`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cfe48bb7ece) - Internal change only. Replace usages of Inline/Stack with stable version from `@atlaskit/primitives`.
+
+## 1.2.5
+
+### Patch Changes
+
+- [`d1adc718599`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d1adc718599) - Added token-order entry-point, exported ActiveTokens type.
+
 ## 1.2.4
 
 ### Patch Changes

package/dist/cjs/entry-points/token-order.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "tokenOrder", {
+  enumerable: true,
+  get: function get() {
+    return _tokenOrder.tokenOrder;
+  }
+});
+var _tokenOrder = require("../utils/token-order");

package/dist/cjs/get-token-value.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var name = "@atlaskit/tokens";
-var version = "1.2.4";
+var version = "1.2.6";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/cjs/get-token.js

@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 var name = "@atlaskit/tokens";
-var version = "1.2.4";
+var version = "1.2.6";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

package/dist/cjs/utils/color-detection.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.hexToRGBAValues = exports.hexToRGBA = exports.getTextColorForBackground = exports.getLuminance = exports.getBoxShadow = exports.getBorderForBackground = void 0;
-var _index = require("../index");
+exports.hexToRGBAValues = exports.getBoxShadow = void 0;
 var hexToRGBAValues = function hexToRGBAValues(hex) {
   var hexColor = hex.replace('#', '');
   return {
@@ -14,95 +13,23 @@ var hexToRGBAValues = function hexToRGBAValues(hex) {
     a: parseFloat((parseInt(hexColor.slice(6, 8), 16) / 255).toFixed(2))
   };
 };
-exports.hexToRGBAValues = hexToRGBAValues;
-var hexToRGBA = function hexToRGBA(hex) {
-  var _hexToRGBAValues = hexToRGBAValues(hex),
-    r = _hexToRGBAValues.r,
-    g = _hexToRGBAValues.g,
-    b = _hexToRGBAValues.b,
-    a = _hexToRGBAValues.a;
-  return "rgb".concat(a ? 'a' : '', "(").concat(r, ",").concat(g, ",").concat(b).concat(a ? ",".concat(a) : '', ")");
-};
-exports.hexToRGBA = hexToRGBA;
-var getLuminance = function getLuminance(_ref) {
-  var r = _ref.r,
-    g = _ref.g,
-    b = _ref.b;
-  return (r * 299 + g * 587 + b * 114) / 1000;
-};
-
-/**
- * Returns an accessible hard-coded text color based on the color contrast with
- * the background.
- *
- * @param hex - The Hex color code of the background
- * @param [opts.hardcodedSurface] - If set, a design token will be returned instead
- * of a hard-coded color. This is to support more transparent backgrounds
- * to allow the text to invert colors depending on the current theme's surface color.
- */
-exports.getLuminance = getLuminance;
-var getTextColorForBackground = function getTextColorForBackground(hex, opts) {
-  var _hexToRGBAValues2 = hexToRGBAValues(hex),
-    r = _hexToRGBAValues2.r,
-    g = _hexToRGBAValues2.g,
-    b = _hexToRGBAValues2.b,
-    a = _hexToRGBAValues2.a;
-  var lum = getLuminance({
-    r: r,
-    g: g,
-    b: b
-  });
-  var alphaLimit = 0.42;
-  var alphaConditionsPerSurface = {
-    light: a < alphaLimit,
-    dark: a > alphaLimit
-  };
-  var alphaLimitExceeded = (opts === null || opts === void 0 ? void 0 : opts.hardcodedSurface) && alphaConditionsPerSurface[opts.hardcodedSurface];
-  if (!(opts !== null && opts !== void 0 && opts.hardcodedSurface) && a < alphaLimit) {
-    // This color is transparent, so the text will mainly cast onto the surface behind.
-    // Needs to use tokens otherwise Dark mode would cause black text on black surface
-    return (0, _index.token)('color.text', 'black');
-  }
-  return lum > 150 && !a || a && alphaLimitExceeded ? 'black' : 'white';
-};
-
-/**
- * Returns a border if determined to be required based on the color contrast with
- * the background.
- *
- * @param hex - The Hex color code of the background
- */
-exports.getTextColorForBackground = getTextColorForBackground;
-var getBorderForBackground = function getBorderForBackground(hex) {
-  var _hexToRGBAValues3 = hexToRGBAValues(hex),
-    r = _hexToRGBAValues3.r,
-    g = _hexToRGBAValues3.g,
-    b = _hexToRGBAValues3.b,
-    a = _hexToRGBAValues3.a;
-  var lum = getLuminance({
-    r: r,
-    g: g,
-    b: b
-  });
-  return lum > 240 || a < 0.2 ? "1px solid ".concat((0, _index.token)('color.border', '#091E4224')) : undefined;
-};
 
 /**
  * Returns a box shadow formatted for CSS from a ShadowToken raw value.
  *
  * @param rawShadow - ShadowToken raw value
  */
-exports.getBorderForBackground = getBorderForBackground;
+exports.hexToRGBAValues = hexToRGBAValues;
 var getBoxShadow = function getBoxShadow(rawShadow) {
-  return rawShadow.map(function (_ref2) {
-    var radius = _ref2.radius,
-      offset = _ref2.offset,
-      color = _ref2.color,
-      opacity = _ref2.opacity;
-    var _hexToRGBAValues4 = hexToRGBAValues(color),
-      r = _hexToRGBAValues4.r,
-      g = _hexToRGBAValues4.g,
-      b = _hexToRGBAValues4.b;
+  return rawShadow.map(function (_ref) {
+    var radius = _ref.radius,
+      offset = _ref.offset,
+      color = _ref.color,
+      opacity = _ref.opacity;
+    var _hexToRGBAValues = hexToRGBAValues(color),
+      r = _hexToRGBAValues.r,
+      g = _hexToRGBAValues.g,
+      b = _hexToRGBAValues.b;
     return "".concat(offset.x, "px ").concat(offset.y, "px ").concat(radius, "px rgba(").concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
   }).join(',');
 };

package/dist/cjs/utils/token-order.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tokenOrder = void 0;
+/**
+ * Create specific rules for ordering tokens based on their root path and subpath.
+ */
+var tokenOrder = [{
+  path: 'color',
+  subpaths: ['text', 'link', 'icon', 'border', 'background', 'blanket', 'interaction', 'skeleton', 'chart',
+  // deleted ↓
+  'accent', 'iconBorder', 'overlay']
+}, {
+  path: 'elevation',
+  subpaths: ['surface', 'shadow']
+}, {
+  path: 'opacity',
+  subpaths: []
+}, {
+  path: 'shadow',
+  subpaths: ['card', 'overlay']
+},
+// Deleted
+{
+  path: 'utility',
+  subpaths: []
+}, {
+  path: 'shape',
+  subpaths: ['radius', 'width']
+}, {
+  path: 'space',
+  subpaths: []
+}, {
+  path: 'font',
+  subpaths: ['family', 'size', 'weight', 'lineHeight']
+}, {
+  path: 'typography',
+  subpaths: []
+}, {
+  path: 'value',
+  // Legacy palette
+  subpaths: []
+}];
+exports.tokenOrder = tokenOrder;

package/dist/cjs/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "1.2.4",
+	"version": "1.2.6",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/es2019/entry-points/token-order.js

@@ -0,0 +1 @@
+export { tokenOrder } from '../utils/token-order';

package/dist/es2019/get-token-value.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "1.2.4";
+const version = "1.2.6";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/es2019/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 const name = "@atlaskit/tokens";
-const version = "1.2.4";
+const version = "1.2.6";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

package/dist/es2019/utils/color-detection.js

@@ -1,4 +1,3 @@
-import { token } from '../index';
 export const hexToRGBAValues = hex => {
   const hexColor = hex.replace('#', '');
   return {
@@ -8,76 +7,6 @@ export const hexToRGBAValues = hex => {
     a: parseFloat((parseInt(hexColor.slice(6, 8), 16) / 255).toFixed(2))
   };
 };
-export const hexToRGBA = hex => {
-  const {
-    r,
-    g,
-    b,
-    a
-  } = hexToRGBAValues(hex);
-  return `rgb${a ? 'a' : ''}(${r},${g},${b}${a ? `,${a}` : ''})`;
-};
-export const getLuminance = ({
-  r,
-  g,
-  b
-}) => (r * 299 + g * 587 + b * 114) / 1000;
-
-/**
- * Returns an accessible hard-coded text color based on the color contrast with
- * the background.
- *
- * @param hex - The Hex color code of the background
- * @param [opts.hardcodedSurface] - If set, a design token will be returned instead
- * of a hard-coded color. This is to support more transparent backgrounds
- * to allow the text to invert colors depending on the current theme's surface color.
- */
-export const getTextColorForBackground = (hex, opts) => {
-  const {
-    r,
-    g,
-    b,
-    a
-  } = hexToRGBAValues(hex);
-  const lum = getLuminance({
-    r,
-    g,
-    b
-  });
-  const alphaLimit = 0.42;
-  const alphaConditionsPerSurface = {
-    light: a < alphaLimit,
-    dark: a > alphaLimit
-  };
-  const alphaLimitExceeded = (opts === null || opts === void 0 ? void 0 : opts.hardcodedSurface) && alphaConditionsPerSurface[opts.hardcodedSurface];
-  if (!(opts !== null && opts !== void 0 && opts.hardcodedSurface) && a < alphaLimit) {
-    // This color is transparent, so the text will mainly cast onto the surface behind.
-    // Needs to use tokens otherwise Dark mode would cause black text on black surface
-    return token('color.text', 'black');
-  }
-  return lum > 150 && !a || a && alphaLimitExceeded ? 'black' : 'white';
-};
-
-/**
- * Returns a border if determined to be required based on the color contrast with
- * the background.
- *
- * @param hex - The Hex color code of the background
- */
-export const getBorderForBackground = hex => {
-  const {
-    r,
-    g,
-    b,
-    a
-  } = hexToRGBAValues(hex);
-  const lum = getLuminance({
-    r,
-    g,
-    b
-  });
-  return lum > 240 || a < 0.2 ? `1px solid ${token('color.border', '#091E4224')}` : undefined;
-};
 
 /**
  * Returns a box shadow formatted for CSS from a ShadowToken raw value.

package/dist/es2019/utils/token-order.js

@@ -0,0 +1,39 @@
+/**
+ * Create specific rules for ordering tokens based on their root path and subpath.
+ */
+export const tokenOrder = [{
+  path: 'color',
+  subpaths: ['text', 'link', 'icon', 'border', 'background', 'blanket', 'interaction', 'skeleton', 'chart',
+  // deleted ↓
+  'accent', 'iconBorder', 'overlay']
+}, {
+  path: 'elevation',
+  subpaths: ['surface', 'shadow']
+}, {
+  path: 'opacity',
+  subpaths: []
+}, {
+  path: 'shadow',
+  subpaths: ['card', 'overlay']
+},
+// Deleted
+{
+  path: 'utility',
+  subpaths: []
+}, {
+  path: 'shape',
+  subpaths: ['radius', 'width']
+}, {
+  path: 'space',
+  subpaths: []
+}, {
+  path: 'font',
+  subpaths: ['family', 'size', 'weight', 'lineHeight']
+}, {
+  path: 'typography',
+  subpaths: []
+}, {
+  path: 'value',
+  // Legacy palette
+  subpaths: []
+}];

package/dist/es2019/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "1.2.4",
+	"version": "1.2.6",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/esm/entry-points/token-order.js

@@ -0,0 +1 @@
+export { tokenOrder } from '../utils/token-order';

package/dist/esm/get-token-value.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "1.2.4";
+var version = "1.2.6";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/esm/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 var name = "@atlaskit/tokens";
-var version = "1.2.4";
+var version = "1.2.6";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

package/dist/esm/utils/color-detection.js

@@ -1,4 +1,3 @@
-import { token } from '../index';
 export var hexToRGBAValues = function hexToRGBAValues(hex) {
   var hexColor = hex.replace('#', '');
   return {
@@ -8,74 +7,6 @@ export var hexToRGBAValues = function hexToRGBAValues(hex) {
     a: parseFloat((parseInt(hexColor.slice(6, 8), 16) / 255).toFixed(2))
   };
 };
-export var hexToRGBA = function hexToRGBA(hex) {
-  var _hexToRGBAValues = hexToRGBAValues(hex),
-    r = _hexToRGBAValues.r,
-    g = _hexToRGBAValues.g,
-    b = _hexToRGBAValues.b,
-    a = _hexToRGBAValues.a;
-  return "rgb".concat(a ? 'a' : '', "(").concat(r, ",").concat(g, ",").concat(b).concat(a ? ",".concat(a) : '', ")");
-};
-export var getLuminance = function getLuminance(_ref) {
-  var r = _ref.r,
-    g = _ref.g,
-    b = _ref.b;
-  return (r * 299 + g * 587 + b * 114) / 1000;
-};
-
-/**
- * Returns an accessible hard-coded text color based on the color contrast with
- * the background.
- *
- * @param hex - The Hex color code of the background
- * @param [opts.hardcodedSurface] - If set, a design token will be returned instead
- * of a hard-coded color. This is to support more transparent backgrounds
- * to allow the text to invert colors depending on the current theme's surface color.
- */
-export var getTextColorForBackground = function getTextColorForBackground(hex, opts) {
-  var _hexToRGBAValues2 = hexToRGBAValues(hex),
-    r = _hexToRGBAValues2.r,
-    g = _hexToRGBAValues2.g,
-    b = _hexToRGBAValues2.b,
-    a = _hexToRGBAValues2.a;
-  var lum = getLuminance({
-    r: r,
-    g: g,
-    b: b
-  });
-  var alphaLimit = 0.42;
-  var alphaConditionsPerSurface = {
-    light: a < alphaLimit,
-    dark: a > alphaLimit
-  };
-  var alphaLimitExceeded = (opts === null || opts === void 0 ? void 0 : opts.hardcodedSurface) && alphaConditionsPerSurface[opts.hardcodedSurface];
-  if (!(opts !== null && opts !== void 0 && opts.hardcodedSurface) && a < alphaLimit) {
-    // This color is transparent, so the text will mainly cast onto the surface behind.
-    // Needs to use tokens otherwise Dark mode would cause black text on black surface
-    return token('color.text', 'black');
-  }
-  return lum > 150 && !a || a && alphaLimitExceeded ? 'black' : 'white';
-};
-
-/**
- * Returns a border if determined to be required based on the color contrast with
- * the background.
- *
- * @param hex - The Hex color code of the background
- */
-export var getBorderForBackground = function getBorderForBackground(hex) {
-  var _hexToRGBAValues3 = hexToRGBAValues(hex),
-    r = _hexToRGBAValues3.r,
-    g = _hexToRGBAValues3.g,
-    b = _hexToRGBAValues3.b,
-    a = _hexToRGBAValues3.a;
-  var lum = getLuminance({
-    r: r,
-    g: g,
-    b: b
-  });
-  return lum > 240 || a < 0.2 ? "1px solid ".concat(token('color.border', '#091E4224')) : undefined;
-};
 
 /**
  * Returns a box shadow formatted for CSS from a ShadowToken raw value.
@@ -83,15 +14,15 @@ export var getBorderForBackground = function getBorderForBackground(hex) {
  * @param rawShadow - ShadowToken raw value
  */
 export var getBoxShadow = function getBoxShadow(rawShadow) {
-  return rawShadow.map(function (_ref2) {
-    var radius = _ref2.radius,
-      offset = _ref2.offset,
-      color = _ref2.color,
-      opacity = _ref2.opacity;
-    var _hexToRGBAValues4 = hexToRGBAValues(color),
-      r = _hexToRGBAValues4.r,
-      g = _hexToRGBAValues4.g,
-      b = _hexToRGBAValues4.b;
+  return rawShadow.map(function (_ref) {
+    var radius = _ref.radius,
+      offset = _ref.offset,
+      color = _ref.color,
+      opacity = _ref.opacity;
+    var _hexToRGBAValues = hexToRGBAValues(color),
+      r = _hexToRGBAValues.r,
+      g = _hexToRGBAValues.g,
+      b = _hexToRGBAValues.b;
     return "".concat(offset.x, "px ").concat(offset.y, "px ").concat(radius, "px rgba(").concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
   }).join(',');
 };

package/dist/esm/utils/token-order.js

@@ -0,0 +1,39 @@
+/**
+ * Create specific rules for ordering tokens based on their root path and subpath.
+ */
+export var tokenOrder = [{
+  path: 'color',
+  subpaths: ['text', 'link', 'icon', 'border', 'background', 'blanket', 'interaction', 'skeleton', 'chart',
+  // deleted ↓
+  'accent', 'iconBorder', 'overlay']
+}, {
+  path: 'elevation',
+  subpaths: ['surface', 'shadow']
+}, {
+  path: 'opacity',
+  subpaths: []
+}, {
+  path: 'shadow',
+  subpaths: ['card', 'overlay']
+},
+// Deleted
+{
+  path: 'utility',
+  subpaths: []
+}, {
+  path: 'shape',
+  subpaths: ['radius', 'width']
+}, {
+  path: 'space',
+  subpaths: []
+}, {
+  path: 'font',
+  subpaths: ['family', 'size', 'weight', 'lineHeight']
+}, {
+  path: 'typography',
+  subpaths: []
+}, {
+  path: 'value',
+  // Legacy palette
+  subpaths: []
+}];

package/dist/esm/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "1.2.4",
+	"version": "1.2.6",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/types/entry-points/token-order.d.ts

@@ -0,0 +1 @@
+export { tokenOrder } from '../utils/token-order';

package/dist/types/index.d.ts

@@ -3,7 +3,9 @@ export { default as getTokenValue } from './get-token-value';
 export { default as setGlobalTheme, getThemeStyles, getThemeHtmlAttrs, getSSRAutoScript, } from './set-global-theme';
 export type { ThemeState } from './set-global-theme';
 export type { CSSToken } from './artifacts/token-names';
+export type { ActiveTokens } from './artifacts/types';
 export type { ThemeColorModes, Themes, ThemeIds } from './theme-config';
+export type { Groups, OpacityToken, PaintToken, RawToken, ShadowToken, SpacingToken, } from './types';
 export { default as themeConfig } from './theme-config';
 export { useThemeObserver } from './use-theme-observer';
 export { ThemeMutationObserver } from './theme-mutation-observer';

package/dist/types/utils/color-detection.d.ts

@@ -5,31 +5,6 @@ export declare const hexToRGBAValues: (hex: string) => {
     b: number;
     a: number;
 };
-export declare const hexToRGBA: (hex: string) => string;
-export declare const getLuminance: ({ r, g, b, }: {
-    r: number;
-    b: number;
-    g: number;
-}) => number;
-/**
- * Returns an accessible hard-coded text color based on the color contrast with
- * the background.
- *
- * @param hex - The Hex color code of the background
- * @param [opts.hardcodedSurface] - If set, a design token will be returned instead
- * of a hard-coded color. This is to support more transparent backgrounds
- * to allow the text to invert colors depending on the current theme's surface color.
- */
-export declare const getTextColorForBackground: (hex: string, opts?: {
-    hardcodedSurface?: "light" | "dark" | undefined;
-} | undefined) => string;
-/**
- * Returns a border if determined to be required based on the color contrast with
- * the background.
- *
- * @param hex - The Hex color code of the background
- */
-export declare const getBorderForBackground: (hex: string) => string | undefined;
 /**
  * Returns a box shadow formatted for CSS from a ShadowToken raw value.
  *

package/dist/types/utils/token-order.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Create specific rules for ordering tokens based on their root path and subpath.
+ */
+export declare const tokenOrder: {
+    path: string;
+    subpaths: string[];
+}[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "author": "Atlassian Pty Ltd",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "license": "Apache-2.0",
@@ -39,6 +39,7 @@
     "./tokens-raw": "./src/entry-points/tokens-raw.tsx",
     "./token-ids": "./src/entry-points/token-ids.tsx",
     "./token-names": "./src/entry-points/token-names.tsx",
+    "./token-order": "./src/entry-points/token-order.tsx",
     "./rename-mapping": "./src/entry-points/rename-mapping.tsx",
     "./babel-plugin": "./src/entry-points/babel-plugin.tsx"
   },
@@ -60,13 +61,13 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/codegen": "*",
-    "@atlaskit/avatar": "^21.1.0",
+    "@atlaskit/avatar": "^21.2.0",
     "@atlaskit/badge": "^15.0.11",
     "@atlaskit/button": "^16.5.0",
     "@atlaskit/checkbox": "^12.4.0",
-    "@atlaskit/code": "^14.4.5",
+    "@atlaskit/code": "^14.5.0",
     "@atlaskit/docs": "^9.0.10",
-    "@atlaskit/dropdown-menu": "^11.6.0",
+    "@atlaskit/dropdown-menu": "^11.7.0",
     "@atlaskit/ds-explorations": "^2.0.0",
     "@atlaskit/dynamic-table": "^14.8.0",
     "@atlaskit/empty-state": "^7.4.0",
@@ -83,7 +84,7 @@
     "@atlaskit/textfield": "^5.3.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/toggle": "^12.5.0",
-    "@atlaskit/tooltip": "^17.6.0",
+    "@atlaskit/tooltip": "^17.7.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@babel/core": "^7.12.3",
     "@emotion/core": "^10.0.9",