@atlaskit/flag 14.5.1 → 14.5.2

package/dist/esm/flag-actions.js

@@ -1,6 +1,4 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3;
+/* eslint-disable @repo/internal/styles/no-nested-styles */
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
@@ -11,6 +9,46 @@ import { getActionBackground, getActionColor, getFlagFocusRingColor } from './th
 var gridSize = getGridSize();
 var separatorWidth = gridSize * 2;
 var defaultAppearanceTranslate = gridSize / 4;
+var separatorStyles = css({
+  display: 'inline-block',
+  width: separatorWidth,
+  textAlign: 'center'
+});
+var actionContainerStyles = css({
+  display: 'flex',
+  paddingTop: gridSize,
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  transform: "translateX(-".concat(defaultAppearanceTranslate, "px)")
+});
+var boldActionContainerStyles = css({
+  transform: 0
+});
+var buttonStyles = css({
+  '&&, a&&': {
+    marginLeft: 0,
+    padding: "0 ".concat(gridSize, "px !important"),
+    background: "var(--bg-color)",
+    color: "var(--color) !important",
+    fontWeight: 500
+  },
+  '&&:focus, a&&:focus': {
+    boxShadow: "0 0 0 2px var(--focus-color)"
+  },
+  '&&:hover, &&:active, a&&:hover, a&&:active': {
+    textDecoration: 'underline'
+  }
+});
+var appeanceNormalButtonStyles = css({
+  '&&, a&&': {
+    padding: '0 !important'
+  }
+});
+var isBoldButtonStyles = css({
+  '&&, a&&': {
+    marginLeft: gridSize
+  }
+});
 
 var FlagActions = function FlagActions(props) {
   var _props$appearance = props.appearance,
@@ -27,11 +65,11 @@ var FlagActions = function FlagActions(props) {
 
   var isBold = appearance !== DEFAULT_APPEARANCE;
   return jsx("div", {
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        flex-wrap: wrap;\n        padding-top: ", "px;\n        transform: ", ";\n        align-items: center;\n      "])), gridSize, appearance === DEFAULT_APPEARANCE ? "translateX(-".concat(defaultAppearanceTranslate, "px)") : 0),
+    css: [actionContainerStyles, isBold && boldActionContainerStyles],
     "data-testid": testId && "".concat(testId, "-actions")
   }, actions.map(function (action, index) {
     return [index && !isBold ? jsx("div", {
-      css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              text-align: center;\n              display: inline-block;\n              width: ", "px;\n            "])), separatorWidth),
+      css: separatorStyles,
       key: index + 0.5
     }, "\xB7") : '', jsx(Button, {
       onClick: action.onClick,
@@ -42,7 +80,12 @@ var FlagActions = function FlagActions(props) {
       spacing: "compact",
       testId: action.testId,
       key: index,
-      css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            &&,\n            a&& {\n              margin-left: ", "px;\n              font-weight: 500;\n              padding: 0 ", "px !important;\n              background: ", ";\n              color: ", " !important;\n            }\n            &&:focus,\n            a&&:focus {\n              box-shadow: 0 0 0 2px ", ";\n            }\n            &&:hover,\n            &&:active,\n            a&&:hover,\n            a&&:active {\n              text-decoration: underline;\n            }\n          "])), index && isBold ? gridSize : 0, appearance === 'normal' ? 0 : gridSize, getActionBackground(appearance, mode), getActionColor(appearance, mode), getFlagFocusRingColor(appearance, mode))
+      style: {
+        '--color': getActionColor(appearance, mode),
+        '--bg-color': getActionBackground(appearance, mode),
+        '--focus-color': getFlagFocusRingColor(appearance, mode)
+      },
+      css: [buttonStyles, isBold && isBoldButtonStyles, appearance === 'normal' && appeanceNormalButtonStyles]
     }, action.content)];
   }));
 };

package/dist/esm/flag-group.js

@@ -1,13 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _typeof from "@babel/runtime/helpers/typeof";
 
-var _templateObject, _templateObject2, _templateObject3;
-
 /** @jsx jsx */
 import { Children, createContext, useContext, useMemo } from 'react';
 import { css, jsx } from '@emotion/core';
 import { easeIn, ExitingPersistence, SlideIn } from '@atlaskit/motion';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import noop from '@atlaskit/ds-lib/noop';
 import Portal from '@atlaskit/portal';
 import { gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
 var gridSize = getGridSize();
@@ -15,9 +14,6 @@ export var flagWidth = gridSize * 50;
 export var flagAnimationTime = 400;
 var flagBottom = gridSize * 6;
 var flagLeft = gridSize * 10;
-
-function noop() {}
-
 var defaultFlagGroupContext = {
   onDismissed: function onDismissed() {},
   isDismissAllowed: false
@@ -28,7 +24,51 @@ export function useFlagGroup() {
 } // transition: none is set on first-of-type to prevent a bug in Firefox
 // that causes a broken transition
 
-var baseStyles = "\n  bottom: 0;\n  position: absolute;\n  width: ".concat(flagWidth, "px;\n  transition: transform ").concat(flagAnimationTime, "ms ease-in-out;\n\n  @media (max-width: 560px) {\n    width: 100vw;\n  }\n\n  &:first-of-type {\n    transition: none;\n    transform: translate(0,0);\n  }\n\n  &:nth-of-type(n + 2) {\n    animation-duration: 0ms;\n    transform: translateX(0) translateY(100%) translateY(").concat(2 * gridSize, "px);\n  }\n\n  /* Layer the 'primary' flag above the 'secondary' flag */\n  &:nth-of-type(1) {\n    z-index: 5;\n  }\n  &:nth-of-type(2) {\n    z-index: 4;\n  }\n\n  &:nth-of-type(n + 4) {\n    visibility: hidden;\n  }\n");
+var baseStyles = css({
+  width: flagWidth,
+  position: 'absolute',
+  bottom: 0,
+  transition: "transform ".concat(flagAnimationTime, "ms ease-in-out"),
+  '@media (max-width: 560px)': {
+    width: '100vw'
+  },
+  ':first-of-type': {
+    transform: "translate(0,0)",
+    transition: 'none'
+  },
+  ':nth-of-type(n + 2)': {
+    animationDuration: '0ms',
+    transform: "translateX(0) translateY(100%) translateY(".concat(2 * gridSize, "px)")
+  },
+  ':nth-of-type(1)': {
+    zIndex: 5
+  },
+  ':nth-of-type(2)': {
+    zIndex: 4
+  },
+  '&:nth-of-type(n + 4)': {
+    visibility: 'hidden'
+  }
+}); // Transform needed to push up while 1st flag is leaving
+// Exiting time should match the exiting time of motion so is halved
+
+var dismissAllowedStyles = css({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '&& + *': {
+    transform: "translate(0, 0)",
+    transitionDuration: "".concat(flagAnimationTime / 2, "ms")
+  }
+});
+var flagGroupContainerStyles = css({
+  position: 'fixed',
+  zIndex: layers.flag(),
+  bottom: flagBottom,
+  left: flagLeft,
+  '@media (max-width: 560px)': {
+    bottom: 0,
+    left: 0
+  }
+});
 
 var FlagGroup = function FlagGroup(props) {
   var id = props.id,
@@ -51,17 +91,15 @@ var FlagGroup = function FlagGroup(props) {
     return children && _typeof(children) === 'object' ? Children.map(children, function (flag, index) {
       var isDismissAllowed = index === 0;
       return jsx(SlideIn, {
-        enterFrom: 'left',
-        fade: 'inout',
+        enterFrom: "left",
+        fade: "inout",
         duration: flagAnimationTime,
         animationTimingFunction: function animationTimingFunction() {
           return easeIn;
         }
       }, function (props) {
         return jsx("div", _extends({}, props, {
-          css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                    ", "\n                    ", "\n                  "])), baseStyles, isDismissAllowed ? // Transform needed to push up while 1st flag is leaving
-          // Exiting time should match the exiting time of motion so is halved
-          "\n                    && + * {\n                     transform: translate(0, 0);\n                     transition-duration: ".concat(flagAnimationTime / 2, "ms\n                   }") : '')
+          css: [baseStyles, isDismissAllowed && dismissAllowedStyles]
         }), jsx(FlagGroupContext.Provider, {
           value: // Only the first flag should be able to be dismissed.
           isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
@@ -74,10 +112,8 @@ var FlagGroup = function FlagGroup(props) {
     zIndex: layers.flag()
   }, jsx("div", {
     id: id,
-    css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          bottom: ", "px;\n          left: ", "px;\n          position: fixed;\n          z-index: ", ";\n          @media (max-width: 560px) {\n            bottom: 0;\n            left: 0;\n          }\n        "])), flagBottom, flagLeft, layers.flag())
-  }, hasFlags ? jsx(LabelTag, {
-    css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              border: 0;\n              clip: rect(1px, 1px, 1px, 1px);\n              height: 1px;\n              overflow: hidden;\n              padding: 0;\n              position: absolute;\n              white-space: nowrap;\n              width: 1px;\n            "])))
-  }, label) : null, jsx(ExitingPersistence, {
+    css: flagGroupContainerStyles
+  }, hasFlags ? jsx(VisuallyHidden, null, jsx(LabelTag, null, label)) : null, jsx(ExitingPersistence, {
     appear: false
   }, renderChildren())));
 };

package/dist/esm/flag.js

@@ -1,10 +1,7 @@
 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 _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; }
@@ -12,28 +9,41 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /** @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';
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.5.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,45 +118,57 @@ var Flag = function Flag(props) {
     onMouseOut: onMouseOut,
     onBlur: onBlurAnalytics
   };
-  var OptionalDismissButton = renderToggleOrDismissButton;
-  var boxShadow = "var(--ds-overlay, ".concat("0 20px 32px -8px ".concat(flagShadowColor), ")");
+  var boxShadow = "var(--ds-shadow-overlay, ".concat("0 20px 32px -8px ".concat(flagShadowColor), ")");
 
   if (!isBold) {
-    boxShadow = "var(--ds-overlay, ".concat("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);
-    var iconColour = getFlagIconColor(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                  color: ", ";\n                  display: flex;\n                  align-items: center;\n                  height: ", "px;\n                "])), iconColour, 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;