@atlaskit/primitives 7.4.0 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,82 @@
 # @atlaskit/primitives
 
+## 8.0.0
+
+### Major Changes
+
+- [#109778](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109778)
+  [`d20b004b7c9dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d20b004b7c9dd) -
+  Box no longer supports usage as a button. Use
+  [the Pressable primitive](https://atlassian.design/components/primitives/pressable/examples)
+  instead, which is more specialized and has built-in event tracking support.
+
+  - Pressable has focus ring styles built-in, so remove existing styles including
+    `@atlaskit/focus-ring`
+  - Pressable has a default cursor (`cursor: pointer`) built-in, so existing styles can be removed.
+  - Pressable has a `isDisabled` prop, rather than direct usage of the `disabled` attribute.
+  - Pressable is built on Box, so no visual changes are expected.
+
+  **Before migration**
+
+  ```
+  import { Box, xcss } from '@atlaskit/primitives';
+  import FocusRing from '@atlaskit/focus-ring';
+
+  const buttonStyles = xcss({
+  	cursor: 'pointer',
+  	backgroundColor: 'color.background.brand.bold'
+  });
+
+
+  const MyApp = () => (
+  	<FocusRing>
+  		<Box
+  			as="button"
+  			xcss={buttonStyles}
+  			disabled={isDisabled}
+  		>
+  			Hello
+  		</Box>
+  	</FocusRing>
+  )
+  ```
+
+  **After migration**
+
+  ```
+  import { Pressable, xcss } from '@atlaskit/primitives';
+
+  const buttonStyles = xcss({
+  	backgroundColor: 'color.background.brand.bold'
+  });
+
+  const MyApp = () => (
+  	<Pressable
+  		xcss={buttonStyles}
+  		isDisabled={isDisabled}
+  	>
+  		Hello
+  	</Pressable>
+  );
+  ```
+
+### Minor Changes
+
+- [#108386](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108386)
+  [`8f3fa9e80b93c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8f3fa9e80b93c) -
+  Updated xl breakpoint to be 1768px instead of 1760px (110.5rem instead of 110rem) to match updated
+  design guidance.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.4.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.4.0
 
 ### Minor Changes

package/dist/cjs/components/anchor.js

@@ -88,7 +88,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.4.0",
+    packageVersion: "8.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/components/box.js

@@ -19,7 +19,7 @@ var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock",
  */
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// Can either Exclude or Extract - here we're excluding all SVG-related elements
+// Can either Exclude or Extract - here we're excluding all SVG-related elements and button (handled by Pressable)
 
 // Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

package/dist/cjs/components/pressable.js

@@ -81,7 +81,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.4.0",
+    packageVersion: "8.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -96,6 +96,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
   styles = Array.isArray(xcssStyles) ? [].concat((0, _toConsumableArray2.default)(styles), (0, _toConsumableArray2.default)(xcssStyles)) : [].concat((0, _toConsumableArray2.default)(styles), [xcssStyles]);
   return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({}, htmlAttributes, {
+    // @ts-expect-error - `as` is not compatible with Box. Pressable will be rewritten to diverge from Box soon.
     as: "button",
     ref: ref,
     testId: testId,

package/dist/cjs/responsive/constants.js

@@ -46,13 +46,13 @@ var UNSAFE_BREAKPOINTS_CONFIG = exports.UNSAFE_BREAKPOINTS_CONFIG = {
     gridItemGutter: "var(--ds-space-400, 32px)",
     gridMargin: "var(--ds-space-400, 32px)",
     min: '90rem',
-    max: '109.99rem'
+    max: '110.49rem'
   },
   // large high res
   xl: {
     gridItemGutter: "var(--ds-space-400, 32px)",
     gridMargin: "var(--ds-space-500, 40px)",
-    min: '110rem',
+    min: '110.5rem',
     max: null
   }
   // NOTE: We previously had an `xxl=135rem` breakpoint, but it was removed as it was not used anywhere and felt too large

package/dist/cjs/responsive/media-helper.js

@@ -21,22 +21,22 @@ var media = exports.media = {
     sm: '@media (min-width: 48rem)',
     md: '@media (min-width: 64rem)',
     lg: '@media (min-width: 90rem)',
-    xl: '@media (min-width: 110rem)'
+    xl: '@media (min-width: 110.5rem)'
   },
   only: {
     xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)',
     xs: '@media (min-width: 30rem) and (max-width: 47.99rem)',
     sm: '@media (min-width: 48rem) and (max-width: 63.99rem)',
     md: '@media (min-width: 64rem) and (max-width: 89.99rem)',
-    lg: '@media (min-width: 90rem) and (max-width: 109.99rem)',
-    xl: '@media (min-width: 110rem)'
+    lg: '@media (min-width: 90rem) and (max-width: 110.49rem)',
+    xl: '@media (min-width: 110.5rem)'
   },
   below: {
     xs: '@media not all and (min-width: 30rem)',
     sm: '@media not all and (min-width: 48rem)',
     md: '@media not all and (min-width: 64rem)',
     lg: '@media not all and (min-width: 90rem)',
-    xl: '@media not all and (min-width: 110rem)'
+    xl: '@media not all and (min-width: 110.5rem)'
   }
 };
 

package/dist/es2019/components/anchor.js

@@ -74,7 +74,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.4.0",
+    packageVersion: "8.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/box.js

@@ -11,7 +11,7 @@ import { backgroundColorStylesMap, isSurfaceColorToken, paddingStylesMap, surfac
 import { parseXcss } from '../xcss/xcss';
 import { SurfaceContext } from './internal/surface-provider';
 
-// Can either Exclude or Extract - here we're excluding all SVG-related elements
+// Can either Exclude or Extract - here we're excluding all SVG-related elements and button (handled by Pressable)
 
 // Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

package/dist/es2019/components/pressable.js

@@ -67,7 +67,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.4.0",
+    packageVersion: "8.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -82,6 +82,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
   // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
   styles = Array.isArray(xcssStyles) ? [...styles, ...xcssStyles] : [...styles, xcssStyles];
   return /*#__PURE__*/React.createElement(Box, _extends({}, htmlAttributes, {
+    // @ts-expect-error - `as` is not compatible with Box. Pressable will be rewritten to diverge from Box soon.
     as: "button",
     ref: ref,
     testId: testId,

package/dist/es2019/responsive/constants.js

@@ -40,13 +40,13 @@ export const UNSAFE_BREAKPOINTS_CONFIG = {
     gridItemGutter: "var(--ds-space-400, 32px)",
     gridMargin: "var(--ds-space-400, 32px)",
     min: '90rem',
-    max: '109.99rem'
+    max: '110.49rem'
   },
   // large high res
   xl: {
     gridItemGutter: "var(--ds-space-400, 32px)",
     gridMargin: "var(--ds-space-500, 40px)",
-    min: '110rem',
+    min: '110.5rem',
     max: null
   }
   // NOTE: We previously had an `xxl=135rem` breakpoint, but it was removed as it was not used anywhere and felt too large

package/dist/es2019/responsive/media-helper.js

@@ -15,22 +15,22 @@ export const media = {
     sm: '@media (min-width: 48rem)',
     md: '@media (min-width: 64rem)',
     lg: '@media (min-width: 90rem)',
-    xl: '@media (min-width: 110rem)'
+    xl: '@media (min-width: 110.5rem)'
   },
   only: {
     xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)',
     xs: '@media (min-width: 30rem) and (max-width: 47.99rem)',
     sm: '@media (min-width: 48rem) and (max-width: 63.99rem)',
     md: '@media (min-width: 64rem) and (max-width: 89.99rem)',
-    lg: '@media (min-width: 90rem) and (max-width: 109.99rem)',
-    xl: '@media (min-width: 110rem)'
+    lg: '@media (min-width: 90rem) and (max-width: 110.49rem)',
+    xl: '@media (min-width: 110.5rem)'
   },
   below: {
     xs: '@media not all and (min-width: 30rem)',
     sm: '@media not all and (min-width: 48rem)',
     md: '@media not all and (min-width: 64rem)',
     lg: '@media not all and (min-width: 90rem)',
-    xl: '@media not all and (min-width: 110rem)'
+    xl: '@media not all and (min-width: 110.5rem)'
   }
 };
 

package/dist/esm/components/anchor.js

@@ -78,7 +78,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.4.0",
+    packageVersion: "8.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/components/box.js

@@ -14,7 +14,7 @@ import { backgroundColorStylesMap, isSurfaceColorToken, paddingStylesMap, surfac
 import { parseXcss } from '../xcss/xcss';
 import { SurfaceContext } from './internal/surface-provider';
 
-// Can either Exclude or Extract - here we're excluding all SVG-related elements
+// Can either Exclude or Extract - here we're excluding all SVG-related elements and button (handled by Pressable)
 
 // Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

package/dist/esm/components/pressable.js

@@ -71,7 +71,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.4.0",
+    packageVersion: "8.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -86,6 +86,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
   styles = Array.isArray(xcssStyles) ? [].concat(_toConsumableArray(styles), _toConsumableArray(xcssStyles)) : [].concat(_toConsumableArray(styles), [xcssStyles]);
   return /*#__PURE__*/React.createElement(Box, _extends({}, htmlAttributes, {
+    // @ts-expect-error - `as` is not compatible with Box. Pressable will be rewritten to diverge from Box soon.
     as: "button",
     ref: ref,
     testId: testId,

package/dist/esm/responsive/constants.js

@@ -40,13 +40,13 @@ export var UNSAFE_BREAKPOINTS_CONFIG = {
     gridItemGutter: "var(--ds-space-400, 32px)",
     gridMargin: "var(--ds-space-400, 32px)",
     min: '90rem',
-    max: '109.99rem'
+    max: '110.49rem'
   },
   // large high res
   xl: {
     gridItemGutter: "var(--ds-space-400, 32px)",
     gridMargin: "var(--ds-space-500, 40px)",
-    min: '110rem',
+    min: '110.5rem',
     max: null
   }
   // NOTE: We previously had an `xxl=135rem` breakpoint, but it was removed as it was not used anywhere and felt too large

package/dist/esm/responsive/media-helper.js

@@ -15,22 +15,22 @@ export var media = {
     sm: '@media (min-width: 48rem)',
     md: '@media (min-width: 64rem)',
     lg: '@media (min-width: 90rem)',
-    xl: '@media (min-width: 110rem)'
+    xl: '@media (min-width: 110.5rem)'
   },
   only: {
     xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)',
     xs: '@media (min-width: 30rem) and (max-width: 47.99rem)',
     sm: '@media (min-width: 48rem) and (max-width: 63.99rem)',
     md: '@media (min-width: 64rem) and (max-width: 89.99rem)',
-    lg: '@media (min-width: 90rem) and (max-width: 109.99rem)',
-    xl: '@media (min-width: 110rem)'
+    lg: '@media (min-width: 90rem) and (max-width: 110.49rem)',
+    xl: '@media (min-width: 110.5rem)'
   },
   below: {
     xs: '@media not all and (min-width: 30rem)',
     sm: '@media not all and (min-width: 48rem)',
     md: '@media not all and (min-width: 64rem)',
     lg: '@media not all and (min-width: 90rem)',
-    xl: '@media not all and (min-width: 110rem)'
+    xl: '@media not all and (min-width: 110.5rem)'
   }
 };
 

package/dist/types/components/anchor.d.ts

@@ -2,7 +2,7 @@ import React, { type Ref } from 'react';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
 import { type BoxProps } from './box';
-export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'style' | 'onClick'> & {
+export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'onClick' | 'style' | 'className'> & {
     /**
      * Handler called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */

package/dist/types/components/box.d.ts

@@ -6,7 +6,7 @@ import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactEl
 import { type BackgroundColor, type Space } from '../xcss/style-maps.partial';
 import { type SVGElements } from './internal/types';
 import type { BasePrimitiveProps, StyleProp } from './types';
-type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
+type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements | 'button'>;
 type CustomElementType<P = any> = {
     [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
 }[AllowedElements];

package/dist/types/components/pressable.d.ts

@@ -1,12 +1,20 @@
-import React from 'react';
+import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { type BoxProps } from './box';
-export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style' | 'onClick'> & {
-    isDisabled?: boolean;
+import { type BackgroundColor, type Space } from '../xcss/style-maps.partial';
+import type { BasePrimitiveProps, StyleProp } from './types';
+type BasePressableProps = {
+    /**
+     * Elements to be rendered inside the Box.
+     */
+    children?: ReactNode;
     /**
      * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
      */
     onClick?: (e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * Whether the button is disabled.
+     */
+    isDisabled?: boolean;
     /**
      * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
      */
@@ -19,7 +27,53 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style
      * Additional information to be included in the `context` of Atlaskit analytics events that come from pressable.
      */
     analyticsContext?: Record<string, any>;
+    /**
+     * Token representing background color with a built-in fallback value.
+     */
+    backgroundColor?: BackgroundColor;
+    /**
+     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
+     *
+     * @see paddingBlock
+     * @see paddingInline
+     */
+    padding?: Space;
+    /**
+     * Tokens representing CSS shorthand `paddingBlock`.
+     *
+     * @see paddingBlockStart
+     * @see paddingBlockEnd
+     */
+    paddingBlock?: Space;
+    /**
+     * Tokens representing CSS `paddingBlockStart`.
+     */
+    paddingBlockStart?: Space;
+    /**
+     * Tokens representing CSS `paddingBlockEnd`.
+     */
+    paddingBlockEnd?: Space;
+    /**
+     * Tokens representing CSS shorthand `paddingInline`.
+     *
+     * @see paddingInlineStart
+     * @see paddingInlineEnd
+     */
+    paddingInline?: Space;
+    /**
+     * Tokens representing CSS `paddingInlineStart`.
+     */
+    paddingInlineStart?: Space;
+    /**
+     * Tokens representing CSS `paddingInlineEnd`.
+     */
+    paddingInlineEnd?: Space;
+    /**
+     * Forwarded ref.
+     */
+    ref?: ComponentPropsWithRef<'button'>['ref'];
 };
+export type PressableProps = Omit<ComponentPropsWithoutRef<'button'>, 'disabled' | 'onClick' | 'style' | 'className'> & BasePrimitiveProps & StyleProp & BasePressableProps;
 /**
  * __Pressable__
  *
@@ -29,23 +83,5 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
  */
-declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "as" | "onClick"> & {
-    isDisabled?: boolean | undefined;
-    /**
-     * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
-     */
-    onClick?: ((e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void) | undefined;
-    /**
-     * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
-     */
-    interactionName?: string | undefined;
-    /**
-     * An optional component name used to identify this component in Atlaskit analytics events. This can be used if a parent component's name is preferred over the default 'Pressable'.
-     */
-    componentName?: string | undefined;
-    /**
-     * Additional information to be included in the `context` of Atlaskit analytics events that come from pressable.
-     */
-    analyticsContext?: Record<string, any> | undefined;
-}, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | keyof import("./types").BasePrimitiveProps | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, "style" | "disabled" | "className" | "onClick"> & BasePrimitiveProps & StyleProp & BasePressableProps, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "style" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | keyof BasePrimitiveProps | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
 export default Pressable;

package/dist/types/responsive/constants.d.ts

@@ -35,12 +35,12 @@ export declare const UNSAFE_BREAKPOINTS_CONFIG: {
         readonly gridItemGutter: "var(--ds-space-400)";
         readonly gridMargin: "var(--ds-space-400)";
         readonly min: "90rem";
-        readonly max: "109.99rem";
+        readonly max: "110.49rem";
     };
     readonly xl: {
         readonly gridItemGutter: "var(--ds-space-400)";
         readonly gridMargin: "var(--ds-space-500)";
-        readonly min: "110rem";
+        readonly min: "110.5rem";
         readonly max: null;
     };
 };

package/dist/types/responsive/media-helper.d.ts

@@ -15,22 +15,22 @@ export declare const media: {
         readonly sm: "@media (min-width: 48rem)";
         readonly md: "@media (min-width: 64rem)";
         readonly lg: "@media (min-width: 90rem)";
-        readonly xl: "@media (min-width: 110rem)";
+        readonly xl: "@media (min-width: 110.5rem)";
     };
     only: {
         readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
         readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
         readonly sm: "@media (min-width: 48rem) and (max-width: 63.99rem)";
         readonly md: "@media (min-width: 64rem) and (max-width: 89.99rem)";
-        readonly lg: "@media (min-width: 90rem) and (max-width: 109.99rem)";
-        readonly xl: "@media (min-width: 110rem)";
+        readonly lg: "@media (min-width: 90rem) and (max-width: 110.49rem)";
+        readonly xl: "@media (min-width: 110.5rem)";
     };
     below: {
         readonly xs: "@media not all and (min-width: 30rem)";
         readonly sm: "@media not all and (min-width: 48rem)";
         readonly md: "@media not all and (min-width: 64rem)";
         readonly lg: "@media not all and (min-width: 90rem)";
-        readonly xl: "@media not all and (min-width: 110rem)";
+        readonly xl: "@media not all and (min-width: 110.5rem)";
     };
 };
 /**
@@ -43,21 +43,21 @@ export declare const UNSAFE_media: {
         readonly sm: "@media (min-width: 48rem)";
         readonly md: "@media (min-width: 64rem)";
         readonly lg: "@media (min-width: 90rem)";
-        readonly xl: "@media (min-width: 110rem)";
+        readonly xl: "@media (min-width: 110.5rem)";
     };
     only: {
         readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
         readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
         readonly sm: "@media (min-width: 48rem) and (max-width: 63.99rem)";
         readonly md: "@media (min-width: 64rem) and (max-width: 89.99rem)";
-        readonly lg: "@media (min-width: 90rem) and (max-width: 109.99rem)";
-        readonly xl: "@media (min-width: 110rem)";
+        readonly lg: "@media (min-width: 90rem) and (max-width: 110.49rem)";
+        readonly xl: "@media (min-width: 110.5rem)";
     };
     below: {
         readonly xs: "@media not all and (min-width: 30rem)";
         readonly sm: "@media not all and (min-width: 48rem)";
         readonly md: "@media not all and (min-width: 64rem)";
         readonly lg: "@media not all and (min-width: 90rem)";
-        readonly xl: "@media not all and (min-width: 110rem)";
+        readonly xl: "@media not all and (min-width: 110.5rem)";
     };
 };

package/dist/types-ts4.5/components/anchor.d.ts

@@ -2,7 +2,7 @@ import React, { type Ref } from 'react';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
 import { type BoxProps } from './box';
-export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'style' | 'onClick'> & {
+export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'onClick' | 'style' | 'className'> & {
     /**
      * Handler called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */

package/dist/types-ts4.5/components/box.d.ts

@@ -6,7 +6,7 @@ import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactEl
 import { type BackgroundColor, type Space } from '../xcss/style-maps.partial';
 import { type SVGElements } from './internal/types';
 import type { BasePrimitiveProps, StyleProp } from './types';
-type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
+type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements | 'button'>;
 type CustomElementType<P = any> = {
     [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
 }[AllowedElements];

package/dist/types-ts4.5/components/pressable.d.ts

@@ -1,12 +1,20 @@
-import React from 'react';
+import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { type BoxProps } from './box';
-export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style' | 'onClick'> & {
-    isDisabled?: boolean;
+import { type BackgroundColor, type Space } from '../xcss/style-maps.partial';
+import type { BasePrimitiveProps, StyleProp } from './types';
+type BasePressableProps = {
+    /**
+     * Elements to be rendered inside the Box.
+     */
+    children?: ReactNode;
     /**
      * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
      */
     onClick?: (e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * Whether the button is disabled.
+     */
+    isDisabled?: boolean;
     /**
      * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
      */
@@ -19,7 +27,53 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style
      * Additional information to be included in the `context` of Atlaskit analytics events that come from pressable.
      */
     analyticsContext?: Record<string, any>;
+    /**
+     * Token representing background color with a built-in fallback value.
+     */
+    backgroundColor?: BackgroundColor;
+    /**
+     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
+     *
+     * @see paddingBlock
+     * @see paddingInline
+     */
+    padding?: Space;
+    /**
+     * Tokens representing CSS shorthand `paddingBlock`.
+     *
+     * @see paddingBlockStart
+     * @see paddingBlockEnd
+     */
+    paddingBlock?: Space;
+    /**
+     * Tokens representing CSS `paddingBlockStart`.
+     */
+    paddingBlockStart?: Space;
+    /**
+     * Tokens representing CSS `paddingBlockEnd`.
+     */
+    paddingBlockEnd?: Space;
+    /**
+     * Tokens representing CSS shorthand `paddingInline`.
+     *
+     * @see paddingInlineStart
+     * @see paddingInlineEnd
+     */
+    paddingInline?: Space;
+    /**
+     * Tokens representing CSS `paddingInlineStart`.
+     */
+    paddingInlineStart?: Space;
+    /**
+     * Tokens representing CSS `paddingInlineEnd`.
+     */
+    paddingInlineEnd?: Space;
+    /**
+     * Forwarded ref.
+     */
+    ref?: ComponentPropsWithRef<'button'>['ref'];
 };
+export type PressableProps = Omit<ComponentPropsWithoutRef<'button'>, 'disabled' | 'onClick' | 'style' | 'className'> & BasePrimitiveProps & StyleProp & BasePressableProps;
 /**
  * __Pressable__
  *
@@ -29,23 +83,5 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
  */
-declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "as" | "onClick"> & {
-    isDisabled?: boolean | undefined;
-    /**
-     * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
-     */
-    onClick?: ((e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void) | undefined;
-    /**
-     * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
-     */
-    interactionName?: string | undefined;
-    /**
-     * An optional component name used to identify this component in Atlaskit analytics events. This can be used if a parent component's name is preferred over the default 'Pressable'.
-     */
-    componentName?: string | undefined;
-    /**
-     * Additional information to be included in the `context` of Atlaskit analytics events that come from pressable.
-     */
-    analyticsContext?: Record<string, any> | undefined;
-}, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | keyof import("./types").BasePrimitiveProps | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, "style" | "disabled" | "className" | "onClick"> & BasePrimitiveProps & StyleProp & BasePressableProps, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "style" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | keyof BasePrimitiveProps | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
 export default Pressable;

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

@@ -35,12 +35,12 @@ export declare const UNSAFE_BREAKPOINTS_CONFIG: {
         readonly gridItemGutter: "var(--ds-space-400)";
         readonly gridMargin: "var(--ds-space-400)";
         readonly min: "90rem";
-        readonly max: "109.99rem";
+        readonly max: "110.49rem";
     };
     readonly xl: {
         readonly gridItemGutter: "var(--ds-space-400)";
         readonly gridMargin: "var(--ds-space-500)";
-        readonly min: "110rem";
+        readonly min: "110.5rem";
         readonly max: null;
     };
 };

package/dist/types-ts4.5/responsive/media-helper.d.ts

@@ -15,22 +15,22 @@ export declare const media: {
         readonly sm: "@media (min-width: 48rem)";
         readonly md: "@media (min-width: 64rem)";
         readonly lg: "@media (min-width: 90rem)";
-        readonly xl: "@media (min-width: 110rem)";
+        readonly xl: "@media (min-width: 110.5rem)";
     };
     only: {
         readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
         readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
         readonly sm: "@media (min-width: 48rem) and (max-width: 63.99rem)";
         readonly md: "@media (min-width: 64rem) and (max-width: 89.99rem)";
-        readonly lg: "@media (min-width: 90rem) and (max-width: 109.99rem)";
-        readonly xl: "@media (min-width: 110rem)";
+        readonly lg: "@media (min-width: 90rem) and (max-width: 110.49rem)";
+        readonly xl: "@media (min-width: 110.5rem)";
     };
     below: {
         readonly xs: "@media not all and (min-width: 30rem)";
         readonly sm: "@media not all and (min-width: 48rem)";
         readonly md: "@media not all and (min-width: 64rem)";
         readonly lg: "@media not all and (min-width: 90rem)";
-        readonly xl: "@media not all and (min-width: 110rem)";
+        readonly xl: "@media not all and (min-width: 110.5rem)";
     };
 };
 /**
@@ -43,21 +43,21 @@ export declare const UNSAFE_media: {
         readonly sm: "@media (min-width: 48rem)";
         readonly md: "@media (min-width: 64rem)";
         readonly lg: "@media (min-width: 90rem)";
-        readonly xl: "@media (min-width: 110rem)";
+        readonly xl: "@media (min-width: 110.5rem)";
     };
     only: {
         readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
         readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
         readonly sm: "@media (min-width: 48rem) and (max-width: 63.99rem)";
         readonly md: "@media (min-width: 64rem) and (max-width: 89.99rem)";
-        readonly lg: "@media (min-width: 90rem) and (max-width: 109.99rem)";
-        readonly xl: "@media (min-width: 110rem)";
+        readonly lg: "@media (min-width: 90rem) and (max-width: 110.49rem)";
+        readonly xl: "@media (min-width: 110.5rem)";
     };
     below: {
         readonly xs: "@media not all and (min-width: 30rem)";
         readonly sm: "@media not all and (min-width: 48rem)";
         readonly md: "@media not all and (min-width: 64rem)";
         readonly lg: "@media not all and (min-width: 90rem)";
-        readonly xl: "@media not all and (min-width: 110rem)";
+        readonly xl: "@media not all and (min-width: 110.5rem)";
     };
 };

package/extract-react-types/pressable-props.tsx

@@ -104,7 +104,7 @@ export default function Pressable(
 		/**
 		 * Elements to be rendered inside the primitive.
 		 */
-		children: React.ReactNode;
+		children?: React.ReactNode;
 
 		/**
 		 * Forwarded ref element.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "7.4.0",
+	"version": "8.0.0",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -125,7 +125,7 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^9.3.0",
 		"@atlaskit/app-provider": "^1.3.0",
-		"@atlaskit/css": "^0.1.0",
+		"@atlaskit/css": "^0.3.0",
 		"@atlaskit/ds-lib": "^2.3.0",
 		"@atlaskit/interaction-context": "^2.1.0",
 		"@atlaskit/tokens": "^1.51.0",