@atlaskit/button 16.3.6 → 16.3.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/button
 
+## 16.3.8
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
+## 16.3.7
+
+### Patch Changes
+
+- [`14d635468f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/14d635468f6) - [ux] DSP-6696: prevent empty ButtonGroup items from showing spacing by switching to flexbox gap
+
 ## 16.3.6
 
 ### Patch Changes

package/button-group/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/button-group.js",
   "module:es2019": "../dist/es2019/entry-points/button-group.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/button-group.d.ts"
+  "types": "../dist/types/entry-points/button-group.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/button-group.d.ts"
+      ]
+    }
+  }
 }

package/custom-theme-button/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/custom-theme-button.js",
   "module:es2019": "../dist/es2019/entry-points/custom-theme-button.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/custom-theme-button.d.ts"
+  "types": "../dist/types/entry-points/custom-theme-button.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/custom-theme-button.d.ts"
+      ]
+    }
+  }
 }

package/dist/cjs/button-group.js

@@ -1,48 +1,38 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ButtonGroup;
-exports.groupItemStyles = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _core = require("@emotion/core");
 
-var _constants = require("@atlaskit/theme/constants");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
 
 /** @jsx jsx */
-var groupItemStyles = {
-  flex: '1 0 auto',
-  display: 'flex',
-
-  /* margins don't flip when the layout uses dir="rtl", whereas pseudos do */
-  '& + &::before': {
-    content: "''",
-    display: 'inline-block',
-    width: "".concat((0, _constants.gridSize)() / 2, "px")
-  }
-};
-exports.groupItemStyles = groupItemStyles;
+var buttonGroupStyles = (0, _core.css)({
+  display: 'inline-flex',
+  gap: 4
+});
 
 function ButtonGroup(_ref) {
   var appearance = _ref.appearance,
       children = _ref.children;
   return (0, _core.jsx)("div", {
-    css: {
-      display: 'inline-flex'
-    }
+    css: buttonGroupStyles
   }, _react.default.Children.map(children, function (child, idx) {
     if (!child) {
       return null;
     }
 
-    return (0, _core.jsx)("div", {
-      key: idx,
-      css: groupItemStyles
+    return (0, _core.jsx)(_react.Fragment, {
+      key: idx
     }, appearance ?
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-clone-element

package/dist/cjs/shared/button-base.js

@@ -101,7 +101,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.3.6",
+    packageVersion: "16.3.8",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.3.6",
+	"version": "16.3.8",
 	"sideEffects": false
 }

package/dist/es2019/button-group.js

@@ -1,34 +1,23 @@
 /** @jsx jsx */
-import React from 'react';
-import { jsx } from '@emotion/core';
-import { gridSize } from '@atlaskit/theme/constants';
-export const groupItemStyles = {
-  flex: '1 0 auto',
-  display: 'flex',
-
-  /* margins don't flip when the layout uses dir="rtl", whereas pseudos do */
-  '& + &::before': {
-    content: `''`,
-    display: 'inline-block',
-    width: `${gridSize() / 2}px`
-  }
-};
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/core';
+const buttonGroupStyles = css({
+  display: 'inline-flex',
+  gap: 4
+});
 export default function ButtonGroup({
   appearance,
   children
 }) {
   return jsx("div", {
-    css: {
-      display: 'inline-flex'
-    }
+    css: buttonGroupStyles
   }, React.Children.map(children, (child, idx) => {
     if (!child) {
       return null;
     }
 
-    return jsx("div", {
-      key: idx,
-      css: groupItemStyles
+    return jsx(Fragment, {
+      key: idx
     }, appearance ?
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-clone-element

package/dist/es2019/shared/button-base.js

@@ -68,7 +68,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.3.6",
+    packageVersion: "16.3.8",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.3.6",
+	"version": "16.3.8",
 	"sideEffects": false
 }

package/dist/esm/button-group.js

@@ -1,33 +1,22 @@
 /** @jsx jsx */
-import React from 'react';
-import { jsx } from '@emotion/core';
-import { gridSize } from '@atlaskit/theme/constants';
-export var groupItemStyles = {
-  flex: '1 0 auto',
-  display: 'flex',
-
-  /* margins don't flip when the layout uses dir="rtl", whereas pseudos do */
-  '& + &::before': {
-    content: "''",
-    display: 'inline-block',
-    width: "".concat(gridSize() / 2, "px")
-  }
-};
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/core';
+var buttonGroupStyles = css({
+  display: 'inline-flex',
+  gap: 4
+});
 export default function ButtonGroup(_ref) {
   var appearance = _ref.appearance,
       children = _ref.children;
   return jsx("div", {
-    css: {
-      display: 'inline-flex'
-    }
+    css: buttonGroupStyles
   }, React.Children.map(children, function (child, idx) {
     if (!child) {
       return null;
     }
 
-    return jsx("div", {
-      key: idx,
-      css: groupItemStyles
+    return jsx(Fragment, {
+      key: idx
     }, appearance ?
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-clone-element

package/dist/esm/shared/button-base.js

@@ -77,7 +77,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.3.6",
+    packageVersion: "16.3.8",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.3.6",
+	"version": "16.3.8",
 	"sideEffects": false
 }

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

@@ -8,13 +8,4 @@ export declare type ButtonGroupProps = {
     appearance?: Appearance;
     children?: React.ReactNode;
 };
-export declare const groupItemStyles: {
-    flex: string;
-    display: string;
-    '& + &::before': {
-        content: string;
-        display: string;
-        width: string;
-    };
-};
 export default function ButtonGroup({ appearance, children, }: ButtonGroupProps): JSX.Element;

package/dist/types-ts4.0/button-group.d.ts

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import React from 'react';
+import { Appearance } from './types';
+export declare type ButtonGroupProps = {
+    /**
+     * The appearance to apply to all buttons.
+     */
+    appearance?: Appearance;
+    children?: React.ReactNode;
+};
+export default function ButtonGroup({ appearance, children, }: ButtonGroupProps): JSX.Element;

package/dist/types-ts4.0/button.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BaseProps } from './types';
+export interface ButtonProps extends BaseProps {
+}
+/**
+ * __Button__
+ *
+ * A button triggers an event or action. They let users know what will happen next.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>>;
+export default Button;

package/dist/types-ts4.0/custom-theme-button/custom-theme-button-types.d.ts

@@ -0,0 +1,22 @@
+import { CSSObject } from '@emotion/core';
+import { ThemeModes } from '@atlaskit/theme/types';
+import { BaseProps } from '../types';
+export declare type ThemeTokens = {
+    buttonStyles: CSSObject;
+    spinnerStyles: CSSObject;
+};
+export declare type InteractionState = 'disabled' | 'focusSelected' | 'selected' | 'active' | 'hover' | 'focus' | 'default';
+export declare type CustomThemeButtonOwnProps = {
+    isLoading?: boolean;
+    /**
+     * Slow + discouraged custom theme API
+     * See custom theme guide for usage details
+     */
+    theme?: (current: (props: ThemeProps) => ThemeTokens, props: ThemeProps) => ThemeTokens;
+};
+export declare type CustomThemeButtonProps = Omit<BaseProps, 'overlay'> & CustomThemeButtonOwnProps;
+export declare type ThemeProps = Partial<CustomThemeButtonProps> & {
+    state: InteractionState;
+    iconIsOnlyChild?: boolean;
+    mode?: ThemeModes;
+};

package/dist/types-ts4.0/custom-theme-button/custom-theme-button.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * __Custom theme button__
+ *
+ * A custom theme button. Avoid using this component. It exists for those already using custom theming, which is hard to use and has performance issues.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
+ */
+declare const CustomThemeButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("..").BaseProps, "overlay"> & import("./custom-theme-button-types").CustomThemeButtonOwnProps & React.RefAttributes<HTMLElement>>>;
+export default CustomThemeButton;

package/dist/types-ts4.0/custom-theme-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './custom-theme-button';
+export { default as Theme } from './theme';

package/dist/types-ts4.0/custom-theme-button/theme.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { CSSObject } from '@emotion/core';
+import { InteractionState, ThemeProps, ThemeTokens } from './custom-theme-button-types';
+export declare function getCustomCss({ appearance, spacing, mode, isSelected, shouldFitContainer, iconIsOnlyChild, isLoading, state, }: ThemeProps): CSSObject;
+export declare function getSpecifiers(styles: CSSObject): CSSObject;
+export declare function defaultThemeFn(current: (values: ThemeProps) => ThemeTokens, values: ThemeProps): ThemeTokens;
+declare const Theme: {
+    Consumer: import("react").ComponentType<{
+        children: (tokens: ThemeTokens) => import("react").ReactNode;
+    } & Partial<import("./custom-theme-button-types").CustomThemeButtonProps> & {
+        state: InteractionState;
+        iconIsOnlyChild?: boolean | undefined;
+        mode?: import("@atlaskit/theme").ThemeModes | undefined;
+    }>;
+    Provider: import("react").ComponentType<{
+        children?: import("react").ReactNode;
+        value?: import("@atlaskit/theme/components").ThemeProp<ThemeTokens, ThemeProps> | undefined;
+    }>;
+    useTheme: (props: ThemeProps) => ThemeTokens;
+};
+export default Theme;

package/dist/types-ts4.0/entry-points/button-group.d.ts

@@ -0,0 +1 @@
+export { default } from '../button-group';

package/dist/types-ts4.0/entry-points/custom-theme-button.d.ts

@@ -0,0 +1,2 @@
+export { default, Theme } from '../custom-theme-button';
+export type { ThemeTokens, ThemeProps, InteractionState, CustomThemeButtonProps, CustomThemeButtonOwnProps, } from '../custom-theme-button/custom-theme-button-types';

package/dist/types-ts4.0/entry-points/loading-button.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../loading-button';
+export type { LoadingButtonProps, LoadingButtonOwnProps, } from '../loading-button';

package/dist/types-ts4.0/entry-points/standard-button.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Must import '@emotion/core' in order to resolve type error
+ * https://product-fabric.atlassian.net/browse/DSP-3222
+ */
+import '@emotion/core';
+export { default } from '../button';
+export type { ButtonProps } from '../button';

package/dist/types-ts4.0/entry-points/types.d.ts

@@ -0,0 +1,4 @@
+export type { Appearance, Spacing, BaseOwnProps, BaseProps } from '../types';
+export type { ButtonProps } from './standard-button';
+export type { LoadingButtonProps, LoadingButtonOwnProps, } from './loading-button';
+export type { ThemeTokens, ThemeProps, InteractionState, CustomThemeButtonProps, CustomThemeButtonOwnProps, } from './custom-theme-button';

package/dist/types-ts4.0/index.d.ts

@@ -0,0 +1,8 @@
+export type { Appearance, Spacing, BaseOwnProps, BaseProps, } from './entry-points/types';
+export { default, } from './entry-points/standard-button';
+export type { ButtonProps } from './entry-points/standard-button';
+export { default as LoadingButton } from './entry-points/loading-button';
+export type { LoadingButtonProps, LoadingButtonOwnProps, } from './entry-points/loading-button';
+export { default as CustomThemeButton, Theme, } from './entry-points/custom-theme-button';
+export type { ThemeTokens, ThemeProps, InteractionState, CustomThemeButtonProps, CustomThemeButtonOwnProps, } from './entry-points/custom-theme-button';
+export { default as ButtonGroup } from './entry-points/button-group';

package/dist/types-ts4.0/loading-button.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BaseProps } from './types';
+export declare type LoadingButtonOwnProps = {
+    isLoading?: boolean;
+};
+export declare type LoadingButtonProps = Omit<BaseProps, 'overlay'> & LoadingButtonOwnProps;
+/**
+ * __Loading button__
+ *
+ * A small wrapper around Button that allows you to show an @atlaskit/spinner as an overlay on the button when you set an isLoading prop to true.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples#loading-button)
+ */
+declare const LoadingButton: React.ForwardRefExoticComponent<Omit<BaseProps, "overlay"> & LoadingButtonOwnProps & React.RefAttributes<HTMLElement>>;
+export default LoadingButton;

package/dist/types-ts4.0/shared/block-events.d.ts

@@ -0,0 +1,3 @@
+export default function blockEvents({ isInteractive, }: {
+    isInteractive: boolean;
+}): React.DOMAttributes<HTMLElement>;

package/dist/types-ts4.0/shared/button-base.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import React from 'react';
+import { CSSObject } from '@emotion/core';
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.AllHTMLAttributes<HTMLElement>, "disabled">, "data-testid" | "data-has-overlay"> & {
+    'data-testid'?: undefined;
+    'data-has-overlay'?: undefined;
+}, keyof import("../types").BaseOwnProps> & import("../types").BaseOwnProps & {
+    buttonCss: CSSObject;
+} & React.RefAttributes<HTMLElement>>;
+export default _default;

package/dist/types-ts4.0/shared/colors.d.ts

@@ -0,0 +1,31 @@
+import { ThemeModes } from '@atlaskit/theme/types';
+import { Appearance } from '../types';
+export declare type ColorRule = {
+    [key in ThemeModes]: string;
+};
+export declare type ColorGroup = {
+    default: ColorRule;
+    hover?: ColorRule;
+    active?: ColorRule;
+    disabled?: ColorRule;
+    selected?: ColorRule;
+    focus?: ColorRule;
+    focusSelected?: ColorRule;
+};
+export declare type ColorPreset = {
+    [key in Appearance]: ColorGroup;
+};
+export declare type BoxShadowColorGroup = {
+    focus: ColorRule;
+    focusSelected: ColorRule;
+};
+declare type BoxShadowColorPreset = {
+    [key in Appearance]: BoxShadowColorGroup;
+};
+declare type Values = {
+    background: ColorPreset;
+    boxShadowColor: BoxShadowColorPreset;
+    color: ColorPreset;
+};
+declare const values: Values;
+export default values;

package/dist/types-ts4.0/shared/css.d.ts

@@ -0,0 +1,22 @@
+import { CSSObject } from '@emotion/core';
+import { ThemeModes } from '@atlaskit/theme/types';
+import { Appearance, Spacing } from '../types';
+export declare type GetCssArgs = {
+    appearance: Appearance;
+    spacing: Spacing;
+    mode: ThemeModes;
+    isSelected: boolean;
+    shouldFitContainer: boolean;
+    isOnlySingleIcon: boolean;
+};
+export declare function getCss({ appearance, spacing, mode, isSelected, shouldFitContainer, isOnlySingleIcon, }: GetCssArgs): CSSObject;
+export declare function getIconStyle({ spacing }: {
+    spacing: Spacing;
+}): CSSObject;
+export declare function getContentStyle({ spacing }: {
+    spacing: Spacing;
+}): CSSObject;
+export declare function getFadingCss({ hasOverlay, }: {
+    hasOverlay: boolean;
+}): CSSObject;
+export declare const overlayCss: CSSObject;

package/dist/types-ts4.0/shared/get-is-only-single-icon.d.ts

@@ -0,0 +1,2 @@
+import { BaseProps } from '../types';
+export default function getIsOnlySingleIcon({ children, iconBefore, iconAfter, }: Pick<BaseProps, 'children' | 'iconBefore' | 'iconAfter'>): boolean;

package/dist/types-ts4.0/shared/loading-spinner.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { BaseProps } from '../types';
+declare type LoadingSpinnerProps = Pick<BaseProps, 'appearance' | 'isDisabled' | 'isSelected' | 'spacing'>;
+export default function LoadingSpinner({ spacing, ...rest }: LoadingSpinnerProps): JSX.Element;
+export {};

package/dist/types-ts4.0/types.d.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+export declare type Appearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
+export declare type Spacing = 'compact' | 'default' | 'none';
+declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
+export declare type BaseOwnProps = {
+    /**
+     * The base styling to apply to the button
+     */
+    appearance?: Appearance;
+    /**
+     * Set the button to autofocus on mount
+     */
+    autoFocus?: boolean;
+    /**
+     * Add a classname to the button
+     */
+    className?: string;
+    /**
+     * Used to 'overlay' something over a button. This is commonly used to display a loading spinner
+     */
+    overlay?: React.ReactNode;
+    /**
+     * Provides a url for buttons being used as a link
+     */
+    href?: string;
+    /**
+     * Places an icon within the button, after the button's text
+     */
+    iconAfter?: React.ReactChild;
+    /**
+     * Places an icon within the button, before the button's text
+     */
+    iconBefore?: React.ReactChild;
+    /**
+     * Set if the button is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Change the style to indicate the button is selected
+     */
+    isSelected?: boolean;
+    /**
+     * Handler to be called on blur
+     */
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+    /**
+     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * Handler to be called on focus
+     */
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    /**
+     * Set the amount of padding in the button
+     */
+    spacing?: Spacing;
+    /**
+     * Pass target down to a link within the button component, if a href is provided
+     */
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /**
+     * Pass type down to a button
+     */
+    type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    /**
+     * Option to fit button width to its parent width
+     */
+    shouldFitContainer?: boolean;
+    /**
+     * Text content to be rendered in the button
+     */
+    children?: React.ReactNode;
+    /**
+     * 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
+     */
+    testId?: string;
+    component?: React.ComponentType<React.AllHTMLAttributes<HTMLElement>> | React.ElementType;
+    /**
+     * Additional information to be included in the `context` of analytics events that come from button
+     */
+    analyticsContext?: Record<string, any>;
+};
+export declare type BaseProps = Combine<Combine<Omit<React.AllHTMLAttributes<HTMLElement>, 'disabled'>, {
+    'data-testid'?: never;
+    'data-has-overlay'?: never;
+}>, BaseOwnProps>;
+export {};

package/loading-button/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/loading-button.js",
   "module:es2019": "../dist/es2019/entry-points/loading-button.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/loading-button.d.ts"
+  "types": "../dist/types/entry-points/loading-button.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/loading-button.d.ts"
+      ]
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.3.6",
+  "version": "16.3.8",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -34,7 +41,7 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/spinner": "^15.1.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
@@ -46,14 +53,14 @@
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/logo": "^13.8.0",
-    "@atlaskit/section-message": "^6.1.0",
-    "@atlaskit/select": "^15.6.0",
+    "@atlaskit/logo": "^13.9.0",
+    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/select": "^15.7.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/react": "^12.1.5",
     "@types/react-router-dom": "^4.3.1",
     "ast-types": "^0.13.3",
     "bind-event-listener": "^2.1.1",
@@ -64,7 +71,7 @@
     "react-router-dom": "^4.2.2",
     "react-test-renderer": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.3.5",
+    "typescript": "4.5.5",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {

package/standard-button/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/standard-button.js",
   "module:es2019": "../dist/es2019/entry-points/standard-button.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/standard-button.d.ts"
+  "types": "../dist/types/entry-points/standard-button.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/standard-button.d.ts"
+      ]
+    }
+  }
 }

package/types/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/types.js",
   "module:es2019": "../dist/es2019/entry-points/types.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/types.d.ts"
+  "types": "../dist/types/entry-points/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/types.d.ts"
+      ]
+    }
+  }
 }