@atlaskit/flag 14.5.1 → 14.5.2

package/dist/es2019/flag.js

@@ -3,28 +3,41 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @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, getFlagIconColor } 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';
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.5.1"
+  packageVersion: "14.5.2"
 };
 const gridSize = getGridSize();
 const doubleGridSize = gridSize * 2;
 const headerHeight = gridSize * 4;
+const iconStyles = css({
+  display: 'flex',
+  height: headerHeight,
+  alignItems: 'center'
+});
+const flagHeaderStyles = css({
+  boxSizing: 'border-box',
+  width: '100%',
+  padding: doubleGridSize,
+  borderRadius: borderRadius()
+});
+const flagContainerStyles = css({
+  width: '100%',
+  zIndex: layers.flag(),
+  borderRadius: borderRadius(),
+  transition: 'background-color 200ms'
+});
 
 const Flag = props => {
   const {
@@ -59,74 +72,14 @@ const Flag = props => {
     ...analyticsAttributes
   });
   const isBold = appearance !== DEFAULT_APPEARANCE;
-  const renderToggleOrDismissButton = useCallback(({
-    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;
+  const toggleExpand = useCallback(() => {
+    setIsExpanded(previous => !previous);
+  }, []);
+  const buttonActionCallback = useCallback(() => {
+    if (isDismissAllowed) {
+      onDismissedAnalytics(id);
     }
-
-    let ButtonIcon = CrossIcon;
-    let buttonLabel = 'Dismiss';
-
-    let buttonAction = () => {
-      if (isDismissAllowed) {
-        onDismissedAnalytics(id);
-      }
-    };
-
-    let size = 'small';
-    let buttonTestId = testId && `${testId}-dismiss`;
-    let a11yProps = {};
-
-    if (isBold) {
-      ButtonIcon = isExpanded ? ChevronUpIcon : ChevronDownIcon;
-      buttonLabel = isExpanded ? 'Collapse' : 'Expand';
-
-      buttonAction = () => setIsExpanded(!isExpanded);
-
-      size = 'large';
-      buttonTestId = testId && `${testId}-toggle`;
-      a11yProps = {
-        'aria-expanded': isExpanded
-      };
-    }
-
-    return jsx("button", _extends({
-      css: css`
-            appearance: none;
-            background: none;
-            border: none;
-            border-radius: ${borderRadius()}px;
-            color: ${getFlagTextColor(appearance, mode)};
-            cursor: pointer;
-            flex: 0 0 auto;
-            line-height: 1;
-            margin-left: ${gridSize}px;
-            padding: 0;
-            white-space: nowrap;
-            &:focus {
-              outline: none;
-              box-shadow: 0 0 0 2px ${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(() => {
     // If buttons are removed as a prop, update isExpanded to be false
     if (isBold && isExpanded && !description && !actions.length) {
@@ -151,97 +104,57 @@ const Flag = props => {
     onMouseOut,
     onBlur: onBlurAnalytics
   };
-  const OptionalDismissButton = renderToggleOrDismissButton;
-  let boxShadow = `var(--ds-overlay, ${`0 20px 32px -8px ${flagShadowColor}`})`;
+  let boxShadow = `var(--ds-shadow-overlay, ${`0 20px 32px -8px ${flagShadowColor}`})`;
 
   if (!isBold) {
-    boxShadow = `var(--ds-overlay, ${`0 0 1px ${flagBorderColor}, ${boxShadow}`})`;
+    boxShadow = `var(--ds-shadow-overlay, ${`0 0 1px ${flagBorderColor}, ${boxShadow}`})`;
   }
 
-  return jsx(GlobalTheme.Consumer, null, tokens => {
-    const mode = tokens.mode;
-    const textColour = getFlagTextColor(appearance, mode);
-    const iconColour = getFlagIconColor(appearance, mode);
-    return jsx("div", _extends({
-      css: css`
-              background-color: ${getFlagBackgroundColor(appearance, mode)};
-              border-radius: ${borderRadius()}px;
-              box-shadow: ${boxShadow};
-              color: ${textColour};
-              transition: background-color 200ms;
-              width: 100%;
-              z-index: ${layers.flag()};
-            `,
-      role: "alert",
-      "data-testid": testId
-    }, autoDismissProps), jsx("div", {
-      css: css`
-                width: 100%;
-                padding: ${doubleGridSize}px;
-                box-sizing: border-box;
-                border-radius: ${borderRadius()}px;
-
-                &:focus-visible {
-                  outline: none;
-                  box-shadow: 0 0 0 2px
-                    ${getFlagFocusRingColor(appearance, mode)};
-                }
-
-                @supports not selector(*:focus-visible) {
-                  &:focus {
-                    outline: none;
-                    box-shadow: 0 0 0 2px
-                      ${getFlagFocusRingColor(appearance, mode)};
-                  }
-                }
-
-                @media screen and (forced-colors: active),
-                  screen and (-ms-high-contrast: active) {
-                  &:focus-visible {
-                    outline: 1px solid;
-                  }
-                }
-              ` // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      ,
-      tabIndex: 0
-    }, jsx("div", {
-      css: css`
-                  color: ${iconColour};
-                  display: flex;
-                  align-items: center;
-                  height: ${headerHeight}px;
-                `
-    }, icon, jsx("span", {
-      css: css`
-                    color: ${textColour};
-                    font-weight: 600;
-                    flex: 1;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    padding: 0 0 0 ${doubleGridSize}px;
-                  `
-    }, title), jsx(OptionalDismissButton, {
-      mode: mode
-    })), jsx(Expander, {
-      isExpanded: !isBold || isExpanded,
-      testId: testId
-    }, description && jsx("div", {
-      css: css`
-                      color: ${textColour};
-                      word-wrap: break-word;
-                      overflow: auto;
-                      max-height: 100px; /* height is defined as 5 lines maximum by design */
-                    `,
-      "data-testid": testId && `${testId}-description`
-    }, description), jsx(Actions, {
-      actions: actions,
-      appearance: appearance,
-      linkComponent: linkComponent,
-      testId: testId,
-      mode: mode
-    }))));
-  });
+  const {
+    mode
+  } = useGlobalTheme();
+  const textColor = getFlagTextColor(appearance, mode);
+  const iconColor = getFlagIconColor(appearance, mode);
+  const isDismissable = isBold || isDismissAllowed;
+  return jsx("div", _extends({
+    style: {
+      color: textColor,
+      backgroundColor: getFlagBackgroundColor(appearance, mode),
+      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 && `${testId}-description`,
+    color: textColor
+  }, description), jsx(Actions, {
+    actions: actions,
+    appearance: appearance,
+    linkComponent: linkComponent,
+    testId: testId,
+    mode: mode
+  })))));
 };
 
 export default Flag;

package/dist/es2019/internal/description.js

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

package/dist/es2019/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';
+const gridSize = getGridSize();
+const borderRadius = getBorderRadius();
+const dismissButtonStyles = css({
+  marginLeft: gridSize,
+  padding: 0,
+  flex: '0 0 auto',
+  appearance: 'none',
+  background: 'none',
+  border: 'none',
+  borderRadius,
+  cursor: 'pointer',
+  lineHeight: '1',
+  whiteSpace: 'nowrap'
+});
+
+const DismissButton = ({
+  appearance,
+  onClick,
+  isBold,
+  isExpanded,
+  testId
+}) => {
+  const {
+    mode
+  } = useGlobalTheme();
+  let ButtonIcon = CrossIcon;
+  let buttonLabel = 'Dismiss';
+  let size = 'small';
+  let buttonTestId = testId && `${testId}-dismiss`;
+
+  if (isBold) {
+    ButtonIcon = isExpanded ? ChevronUpIcon : ChevronDownIcon;
+    buttonLabel = isExpanded ? 'Collapse' : 'Expand';
+    size = 'large';
+    buttonTestId = testId && `${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/es2019/{expander.js → internal/expander.js}

@@ -3,6 +3,19 @@ import { css, jsx } from '@emotion/core';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
 import { gridSize } from '@atlaskit/theme/constants';
 const paddingLeft = gridSize() * 5;
+const expanderStyles = css({
+  display: 'flex',
+  minWidth: 0,
+  maxHeight: 0,
+  padding: `0 0 0 ${paddingLeft}px`,
+  justifyContent: 'center',
+  flex: '1 1 100%',
+  flexDirection: 'column',
+  transition: `max-height 0.3s`
+});
+const expandedStyles = css({
+  maxHeight: 150
+});
 
 const Expander = ({
   children,
@@ -14,16 +27,7 @@ const Expander = ({
   // the the reveal because we don't know the height of the content.
   return jsx("div", {
     "aria-hidden": !isExpanded,
-    css: css`
-        max-height: ${isExpanded ? 150 : 0}px;
-        transition: max-height 0.3s;
-        display: flex;
-        flex: 1 1 100%;
-        flex-direction: column;
-        justify-content: center;
-        min-width: 0;
-        padding: 0 0 0 ${paddingLeft}px;
-      `,
+    css: [expanderStyles, isExpanded && expandedStyles],
     "data-testid": testId && `${testId}-expander`
   }, jsx(ExitingPersistence, {
     appear: true

package/dist/es2019/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/es2019/internal/title.js

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

package/dist/es2019/theme.js

@@ -1,70 +1,70 @@
 import { B100, B400, DN40, DN50, DN600, G300, G400, N0, N200, N30A, N40, N500, N50A, N60A, N700, R300, R400, Y200, Y300 } from '@atlaskit/theme/colors';
 const flagBackgroundColor = {
   error: {
-    light: `var(--ds-background-overlay, ${R400})`,
-    dark: `var(--ds-background-overlay, ${R300})`
+    light: `var(--ds-surface-overlay, ${R400})`,
+    dark: `var(--ds-surface-overlay, ${R300})`
   },
   info: {
-    light: `var(--ds-background-overlay, ${N500})`,
-    dark: `var(--ds-background-overlay, ${N500})`
+    light: `var(--ds-surface-overlay, ${N500})`,
+    dark: `var(--ds-surface-overlay, ${N500})`
   },
   normal: {
-    light: `var(--ds-background-overlay, ${N0})`,
-    dark: `var(--ds-background-overlay, ${DN50})`
+    light: `var(--ds-surface-overlay, ${N0})`,
+    dark: `var(--ds-surface-overlay, ${DN50})`
   },
   success: {
-    light: `var(--ds-background-overlay, ${G400})`,
-    dark: `var(--ds-background-overlay, ${G300})`
+    light: `var(--ds-surface-overlay, ${G400})`,
+    dark: `var(--ds-surface-overlay, ${G300})`
   },
   warning: {
-    light: `var(--ds-background-overlay, ${Y200})`,
-    dark: `var(--ds-background-overlay, ${Y300})`
+    light: `var(--ds-surface-overlay, ${Y200})`,
+    dark: `var(--ds-surface-overlay, ${Y300})`
   }
 };
 export const getFlagBackgroundColor = (appearance, mode) => flagBackgroundColor[appearance][mode];
-export const flagBorderColor = `var(--ds-background-overlay, ${N60A})`;
+export const flagBorderColor = `var(--ds-surface-overlay, ${N60A})`;
 const flagIconColor = {
   error: {
-    light: `var(--ds-iconBorder-danger, ${N0})`,
-    dark: `var(--ds-iconBorder-danger, ${DN40})`
+    light: `var(--ds-icon-danger, ${N0})`,
+    dark: `var(--ds-icon-danger, ${DN40})`
   },
   info: {
-    light: `var(--ds-iconBorder-discovery, ${N0})`,
-    dark: `var(--ds-iconBorder-discovery, ${DN600})`
+    light: `var(--ds-icon-discovery, ${N0})`,
+    dark: `var(--ds-icon-discovery, ${DN600})`
   },
   normal: {
-    light: `var(--ds-iconBorder-brand, ${N500})`,
-    dark: `var(--ds-iconBorder-brand, ${DN600})`
+    light: `var(--ds-icon-brand, ${N500})`,
+    dark: `var(--ds-icon-brand, ${DN600})`
   },
   success: {
-    light: `var(--ds-iconBorder-success, ${N0})`,
-    dark: `var(--ds-iconBorder-success, ${DN40})`
+    light: `var(--ds-icon-success, ${N0})`,
+    dark: `var(--ds-icon-success, ${DN40})`
   },
   warning: {
-    light: `var(--ds-iconBorder-warning, ${N700})`,
-    dark: `var(--ds-iconBorder-warning, ${DN40})`
+    light: `var(--ds-icon-warning, ${N700})`,
+    dark: `var(--ds-icon-warning, ${DN40})`
   }
 };
 const flagTextColor = {
   error: {
-    light: `var(--ds-text-highEmphasis, ${N0})`,
-    dark: `var(--ds-text-highEmphasis, ${DN40})`
+    light: `var(--ds-text, ${N0})`,
+    dark: `var(--ds-text, ${DN40})`
   },
   info: {
-    light: `var(--ds-text-highEmphasis, ${N0})`,
-    dark: `var(--ds-text-highEmphasis, ${DN600})`
+    light: `var(--ds-text, ${N0})`,
+    dark: `var(--ds-text, ${DN600})`
   },
   normal: {
-    light: `var(--ds-text-highEmphasis, ${N500})`,
-    dark: `var(--ds-text-highEmphasis, ${DN600})`
+    light: `var(--ds-text, ${N500})`,
+    dark: `var(--ds-text, ${DN600})`
   },
   success: {
-    light: `var(--ds-text-highEmphasis, ${N0})`,
-    dark: `var(--ds-text-highEmphasis, ${DN40})`
+    light: `var(--ds-text, ${N0})`,
+    dark: `var(--ds-text, ${DN40})`
   },
   warning: {
-    light: `var(--ds-text-highEmphasis, ${N700})`,
-    dark: `var(--ds-text-highEmphasis, ${DN40})`
+    light: `var(--ds-text, ${N700})`,
+    dark: `var(--ds-text, ${DN40})`
   }
 };
 export const getFlagTextColor = (appearance, mode) => flagTextColor[appearance][mode];
@@ -74,70 +74,70 @@ export const getFlagIconColor = (appearance, mode) => flagIconColor[appearance][
 export const flagShadowColor = N50A;
 const flagFocusRingColor = {
   error: {
-    light: `var(--ds-border-focus, ${N40})`,
-    dark: `var(--ds-border-focus, ${N40})`
+    light: `var(--ds-border-focused, ${N40})`,
+    dark: `var(--ds-border-focused, ${N40})`
   },
   info: {
-    light: `var(--ds-border-focus, ${N40})`,
-    dark: `var(--ds-border-focus, ${N40})`
+    light: `var(--ds-border-focused, ${N40})`,
+    dark: `var(--ds-border-focused, ${N40})`
   },
   normal: {
-    light: `var(--ds-border-focus, ${B100})`,
-    dark: `var(--ds-border-focus, ${B100})`
+    light: `var(--ds-border-focused, ${B100})`,
+    dark: `var(--ds-border-focused, ${B100})`
   },
   success: {
-    light: `var(--ds-border-focus, ${N40})`,
-    dark: `var(--ds-border-focus, ${N40})`
+    light: `var(--ds-border-focused, ${N40})`,
+    dark: `var(--ds-border-focused, ${N40})`
   },
   warning: {
-    light: `var(--ds-border-focus, ${N200})`,
-    dark: `var(--ds-border-focus, ${N200})`
+    light: `var(--ds-border-focused, ${N200})`,
+    dark: `var(--ds-border-focused, ${N200})`
   }
 };
 export const getFlagFocusRingColor = (appearance, mode) => flagFocusRingColor[appearance][mode];
 const lightButtonBackground = 'rgba(255, 255, 255, 0.08)';
 const actionBackground = {
   success: {
-    light: `var(--ds-background-subtleNeutral-resting, ${lightButtonBackground})`,
-    dark: `var(--ds-background-subtleNeutral-resting, ${N30A})`
+    light: `var(--ds-background-neutral, ${lightButtonBackground})`,
+    dark: `var(--ds-background-neutral, ${N30A})`
   },
   info: {
-    light: `var(--ds-background-subtleNeutral-resting, ${lightButtonBackground})`,
-    dark: `var(--ds-background-subtleNeutral-resting, ${lightButtonBackground})`
+    light: `var(--ds-background-neutral, ${lightButtonBackground})`,
+    dark: `var(--ds-background-neutral, ${lightButtonBackground})`
   },
   error: {
-    light: `var(--ds-background-subtleNeutral-resting, ${lightButtonBackground})`,
-    dark: `var(--ds-background-subtleNeutral-resting, ${N30A})`
+    light: `var(--ds-background-neutral, ${lightButtonBackground})`,
+    dark: `var(--ds-background-neutral, ${N30A})`
   },
   warning: {
-    light: `var(--ds-background-subtleNeutral-resting, ${N30A})`,
-    dark: `var(--ds-background-subtleNeutral-resting, ${N30A})`
+    light: `var(--ds-background-neutral, ${N30A})`,
+    dark: `var(--ds-background-neutral, ${N30A})`
   },
   normal: {
-    light: "var(--ds-background-subtleNeutral-resting, none)",
-    dark: "var(--ds-background-subtleNeutral-resting, none)"
+    light: "var(--ds-background-neutral, none)",
+    dark: "var(--ds-background-neutral, none)"
   }
 };
 const actionColor = {
   success: {
-    light: `var(--ds-text-mediumEmphasis, ${N0})`,
-    dark: `var(--ds-text-mediumEmphasis, ${DN40})`
+    light: `var(--ds-text-subtle, ${N0})`,
+    dark: `var(--ds-text-subtle, ${DN40})`
   },
   info: {
-    light: `var(--ds-text-mediumEmphasis, ${N0})`,
-    dark: `var(--ds-text-mediumEmphasis, ${DN600})`
+    light: `var(--ds-text-subtle, ${N0})`,
+    dark: `var(--ds-text-subtle, ${DN600})`
   },
   error: {
-    light: `var(--ds-text-mediumEmphasis, ${N0})`,
-    dark: `var(--ds-text-mediumEmphasis, ${DN600})`
+    light: `var(--ds-text-subtle, ${N0})`,
+    dark: `var(--ds-text-subtle, ${DN600})`
   },
   warning: {
-    light: `var(--ds-text-mediumEmphasis, ${N700})`,
-    dark: `var(--ds-text-mediumEmphasis, ${DN40})`
+    light: `var(--ds-text-subtle, ${N700})`,
+    dark: `var(--ds-text-subtle, ${DN40})`
   },
   normal: {
-    light: `var(--ds-text-mediumEmphasis, ${B400})`,
-    dark: `var(--ds-text-mediumEmphasis, ${B100})`
+    light: `var(--ds-text-subtle, ${B400})`,
+    dark: `var(--ds-text-subtle, ${B100})`
   }
 };
 export const getActionBackground = (appearance, mode) => actionBackground[appearance][mode];

package/dist/es2019/version.json

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

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

@@ -1,14 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useRef } from 'react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
+import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 var packageName = "@atlaskit/flag";
-var packageVersion = "14.5.1";
+var packageVersion = "14.5.2";
 export var AUTO_DISMISS_SECONDS = 8;
 
-function noop() {}
-
 var AutoDismissFlag = function AutoDismissFlag(props) {
   var id = props.id,
       analyticsContext = props.analyticsContext,