@atlaskit/primitives 12.2.7 → 13.1.0

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

@@ -0,0 +1,45 @@
+import type { CSSProperties } from 'react';
+import type { StrictXCSSProp, XCSSAllProperties, XCSSAllPseudos } from '@atlaskit/css';
+export type BasePrimitiveProps = {
+    /**
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * `data-testid` is strictly controlled through the `testId` prop.
+     * This lets consumers know that this data attribute will not be applied.
+     */
+    'data-testid'?: never;
+    /**
+     * Apply a subset of permitted styles powered by Atlassian Design System design tokens.
+     */
+    xcss?: StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
+    /**
+     * Accessible role.
+     */
+    role?: string;
+};
+export type StyleProp = {
+    style?: CSSProperties;
+};
+export type AlignBlock = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+export type AlignContent = 'center' | 'start' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch' | 'end';
+export type AlignInline = 'start' | 'center' | 'end' | 'stretch';
+export type AlignItems = 'center' | 'start' | 'stretch' | 'end' | 'baseline';
+export type AutoFlow = 'column' | 'row' | 'dense' | 'row dense' | 'column dense';
+export type Direction = 'column' | 'row';
+export type Grow = 'hug' | 'fill';
+export type JustifyContent = 'center' | 'start' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch' | 'end';
+export type JustifyItems = 'center' | 'start' | 'stretch' | 'end';
+export type Spread = 'space-between';
+export type Wrap = 'wrap' | 'nowrap';
+export type BleedSpaceToken = 'space.025' | 'space.050' | 'space.100' | 'space.150' | 'space.200';
+export type PositiveSpaceToken = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
+export type PaddingToken = PositiveSpaceToken;
+export type GapToken = PositiveSpaceToken;
+export type SurfaceColorToken = 'utility.elevation.surface.current' | 'elevation.surface' | 'elevation.surface.overlay' | 'elevation.surface.raised' | 'elevation.surface.sunken';
+export type BackgroundColorToken = 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtlest.hovered' | 'color.background.accent.lime.subtlest.pressed' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtler.hovered' | 'color.background.accent.lime.subtler.pressed' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.subtle.hovered' | 'color.background.accent.lime.subtle.pressed' | 'color.background.accent.lime.bolder' | 'color.background.accent.lime.bolder.hovered' | 'color.background.accent.lime.bolder.pressed' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtlest.hovered' | 'color.background.accent.red.subtlest.pressed' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtler.hovered' | 'color.background.accent.red.subtler.pressed' | 'color.background.accent.red.subtle' | 'color.background.accent.red.subtle.hovered' | 'color.background.accent.red.subtle.pressed' | 'color.background.accent.red.bolder' | 'color.background.accent.red.bolder.hovered' | 'color.background.accent.red.bolder.pressed' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtlest.hovered' | 'color.background.accent.orange.subtlest.pressed' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtler.hovered' | 'color.background.accent.orange.subtler.pressed' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.subtle.hovered' | 'color.background.accent.orange.subtle.pressed' | 'color.background.accent.orange.bolder' | 'color.background.accent.orange.bolder.hovered' | 'color.background.accent.orange.bolder.pressed' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtlest.hovered' | 'color.background.accent.yellow.subtlest.pressed' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtler.hovered' | 'color.background.accent.yellow.subtler.pressed' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.subtle.hovered' | 'color.background.accent.yellow.subtle.pressed' | 'color.background.accent.yellow.bolder' | 'color.background.accent.yellow.bolder.hovered' | 'color.background.accent.yellow.bolder.pressed' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtlest.hovered' | 'color.background.accent.green.subtlest.pressed' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtler.hovered' | 'color.background.accent.green.subtler.pressed' | 'color.background.accent.green.subtle' | 'color.background.accent.green.subtle.hovered' | 'color.background.accent.green.subtle.pressed' | 'color.background.accent.green.bolder' | 'color.background.accent.green.bolder.hovered' | 'color.background.accent.green.bolder.pressed' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtlest.hovered' | 'color.background.accent.teal.subtlest.pressed' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtler.hovered' | 'color.background.accent.teal.subtler.pressed' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.subtle.hovered' | 'color.background.accent.teal.subtle.pressed' | 'color.background.accent.teal.bolder' | 'color.background.accent.teal.bolder.hovered' | 'color.background.accent.teal.bolder.pressed' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtlest.hovered' | 'color.background.accent.blue.subtlest.pressed' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtler.hovered' | 'color.background.accent.blue.subtler.pressed' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.subtle.hovered' | 'color.background.accent.blue.subtle.pressed' | 'color.background.accent.blue.bolder' | 'color.background.accent.blue.bolder.hovered' | 'color.background.accent.blue.bolder.pressed' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtlest.hovered' | 'color.background.accent.purple.subtlest.pressed' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtler.hovered' | 'color.background.accent.purple.subtler.pressed' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.subtle.hovered' | 'color.background.accent.purple.subtle.pressed' | 'color.background.accent.purple.bolder' | 'color.background.accent.purple.bolder.hovered' | 'color.background.accent.purple.bolder.pressed' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtlest.hovered' | 'color.background.accent.magenta.subtlest.pressed' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtler.hovered' | 'color.background.accent.magenta.subtler.pressed' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.subtle.hovered' | 'color.background.accent.magenta.subtle.pressed' | 'color.background.accent.magenta.bolder' | 'color.background.accent.magenta.bolder.hovered' | 'color.background.accent.magenta.bolder.pressed' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtlest.hovered' | 'color.background.accent.gray.subtlest.pressed' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtler.hovered' | 'color.background.accent.gray.subtler.pressed' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.subtle.hovered' | 'color.background.accent.gray.subtle.pressed' | 'color.background.accent.gray.bolder' | 'color.background.accent.gray.bolder.hovered' | 'color.background.accent.gray.bolder.pressed' | 'color.background.disabled' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.subtlest' | 'color.background.brand.subtlest.hovered' | 'color.background.brand.subtlest.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.brand.boldest' | 'color.background.brand.boldest.hovered' | 'color.background.brand.boldest.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.skeleton' | 'color.skeleton.subtle' | 'elevation.surface' | 'elevation.surface.hovered' | 'elevation.surface.pressed' | 'elevation.surface.overlay' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'utility.elevation.surface.current';
+export type TextAlign = 'center' | 'end' | 'start';
+export type TextColor = 'color.text' | 'color.text.accent.lime' | 'color.text.accent.lime.bolder' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link' | 'color.link.pressed' | 'color.link.visited' | 'color.link.visited.pressed';
+export type FontSize = 'small' | 'medium' | 'UNSAFE_small' | 'large';
+export type FontWeight = 'bold' | 'medium' | 'regular' | 'semibold';

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

@@ -0,0 +1,12 @@
+export { default as Box, type BoxProps } from './components/box';
+export { default as Inline, type InlineProps } from './components/inline';
+export { default as Stack, type StackProps } from './components/stack';
+export { default as Flex, type FlexProps } from './components/flex';
+export { default as Grid, type GridProps } from './components/grid';
+export { default as Bleed, type BleedProps } from './components/bleed';
+export { default as Text, type TextProps } from './components/text';
+export { default as Pressable, type PressableProps } from './components/pressable';
+export { default as Anchor, type AnchorProps } from './components/anchor';
+export { media, type Breakpoint, type MediaQuery } from './responsive';
+export { useSurface as UNSAFE_useSurface } from './components/internal/surface-provider';
+export type { BackgroundColorToken as BackgroundColor, PositiveSpaceToken as Space, TextColor, } from './components/types';

package/dist/types/compiled/responsive/hide.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import { type BasePrimitiveProps } from '../components/types';
+import type { Breakpoint, ComponentAs } from './types';
+type ResponsiveHideProps = {
+    as?: ComponentAs;
+    children: ReactNode;
+} & ({
+    above?: never;
+    /**
+     * Apply CSS to hide this specifically **below** this breakpoint.
+     * The smallest breakpoint is not included as it would never be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this).
+     */
+    below: Exclude<Breakpoint, 'xxs'>;
+} | {
+    /**
+     * Apply CSS to hide this specifically **above** this breakpoint.
+     * The smallest breakpoint is not included as it would always be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this).
+     */
+    above: Exclude<Breakpoint, 'xxs'>;
+    below?: never;
+}) & Pick<BasePrimitiveProps, 'xcss'>;
+/**
+ * Hides the content at a given breakpoint.  By default, content is shown.  The primary use case is for visual presentation.
+ * Mix `<Hide above="md">` with `<Show above="md">` to achieve content that shifts at a breakpoint.
+ *
+ * Please note:
+ * - This only uses `display: none` hide, it does not skip rendering of children trees.
+ * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
+ */
+export declare const Hide: ({ above, below, children, as: AsElement, xcss, }: ResponsiveHideProps) => JSX.Element;
+export {};

package/dist/types/compiled/responsive/index.d.ts

@@ -0,0 +1,5 @@
+export { media } from './media-helper';
+export type { Breakpoint, MediaQuery } from './types';
+export { UNSAFE_useMediaQuery } from './use-media-query';
+export { Show } from './show';
+export { Hide } from './hide';

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

@@ -0,0 +1,35 @@
+/**
+ * This is an object of usable media query helpers using our internal breakpoints configuration.
+ *
+ * When using Compiled CSS-in-JS, please ensure that only a single declaration can take effect at a time.
+ * This means that you should avoid multiple breakpoints taking effect at the same time,
+ * eg. ```{ [media.above.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
+ * Instead, make sure that only one breakpoint can take effect at a time,
+ * e.g, ```{ [media.only.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
+ * For more details, please see <https://compiledcssinjs.com/docs/atomic-css#selector-specificity>.
+ */
+export declare const media: {
+    above: {
+        readonly xxs: "@media all";
+        readonly xs: "@media (min-width: 30rem)";
+        readonly sm: "@media (min-width: 48rem)";
+        readonly md: "@media (min-width: 64rem)";
+        readonly lg: "@media (min-width: 90rem)";
+        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: 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: 110.5rem)";
+    };
+};

package/dist/types/compiled/responsive/show.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import { type BasePrimitiveProps } from '../components/types';
+import type { Breakpoint, ComponentAs } from './types';
+type ResponsiveShowProps = {
+    as?: ComponentAs;
+    children: ReactNode;
+} & ({
+    above?: never;
+    /**
+     * Apply CSS to show this specifically **below** this breakpoint.
+     * The smallest breakpoint is not included as it would never be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this).
+     */
+    below: Exclude<Breakpoint, 'xxs'>;
+} | {
+    /**
+     * Apply CSS to show this specifically **above** this breakpoint.
+     * The smallest breakpoint is not included as it would always be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this).
+     */
+    above: Exclude<Breakpoint, 'xxs'>;
+    below?: never;
+}) & Pick<BasePrimitiveProps, 'xcss'>;
+/**
+ * Shows the content at a given breakpoint.  By default, content is hidden.  The primary use case is for visual presentation.
+ * Mix `<Show above="md">` with `<Hide above="md">` to achieve content that shifts at a breakpoint.
+ *
+ * Please note:
+ * - This only uses `display: none` and `display: revert` to show/hide, it does not skip rendering of children trees.
+ * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
+ */
+export declare const Show: ({ above, below, children, as: AsElement, xcss, }: ResponsiveShowProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import { type media } from './media-helper';
+/**
+ * The breakpoints we have for responsiveness.
+ */
+export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * All supported media queries for use as keys, eg. in `css({ [media.above.md]: { … } })`.
+ */
+export type MediaQuery = (typeof media.above)[Breakpoint];
+export type ComponentAs = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';

package/dist/types/compiled/responsive/use-media-query.d.ts

@@ -0,0 +1,23 @@
+import { media } from './media-helper';
+type NestedQueryString = `above.${keyof typeof media.above}` | `below.${keyof typeof media.below}`;
+/**
+ * A hook which returnes a `window.matchMedia` result to help you build responsively around breakpoints in JavaScript.
+ *
+ * The returning value **WILL NOT** update or react to change.  You can use `mq.matches` to get the latest version and you can use the optional listener argument to react to changes as desired.
+ *
+ * @important
+ *  - This will always be `null` in SSR and the event listener should not fire on SSR => clientside hydration.
+ *  - `above.xxs` will always be truthy, your listener should never fire.
+ *
+ * @experimental This hook only works on the client-side and is not safe in an SSR environment as `window` is unavailable (and the user's viewport would be unknown)
+ *
+ * @example
+ * const mq = useMediaQuery('below.md', useCallback((event) => console.log('changed', event.matches)), []))
+ * const isMobile = mq?.matches;
+ *
+ * @returns
+ *  - `MediaQueryList`, primarily used to get if that media query is currently
+ *  - `null` when `matchMedia` is unavailable, eg. in SSR.
+ */
+export declare const UNSAFE_useMediaQuery: (queryString: NestedQueryString, listener?: ((event: MediaQueryListEvent) => void) | undefined) => MediaQueryList | null;
+export {};

package/dist/types/index.d.ts

@@ -29,5 +29,5 @@ export type {
 AnchorProps as UNSAFE_AnchorProps, AnchorProps, } from './components/anchor';
 export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
 export type { Breakpoint, MediaQuery } from './responsive';
-export { useSurface as UNSAFE_useSurface, SurfaceContext as UNSAFE_SurfaceContext, } from './components/internal/surface-provider';
+export { useSurface as UNSAFE_useSurface } from './components/internal/surface-provider';
 export { inverseColorMap as UNSAFE_inverseColorMap } from './xcss/style-maps.partial';

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

@@ -0,0 +1,63 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from 'react';
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
+import type { BasePrimitiveProps, StyleProp } from './types';
+type BaseAnchorProps = {
+    /**
+     * Elements to be rendered inside the Anchor.
+     */
+    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<HTMLAnchorElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * 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;
+    /**
+     * 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 'Anchor'.
+     */
+    componentName?: string;
+    /**
+     * Additional information to be included in the `context` of Atlaskit analytics events that come from anchor.
+     */
+    analyticsContext?: Record<string, any>;
+    /**
+     * Override the default text to signify that a link opens in a new window.
+     * This is appended to the `aria-label` attribute when the `target` prop is set to `_blank`.
+     */
+    opensInNewWindowLabel?: string;
+    /**
+     * Forwarded ref.
+     */
+    ref?: Ref<HTMLAnchorElement>;
+};
+export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<ComponentPropsWithoutRef<'a'>, 'href' | 'onClick' | 'style' | 'className'> & BasePrimitiveProps & StyleProp & BaseAnchorProps;
+/**
+ * __Anchor__
+ *
+ * A primitive for building custom anchor links.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
+ * - [Code](https://atlassian.design/components/primitives/anchor/code)
+ * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
+ */
+declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, onClick: providedOnClick, interactionName, componentName, analyticsContext, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style, target, testId, xcss, opensInNewWindowLabel, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref?: Ref<HTMLAnchorElement>) => JSX.Element;
+/**
+ * __Anchor__
+ *
+ * Anchor is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
+ * - [Code](https://atlassian.design/components/primitives/anchor/code)
+ * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
+ */
+declare const Anchor: <RouterLinkConfig extends Record<string, any> = never>(props: AnchorProps<RouterLinkConfig> & {
+    ref?: Ref<HTMLAnchorElement>;
+}) => ReturnType<typeof AnchorNoRef>;
+export default Anchor;

package/dist/types-ts4.5/compiled/components/bleed.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { type ReactNode } from 'react';
+import type { BasePrimitiveProps, BleedSpaceToken } from './types';
+export type BleedProps = {
+    /**
+     * Elements to be rendered inside the Flex.
+     */
+    children: ReactNode;
+    /**
+     * Bleed along both axis.
+     */
+    all?: BleedSpaceToken;
+    /**
+     * Bleed along the inline axis.
+     */
+    inline?: BleedSpaceToken;
+    /**
+     * Bleed along the block axis
+     */
+    block?: BleedSpaceToken;
+} & BasePrimitiveProps;
+/**
+ * __Bleed__
+ *
+ * `Bleed` is a primitive layout component that controls negative whitespace.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/bleed/examples)
+ * - [Code](https://atlassian.design/components/primitives/bleed/code)
+ */
+declare const Bleed: React.MemoExoticComponent<({ children, testId, inline, block, all, xcss }: BleedProps) => JSX.Element>;
+export default Bleed;

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

@@ -0,0 +1,105 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactElement, type ReactNode } from 'react';
+import { type StrictXCSSProp, type XCSSAllProperties, type XCSSAllPseudos } from '@atlaskit/css';
+import { type SVGElements } from './internal/types';
+import type { BackgroundColorToken, BasePrimitiveProps, PaddingToken, StyleProp, SurfaceColorToken } from './types';
+type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements | 'button' | 'a'>;
+type CustomElementType<P = any> = {
+    [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
+}[AllowedElements];
+export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & Omit<BasePrimitiveProps, 'xcss' | 'style'> & BaseBoxProps<T>;
+type BaseBoxProps<T extends CustomElementType> = {
+    /**
+     * The DOM element to render as the Box. Defaults to `div`.
+     */
+    as?: T;
+    /**
+     * Elements to be rendered inside the Box.
+     */
+    children?: ReactNode;
+    /**
+     * Token representing background color with a built-in fallback value.
+     */
+    backgroundColor?: SurfaceColorToken | BackgroundColorToken;
+    /**
+     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
+     *
+     * @see paddingBlock
+     * @see paddingInline
+     * @private
+     * @deprecated – Do not use shorthand props, use `props.xcss` instead as these will be deprecated in the future.
+     */
+    padding?: PaddingToken;
+    /**
+     * Tokens representing CSS shorthand `paddingBlock`.
+     *
+     * @see paddingBlockStart
+     * @see paddingBlockEnd
+     * @private
+     * @deprecated – Do not use shorthand props, use `props.xcss` instead as these will be deprecated in the future.
+     */
+    paddingBlock?: PaddingToken;
+    /**
+     * Tokens representing CSS `paddingBlockStart`.
+     * @private
+     * @deprecated – Do not use shorthand props, use `props.xcss` instead as these will be deprecated in the future.
+     */
+    paddingBlockStart?: PaddingToken;
+    /**
+     * Tokens representing CSS `paddingBlockEnd`.
+     * @private
+     * @deprecated – Do not use shorthand props, use `props.xcss` instead as these will be deprecated in the future.
+     */
+    paddingBlockEnd?: PaddingToken;
+    /**
+     * Tokens representing CSS shorthand `paddingInline`.
+     * @private
+     * @deprecated – Do not use shorthand props, use `props.xcss` instead as these will be deprecated in the future.
+     *
+     * @see paddingInlineStart
+     * @see paddingInlineEnd
+     */
+    paddingInline?: PaddingToken;
+    /**
+     * Tokens representing CSS `paddingInlineStart`.
+     * @private
+     * @deprecated – Do not use shorthand props, use `props.xcss` instead as these will be deprecated in the future.
+     */
+    paddingInlineStart?: PaddingToken;
+    /**
+     * Tokens representing CSS `paddingInlineEnd`.
+     * @private
+     * @deprecated – Do not use shorthand props, use `props.xcss` instead as these will be deprecated in the future.
+     */
+    paddingInlineEnd?: PaddingToken;
+    /**
+     * Forwarded ref.
+     */
+    ref?: ComponentPropsWithRef<T>['ref'];
+    /**
+     * Inline styles to be applied to the Box. Only apply as a last resort, or where
+     * styles cannot otherwise be calculated outside of the runtime of the component they're applied.
+     */
+    style?: Omit<StyleProp['style'], 'backgroundColor'>;
+    /**
+     * Apply a subset of permitted styles powered by Atlassian Design System design tokens.
+     * Note that `backgroundColor` is not allowed, use the `backgroundColor` prop instead for surface awareness.
+     */
+    xcss?: StrictXCSSProp<Exclude<XCSSAllProperties, 'background' | 'backgroundColor'>, XCSSAllPseudos>;
+};
+type BoxComponent = <T extends CustomElementType>(props: BoxProps<T>) => ReactElement | null;
+/**
+ * __Box__
+ *
+ * A Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/box/examples)
+ * - [Code](https://atlassian.design/components/primitives/box/code)
+ * - [Usage](https://atlassian.design/components/primitives/box/usage)
+ */
+export declare const Box: BoxComponent;
+export default Box;

package/dist/types-ts4.5/compiled/components/flex.d.ts

@@ -0,0 +1,111 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ElementType, type ReactNode } from 'react';
+import type { AlignItems, BasePrimitiveProps, Direction, GapToken, JustifyContent, Wrap } from './types';
+export type FlexProps<T extends ElementType = 'div'> = {
+    /**
+     * The DOM element to render as the Flex. Defaults to `div`.
+     */
+    as?: 'div' | 'span' | 'ul' | 'ol' | 'li' | 'dl';
+    /**
+     * Used to align children along the main axis.
+     */
+    justifyContent?: JustifyContent;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignItems?: AlignItems;
+    /**
+     * Represents the space between each child.
+     */
+    columnGap?: GapToken;
+    /**
+     * Represents the space between each child.
+     */
+    gap?: GapToken;
+    /**
+     * Represents the space between each child.
+     */
+    rowGap?: GapToken;
+    /**
+     * Represents the flex direction property of CSS flexbox.
+     */
+    direction?: Direction;
+    /**
+     * Represents the flex wrap property of CSS flexbox.
+     */
+    wrap?: Wrap;
+    /**
+     * Elements to be rendered inside the Flex.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element.
+     */
+    ref?: React.ComponentPropsWithRef<T>['ref'];
+} & BasePrimitiveProps;
+/**
+ * __Flex__
+ *
+ * `Flex` is a primitive component that implements the CSS Flexbox API.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/flex/examples)
+ * - [Code](https://atlassian.design/components/primitives/flex/code)
+ *
+ * @example
+ * ```tsx
+ * import { Flex, Box } from '@atlaskit/primitives'
+ *
+ * const Component = () => (
+ *   <Flex direction="column">
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *   </Flex>
+ * )
+ * ```
+ */
+declare const Flex: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<{
+    /**
+     * The DOM element to render as the Flex. Defaults to `div`.
+     */
+    as?: "div" | "dl" | "li" | "ol" | "span" | "ul" | undefined;
+    /**
+     * Used to align children along the main axis.
+     */
+    justifyContent?: JustifyContent | undefined;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignItems?: AlignItems | undefined;
+    /**
+     * Represents the space between each child.
+     */
+    columnGap?: import("./types").PositiveSpaceToken | undefined;
+    /**
+     * Represents the space between each child.
+     */
+    gap?: import("./types").PositiveSpaceToken | undefined;
+    /**
+     * Represents the space between each child.
+     */
+    rowGap?: import("./types").PositiveSpaceToken | undefined;
+    /**
+     * Represents the flex direction property of CSS flexbox.
+     */
+    direction?: Direction | undefined;
+    /**
+     * Represents the flex wrap property of CSS flexbox.
+     */
+    wrap?: Wrap | undefined;
+    /**
+     * Elements to be rendered inside the Flex.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element.
+     */
+    ref?: any;
+} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignItems" | "direction" | "justifyContent" | "wrap" | "children" | "as" | keyof BasePrimitiveProps> & import("react").RefAttributes<any>>>;
+export default Flex;