@atlaskit/flag 14.5.1 → 14.5.2

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

@@ -1,23 +1,31 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _core = require("@emotion/core");
 
 var _motion = require("@atlaskit/motion");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _templateObject;
-
+/** @jsx jsx */
 var paddingLeft = (0, _constants.gridSize)() * 5;
+var expanderStyles = (0, _core.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 = (0, _core.css)({
+  maxHeight: 150
+});
 
 var Expander = function Expander(_ref) {
   var children = _ref.children,
@@ -28,7 +36,7 @@ var Expander = function Expander(_ref) {
   // the the reveal because we don't know the height of the content.
   return (0, _core.jsx)("div", {
     "aria-hidden": !isExpanded,
-    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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")
   }, (0, _core.jsx)(_motion.ExitingPersistence, {
     appear: true

package/dist/cjs/internal/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Description", {
+  enumerable: true,
+  get: function get() {
+    return _description.default;
+  }
+});
+Object.defineProperty(exports, "DismissButton", {
+  enumerable: true,
+  get: function get() {
+    return _dismissButton.default;
+  }
+});
+Object.defineProperty(exports, "Expander", {
+  enumerable: true,
+  get: function get() {
+    return _expander.default;
+  }
+});
+Object.defineProperty(exports, "Title", {
+  enumerable: true,
+  get: function get() {
+    return _title.default;
+  }
+});
+
+var _title = _interopRequireDefault(require("./title"));
+
+var _description = _interopRequireDefault(require("./description"));
+
+var _expander = _interopRequireDefault(require("./expander"));
+
+var _dismissButton = _interopRequireDefault(require("./dismiss-button"));

package/dist/cjs/internal/title.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+/** @jsx jsx */
+var titleStyles = (0, _core.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 (0, _core.jsx)("span", {
+    style: {
+      color: color
+    },
+    css: titleStyles
+  }, children);
+};
+
+var _default = Title;
+exports.default = _default;

package/dist/cjs/theme.js

@@ -9,24 +9,24 @@ var _colors = require("@atlaskit/theme/colors");
 
 var flagBackgroundColor = {
   error: {
-    light: "var(--ds-background-overlay, ".concat(_colors.R400, ")"),
-    dark: "var(--ds-background-overlay, ".concat(_colors.R300, ")")
+    light: "var(--ds-surface-overlay, ".concat(_colors.R400, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(_colors.R300, ")")
   },
   info: {
-    light: "var(--ds-background-overlay, ".concat(_colors.N500, ")"),
-    dark: "var(--ds-background-overlay, ".concat(_colors.N500, ")")
+    light: "var(--ds-surface-overlay, ".concat(_colors.N500, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(_colors.N500, ")")
   },
   normal: {
-    light: "var(--ds-background-overlay, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-background-overlay, ".concat(_colors.DN50, ")")
+    light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
   },
   success: {
-    light: "var(--ds-background-overlay, ".concat(_colors.G400, ")"),
-    dark: "var(--ds-background-overlay, ".concat(_colors.G300, ")")
+    light: "var(--ds-surface-overlay, ".concat(_colors.G400, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(_colors.G300, ")")
   },
   warning: {
-    light: "var(--ds-background-overlay, ".concat(_colors.Y200, ")"),
-    dark: "var(--ds-background-overlay, ".concat(_colors.Y300, ")")
+    light: "var(--ds-surface-overlay, ".concat(_colors.Y200, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(_colors.Y300, ")")
   }
 };
 
@@ -35,50 +35,50 @@ var getFlagBackgroundColor = function getFlagBackgroundColor(appearance, mode) {
 };
 
 exports.getFlagBackgroundColor = getFlagBackgroundColor;
-var flagBorderColor = "var(--ds-background-overlay, ".concat(_colors.N60A, ")");
+var flagBorderColor = "var(--ds-surface-overlay, ".concat(_colors.N60A, ")");
 exports.flagBorderColor = flagBorderColor;
 var flagIconColor = {
   error: {
-    light: "var(--ds-iconBorder-danger, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-iconBorder-danger, ".concat(_colors.DN40, ")")
+    light: "var(--ds-icon-danger, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-icon-danger, ".concat(_colors.DN40, ")")
   },
   info: {
-    light: "var(--ds-iconBorder-discovery, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-iconBorder-discovery, ".concat(_colors.DN600, ")")
+    light: "var(--ds-icon-discovery, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-icon-discovery, ".concat(_colors.DN600, ")")
   },
   normal: {
-    light: "var(--ds-iconBorder-brand, ".concat(_colors.N500, ")"),
-    dark: "var(--ds-iconBorder-brand, ".concat(_colors.DN600, ")")
+    light: "var(--ds-icon-brand, ".concat(_colors.N500, ")"),
+    dark: "var(--ds-icon-brand, ".concat(_colors.DN600, ")")
   },
   success: {
-    light: "var(--ds-iconBorder-success, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-iconBorder-success, ".concat(_colors.DN40, ")")
+    light: "var(--ds-icon-success, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-icon-success, ".concat(_colors.DN40, ")")
   },
   warning: {
-    light: "var(--ds-iconBorder-warning, ".concat(_colors.N700, ")"),
-    dark: "var(--ds-iconBorder-warning, ".concat(_colors.DN40, ")")
+    light: "var(--ds-icon-warning, ".concat(_colors.N700, ")"),
+    dark: "var(--ds-icon-warning, ".concat(_colors.DN40, ")")
   }
 };
 var flagTextColor = {
   error: {
-    light: "var(--ds-text-highEmphasis, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN40, ")")
+    light: "var(--ds-text, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text, ".concat(_colors.DN40, ")")
   },
   info: {
-    light: "var(--ds-text-highEmphasis, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN600, ")")
+    light: "var(--ds-text, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text, ".concat(_colors.DN600, ")")
   },
   normal: {
-    light: "var(--ds-text-highEmphasis, ".concat(_colors.N500, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN600, ")")
+    light: "var(--ds-text, ".concat(_colors.N500, ")"),
+    dark: "var(--ds-text, ".concat(_colors.DN600, ")")
   },
   success: {
-    light: "var(--ds-text-highEmphasis, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN40, ")")
+    light: "var(--ds-text, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text, ".concat(_colors.DN40, ")")
   },
   warning: {
-    light: "var(--ds-text-highEmphasis, ".concat(_colors.N700, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN40, ")")
+    light: "var(--ds-text, ".concat(_colors.N700, ")"),
+    dark: "var(--ds-text, ".concat(_colors.DN40, ")")
   }
 };
 
@@ -99,24 +99,24 @@ var flagShadowColor = _colors.N50A;
 exports.flagShadowColor = flagShadowColor;
 var flagFocusRingColor = {
   error: {
-    light: "var(--ds-border-focus, ".concat(_colors.N40, ")"),
-    dark: "var(--ds-border-focus, ".concat(_colors.N40, ")")
+    light: "var(--ds-border-focused, ".concat(_colors.N40, ")"),
+    dark: "var(--ds-border-focused, ".concat(_colors.N40, ")")
   },
   info: {
-    light: "var(--ds-border-focus, ".concat(_colors.N40, ")"),
-    dark: "var(--ds-border-focus, ".concat(_colors.N40, ")")
+    light: "var(--ds-border-focused, ".concat(_colors.N40, ")"),
+    dark: "var(--ds-border-focused, ".concat(_colors.N40, ")")
   },
   normal: {
-    light: "var(--ds-border-focus, ".concat(_colors.B100, ")"),
-    dark: "var(--ds-border-focus, ".concat(_colors.B100, ")")
+    light: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
+    dark: "var(--ds-border-focused, ".concat(_colors.B100, ")")
   },
   success: {
-    light: "var(--ds-border-focus, ".concat(_colors.N40, ")"),
-    dark: "var(--ds-border-focus, ".concat(_colors.N40, ")")
+    light: "var(--ds-border-focused, ".concat(_colors.N40, ")"),
+    dark: "var(--ds-border-focused, ".concat(_colors.N40, ")")
   },
   warning: {
-    light: "var(--ds-border-focus, ".concat(_colors.N200, ")"),
-    dark: "var(--ds-border-focus, ".concat(_colors.N200, ")")
+    light: "var(--ds-border-focused, ".concat(_colors.N200, ")"),
+    dark: "var(--ds-border-focused, ".concat(_colors.N200, ")")
   }
 };
 
@@ -128,46 +128,46 @@ exports.getFlagFocusRingColor = getFlagFocusRingColor;
 var lightButtonBackground = 'rgba(255, 255, 255, 0.08)';
 var actionBackground = {
   success: {
-    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
-    dark: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N30A, ")")
+    light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.N30A, ")")
   },
   info: {
-    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
-    dark: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")")
+    light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")")
   },
   error: {
-    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
-    dark: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N30A, ")")
+    light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.N30A, ")")
   },
   warning: {
-    light: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N30A, ")"),
-    dark: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N30A, ")")
+    light: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.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)"
   }
 };
 var actionColor = {
   success: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(_colors.DN40, ")")
+    light: "var(--ds-text-subtle, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text-subtle, ".concat(_colors.DN40, ")")
   },
   info: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(_colors.DN600, ")")
+    light: "var(--ds-text-subtle, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text-subtle, ".concat(_colors.DN600, ")")
   },
   error: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(_colors.DN600, ")")
+    light: "var(--ds-text-subtle, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text-subtle, ".concat(_colors.DN600, ")")
   },
   warning: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(_colors.N700, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(_colors.DN40, ")")
+    light: "var(--ds-text-subtle, ".concat(_colors.N700, ")"),
+    dark: "var(--ds-text-subtle, ".concat(_colors.DN40, ")")
   },
   normal: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(_colors.B400, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(_colors.B100, ")")
+    light: "var(--ds-text-subtle, ".concat(_colors.B400, ")"),
+    dark: "var(--ds-text-subtle, ".concat(_colors.B100, ")")
   }
 };
 

package/dist/cjs/version.json

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

package/dist/es2019/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';
 const packageName = "@atlaskit/flag";
-const packageVersion = "14.5.1";
+const packageVersion = "14.5.2";
 export const AUTO_DISMISS_SECONDS = 8;
 
-function noop() {}
-
 const AutoDismissFlag = props => {
   const {
     id,

package/dist/es2019/flag-actions.js

@@ -1,3 +1,5 @@
+/* eslint-disable @repo/internal/styles/no-nested-styles */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import Button from '@atlaskit/button/custom-theme-button';
@@ -7,6 +9,46 @@ import { getActionBackground, getActionColor, getFlagFocusRingColor } from './th
 const gridSize = getGridSize();
 const separatorWidth = gridSize * 2;
 const defaultAppearanceTranslate = gridSize / 4;
+const separatorStyles = css({
+  display: 'inline-block',
+  width: separatorWidth,
+  textAlign: 'center'
+});
+const actionContainerStyles = css({
+  display: 'flex',
+  paddingTop: gridSize,
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  transform: `translateX(-${defaultAppearanceTranslate}px)`
+});
+const boldActionContainerStyles = css({
+  transform: 0
+});
+const buttonStyles = css({
+  '&&, a&&': {
+    marginLeft: 0,
+    padding: `0 ${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'
+  }
+});
+const appeanceNormalButtonStyles = css({
+  '&&, a&&': {
+    padding: '0 !important'
+  }
+});
+const isBoldButtonStyles = css({
+  '&&, a&&': {
+    marginLeft: gridSize
+  }
+});
 
 const FlagActions = props => {
   const {
@@ -23,20 +65,10 @@ const FlagActions = props => {
 
   const isBold = appearance !== DEFAULT_APPEARANCE;
   return jsx("div", {
-    css: css`
-        display: flex;
-        flex-wrap: wrap;
-        padding-top: ${gridSize}px;
-        transform: ${appearance === DEFAULT_APPEARANCE ? `translateX(-${defaultAppearanceTranslate}px)` : 0};
-        align-items: center;
-      `,
+    css: [actionContainerStyles, isBold && boldActionContainerStyles],
     "data-testid": testId && `${testId}-actions`
   }, actions.map((action, index) => [index && !isBold ? jsx("div", {
-    css: css`
-              text-align: center;
-              display: inline-block;
-              width: ${separatorWidth}px;
-            `,
+    css: separatorStyles,
     key: index + 0.5
   }, "\xB7") : '', jsx(Button, {
     onClick: action.onClick,
@@ -47,26 +79,12 @@ const FlagActions = props => {
     spacing: "compact",
     testId: action.testId,
     key: index,
-    css: css`
-            &&,
-            a&& {
-              margin-left: ${index && isBold ? gridSize : 0}px;
-              font-weight: 500;
-              padding: 0 ${appearance === 'normal' ? 0 : gridSize}px !important;
-              background: ${getActionBackground(appearance, mode)};
-              color: ${getActionColor(appearance, mode)} !important;
-            }
-            &&:focus,
-            a&&:focus {
-              box-shadow: 0 0 0 2px ${getFlagFocusRingColor(appearance, mode)};
-            }
-            &&:hover,
-            &&:active,
-            a&&:hover,
-            a&&:active {
-              text-decoration: underline;
-            }
-          `
+    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/es2019/flag-group.js

@@ -4,6 +4,8 @@ import _extends from "@babel/runtime/helpers/extends";
 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';
 const gridSize = getGridSize();
@@ -11,9 +13,6 @@ export const flagWidth = gridSize * 50;
 export const flagAnimationTime = 400;
 const flagBottom = gridSize * 6;
 const flagLeft = gridSize * 10;
-
-function noop() {}
-
 const defaultFlagGroupContext = {
   onDismissed: () => {},
   isDismissAllowed: false
@@ -24,38 +23,51 @@ export function useFlagGroup() {
 } // transition: none is set on first-of-type to prevent a bug in Firefox
 // that causes a broken transition
 
-const baseStyles = `
-  bottom: 0;
-  position: absolute;
-  width: ${flagWidth}px;
-  transition: transform ${flagAnimationTime}ms ease-in-out;
-
-  @media (max-width: 560px) {
-    width: 100vw;
-  }
-
-  &:first-of-type {
-    transition: none;
-    transform: translate(0,0);
+const baseStyles = css({
+  width: flagWidth,
+  position: 'absolute',
+  bottom: 0,
+  transition: `transform ${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(${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
 
-  &:nth-of-type(n + 2) {
-    animation-duration: 0ms;
-    transform: translateX(0) translateY(100%) translateY(${2 * gridSize}px);
+const dismissAllowedStyles = css({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '&& + *': {
+    transform: `translate(0, 0)`,
+    transitionDuration: `${flagAnimationTime / 2}ms`
   }
-
-  /* Layer the 'primary' flag above the 'secondary' flag */
-  &:nth-of-type(1) {
-    z-index: 5;
-  }
-  &:nth-of-type(2) {
-    z-index: 4;
-  }
-
-  &:nth-of-type(n + 4) {
-    visibility: hidden;
+});
+const flagGroupContainerStyles = css({
+  position: 'fixed',
+  zIndex: layers.flag(),
+  bottom: flagBottom,
+  left: flagLeft,
+  '@media (max-width: 560px)': {
+    bottom: 0,
+    left: 0
   }
-`;
+});
 
 const FlagGroup = props => {
   const {
@@ -75,21 +87,12 @@ const FlagGroup = props => {
     return children && typeof children === 'object' ? Children.map(children, (flag, index) => {
       const isDismissAllowed = index === 0;
       return jsx(SlideIn, {
-        enterFrom: 'left',
-        fade: 'inout',
+        enterFrom: "left",
+        fade: "inout",
         duration: flagAnimationTime,
         animationTimingFunction: () => easeIn
       }, props => jsx("div", _extends({}, props, {
-        css: css`
-                    ${baseStyles}
-                    ${isDismissAllowed ? // Transform needed to push up while 1st flag is leaving
-        // Exiting time should match the exiting time of motion so is halved
-        `
-                    && + * {
-                     transform: translate(0, 0);
-                     transition-duration: ${flagAnimationTime / 2}ms
-                   }` : ''}
-                  `
+        css: [baseStyles, isDismissAllowed && dismissAllowedStyles]
       }), jsx(FlagGroupContext.Provider, {
         value: // Only the first flag should be able to be dismissed.
         isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
@@ -101,28 +104,8 @@ const FlagGroup = props => {
     zIndex: layers.flag()
   }, jsx("div", {
     id: id,
-    css: css`
-          bottom: ${flagBottom}px;
-          left: ${flagLeft}px;
-          position: fixed;
-          z-index: ${layers.flag()};
-          @media (max-width: 560px) {
-            bottom: 0;
-            left: 0;
-          }
-        `
-  }, hasFlags ? jsx(LabelTag, {
-    css: css`
-              border: 0;
-              clip: rect(1px, 1px, 1px, 1px);
-              height: 1px;
-              overflow: hidden;
-              padding: 0;
-              position: absolute;
-              white-space: nowrap;
-              width: 1px;
-            `
-  }, label) : null, jsx(ExitingPersistence, {
+    css: flagGroupContainerStyles
+  }, hasFlags ? jsx(VisuallyHidden, null, jsx(LabelTag, null, label)) : null, jsx(ExitingPersistence, {
     appear: false
   }, renderChildren())));
 };