@atlaskit/flag 14.4.1 → 14.5.2

package/dist/esm/flag.js

@@ -1,39 +1,49 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/core';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
-import ChevronUpIcon from '@atlaskit/icon/glyph/chevron-up';
-import CrossIcon from '@atlaskit/icon/glyph/cross';
-import GlobalTheme from '@atlaskit/theme/components';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import { borderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
+import noop from '@atlaskit/ds-lib/noop';
+import FocusRing from '@atlaskit/focus-ring';
 import { DEFAULT_APPEARANCE } from './constants';
-import { flagBorderColor, flagShadowColor, getFlagBackgroundColor, getFlagFocusRingColor, getFlagTextColor } from './theme';
-import Expander from './expander';
+import { flagBorderColor, flagShadowColor, getFlagBackgroundColor, getFlagTextColor, getFlagIconColor } from './theme';
 import Actions from './flag-actions';
 import { useFlagGroup } from './flag-group';
-
-function noop() {}
-
+import { Title, Description, Expander, DismissButton } from './internal';
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.4.1"
+  packageVersion: "14.5.2"
 };
 var gridSize = getGridSize();
 var doubleGridSize = gridSize * 2;
 var headerHeight = gridSize * 4;
+var iconStyles = css({
+  display: 'flex',
+  height: headerHeight,
+  alignItems: 'center'
+});
+var flagHeaderStyles = css({
+  boxSizing: 'border-box',
+  width: '100%',
+  padding: doubleGridSize,
+  borderRadius: borderRadius()
+});
+var flagContainerStyles = css({
+  width: '100%',
+  zIndex: layers.flag(),
+  borderRadius: borderRadius(),
+  transition: 'background-color 200ms'
+});
 
 var Flag = function Flag(props) {
   var _props$actions = props.actions,
@@ -76,60 +86,16 @@ var Flag = function Flag(props) {
     analyticsData: analyticsContext
   }, analyticsAttributes));
   var isBold = appearance !== DEFAULT_APPEARANCE;
-  var renderToggleOrDismissButton = useCallback(function (_ref) {
-    var mode = _ref.mode;
-
-    // If it is normal appearance a toggle button cannot be rendered
-    // Ensure onDismissed is defined and isDismissAllowed is true to render
-    // the dismiss button
-    if (!isBold && !isDismissAllowed) {
-      return null;
-    } // If it is bold then ensure there is a description or actions to render
-    // the toggle button
-
-
-    if (isBold && !description && !actions.length) {
-      return null;
-    }
-
-    var ButtonIcon = CrossIcon;
-    var buttonLabel = 'Dismiss';
-
-    var buttonAction = function buttonAction() {
-      if (isDismissAllowed) {
-        onDismissedAnalytics(id);
-      }
-    };
-
-    var size = 'small';
-    var buttonTestId = testId && "".concat(testId, "-dismiss");
-    var a11yProps = {};
-
-    if (isBold) {
-      ButtonIcon = isExpanded ? ChevronUpIcon : ChevronDownIcon;
-      buttonLabel = isExpanded ? 'Collapse' : 'Expand';
-
-      buttonAction = function buttonAction() {
-        return setIsExpanded(!isExpanded);
-      };
-
-      size = 'large';
-      buttonTestId = testId && "".concat(testId, "-toggle");
-      a11yProps = {
-        'aria-expanded': isExpanded
-      };
+  var toggleExpand = useCallback(function () {
+    setIsExpanded(function (previous) {
+      return !previous;
+    });
+  }, []);
+  var buttonActionCallback = useCallback(function () {
+    if (isDismissAllowed) {
+      onDismissedAnalytics(id);
     }
-
-    return jsx("button", _extends({
-      css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            appearance: none;\n            background: none;\n            border: none;\n            border-radius: ", "px;\n            color: ", ";\n            cursor: pointer;\n            flex: 0 0 auto;\n            line-height: 1;\n            margin-left: ", "px;\n            padding: 0;\n            white-space: nowrap;\n            &:focus {\n              outline: none;\n              box-shadow: 0 0 0 2px ", ";\n            }\n          "])), borderRadius(), getFlagTextColor(appearance, mode), gridSize, getFlagFocusRingColor(appearance, mode)),
-      onClick: buttonAction,
-      "data-testid": buttonTestId,
-      type: "button"
-    }, a11yProps), jsx(ButtonIcon, {
-      label: buttonLabel,
-      size: size
-    }));
-  }, [actions.length, appearance, description, id, isBold, isDismissAllowed, isExpanded, onDismissedAnalytics, testId]);
+  }, [onDismissedAnalytics, id, isDismissAllowed]);
   useEffect(function () {
     // If buttons are removed as a prop, update isExpanded to be false
     if (isBold && isExpanded && !description && !actions.length) {
@@ -152,44 +118,57 @@ var Flag = function Flag(props) {
     onMouseOut: onMouseOut,
     onBlur: onBlurAnalytics
   };
-  var OptionalDismissButton = renderToggleOrDismissButton;
-  var boxShadow = "0 20px 32px -8px ".concat(flagShadowColor);
+  var boxShadow = "var(--ds-shadow-overlay, ".concat("0 20px 32px -8px ".concat(flagShadowColor), ")");
 
   if (!isBold) {
-    boxShadow = "0 0 1px ".concat(flagBorderColor, ", ").concat(boxShadow);
+    boxShadow = "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(flagBorderColor, ", ").concat(boxShadow), ")");
   }
 
-  return jsx(GlobalTheme.Consumer, null, function (tokens) {
-    var mode = tokens.mode;
-    var textColour = getFlagTextColor(appearance, mode);
-    return jsx("div", _extends({
-      css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              background-color: ", ";\n              border-radius: ", "px;\n              box-shadow: ", ";\n              color: ", ";\n              transition: background-color 200ms;\n              width: 100%;\n              z-index: ", ";\n            "])), getFlagBackgroundColor(appearance, mode), borderRadius(), boxShadow, textColour, layers.flag()),
-      role: "alert",
-      "data-testid": testId
-    }, autoDismissProps), jsx("div", {
-      css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                width: 100%;\n                padding: ", "px;\n                box-sizing: border-box;\n                border-radius: ", "px;\n\n                &:focus-visible {\n                  outline: none;\n                  box-shadow: 0 0 0 2px\n                    ", ";\n                }\n\n                @supports not selector(*:focus-visible) {\n                  &:focus {\n                    outline: none;\n                    box-shadow: 0 0 0 2px\n                      ", ";\n                  }\n                }\n\n                @media screen and (forced-colors: active),\n                  screen and (-ms-high-contrast: active) {\n                  &:focus-visible {\n                    outline: 1px solid;\n                  }\n                }\n              "])), doubleGridSize, borderRadius(), getFlagFocusRingColor(appearance, mode), getFlagFocusRingColor(appearance, mode)) // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      ,
-      tabIndex: 0
-    }, jsx("div", {
-      css: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                  display: flex;\n                  align-items: center;\n                  height: ", "px;\n                "])), headerHeight)
-    }, icon, jsx("span", {
-      css: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                    color: ", ";\n                    font-weight: 600;\n                    flex: 1;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    white-space: nowrap;\n                    padding: 0 0 0 ", "px;\n                  "])), textColour, doubleGridSize)
-    }, title), jsx(OptionalDismissButton, {
-      mode: mode
-    })), jsx(Expander, {
-      isExpanded: !isBold || isExpanded,
-      testId: testId
-    }, description && jsx("div", {
-      css: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                      color: ", ";\n                      word-wrap: break-word;\n                      overflow: auto;\n                      max-height: 100px; /* height is defined as 5 lines maximum by design */\n                    "])), textColour),
-      "data-testid": testId && "".concat(testId, "-description")
-    }, description), jsx(Actions, {
-      actions: actions,
-      appearance: appearance,
-      linkComponent: linkComponent,
-      testId: testId,
-      mode: mode
-    }))));
-  });
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
+
+  var textColor = getFlagTextColor(appearance, mode);
+  var iconColor = getFlagIconColor(appearance, mode);
+  var isDismissable = isBold || isDismissAllowed;
+  return jsx("div", _extends({
+    style: {
+      color: textColor,
+      backgroundColor: getFlagBackgroundColor(appearance, mode),
+      boxShadow: boxShadow
+    },
+    css: flagContainerStyles,
+    role: "alert",
+    "data-testid": testId
+  }, autoDismissProps), jsx(FocusRing, null, jsx("div", {
+    css: flagHeaderStyles // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0
+  }, jsx("div", {
+    style: {
+      color: iconColor
+    },
+    css: iconStyles
+  }, icon, jsx(Title, {
+    color: textColor
+  }, title), isDismissable ? !(isBold && !description && !actions.length) && jsx(DismissButton, {
+    testId: testId,
+    appearance: appearance,
+    isBold: isBold,
+    isExpanded: isExpanded,
+    onClick: isBold ? toggleExpand : buttonActionCallback
+  }) : null), jsx(Expander, {
+    isExpanded: !isBold || isExpanded,
+    testId: testId
+  }, description && jsx(Description, {
+    testId: testId && "".concat(testId, "-description"),
+    color: textColor
+  }, description), jsx(Actions, {
+    actions: actions,
+    appearance: appearance,
+    linkComponent: linkComponent,
+    testId: testId,
+    mode: mode
+  })))));
 };
 
 export default Flag;

package/dist/esm/internal/description.js

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+var descriptionStyles = css({
+  /* height is defined as 5 lines maximum by design */
+  maxHeight: 100,
+  overflow: 'auto',
+  wordWrap: 'break-word'
+});
+
+var Description = function Description(_ref) {
+  var color = _ref.color,
+      testId = _ref.testId,
+      children = _ref.children;
+  return jsx("div", {
+    style: {
+      color: color
+    },
+    css: descriptionStyles,
+    "data-testid": testId
+  }, children);
+};
+
+export default Description;

package/dist/esm/internal/dismiss-button.js

@@ -0,0 +1,63 @@
+/** @jsx jsx */
+import { memo } from 'react';
+import { jsx, css } from '@emotion/core';
+import FocusRing from '@atlaskit/focus-ring';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronUpIcon from '@atlaskit/icon/glyph/chevron-up';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { getFlagTextColor } from '../theme';
+var gridSize = getGridSize();
+var borderRadius = getBorderRadius();
+var dismissButtonStyles = css({
+  marginLeft: gridSize,
+  padding: 0,
+  flex: '0 0 auto',
+  appearance: 'none',
+  background: 'none',
+  border: 'none',
+  borderRadius: borderRadius,
+  cursor: 'pointer',
+  lineHeight: '1',
+  whiteSpace: 'nowrap'
+});
+
+var DismissButton = function DismissButton(_ref) {
+  var appearance = _ref.appearance,
+      onClick = _ref.onClick,
+      isBold = _ref.isBold,
+      isExpanded = _ref.isExpanded,
+      testId = _ref.testId;
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
+
+  var ButtonIcon = CrossIcon;
+  var buttonLabel = 'Dismiss';
+  var size = 'small';
+  var buttonTestId = testId && "".concat(testId, "-dismiss");
+
+  if (isBold) {
+    ButtonIcon = isExpanded ? ChevronUpIcon : ChevronDownIcon;
+    buttonLabel = isExpanded ? 'Collapse' : 'Expand';
+    size = 'large';
+    buttonTestId = testId && "".concat(testId, "-toggle");
+  }
+
+  return jsx(FocusRing, null, jsx("button", {
+    style: {
+      color: getFlagTextColor(appearance, mode)
+    },
+    css: dismissButtonStyles,
+    onClick: onClick,
+    "data-testid": buttonTestId,
+    type: "button",
+    "aria-expanded": isBold ? isExpanded : undefined
+  }, jsx(ButtonIcon, {
+    label: buttonLabel,
+    size: size
+  })));
+};
+
+export default /*#__PURE__*/memo(DismissButton);

package/dist/esm/{expander.js → internal/expander.js}

@@ -1,12 +1,21 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
 import { gridSize } from '@atlaskit/theme/constants';
 var paddingLeft = gridSize() * 5;
+var expanderStyles = css({
+  display: 'flex',
+  minWidth: 0,
+  maxHeight: 0,
+  padding: "0 0 0 ".concat(paddingLeft, "px"),
+  justifyContent: 'center',
+  flex: '1 1 100%',
+  flexDirection: 'column',
+  transition: "max-height 0.3s"
+});
+var expandedStyles = css({
+  maxHeight: 150
+});
 
 var Expander = function Expander(_ref) {
   var children = _ref.children,
@@ -17,7 +26,7 @@ var Expander = function Expander(_ref) {
   // the the reveal because we don't know the height of the content.
   return jsx("div", {
     "aria-hidden": !isExpanded,
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        max-height: ", "px;\n        transition: max-height 0.3s;\n        display: flex;\n        flex: 1 1 100%;\n        flex-direction: column;\n        justify-content: center;\n        min-width: 0;\n        padding: 0 0 0 ", "px;\n      "])), isExpanded ? 150 : 0, paddingLeft),
+    css: [expanderStyles, isExpanded && expandedStyles],
     "data-testid": testId && "".concat(testId, "-expander")
   }, jsx(ExitingPersistence, {
     appear: true

package/dist/esm/internal/index.js

@@ -0,0 +1,4 @@
+export { default as Title } from './title';
+export { default as Description } from './description';
+export { default as Expander } from './expander';
+export { default as DismissButton } from './dismiss-button';

package/dist/esm/internal/title.js

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+var titleStyles = css({
+  padding: "0 0 0 16px",
+  flex: 1,
+  fontWeight: 600,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+
+var Title = function Title(_ref) {
+  var color = _ref.color,
+      children = _ref.children;
+  return jsx("span", {
+    style: {
+      color: color
+    },
+    css: titleStyles
+  }, children);
+};
+
+export default Title;

package/dist/esm/theme.js

@@ -1,76 +1,103 @@
-import * as colors from '@atlaskit/theme/colors';
+import { B100, B400, DN40, DN50, DN600, G300, G400, N0, N200, N30A, N40, N500, N50A, N60A, N700, R300, R400, Y200, Y300 } from '@atlaskit/theme/colors';
 var flagBackgroundColor = {
   error: {
-    light: colors.R400,
-    dark: colors.R300
+    light: "var(--ds-surface-overlay, ".concat(R400, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(R300, ")")
   },
   info: {
-    light: colors.N500,
-    dark: colors.N500
+    light: "var(--ds-surface-overlay, ".concat(N500, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(N500, ")")
   },
   normal: {
-    light: colors.N0,
-    dark: colors.DN50
+    light: "var(--ds-surface-overlay, ".concat(N0, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
   },
   success: {
-    light: colors.G400,
-    dark: colors.G300
+    light: "var(--ds-surface-overlay, ".concat(G400, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(G300, ")")
   },
   warning: {
-    light: colors.Y200,
-    dark: colors.Y300
+    light: "var(--ds-surface-overlay, ".concat(Y200, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(Y300, ")")
   }
 };
 export var getFlagBackgroundColor = function getFlagBackgroundColor(appearance, mode) {
   return flagBackgroundColor[appearance][mode];
 };
-export var flagBorderColor = colors.N60A;
+export var flagBorderColor = "var(--ds-surface-overlay, ".concat(N60A, ")");
+var flagIconColor = {
+  error: {
+    light: "var(--ds-icon-danger, ".concat(N0, ")"),
+    dark: "var(--ds-icon-danger, ".concat(DN40, ")")
+  },
+  info: {
+    light: "var(--ds-icon-discovery, ".concat(N0, ")"),
+    dark: "var(--ds-icon-discovery, ".concat(DN600, ")")
+  },
+  normal: {
+    light: "var(--ds-icon-brand, ".concat(N500, ")"),
+    dark: "var(--ds-icon-brand, ".concat(DN600, ")")
+  },
+  success: {
+    light: "var(--ds-icon-success, ".concat(N0, ")"),
+    dark: "var(--ds-icon-success, ".concat(DN40, ")")
+  },
+  warning: {
+    light: "var(--ds-icon-warning, ".concat(N700, ")"),
+    dark: "var(--ds-icon-warning, ".concat(DN40, ")")
+  }
+};
 var flagTextColor = {
   error: {
-    light: colors.N0,
-    dark: colors.DN40
+    light: "var(--ds-text, ".concat(N0, ")"),
+    dark: "var(--ds-text, ".concat(DN40, ")")
   },
   info: {
-    light: colors.N0,
-    dark: colors.DN600
+    light: "var(--ds-text, ".concat(N0, ")"),
+    dark: "var(--ds-text, ".concat(DN600, ")")
   },
   normal: {
-    light: colors.N500,
-    dark: colors.DN600
+    light: "var(--ds-text, ".concat(N500, ")"),
+    dark: "var(--ds-text, ".concat(DN600, ")")
   },
   success: {
-    light: colors.N0,
-    dark: colors.DN40
+    light: "var(--ds-text, ".concat(N0, ")"),
+    dark: "var(--ds-text, ".concat(DN40, ")")
   },
   warning: {
-    light: colors.N700,
-    dark: colors.DN40
+    light: "var(--ds-text, ".concat(N700, ")"),
+    dark: "var(--ds-text, ".concat(DN40, ")")
   }
 };
 export var getFlagTextColor = function getFlagTextColor(appearance, mode) {
   return flagTextColor[appearance][mode];
 };
-export var flagShadowColor = colors.N50A;
+export var getFlagIconColor = function getFlagIconColor(appearance, mode) {
+  return flagIconColor[appearance][mode];
+}; // token set in flag.tsx instead
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+
+export var flagShadowColor = N50A;
 var flagFocusRingColor = {
   error: {
-    light: colors.N40,
-    dark: colors.N40
+    light: "var(--ds-border-focused, ".concat(N40, ")"),
+    dark: "var(--ds-border-focused, ".concat(N40, ")")
   },
   info: {
-    light: colors.N40,
-    dark: colors.N40
+    light: "var(--ds-border-focused, ".concat(N40, ")"),
+    dark: "var(--ds-border-focused, ".concat(N40, ")")
   },
   normal: {
-    light: colors.B100,
-    dark: colors.B100
+    light: "var(--ds-border-focused, ".concat(B100, ")"),
+    dark: "var(--ds-border-focused, ".concat(B100, ")")
   },
   success: {
-    light: colors.N40,
-    dark: colors.N40
+    light: "var(--ds-border-focused, ".concat(N40, ")"),
+    dark: "var(--ds-border-focused, ".concat(N40, ")")
   },
   warning: {
-    light: colors.N200,
-    dark: colors.N200
+    light: "var(--ds-border-focused, ".concat(N200, ")"),
+    dark: "var(--ds-border-focused, ".concat(N200, ")")
   }
 };
 export var getFlagFocusRingColor = function getFlagFocusRingColor(appearance, mode) {
@@ -79,46 +106,46 @@ export var getFlagFocusRingColor = function getFlagFocusRingColor(appearance, mo
 var lightButtonBackground = 'rgba(255, 255, 255, 0.08)';
 var actionBackground = {
   success: {
-    light: lightButtonBackground,
-    dark: colors.N30A
+    light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-neutral, ".concat(N30A, ")")
   },
   info: {
-    light: lightButtonBackground,
-    dark: lightButtonBackground
+    light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")")
   },
   error: {
-    light: lightButtonBackground,
-    dark: colors.N30A
+    light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-neutral, ".concat(N30A, ")")
   },
   warning: {
-    light: colors.N30A,
-    dark: colors.N30A
+    light: "var(--ds-background-neutral, ".concat(N30A, ")"),
+    dark: "var(--ds-background-neutral, ".concat(N30A, ")")
   },
   normal: {
-    light: 'none',
-    dark: 'none'
+    light: "var(--ds-background-neutral, none)",
+    dark: "var(--ds-background-neutral, none)"
   }
 };
 var actionColor = {
   success: {
-    light: colors.N0,
-    dark: colors.DN40
+    light: "var(--ds-text-subtle, ".concat(N0, ")"),
+    dark: "var(--ds-text-subtle, ".concat(DN40, ")")
   },
   info: {
-    light: colors.N0,
-    dark: colors.DN600
+    light: "var(--ds-text-subtle, ".concat(N0, ")"),
+    dark: "var(--ds-text-subtle, ".concat(DN600, ")")
   },
   error: {
-    light: colors.N0,
-    dark: colors.DN600
+    light: "var(--ds-text-subtle, ".concat(N0, ")"),
+    dark: "var(--ds-text-subtle, ".concat(DN600, ")")
   },
   warning: {
-    light: colors.N700,
-    dark: colors.DN40
+    light: "var(--ds-text-subtle, ".concat(N700, ")"),
+    dark: "var(--ds-text-subtle, ".concat(DN40, ")")
   },
   normal: {
-    light: colors.B400,
-    dark: colors.B100
+    light: "var(--ds-text-subtle, ".concat(B400, ")"),
+    dark: "var(--ds-text-subtle, ".concat(B100, ")")
   }
 };
 export var getActionBackground = function getActionBackground(appearance, mode) {

package/dist/esm/version.json

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

package/dist/types/auto-dismiss-flag.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AutoDismissFlagProps } from './types';
 export declare const AUTO_DISMISS_SECONDS = 8;
 declare const AutoDismissFlag: (props: AutoDismissFlagProps) => JSX.Element;

package/dist/types/flag-actions.d.ts

@@ -1,8 +1,8 @@
 /** @jsx jsx */
-import { ComponentType } from 'react';
-import { CustomThemeButtonProps } from '@atlaskit/button/types';
-import { ThemeModes } from '@atlaskit/theme/types';
-import { ActionsType, AppearanceTypes } from './types';
+import type { ComponentType } from 'react';
+import type { CustomThemeButtonProps } from '@atlaskit/button/types';
+import type { ThemeModes } from '@atlaskit/theme/types';
+import type { ActionsType, AppearanceTypes } from './types';
 declare type Props = {
     appearance: AppearanceTypes;
     actions: ActionsType;

package/dist/types/flag-group.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { ReactElement } from 'react';
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-declare type Props = {
+declare type FlagGroupProps = {
     /** ID attribute used for DOM selection. */
     id?: string;
     /** Describes the specific role of this FlagGroup for users viewing the page with a screen reader (defaults to `Flag notifications`). */
@@ -23,5 +23,5 @@ declare type FlagGroupAPI = {
 };
 export declare const FlagGroupContext: import("react").Context<FlagGroupAPI>;
 export declare function useFlagGroup(): FlagGroupAPI;
-declare const FlagGroup: (props: Props) => JSX.Element;
+declare const FlagGroup: (props: FlagGroupProps) => JSX.Element;
 export default FlagGroup;

package/dist/types/flag.d.ts

@@ -1,3 +1,4 @@
-import { FlagProps } from './types';
+/// <reference types="react" />
+import type { FlagProps } from './types';
 declare const Flag: (props: FlagProps) => JSX.Element;
 export default Flag;

package/dist/types/internal/description.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface DescriptionProps {
+    testId?: string;
+    color: string;
+}
+declare const Description: FC<DescriptionProps>;
+export default Description;