@atlaskit/flag 15.0.2 → 15.0.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/flag
 
+## 15.0.4
+
+### Patch Changes
+
+- [`b0f6dd0bc35`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b0f6dd0bc35) - Updated to use typography tokens. There is no expected behaviour or visual change.
+
+## 15.0.3
+
+### Patch Changes
+
+- [`56a44cd0ae9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56a44cd0ae9) - - [ux] Updated Flag component colored background buttons to use correct tokens for better contrast
+  - Made the button color type stricter and extracted local css variable names into constants
+
 ## 15.0.2
 
 ### Patch Changes

package/dist/cjs/auto-dismiss-flag.js

@@ -26,7 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var packageName = "@atlaskit/flag";
-var packageVersion = "15.0.2";
+var packageVersion = "15.0.4";
 var AUTO_DISMISS_SECONDS = 8;
 /**
  * __Auto dismiss flag__

package/dist/cjs/constants.js

@@ -3,6 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_APPEARANCE = void 0;
+exports.VAR_FOCUS_COLOR = exports.VAR_COLOR = exports.VAR_BG_COLOR_HOVER = exports.VAR_BG_COLOR_ACTIVE = exports.VAR_BG_COLOR = exports.DEFAULT_APPEARANCE = void 0;
 var DEFAULT_APPEARANCE = 'normal';
-exports.DEFAULT_APPEARANCE = DEFAULT_APPEARANCE;
+exports.DEFAULT_APPEARANCE = DEFAULT_APPEARANCE;
+var VAR_COLOR = '--color';
+exports.VAR_COLOR = VAR_COLOR;
+var VAR_BG_COLOR = '--bg-color';
+exports.VAR_BG_COLOR = VAR_BG_COLOR;
+var VAR_BG_COLOR_HOVER = '--bg-color-hover';
+exports.VAR_BG_COLOR_HOVER = VAR_BG_COLOR_HOVER;
+var VAR_BG_COLOR_ACTIVE = '--bg-color-active';
+exports.VAR_BG_COLOR_ACTIVE = VAR_BG_COLOR_ACTIVE;
+var VAR_FOCUS_COLOR = '--focus-color';
+exports.VAR_FOCUS_COLOR = VAR_FOCUS_COLOR;

package/dist/cjs/flag-actions.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = require("@emotion/react");
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
@@ -26,15 +28,21 @@ var gridSize = (0, _constants.gridSize)();
 var buttonStyles = (0, _react.css)({
   '&&, a&&': {
     padding: "0 ".concat(gridSize, "px !important"),
-    background: "var(--bg-color)",
-    color: "var(--color) !important",
-    fontWeight: 500
+    background: "var(".concat(_constants2.VAR_BG_COLOR, ")"),
+    color: "var(".concat(_constants2.VAR_COLOR, ") !important"),
+    fontWeight: "var(--ds-font-weight-medium, 500)"
   },
   '&&:focus, a&&:focus': {
-    boxShadow: "0 0 0 2px var(--focus-color)"
+    boxShadow: "0 0 0 2px var(".concat(_constants2.VAR_FOCUS_COLOR, ")")
   },
   '&&:hover, &&:active, a&&:hover, a&&:active': {
     textDecoration: 'underline'
+  },
+  '&&:hover': {
+    backgroundColor: "var(".concat(_constants2.VAR_BG_COLOR_HOVER, ")")
+  },
+  '&&:active': {
+    backgroundColor: "var(".concat(_constants2.VAR_BG_COLOR_ACTIVE, ")")
   }
 });
 var appearanceNormalButtonStyles = (0, _react.css)({
@@ -66,6 +74,8 @@ var FlagActions = function FlagActions(props) {
     },
     testId: testId && "".concat(testId, "-actions")
   }, actions.map(function (action, index) {
+    var _ref;
+
     return (0, _react.jsx)(_customThemeButton.default, {
       onClick: action.onClick,
       href: action.href,
@@ -75,11 +85,7 @@ var FlagActions = function FlagActions(props) {
       spacing: "compact",
       testId: action.testId,
       key: index,
-      style: {
-        '--color': _theme.actionTextColor[appearance],
-        '--bg-color': _theme.actionBackgroundColor[appearance],
-        '--focus-color': _theme.flagFocusRingColor[appearance]
-      },
+      style: (_ref = {}, (0, _defineProperty2.default)(_ref, _constants2.VAR_COLOR, _theme.actionTextColor[appearance]), (0, _defineProperty2.default)(_ref, _constants2.VAR_BG_COLOR, _theme.actionBackgroundColor[appearance].default), (0, _defineProperty2.default)(_ref, _constants2.VAR_BG_COLOR_HOVER, _theme.actionBackgroundColor[appearance].pressed), (0, _defineProperty2.default)(_ref, _constants2.VAR_BG_COLOR_ACTIVE, _theme.actionBackgroundColor[appearance].active), (0, _defineProperty2.default)(_ref, _constants2.VAR_FOCUS_COLOR, _theme.flagFocusRingColor[appearance]), _ref),
       css: [buttonStyles, appearance === 'normal' && appearanceNormalButtonStyles]
     }, action.content);
   }));

package/dist/cjs/flag.js

@@ -42,7 +42,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.0.2"
+  packageVersion: "15.0.4"
 };
 /**
  * __Flag__

package/dist/cjs/theme.js

@@ -48,16 +48,36 @@ var flagFocusRingColor = {
   normal: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
   success: "var(--ds-border-focused, ".concat(_colors.N40, ")"),
   warning: "var(--ds-border-focused, ".concat(_colors.N200, ")")
-}; // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
-// https://product-fabric.atlassian.net/browse/DSP-2519
-
+};
 exports.flagFocusRingColor = flagFocusRingColor;
+// TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
+// https://product-fabric.atlassian.net/browse/DSP-2519
 var actionBackgroundColor = {
-  success: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
-  info: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
-  error: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
-  warning: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
-  normal: 'none'
+  success: {
+    default: "var(--ds-background-inverse-subtle, ".concat(_colors.N30A, ")"),
+    active: "var(--ds-background-inverse-subtle-pressed, ".concat(_colors.N30A, ")"),
+    pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(_colors.N30A, ")")
+  },
+  info: {
+    default: "var(--ds-background-inverse-subtle, ".concat(_colors.N30A, ")"),
+    active: "var(--ds-background-inverse-subtle-pressed, ".concat(_colors.N30A, ")"),
+    pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(_colors.N30A, ")")
+  },
+  error: {
+    default: "var(--ds-background-inverse-subtle, ".concat(_colors.N30A, ")"),
+    active: "var(--ds-background-inverse-subtle-pressed, ".concat(_colors.N30A, ")"),
+    pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(_colors.N30A, ")")
+  },
+  warning: {
+    default: "var(--ds-background-inverse-subtle, ".concat(_colors.N30A, ")"),
+    active: "var(--ds-background-inverse-subtle-pressed, ".concat(_colors.N30A, ")"),
+    pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(_colors.N30A, ")")
+  },
+  normal: {
+    default: 'none',
+    active: 'none',
+    pressed: 'none'
+  }
 };
 exports.actionBackgroundColor = actionBackgroundColor;
 var actionTextColor = {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.0.2",
+	"version": "15.0.4",
 	"sideEffects": false
 }

package/dist/es2019/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 const packageName = "@atlaskit/flag";
-const packageVersion = "15.0.2";
+const packageVersion = "15.0.4";
 export const AUTO_DISMISS_SECONDS = 8;
 /**
  * __Auto dismiss flag__

package/dist/es2019/constants.js

@@ -1 +1,6 @@
-export const DEFAULT_APPEARANCE = 'normal';
+export const DEFAULT_APPEARANCE = 'normal';
+export const VAR_COLOR = '--color';
+export const VAR_BG_COLOR = '--bg-color';
+export const VAR_BG_COLOR_HOVER = '--bg-color-hover';
+export const VAR_BG_COLOR_ACTIVE = '--bg-color-active';
+export const VAR_FOCUS_COLOR = '--focus-color';

package/dist/es2019/flag-actions.js

@@ -5,21 +5,27 @@ import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { UNSAFE_Inline as Inline } from '@atlaskit/ds-explorations';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-import { DEFAULT_APPEARANCE } from './constants';
+import { DEFAULT_APPEARANCE, VAR_COLOR, VAR_BG_COLOR, VAR_BG_COLOR_HOVER, VAR_BG_COLOR_ACTIVE, VAR_FOCUS_COLOR } from './constants';
 import { flagFocusRingColor, actionBackgroundColor, actionTextColor } from './theme';
 const gridSize = getGridSize();
 const buttonStyles = css({
   '&&, a&&': {
     padding: `0 ${gridSize}px !important`,
-    background: `var(--bg-color)`,
-    color: `var(--color) !important`,
-    fontWeight: 500
+    background: `var(${VAR_BG_COLOR})`,
+    color: `var(${VAR_COLOR}) !important`,
+    fontWeight: "var(--ds-font-weight-medium, 500)"
   },
   '&&:focus, a&&:focus': {
-    boxShadow: `0 0 0 2px var(--focus-color)`
+    boxShadow: `0 0 0 2px var(${VAR_FOCUS_COLOR})`
   },
   '&&:hover, &&:active, a&&:hover, a&&:active': {
     textDecoration: 'underline'
+  },
+  '&&:hover': {
+    backgroundColor: `var(${VAR_BG_COLOR_HOVER})`
+  },
+  '&&:active': {
+    backgroundColor: `var(${VAR_BG_COLOR_ACTIVE})`
   }
 });
 const appearanceNormalButtonStyles = css({
@@ -60,9 +66,11 @@ const FlagActions = props => {
     testId: action.testId,
     key: index,
     style: {
-      '--color': actionTextColor[appearance],
-      '--bg-color': actionBackgroundColor[appearance],
-      '--focus-color': flagFocusRingColor[appearance]
+      [VAR_COLOR]: actionTextColor[appearance],
+      [VAR_BG_COLOR]: actionBackgroundColor[appearance].default,
+      [VAR_BG_COLOR_HOVER]: actionBackgroundColor[appearance].pressed,
+      [VAR_BG_COLOR_ACTIVE]: actionBackgroundColor[appearance].active,
+      [VAR_FOCUS_COLOR]: flagFocusRingColor[appearance]
     },
     css: [buttonStyles, appearance === 'normal' && appearanceNormalButtonStyles]
   }, action.content)));

package/dist/es2019/flag.js

@@ -15,7 +15,7 @@ import { Expander, DismissButton } from './internal';
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.0.2"
+  packageVersion: "15.0.4"
 };
 /**
  * __Flag__

package/dist/es2019/theme.js

@@ -36,15 +36,35 @@ export const flagFocusRingColor = {
   normal: `var(--ds-border-focused, ${B100})`,
   success: `var(--ds-border-focused, ${N40})`,
   warning: `var(--ds-border-focused, ${N200})`
-}; // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
+};
+// TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
 // https://product-fabric.atlassian.net/browse/DSP-2519
-
 export const actionBackgroundColor = {
-  success: `var(--ds-background-neutral, ${N30A})`,
-  info: `var(--ds-background-neutral, ${N30A})`,
-  error: `var(--ds-background-neutral, ${N30A})`,
-  warning: `var(--ds-background-neutral, ${N30A})`,
-  normal: 'none'
+  success: {
+    default: `var(--ds-background-inverse-subtle, ${N30A})`,
+    active: `var(--ds-background-inverse-subtle-pressed, ${N30A})`,
+    pressed: `var(--ds-background-inverse-subtle-hovered, ${N30A})`
+  },
+  info: {
+    default: `var(--ds-background-inverse-subtle, ${N30A})`,
+    active: `var(--ds-background-inverse-subtle-pressed, ${N30A})`,
+    pressed: `var(--ds-background-inverse-subtle-hovered, ${N30A})`
+  },
+  error: {
+    default: `var(--ds-background-inverse-subtle, ${N30A})`,
+    active: `var(--ds-background-inverse-subtle-pressed, ${N30A})`,
+    pressed: `var(--ds-background-inverse-subtle-hovered, ${N30A})`
+  },
+  warning: {
+    default: `var(--ds-background-inverse-subtle, ${N30A})`,
+    active: `var(--ds-background-inverse-subtle-pressed, ${N30A})`,
+    pressed: `var(--ds-background-inverse-subtle-hovered, ${N30A})`
+  },
+  normal: {
+    default: 'none',
+    active: 'none',
+    pressed: 'none'
+  }
 };
 export const actionTextColor = {
   success: `var(--ds-text-inverse, ${N0})`,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.0.2",
+	"version": "15.0.4",
 	"sideEffects": false
 }

package/dist/esm/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 var packageName = "@atlaskit/flag";
-var packageVersion = "15.0.2";
+var packageVersion = "15.0.4";
 export var AUTO_DISMISS_SECONDS = 8;
 /**
  * __Auto dismiss flag__

package/dist/esm/constants.js

@@ -1 +1,6 @@
-export var DEFAULT_APPEARANCE = 'normal';
+export var DEFAULT_APPEARANCE = 'normal';
+export var VAR_COLOR = '--color';
+export var VAR_BG_COLOR = '--bg-color';
+export var VAR_BG_COLOR_HOVER = '--bg-color-hover';
+export var VAR_BG_COLOR_ACTIVE = '--bg-color-active';
+export var VAR_FOCUS_COLOR = '--focus-color';

package/dist/esm/flag-actions.js

@@ -1,3 +1,5 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
 /* eslint-disable @repo/internal/styles/no-nested-styles */
 
 /** @jsx jsx */
@@ -5,21 +7,27 @@ import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { UNSAFE_Inline as Inline } from '@atlaskit/ds-explorations';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-import { DEFAULT_APPEARANCE } from './constants';
+import { DEFAULT_APPEARANCE, VAR_COLOR, VAR_BG_COLOR, VAR_BG_COLOR_HOVER, VAR_BG_COLOR_ACTIVE, VAR_FOCUS_COLOR } from './constants';
 import { flagFocusRingColor, actionBackgroundColor, actionTextColor } from './theme';
 var gridSize = getGridSize();
 var buttonStyles = css({
   '&&, a&&': {
     padding: "0 ".concat(gridSize, "px !important"),
-    background: "var(--bg-color)",
-    color: "var(--color) !important",
-    fontWeight: 500
+    background: "var(".concat(VAR_BG_COLOR, ")"),
+    color: "var(".concat(VAR_COLOR, ") !important"),
+    fontWeight: "var(--ds-font-weight-medium, 500)"
   },
   '&&:focus, a&&:focus': {
-    boxShadow: "0 0 0 2px var(--focus-color)"
+    boxShadow: "0 0 0 2px var(".concat(VAR_FOCUS_COLOR, ")")
   },
   '&&:hover, &&:active, a&&:hover, a&&:active': {
     textDecoration: 'underline'
+  },
+  '&&:hover': {
+    backgroundColor: "var(".concat(VAR_BG_COLOR_HOVER, ")")
+  },
+  '&&:active': {
+    backgroundColor: "var(".concat(VAR_BG_COLOR_ACTIVE, ")")
   }
 });
 var appearanceNormalButtonStyles = css({
@@ -51,6 +59,8 @@ var FlagActions = function FlagActions(props) {
     },
     testId: testId && "".concat(testId, "-actions")
   }, actions.map(function (action, index) {
+    var _ref;
+
     return jsx(Button, {
       onClick: action.onClick,
       href: action.href,
@@ -60,11 +70,7 @@ var FlagActions = function FlagActions(props) {
       spacing: "compact",
       testId: action.testId,
       key: index,
-      style: {
-        '--color': actionTextColor[appearance],
-        '--bg-color': actionBackgroundColor[appearance],
-        '--focus-color': flagFocusRingColor[appearance]
-      },
+      style: (_ref = {}, _defineProperty(_ref, VAR_COLOR, actionTextColor[appearance]), _defineProperty(_ref, VAR_BG_COLOR, actionBackgroundColor[appearance].default), _defineProperty(_ref, VAR_BG_COLOR_HOVER, actionBackgroundColor[appearance].pressed), _defineProperty(_ref, VAR_BG_COLOR_ACTIVE, actionBackgroundColor[appearance].active), _defineProperty(_ref, VAR_FOCUS_COLOR, flagFocusRingColor[appearance]), _ref),
       css: [buttonStyles, appearance === 'normal' && appearanceNormalButtonStyles]
     }, action.content);
   }));

package/dist/esm/flag.js

@@ -21,7 +21,7 @@ import { Expander, DismissButton } from './internal';
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.0.2"
+  packageVersion: "15.0.4"
 };
 /**
  * __Flag__

package/dist/esm/theme.js

@@ -36,15 +36,35 @@ export var flagFocusRingColor = {
   normal: "var(--ds-border-focused, ".concat(B100, ")"),
   success: "var(--ds-border-focused, ".concat(N40, ")"),
   warning: "var(--ds-border-focused, ".concat(N200, ")")
-}; // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
+};
+// TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
 // https://product-fabric.atlassian.net/browse/DSP-2519
-
 export var actionBackgroundColor = {
-  success: "var(--ds-background-neutral, ".concat(N30A, ")"),
-  info: "var(--ds-background-neutral, ".concat(N30A, ")"),
-  error: "var(--ds-background-neutral, ".concat(N30A, ")"),
-  warning: "var(--ds-background-neutral, ".concat(N30A, ")"),
-  normal: 'none'
+  success: {
+    default: "var(--ds-background-inverse-subtle, ".concat(N30A, ")"),
+    active: "var(--ds-background-inverse-subtle-pressed, ".concat(N30A, ")"),
+    pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(N30A, ")")
+  },
+  info: {
+    default: "var(--ds-background-inverse-subtle, ".concat(N30A, ")"),
+    active: "var(--ds-background-inverse-subtle-pressed, ".concat(N30A, ")"),
+    pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(N30A, ")")
+  },
+  error: {
+    default: "var(--ds-background-inverse-subtle, ".concat(N30A, ")"),
+    active: "var(--ds-background-inverse-subtle-pressed, ".concat(N30A, ")"),
+    pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(N30A, ")")
+  },
+  warning: {
+    default: "var(--ds-background-inverse-subtle, ".concat(N30A, ")"),
+    active: "var(--ds-background-inverse-subtle-pressed, ".concat(N30A, ")"),
+    pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(N30A, ")")
+  },
+  normal: {
+    default: 'none',
+    active: 'none',
+    pressed: 'none'
+  }
 };
 export var actionTextColor = {
   success: "var(--ds-text-inverse, ".concat(N0, ")"),

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.0.2",
+	"version": "15.0.4",
 	"sideEffects": false
 }

package/dist/types/constants.d.ts

@@ -1,2 +1,7 @@
 import { AppearanceTypes } from './types';
 export declare const DEFAULT_APPEARANCE: AppearanceTypes;
+export declare const VAR_COLOR = "--color";
+export declare const VAR_BG_COLOR = "--bg-color";
+export declare const VAR_BG_COLOR_HOVER = "--bg-color-hover";
+export declare const VAR_BG_COLOR_ACTIVE = "--bg-color-active";
+export declare const VAR_FOCUS_COLOR = "--focus-color";

package/dist/types/theme.d.ts

@@ -11,5 +11,15 @@ export declare const flagTextColorToken: {
     warning: "var(--ds-text-warning-inverse)";
 };
 export declare const flagFocusRingColor: Record<AppearanceTypes, string>;
-export declare const actionBackgroundColor: Record<AppearanceTypes, string>;
+declare type ActionBackgroundColor = Record<Exclude<AppearanceTypes, 'normal'>, {
+    default: 'var(--ds-background-inverse-subtle)';
+    active: 'var(--ds-background-inverse-subtle-pressed)';
+    pressed: 'var(--ds-background-inverse-subtle-hovered)';
+}> & Record<Extract<AppearanceTypes, 'normal'>, {
+    default: 'none';
+    active: 'none';
+    pressed: 'none';
+}>;
+export declare const actionBackgroundColor: ActionBackgroundColor;
 export declare const actionTextColor: Record<AppearanceTypes, string>;
+export {};

package/dist/types/types.d.ts

@@ -9,7 +9,7 @@ export declare type ActionType = {
     testId?: string;
 };
 export declare type ActionsType = Array<ActionType>;
-export declare type AppearanceTypes = 'error' | 'info' | 'normal' | 'success' | 'warning';
+export declare type AppearanceTypes = 'error' | 'info' | 'success' | 'warning' | 'normal';
 export declare const AppearanceArray: AppearanceTypes[];
 declare type FlagPropsId = {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/flag",
-  "version": "15.0.2",
+  "version": "15.0.4",
   "description": "A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.5.0",
-    "@atlaskit/ds-explorations": "^1.0.0",
+    "@atlaskit/ds-explorations": "^1.7.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/focus-ring": "^1.2.0",
     "@atlaskit/icon": "^21.11.0",

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/flag"
 
@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -158,3 +159,15 @@ export const withFlagsProvider: (
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->