@atlaskit/flag 14.5.1 → 14.5.2

package/dist/esm/theme.js

@@ -1,72 +1,72 @@
 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: "var(--ds-background-overlay, ".concat(R400, ")"),
-    dark: "var(--ds-background-overlay, ".concat(R300, ")")
+    light: "var(--ds-surface-overlay, ".concat(R400, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(R300, ")")
   },
   info: {
-    light: "var(--ds-background-overlay, ".concat(N500, ")"),
-    dark: "var(--ds-background-overlay, ".concat(N500, ")")
+    light: "var(--ds-surface-overlay, ".concat(N500, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(N500, ")")
   },
   normal: {
-    light: "var(--ds-background-overlay, ".concat(N0, ")"),
-    dark: "var(--ds-background-overlay, ".concat(DN50, ")")
+    light: "var(--ds-surface-overlay, ".concat(N0, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
   },
   success: {
-    light: "var(--ds-background-overlay, ".concat(G400, ")"),
-    dark: "var(--ds-background-overlay, ".concat(G300, ")")
+    light: "var(--ds-surface-overlay, ".concat(G400, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(G300, ")")
   },
   warning: {
-    light: "var(--ds-background-overlay, ".concat(Y200, ")"),
-    dark: "var(--ds-background-overlay, ".concat(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 = "var(--ds-background-overlay, ".concat(N60A, ")");
+export var flagBorderColor = "var(--ds-surface-overlay, ".concat(N60A, ")");
 var flagIconColor = {
   error: {
-    light: "var(--ds-iconBorder-danger, ".concat(N0, ")"),
-    dark: "var(--ds-iconBorder-danger, ".concat(DN40, ")")
+    light: "var(--ds-icon-danger, ".concat(N0, ")"),
+    dark: "var(--ds-icon-danger, ".concat(DN40, ")")
   },
   info: {
-    light: "var(--ds-iconBorder-discovery, ".concat(N0, ")"),
-    dark: "var(--ds-iconBorder-discovery, ".concat(DN600, ")")
+    light: "var(--ds-icon-discovery, ".concat(N0, ")"),
+    dark: "var(--ds-icon-discovery, ".concat(DN600, ")")
   },
   normal: {
-    light: "var(--ds-iconBorder-brand, ".concat(N500, ")"),
-    dark: "var(--ds-iconBorder-brand, ".concat(DN600, ")")
+    light: "var(--ds-icon-brand, ".concat(N500, ")"),
+    dark: "var(--ds-icon-brand, ".concat(DN600, ")")
   },
   success: {
-    light: "var(--ds-iconBorder-success, ".concat(N0, ")"),
-    dark: "var(--ds-iconBorder-success, ".concat(DN40, ")")
+    light: "var(--ds-icon-success, ".concat(N0, ")"),
+    dark: "var(--ds-icon-success, ".concat(DN40, ")")
   },
   warning: {
-    light: "var(--ds-iconBorder-warning, ".concat(N700, ")"),
-    dark: "var(--ds-iconBorder-warning, ".concat(DN40, ")")
+    light: "var(--ds-icon-warning, ".concat(N700, ")"),
+    dark: "var(--ds-icon-warning, ".concat(DN40, ")")
   }
 };
 var flagTextColor = {
   error: {
-    light: "var(--ds-text-highEmphasis, ".concat(N0, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(DN40, ")")
+    light: "var(--ds-text, ".concat(N0, ")"),
+    dark: "var(--ds-text, ".concat(DN40, ")")
   },
   info: {
-    light: "var(--ds-text-highEmphasis, ".concat(N0, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(DN600, ")")
+    light: "var(--ds-text, ".concat(N0, ")"),
+    dark: "var(--ds-text, ".concat(DN600, ")")
   },
   normal: {
-    light: "var(--ds-text-highEmphasis, ".concat(N500, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(DN600, ")")
+    light: "var(--ds-text, ".concat(N500, ")"),
+    dark: "var(--ds-text, ".concat(DN600, ")")
   },
   success: {
-    light: "var(--ds-text-highEmphasis, ".concat(N0, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(DN40, ")")
+    light: "var(--ds-text, ".concat(N0, ")"),
+    dark: "var(--ds-text, ".concat(DN40, ")")
   },
   warning: {
-    light: "var(--ds-text-highEmphasis, ".concat(N700, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(DN40, ")")
+    light: "var(--ds-text, ".concat(N700, ")"),
+    dark: "var(--ds-text, ".concat(DN40, ")")
   }
 };
 export var getFlagTextColor = function getFlagTextColor(appearance, mode) {
@@ -80,24 +80,24 @@ export var getFlagIconColor = function getFlagIconColor(appearance, mode) {
 export var flagShadowColor = N50A;
 var flagFocusRingColor = {
   error: {
-    light: "var(--ds-border-focus, ".concat(N40, ")"),
-    dark: "var(--ds-border-focus, ".concat(N40, ")")
+    light: "var(--ds-border-focused, ".concat(N40, ")"),
+    dark: "var(--ds-border-focused, ".concat(N40, ")")
   },
   info: {
-    light: "var(--ds-border-focus, ".concat(N40, ")"),
-    dark: "var(--ds-border-focus, ".concat(N40, ")")
+    light: "var(--ds-border-focused, ".concat(N40, ")"),
+    dark: "var(--ds-border-focused, ".concat(N40, ")")
   },
   normal: {
-    light: "var(--ds-border-focus, ".concat(B100, ")"),
-    dark: "var(--ds-border-focus, ".concat(B100, ")")
+    light: "var(--ds-border-focused, ".concat(B100, ")"),
+    dark: "var(--ds-border-focused, ".concat(B100, ")")
   },
   success: {
-    light: "var(--ds-border-focus, ".concat(N40, ")"),
-    dark: "var(--ds-border-focus, ".concat(N40, ")")
+    light: "var(--ds-border-focused, ".concat(N40, ")"),
+    dark: "var(--ds-border-focused, ".concat(N40, ")")
   },
   warning: {
-    light: "var(--ds-border-focus, ".concat(N200, ")"),
-    dark: "var(--ds-border-focus, ".concat(N200, ")")
+    light: "var(--ds-border-focused, ".concat(N200, ")"),
+    dark: "var(--ds-border-focused, ".concat(N200, ")")
   }
 };
 export var getFlagFocusRingColor = function getFlagFocusRingColor(appearance, mode) {
@@ -106,46 +106,46 @@ export var getFlagFocusRingColor = function getFlagFocusRingColor(appearance, mo
 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(N30A, ")")
+    light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-neutral, ".concat(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(N30A, ")")
+    light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-neutral, ".concat(N30A, ")")
   },
   warning: {
-    light: "var(--ds-background-subtleNeutral-resting, ".concat(N30A, ")"),
-    dark: "var(--ds-background-subtleNeutral-resting, ".concat(N30A, ")")
+    light: "var(--ds-background-neutral, ".concat(N30A, ")"),
+    dark: "var(--ds-background-neutral, ".concat(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(N0, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(DN40, ")")
+    light: "var(--ds-text-subtle, ".concat(N0, ")"),
+    dark: "var(--ds-text-subtle, ".concat(DN40, ")")
   },
   info: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(N0, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(DN600, ")")
+    light: "var(--ds-text-subtle, ".concat(N0, ")"),
+    dark: "var(--ds-text-subtle, ".concat(DN600, ")")
   },
   error: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(N0, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(DN600, ")")
+    light: "var(--ds-text-subtle, ".concat(N0, ")"),
+    dark: "var(--ds-text-subtle, ".concat(DN600, ")")
   },
   warning: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(N700, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(DN40, ")")
+    light: "var(--ds-text-subtle, ".concat(N700, ")"),
+    dark: "var(--ds-text-subtle, ".concat(DN40, ")")
   },
   normal: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(B400, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(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.5.1",
+	"version": "14.5.2",
 	"sideEffects": false
 }

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,4 +1,4 @@
 /// <reference types="react" />
-import { FlagProps } from './types';
+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;

package/dist/types/internal/dismiss-button.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { AppearanceTypes } from '../types';
+interface DismissButtonProps {
+    appearance: AppearanceTypes;
+    onClick: (...args: any) => void;
+    isExpanded: boolean;
+    isBold: boolean;
+    testId?: string;
+}
+declare const _default: import("react").MemoExoticComponent<({ appearance, onClick, isBold, isExpanded, testId, }: DismissButtonProps) => JSX.Element>;
+export default _default;

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

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { FC } from 'react';
+declare type ExpanderProps = {
+    isExpanded: boolean;
+    testId?: string;
+};
+declare const Expander: FC<ExpanderProps>;
+export default Expander;

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

@@ -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/types/internal/title.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface TitleProps {
+    color: string;
+}
+declare const Title: FC<TitleProps>;
+export default Title;

package/dist/types/theme.d.ts

@@ -1,7 +1,7 @@
 import { ThemeModes } from '@atlaskit/theme/types';
 import { AppearanceTypes } from './types';
 export declare const getFlagBackgroundColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
-export declare const flagBorderColor: "var(--ds-background-overlay)";
+export declare const flagBorderColor: "var(--ds-surface-overlay)";
 export declare const getFlagTextColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
 export declare const getFlagIconColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
 export declare const flagShadowColor = "rgba(9, 30, 66, 0.25)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/flag",
-  "version": "14.5.1",
+  "version": "14.5.2",
   "description": "A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,11 +25,14 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.0.0",
+    "@atlaskit/ds-lib": "^1.3.0",
+    "@atlaskit/focus-ring": "^0.2.2",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/motion": "^1.0.0",
     "@atlaskit/portal": "^4.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.5.0",
+    "@atlaskit/tokens": "^0.6.0",
+    "@atlaskit/visually-hidden": "^0.1.1",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -71,7 +74,8 @@
       ],
       "deprecation": "no-deprecated-imports",
       "styling": [
-        "emotion"
+        "emotion",
+        "static"
       ]
     }
   },

package/dist/types/expander.d.ts

@@ -1,9 +0,0 @@
-/** @jsx jsx */
-import { ReactNode } from 'react';
-declare type Props = {
-    children: ReactNode;
-    isExpanded: boolean;
-    testId?: string;
-};
-declare const Expander: ({ children, isExpanded, testId }: Props) => JSX.Element;
-export default Expander;

package/expander/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "@atlaskit/flag/expander",
-  "main": "../dist/cjs/expander.js",
-  "module": "../dist/esm/expander.js",
-  "module:es2019": "../dist/es2019/expander.js",
-  "types": "../dist/types/expander.d.ts"
-}