@atlaskit/flag 14.6.1 → 14.6.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/flag
 
+## 14.6.4
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 14.6.3
+
+### Patch Changes
+
+- [`8202e37941b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8202e37941b) - Internal code change turning on new linting rules.
+- Updated dependencies
+
+## 14.6.2
+
+### Patch Changes
+
+- [`982f05dc6b9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/982f05dc6b9) - [ux] Remove left indentation on bold flag's actions section
+
 ## 14.6.1
 
 ### Patch Changes

package/__perf__/{withFlagGroup.tsx → with-flag-group.tsx}

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import noop from '@atlaskit/ds-lib/noop';
 import SuccessIcon from '@atlaskit/icon/glyph/check-circle';
 import { G400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
@@ -20,7 +21,7 @@ export default () => (
       key="success"
       title="Connected"
       description="All wires now hooked up."
-      actions={[{ content: 'Alrighty then', onClick: () => {} }]}
+      actions={[{ content: 'Alrighty then', onClick: noop }]}
     />
   </FlagGroup>
 );

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

@@ -26,8 +26,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var packageName = "@atlaskit/flag";
-var packageVersion = "14.6.1";
+var packageVersion = "14.6.4";
 var AUTO_DISMISS_SECONDS = 8;
+/**
+ * __Auto dismiss flag__
+ *
+ * An auto dismiss flag is dismissed automatically after eight seconds.
+ *
+ * - [Examples](https://atlassian.design/components/flag/auto-dismiss-flag/examples)
+ * - [Code](https://atlassian.design/components/flag/auto-dismiss-flag/code)
+ */
+
 exports.AUTO_DISMISS_SECONDS = AUTO_DISMISS_SECONDS;
 
 var AutoDismissFlag = function AutoDismissFlag(props) {
@@ -77,7 +86,8 @@ var AutoDismissFlag = function AutoDismissFlag(props) {
     startAutoDismissTimer();
     return stopAutoDismissTimer;
   }, [startAutoDismissTimer, stopAutoDismissTimer]);
-  return /*#__PURE__*/_react.default.createElement(_flag.default, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_flag.default // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , (0, _extends2.default)({}, props, {
     onMouseOver: stopAutoDismissTimer,
     onFocus: stopAutoDismissTimer,
     onMouseOut: startAutoDismissTimer,

package/dist/cjs/flag-actions.js

@@ -60,7 +60,7 @@ var appeanceNormalButtonStyles = (0, _core.css)({
 });
 var isBoldButtonStyles = (0, _core.css)({
   '&&, a&&': {
-    marginLeft: gridSize
+    marginRight: gridSize
   }
 });
 
@@ -102,7 +102,8 @@ var FlagActions = function FlagActions(props) {
       css: [buttonStyles, isBold && isBoldButtonStyles, appearance === 'normal' && appeanceNormalButtonStyles]
     }, action.content)];
   }));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 var _default = FlagActions;
 exports.default = _default;

package/dist/cjs/flag-group.js

@@ -35,10 +35,12 @@ exports.flagAnimationTime = flagAnimationTime;
 var flagBottom = gridSize * 6;
 var flagLeft = gridSize * 10;
 var defaultFlagGroupContext = {
-  onDismissed: function onDismissed() {},
+  onDismissed: _noop.default,
   isDismissAllowed: false
-};
-var FlagGroupContext = /*#__PURE__*/(0, _react.createContext)(defaultFlagGroupContext);
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
+var FlagGroupContext = /*#__PURE__*/(0, _react.createContext)(defaultFlagGroupContext); // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 exports.FlagGroupContext = FlagGroupContext;
 
 function useFlagGroup() {
@@ -92,6 +94,14 @@ var flagGroupContainerStyles = (0, _core.css)({
     left: 0
   }
 });
+/**
+ * __Flag group__
+ *
+ * A flag group is used to group a set of related flags, with entry and exit animations.
+ *
+ * - [Examples](https://atlassian.design/components/flag/flag-group/examples)
+ * - [Code](https://atlassian.design/components/flag/flag-group/code)
+ */
 
 var FlagGroup = function FlagGroup(props) {
   var id = props.id,

package/dist/cjs/flag-provider.js

@@ -40,6 +40,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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) { (0, _defineProperty2.default)(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; }
 
 var FlagContext = /*#__PURE__*/_react.default.createContext(null);
+/**
+ * useFlags is used to access the `showFlags` function which can be used to programatically display flags.
+ * - [Examples](https://atlassian.design/components/flag/flags-provider/examples#using-showflags)
+ */
+
 
 function useFlags() {
   var api = (0, _react.useContext)(FlagContext);

package/dist/cjs/flag.js

@@ -44,7 +44,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.6.1"
+  packageVersion: "14.6.4"
 };
 var gridSize = (0, _constants.gridSize)();
 var doubleGridSize = gridSize * 2;
@@ -70,6 +70,16 @@ var flagContainerStyles = (0, _core.css)({
   borderRadius: (0, _constants.borderRadius)(),
   transition: 'background-color 200ms'
 });
+/**
+ * __Flag__
+ *
+ * A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction,
+ * often displayed using a flag group.
+ *
+ * - [Examples](https://atlassian.design/components/flag/examples)
+ * - [Code](https://atlassian.design/components/flag/code)
+ * - [Usage](https://atlassian.design/components/flag/usage)
+ */
 
 var Flag = function Flag(props) {
   var _props$actions = props.actions,

package/dist/cjs/internal/description.js

@@ -27,7 +27,8 @@ var Description = function Description(_ref) {
     css: [descriptionStyles],
     "data-testid": testId
   }, children);
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 var _default = Description;
 exports.default = _default;

package/dist/cjs/internal/expander.js

@@ -44,7 +44,8 @@ var Expander = function Expander(_ref) {
   }, isExpanded && (0, _core.jsx)(_motion.FadeIn, null, function (props) {
     return (0, _core.jsx)("div", props, children);
   })));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 var _default = Expander;
 exports.default = _default;

package/dist/cjs/internal/title.js

@@ -23,7 +23,8 @@ var Title = function Title(_ref) {
     },
     css: titleStyles
   }, children);
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 var _default = Title;
 exports.default = _default;

package/dist/cjs/types.js

@@ -4,7 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AppearanceArray = void 0;
+
+/* eslint-disable @repo/internal/react/consistent-types-definitions */
 // exported for testing - keep in sync from `type AppearanceTypes`
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var AppearanceArray = ['error', 'info', 'normal', 'success', 'warning']; // CreateFlagsArg makes id optional so define this prop separately
 
 exports.AppearanceArray = AppearanceArray;

package/dist/cjs/version.json

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

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

@@ -5,8 +5,16 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 const packageName = "@atlaskit/flag";
-const packageVersion = "14.6.1";
+const packageVersion = "14.6.4";
 export const AUTO_DISMISS_SECONDS = 8;
+/**
+ * __Auto dismiss flag__
+ *
+ * An auto dismiss flag is dismissed automatically after eight seconds.
+ *
+ * - [Examples](https://atlassian.design/components/flag/auto-dismiss-flag/examples)
+ * - [Code](https://atlassian.design/components/flag/auto-dismiss-flag/code)
+ */
 
 const AutoDismissFlag = props => {
   const {
@@ -55,7 +63,8 @@ const AutoDismissFlag = props => {
     startAutoDismissTimer();
     return stopAutoDismissTimer;
   }, [startAutoDismissTimer, stopAutoDismissTimer]);
-  return /*#__PURE__*/React.createElement(Flag, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Flag // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, props, {
     onMouseOver: stopAutoDismissTimer,
     onFocus: stopAutoDismissTimer,
     onMouseOut: startAutoDismissTimer,

package/dist/es2019/flag-actions.js

@@ -46,7 +46,7 @@ const appeanceNormalButtonStyles = css({
 });
 const isBoldButtonStyles = css({
   '&&, a&&': {
-    marginLeft: gridSize
+    marginRight: gridSize
   }
 });
 
@@ -86,6 +86,7 @@ const FlagActions = props => {
     },
     css: [buttonStyles, isBold && isBoldButtonStyles, appearance === 'normal' && appeanceNormalButtonStyles]
   }, action.content)]));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default FlagActions;

package/dist/es2019/flag-group.js

@@ -14,10 +14,12 @@ export const flagAnimationTime = 400;
 const flagBottom = gridSize * 6;
 const flagLeft = gridSize * 10;
 const defaultFlagGroupContext = {
-  onDismissed: () => {},
+  onDismissed: noop,
   isDismissAllowed: false
-};
-export const FlagGroupContext = /*#__PURE__*/createContext(defaultFlagGroupContext);
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
+export const FlagGroupContext = /*#__PURE__*/createContext(defaultFlagGroupContext); // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export function useFlagGroup() {
   return useContext(FlagGroupContext);
 } // transition: none is set on first-of-type to prevent a bug in Firefox
@@ -68,6 +70,14 @@ const flagGroupContainerStyles = css({
     left: 0
   }
 });
+/**
+ * __Flag group__
+ *
+ * A flag group is used to group a set of related flags, with entry and exit animations.
+ *
+ * - [Examples](https://atlassian.design/components/flag/flag-group/examples)
+ * - [Code](https://atlassian.design/components/flag/flag-group/code)
+ */
 
 const FlagGroup = props => {
   const {

package/dist/es2019/flag-provider.js

@@ -4,6 +4,11 @@ import AutoDismissFlag from './auto-dismiss-flag';
 import Flag from './flag';
 import FlagGroup from './flag-group';
 const FlagContext = /*#__PURE__*/React.createContext(null);
+/**
+ * useFlags is used to access the `showFlags` function which can be used to programatically display flags.
+ * - [Examples](https://atlassian.design/components/flag/flags-provider/examples#using-showflags)
+ */
+
 export function useFlags() {
   const api = useContext(FlagContext);
 

package/dist/es2019/flag.js

@@ -16,7 +16,7 @@ import { Title, Description, Expander, DismissButton } from './internal';
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.6.1"
+  packageVersion: "14.6.4"
 };
 const gridSize = getGridSize();
 const doubleGridSize = gridSize * 2;
@@ -42,6 +42,16 @@ const flagContainerStyles = css({
   borderRadius: borderRadius(),
   transition: 'background-color 200ms'
 });
+/**
+ * __Flag__
+ *
+ * A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction,
+ * often displayed using a flag group.
+ *
+ * - [Examples](https://atlassian.design/components/flag/examples)
+ * - [Code](https://atlassian.design/components/flag/code)
+ * - [Usage](https://atlassian.design/components/flag/usage)
+ */
 
 const Flag = props => {
   const {

package/dist/es2019/internal/description.js

@@ -18,6 +18,7 @@ const Description = ({
   },
   css: [descriptionStyles],
   "data-testid": testId
-}, children);
+}, children); // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default Description;

package/dist/es2019/internal/expander.js

@@ -33,6 +33,7 @@ const Expander = ({
   }, jsx(ExitingPersistence, {
     appear: true
   }, isExpanded && jsx(FadeIn, null, props => jsx("div", props, children))));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default Expander;

package/dist/es2019/internal/title.js

@@ -14,6 +14,7 @@ const Title = ({
     color
   },
   css: titleStyles
-}, children);
+}, children); // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default Title;

package/dist/es2019/types.js

@@ -1,2 +1,4 @@
+/* eslint-disable @repo/internal/react/consistent-types-definitions */
 // exported for testing - keep in sync from `type AppearanceTypes`
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const AppearanceArray = ['error', 'info', 'normal', 'success', 'warning']; // CreateFlagsArg makes id optional so define this prop separately

package/dist/es2019/version.json

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

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

@@ -5,8 +5,16 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 var packageName = "@atlaskit/flag";
-var packageVersion = "14.6.1";
+var packageVersion = "14.6.4";
 export var AUTO_DISMISS_SECONDS = 8;
+/**
+ * __Auto dismiss flag__
+ *
+ * An auto dismiss flag is dismissed automatically after eight seconds.
+ *
+ * - [Examples](https://atlassian.design/components/flag/auto-dismiss-flag/examples)
+ * - [Code](https://atlassian.design/components/flag/auto-dismiss-flag/code)
+ */
 
 var AutoDismissFlag = function AutoDismissFlag(props) {
   var id = props.id,
@@ -55,7 +63,8 @@ var AutoDismissFlag = function AutoDismissFlag(props) {
     startAutoDismissTimer();
     return stopAutoDismissTimer;
   }, [startAutoDismissTimer, stopAutoDismissTimer]);
-  return /*#__PURE__*/React.createElement(Flag, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Flag // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, props, {
     onMouseOver: stopAutoDismissTimer,
     onFocus: stopAutoDismissTimer,
     onMouseOut: startAutoDismissTimer,

package/dist/esm/flag-actions.js

@@ -46,7 +46,7 @@ var appeanceNormalButtonStyles = css({
 });
 var isBoldButtonStyles = css({
   '&&, a&&': {
-    marginLeft: gridSize
+    marginRight: gridSize
   }
 });
 
@@ -88,6 +88,7 @@ var FlagActions = function FlagActions(props) {
       css: [buttonStyles, isBold && isBoldButtonStyles, appearance === 'normal' && appeanceNormalButtonStyles]
     }, action.content)];
   }));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default FlagActions;

package/dist/esm/flag-group.js

@@ -15,10 +15,12 @@ export var flagAnimationTime = 400;
 var flagBottom = gridSize * 6;
 var flagLeft = gridSize * 10;
 var defaultFlagGroupContext = {
-  onDismissed: function onDismissed() {},
+  onDismissed: noop,
   isDismissAllowed: false
-};
-export var FlagGroupContext = /*#__PURE__*/createContext(defaultFlagGroupContext);
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
+export var FlagGroupContext = /*#__PURE__*/createContext(defaultFlagGroupContext); // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export function useFlagGroup() {
   return useContext(FlagGroupContext);
 } // transition: none is set on first-of-type to prevent a bug in Firefox
@@ -69,6 +71,14 @@ var flagGroupContainerStyles = css({
     left: 0
   }
 });
+/**
+ * __Flag group__
+ *
+ * A flag group is used to group a set of related flags, with entry and exit animations.
+ *
+ * - [Examples](https://atlassian.design/components/flag/flag-group/examples)
+ * - [Code](https://atlassian.design/components/flag/flag-group/code)
+ */
 
 var FlagGroup = function FlagGroup(props) {
   var id = props.id,

package/dist/esm/flag-provider.js

@@ -14,6 +14,11 @@ import AutoDismissFlag from './auto-dismiss-flag';
 import Flag from './flag';
 import FlagGroup from './flag-group';
 var FlagContext = /*#__PURE__*/React.createContext(null);
+/**
+ * useFlags is used to access the `showFlags` function which can be used to programatically display flags.
+ * - [Examples](https://atlassian.design/components/flag/flags-provider/examples#using-showflags)
+ */
+
 export function useFlags() {
   var api = useContext(FlagContext);
 

package/dist/esm/flag.js

@@ -22,7 +22,7 @@ import { Title, Description, Expander, DismissButton } from './internal';
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.6.1"
+  packageVersion: "14.6.4"
 };
 var gridSize = getGridSize();
 var doubleGridSize = gridSize * 2;
@@ -48,6 +48,16 @@ var flagContainerStyles = css({
   borderRadius: borderRadius(),
   transition: 'background-color 200ms'
 });
+/**
+ * __Flag__
+ *
+ * A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction,
+ * often displayed using a flag group.
+ *
+ * - [Examples](https://atlassian.design/components/flag/examples)
+ * - [Code](https://atlassian.design/components/flag/code)
+ * - [Usage](https://atlassian.design/components/flag/usage)
+ */
 
 var Flag = function Flag(props) {
   var _props$actions = props.actions,

package/dist/esm/internal/description.js

@@ -19,6 +19,7 @@ var Description = function Description(_ref) {
     css: [descriptionStyles],
     "data-testid": testId
   }, children);
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default Description;

package/dist/esm/internal/expander.js

@@ -34,6 +34,7 @@ var Expander = function Expander(_ref) {
   }, isExpanded && jsx(FadeIn, null, function (props) {
     return jsx("div", props, children);
   })));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default Expander;

package/dist/esm/internal/title.js

@@ -15,6 +15,7 @@ var Title = function Title(_ref) {
     },
     css: titleStyles
   }, children);
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default Title;

package/dist/esm/types.js

@@ -1,2 +1,4 @@
+/* eslint-disable @repo/internal/react/consistent-types-definitions */
 // exported for testing - keep in sync from `type AppearanceTypes`
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var AppearanceArray = ['error', 'info', 'normal', 'success', 'warning']; // CreateFlagsArg makes id optional so define this prop separately

package/dist/esm/version.json

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

package/dist/types/auto-dismiss-flag.d.ts

@@ -1,5 +1,13 @@
 /// <reference types="react" />
 import { AutoDismissFlagProps } from './types';
 export declare const AUTO_DISMISS_SECONDS = 8;
+/**
+ * __Auto dismiss flag__
+ *
+ * An auto dismiss flag is dismissed automatically after eight seconds.
+ *
+ * - [Examples](https://atlassian.design/components/flag/auto-dismiss-flag/examples)
+ * - [Code](https://atlassian.design/components/flag/auto-dismiss-flag/code)
+ */
 declare const AutoDismissFlag: (props: AutoDismissFlagProps) => JSX.Element;
 export default AutoDismissFlag;

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

@@ -3,12 +3,12 @@ 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 = {
+declare type FlagActionsProps = {
     appearance: AppearanceTypes;
     actions: ActionsType;
     linkComponent?: ComponentType<CustomThemeButtonProps>;
     mode: ThemeModes;
     testId?: string;
 };
-declare const FlagActions: (props: Props) => JSX.Element | null;
+declare const FlagActions: (props: FlagActionsProps) => JSX.Element | null;
 export default FlagActions;

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

@@ -2,15 +2,24 @@
 import { ReactElement } from 'react';
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 declare type FlagGroupProps = {
-    /** ID attribute used for DOM selection. */
+    /**
+     * 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`). */
+    /**
+     * Describes the specific role of this FlagGroup for users viewing the page with a screen reader (defaults to `Flag notifications`).
+     */
     label?: string;
-    /** Describes the specific tag on which the screen reader text will be rendered (defaults to `h2`). */
+    /**
+     * Describes the specific tag on which the screen reader text will be rendered (defaults to `h2`).
+     */
     labelTag?: React.ElementType;
-    /** Flag elements to be displayed. */
+    /**
+     * Flag elements to be displayed.
+     */
     children?: Array<ReactElement> | ReactElement | null | boolean;
-    /** Handler which will be called when a Flag's dismiss button is clicked.
+    /**
+     * Handler which will be called when a Flag's dismiss button is clicked.
      * Receives the id of the dismissed Flag as a parameter.
      */
     onDismissed?: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
@@ -23,5 +32,13 @@ declare type FlagGroupAPI = {
 };
 export declare const FlagGroupContext: import("react").Context<FlagGroupAPI>;
 export declare function useFlagGroup(): FlagGroupAPI;
+/**
+ * __Flag group__
+ *
+ * A flag group is used to group a set of related flags, with entry and exit animations.
+ *
+ * - [Examples](https://atlassian.design/components/flag/flag-group/examples)
+ * - [Code](https://atlassian.design/components/flag/flag-group/code)
+ */
 declare const FlagGroup: (props: FlagGroupProps) => JSX.Element;
 export default FlagGroup;

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

@@ -3,12 +3,15 @@ import { FlagPropsWithoutId } from './types';
 declare type FlagId = string | number;
 export declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export interface CreateFlagArgs extends FlagPropsWithoutId {
-    /** A unique identifier used for rendering and onDismissed callbacks.
+    /**
+     * A unique identifier used for rendering and onDismissed callbacks.
      * This will be autogenerated if you don’t supply one.
      * If you don’t want the same flag showing multiple times, provide a unique id.
      */
     id?: FlagId;
-    /** Marks whether the flag should render as an AutoDismissFlag */
+    /**
+     * Marks whether the flag should render as an AutoDismissFlag
+     */
     isAutoDismiss?: boolean;
 }
 export declare type FlagArgs = Combine<CreateFlagArgs, {
@@ -18,6 +21,10 @@ export declare type DismissFn = () => void;
 export declare type FlagAPI = {
     showFlag: (args: CreateFlagArgs) => DismissFn;
 };
+/**
+ * useFlags is used to access the `showFlags` function which can be used to programatically display flags.
+ * - [Examples](https://atlassian.design/components/flag/flags-provider/examples#using-showflags)
+ */
 export declare function useFlags(): FlagAPI;
 export declare function FlagsProvider({ children }: {
     children: React.ReactNode;

package/dist/types/flag.d.ts

@@ -1,4 +1,14 @@
 /// <reference types="react" />
 import type { FlagProps } from './types';
+/**
+ * __Flag__
+ *
+ * A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction,
+ * often displayed using a flag group.
+ *
+ * - [Examples](https://atlassian.design/components/flag/examples)
+ * - [Code](https://atlassian.design/components/flag/code)
+ * - [Usage](https://atlassian.design/components/flag/usage)
+ */
 declare const Flag: (props: FlagProps) => JSX.Element;
 export default Flag;

package/dist/types/types.d.ts

@@ -8,49 +8,61 @@ export declare type ActionType = {
     target?: string;
     testId?: string;
 };
-export declare type AppearanceTypes = 'error' | 'info' | 'normal' | 'success' | 'warning';
 export declare type ActionsType = Array<ActionType>;
+export declare type AppearanceTypes = 'error' | 'info' | 'normal' | 'success' | 'warning';
 export declare const AppearanceArray: AppearanceTypes[];
 declare type FlagPropsId = {
-    /** A unique identifier used for rendering and onDismissed callbacks. */
+    /**
+     * A unique identifier used for rendering and onDismissed callbacks.
+     */
     id: number | string;
 };
 declare type AutoDismissFlagPropsWithoutId = {
-    /** Array of clickable actions to be shown at the bottom of the flag. For flags where appearance
+    /**
+     * Array of clickable actions to be shown at the bottom of the flag. For flags where appearance
      * is 'normal', actions will be shown as links. For all other appearance values, actions will
      * shown as buttons.
      * If href is passed the action will be shown as a link with the passed href prop.
      */
     actions?: ActionsType;
-    /** Makes the flag appearance bold. Setting this to anything other than 'normal' hides the
+    /**
+     * Makes the flag appearance bold. Setting this to anything other than 'normal' hides the
      * dismiss button.
      */
     appearance?: AppearanceTypes;
-    /** The secondary content shown below the flag title */
+    /**
+     * The secondary content shown below the flag title
+     */
     description?: ReactNode;
-    /** The icon displayed in the top-left of the flag. Should be an instance of `@atlaskit/icon`.
+    /**
+     * The icon displayed in the top-left of the flag. Should be an instance of `@atlaskit/icon`.
      * Your icon will receive the appropriate default color, which you can override by wrapping the
      * icon in a containing element with CSS `color` set to your preferred icon color.
      */
     icon: ReactNode;
-    /** The bold text shown at the top of the flag. */
+    /**
+     * The bold text shown at the top of the flag.
+     */
     title: ReactNode;
-    /** Handler which will be called when a Flag's dismiss button is clicked.
+    /**
+     * Handler which will be called when a Flag's dismiss button is clicked.
      * Receives the id of the dismissed Flag as a parameter.
      */
     onDismissed?: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
-    /** A link component that is passed down to the `@atlaskit/button` used by actions,
-    to allow custom routers to be used. See the
-    [button with router](https://atlaskit.atlassian.com/packages/design-system/button/example/ButtonWithRouter)
-    example of what this component should look like. */
+    /**
+     * A link component that is passed down to the `@atlaskit/button` used by actions,
+     * to allow custom routers to be used. See the
+     * [button with router](https://atlaskit.atlassian.com/packages/design-system/button/example/ButtonWithRouter)
+     * example of what this component should look like.
+     */
     linkComponent?: ComponentType<CustomThemeButtonProps>;
     /**
      * A `testId` prop is provided for specified elements,
      * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
      * serving as a hook for automated tests.
-  
+     *
      * Will set these elements when defined:
-  
+     *
      * - Flag root element - `{testId}`
      * - Close button visible on default flags - `{testId}-dismiss`
      * - Toggle button visible on bold flags - `{testId}-toggle`
@@ -59,19 +71,29 @@ declare type AutoDismissFlagPropsWithoutId = {
      * - Flag actions - `{testId}-actions`
      */
     testId?: string;
-    /** Additional information to be included in the `context` of analytics events that come from flag */
+    /**
+     * Additional information to be included in the `context` of analytics events that come from flag
+     */
     analyticsContext?: Record<string, any>;
 };
 export interface AutoDismissFlagProps extends AutoDismissFlagPropsWithoutId, FlagPropsId {
 }
 export interface FlagPropsWithoutId extends AutoDismissFlagPropsWithoutId, WithAnalyticsEventsProps {
-    /** Standard onBlur event, applied to Flag by AutoDismissFlag */
+    /**
+     * Standard onBlur event, applied to Flag by AutoDismissFlag
+     */
     onBlur?: (e: React.FocusEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
-    /** Standard onFocus event, applied to Flag by AutoDismissFlag */
+    /**
+     * Standard onFocus event, applied to Flag by AutoDismissFlag
+     */
     onFocus?: (e: React.FocusEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
-    /** Standard onMouseOut event, applied to Flag by AutoDismissFlag */
+    /**
+     * Standard onMouseOut event, applied to Flag by AutoDismissFlag
+     */
     onMouseOut?: MouseEventHandler;
-    /** Standard onMouseOver event, applied to Flag by AutoDismissFlag */
+    /**
+     * Standard onMouseOver event, applied to Flag by AutoDismissFlag
+     */
     onMouseOver?: MouseEventHandler;
 }
 export interface FlagProps extends FlagPropsWithoutId, FlagPropsId {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/flag",
-  "version": "14.6.1",
+  "version": "14.6.4",
   "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/"
@@ -13,7 +13,7 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
     "releaseModel": "scheduled",
@@ -23,20 +23,20 @@
     }
   },
   "af:exports": {
-    ".": "./src/index.ts",
+    ".": "./src/index.tsx",
     "./auto-dismiss-flag": "./src/auto-dismiss-flag.tsx",
-    "./constants": "./src/constants.ts",
+    "./constants": "./src/constants.tsx",
     "./flag-actions": "./src/flag-actions.tsx",
     "./flag-group": "./src/flag-group.tsx",
     "./flag-provider": "./src/flag-provider.tsx",
     "./flag": "./src/flag.tsx",
-    "./theme": "./src/theme.ts",
-    "./types": "./src/types.ts"
+    "./theme": "./src/theme.tsx",
+    "./types": "./src/types.tsx"
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/ds-lib": "^2.0.0",
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/focus-ring": "^1.0.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/motion": "^1.2.0",
@@ -64,7 +64,7 @@
     "jest-emotion": "^10.0.32",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.2.4"
+    "typescript": "4.3.5"
   },
   "keywords": [
     "atlaskit",
@@ -74,6 +74,7 @@
   "techstack": {
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
+      "design-system": "v1",
       "ui-components": [
         "lite-mode"
       ],