@atlaskit/flag 16.2.0 → 17.0.0

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

@@ -1,22 +1,16 @@
-import React, { memo } from 'react';
+/* dismiss-button.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./dismiss-button.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { memo } from 'react';
 import CloseIcon from '@atlaskit/icon/core/migration/close--cross';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down--hipchat-chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/utility/migration/chevron-up--hipchat-chevron-up';
-import { Pressable, xcss } from '@atlaskit/primitives';
+import { Pressable } from '@atlaskit/primitives/compiled';
 import { flagTextColorToken } from '../theme';
-var buttonStyles = xcss({
-  display: 'flex',
-  width: '24px',
-  height: '24px',
-  padding: 'space.0',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flex: '0 0 auto',
-  background: 'none',
-  borderStyle: 'none',
-  cursor: 'pointer',
-  whiteSpace: 'nowrap'
-});
+var styles = {
+  button: "_16jlidpf _1o9zidpf _i0dl1wug _1dqoglyw _1e0c1txw _1bsb1tcg _4t3i1tcg _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _4cvr1h6o _1bah1h6o _80omtlke _o5721q9c"
+};
 var DismissButtonComponent = function DismissButtonComponent(_ref) {
   var appearance = _ref.appearance,
     onClick = _ref.onClick,
@@ -34,8 +28,13 @@ var DismissButtonComponent = function DismissButtonComponent(_ref) {
     buttonTestId = testId && "".concat(testId, "-toggle");
   }
   return /*#__PURE__*/React.createElement(Pressable, {
-    xcss: buttonStyles,
-    onClick: onClick,
+    xcss: styles.button,
+    onClick: onClick
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: {
+      background: 'none'
+    },
     "aria-expanded": isBold ? isExpanded : undefined,
     testId: buttonTestId,
     "aria-label": buttonLabel

package/dist/esm/internal/expander.compiled.css

@@ -0,0 +1,2 @@
+
+._v5641xzp{transition:max-height .3s}._1bsb1osq{width:100%}

package/dist/esm/internal/expander.js

@@ -1,13 +1,14 @@
+/* expander.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { xcss, Stack, Box } from '@atlaskit/primitives';
+import "./expander.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
-var expanderStyles = xcss({
-  width: '100%'
-});
-var containerStyles = xcss({
-  transition: "max-height 0.3s"
-});
+import { Box, Stack } from '@atlaskit/primitives/compiled';
+var styles = {
+  expander: "_1bsb1osq",
+  container: "_v5641xzp"
+};
 var Expander = function Expander(_ref) {
   var children = _ref.children,
     isExpanded = _ref.isExpanded,
@@ -17,7 +18,7 @@ var Expander = function Expander(_ref) {
   // the the reveal because we don't know the height of the content.
 
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: containerStyles,
+    xcss: styles.expander,
     style: {
       maxHeight: isExpanded ? 150 : 0,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -31,7 +32,7 @@ var Expander = function Expander(_ref) {
     appear: true
   }, isExpanded && /*#__PURE__*/React.createElement(FadeIn, null, function (props) {
     return /*#__PURE__*/React.createElement(Box, _extends({
-      xcss: expanderStyles
+      xcss: styles.container
     }, props), /*#__PURE__*/React.createElement(Stack, {
       space: "space.100"
     }, children));

package/dist/types/constants.d.ts

@@ -1,6 +1,2 @@
 import { type AppearanceTypes } from './types';
 export declare const DEFAULT_APPEARANCE: AppearanceTypes;
-export declare const VAR_COLOR = "--color";
-export declare const VAR_BG_COLOR = "--bg-color";
-export declare const VAR_BG_COLOR_HOVER = "--bg-color-hover";
-export declare const VAR_BG_COLOR_ACTIVE = "--bg-color-active";

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

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import { type ReactElement } from 'react';
-import { jsx } from '@emotion/react';
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 type FlagGroupProps = {
     /**
@@ -34,7 +33,7 @@ type FlagGroupProps = {
      */
     shouldRenderToParent?: boolean;
 };
-export declare const flagWidth: number;
+export declare const flagWidth = 400;
 type FlagGroupAPI = {
     onDismissed: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
     isDismissAllowed: boolean;
@@ -49,5 +48,5 @@ export declare function useFlagGroup(): FlagGroupAPI;
  * - [Examples](https://atlassian.design/components/flag/flag-group/examples)
  * - [Code](https://atlassian.design/components/flag/flag-group/code)
  */
-declare const FlagGroup: (props: FlagGroupProps) => jsx.JSX.Element;
+declare const FlagGroup: (props: FlagGroupProps) => JSX.Element;
 export default FlagGroup;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { type AppearanceTypes } from '../types';
 interface DismissButtonProps {
     appearance: AppearanceTypes;
@@ -7,5 +7,5 @@ interface DismissButtonProps {
     isBold: boolean;
     testId?: string;
 }
-declare const DismissButton: React.MemoExoticComponent<({ appearance, onClick, isBold, isExpanded, testId, }: DismissButtonProps) => React.JSX.Element>;
+declare const DismissButton: import("react").MemoExoticComponent<({ appearance, onClick, isBold, isExpanded, testId, }: DismissButtonProps) => JSX.Element>;
 export default DismissButton;

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

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 type ExpanderProps = {
     isExpanded: boolean;
     testId?: string;
     children: React.ReactNode;
 };
-declare const Expander: ({ children, isExpanded, testId }: ExpanderProps) => React.JSX.Element;
+declare const Expander: ({ children, isExpanded, testId }: ExpanderProps) => JSX.Element;
 export default Expander;

package/dist/types/theme.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react';
-import { type BackgroundColor } from '@atlaskit/primitives';
+import { type BackgroundColor } from '@atlaskit/primitives/compiled';
 import { type AppearanceTypes, type HeadingColor } from './types';
 export declare const flagBackgroundColor: Record<AppearanceTypes, BackgroundColor>;
 export declare const flagIconColor: Record<AppearanceTypes, string>;

package/dist/types-ts4.5/constants.d.ts

@@ -1,6 +1,2 @@
 import { type AppearanceTypes } from './types';
 export declare const DEFAULT_APPEARANCE: AppearanceTypes;
-export declare const VAR_COLOR = "--color";
-export declare const VAR_BG_COLOR = "--bg-color";
-export declare const VAR_BG_COLOR_HOVER = "--bg-color-hover";
-export declare const VAR_BG_COLOR_ACTIVE = "--bg-color-active";

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

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import { type ReactElement } from 'react';
-import { jsx } from '@emotion/react';
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 type FlagGroupProps = {
     /**
@@ -34,7 +33,7 @@ type FlagGroupProps = {
      */
     shouldRenderToParent?: boolean;
 };
-export declare const flagWidth: number;
+export declare const flagWidth = 400;
 type FlagGroupAPI = {
     onDismissed: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
     isDismissAllowed: boolean;
@@ -49,5 +48,5 @@ export declare function useFlagGroup(): FlagGroupAPI;
  * - [Examples](https://atlassian.design/components/flag/flag-group/examples)
  * - [Code](https://atlassian.design/components/flag/flag-group/code)
  */
-declare const FlagGroup: (props: FlagGroupProps) => jsx.JSX.Element;
+declare const FlagGroup: (props: FlagGroupProps) => JSX.Element;
 export default FlagGroup;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { type AppearanceTypes } from '../types';
 interface DismissButtonProps {
     appearance: AppearanceTypes;
@@ -7,5 +7,5 @@ interface DismissButtonProps {
     isBold: boolean;
     testId?: string;
 }
-declare const DismissButton: React.MemoExoticComponent<({ appearance, onClick, isBold, isExpanded, testId, }: DismissButtonProps) => React.JSX.Element>;
+declare const DismissButton: import("react").MemoExoticComponent<({ appearance, onClick, isBold, isExpanded, testId, }: DismissButtonProps) => JSX.Element>;
 export default DismissButton;

package/dist/types-ts4.5/internal/expander.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 type ExpanderProps = {
     isExpanded: boolean;
     testId?: string;
     children: React.ReactNode;
 };
-declare const Expander: ({ children, isExpanded, testId }: ExpanderProps) => React.JSX.Element;
+declare const Expander: ({ children, isExpanded, testId }: ExpanderProps) => JSX.Element;
 export default Expander;

package/dist/types-ts4.5/theme.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react';
-import { type BackgroundColor } from '@atlaskit/primitives';
+import { type BackgroundColor } from '@atlaskit/primitives/compiled';
 import { type AppearanceTypes, type HeadingColor } from './types';
 export declare const flagBackgroundColor: Record<AppearanceTypes, BackgroundColor>;
 export declare const flagIconColor: Record<AppearanceTypes, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "16.2.0",
+	"version": "17.0.0",
 	"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/"
@@ -46,35 +46,36 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^21.1.0",
+		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/ds-lib": "^4.0.0",
 		"@atlaskit/heading": "^5.1.0",
-		"@atlaskit/icon": "^24.1.0",
-		"@atlaskit/motion": "^5.0.0",
-		"@atlaskit/platform-feature-flags": "1.1.0",
-		"@atlaskit/portal": "^5.0.0",
+		"@atlaskit/icon": "^25.0.0",
+		"@atlaskit/motion": "^5.1.0",
+		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/portal": "^5.1.0",
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.3.0",
+		"@atlaskit/tokens": "^4.5.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1"
+		"@compiled/react": "^0.18.2"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/accessibility-testing": "*",
-		"@af/integration-testing": "*",
-		"@af/visual-regression": "*",
-		"@atlaskit/docs": "*",
+		"@af/accessibility-testing": "^2.0.0",
+		"@af/integration-testing": "^0.5.0",
+		"@af/visual-regression": "^1.3.0",
+		"@atlaskit/docs": "^10.0.0",
 		"@atlaskit/drawer": "^10.0.0",
 		"@atlaskit/link": "^3.0.0",
 		"@atlaskit/radio": "^8.0.0",
-		"@atlaskit/section-message": "*",
+		"@atlaskit/section-message": "^8.1.0",
 		"@atlaskit/spinner": "^18.0.0",
-		"@atlaskit/ssr": "*",
-		"@atlaskit/visual-regression": "*",
-		"@atlassian/feature-flags-test-utils": "*",
+		"@atlaskit/ssr": "^0.4.0",
+		"@atlaskit/visual-regression": "^0.10.0",
+		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@emotion/jest": "^11.8.0",
 		"@testing-library/react": "^13.4.0",
 		"react-dom": "^18.2.0",