@atlaskit/primitives 12.2.7 → 13.0.0

package/dist/esm/compiled/components/text.js

@@ -0,0 +1,167 @@
+/* text.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./text.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { createContext, forwardRef, useContext } from 'react';
+import invariant from 'tiny-invariant';
+import { useSurface } from './internal/surface-provider';
+var asAllowlist = ['span', 'p', 'strong', 'em'];
+var HasTextAncestorContext = /*#__PURE__*/createContext(false);
+var useHasTextAncestor = function useHasTextAncestor() {
+  return useContext(HasTextAncestorContext);
+};
+
+/**
+ * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
+ */
+var useColor = function useColor(colorProp, hasTextAncestor) {
+  var surface = useSurface();
+
+  /*
+   * Where the color of the surface is inverted we always override the color
+   * as there is no valid choice that is not covered by the override.
+   */
+  if (surface in inverseColorMap) {
+    return inverseColorMap[surface];
+  }
+  if (colorProp === 'inherit') {
+    return undefined;
+  }
+  if (!colorProp && hasTextAncestor) {
+    return undefined;
+  }
+  return colorProp || 'color.text';
+};
+var styles = {
+  root: "_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1i4qfg65",
+  'as.strong': "_k48p8n31",
+  'as.em': "_zg8l1m30",
+  'textAlign.center': "_y3gn1h6o",
+  'textAlign.end': "_y3gnh9n0",
+  'textAlign.start': "_y3gnv2br",
+  truncation: "_1e0ccj1k _1reo15vq _18m915vq _sudp1e54",
+  breakAll: "_1nmz9jpi"
+};
+var fontSizeMap = {
+  medium: "_11c81oud",
+  UNSAFE_small: "_11c8qk37",
+  large: "_11c81doa",
+  small: "_11c81vlj"
+};
+var fontWeightMap = {
+  bold: "_k48pmoej",
+  medium: "_k48p1wq8",
+  regular: "_k48pi7a9",
+  semibold: "_k48p1pd9"
+};
+var textColorMap = {
+  'color.text': "_syaz1fxt",
+  'color.text.accent.lime': "_syaz1tco",
+  'color.text.accent.lime.bolder': "_syaz1ik3",
+  'color.text.accent.red': "_syaz9lu1",
+  'color.text.accent.red.bolder': "_syazhwvp",
+  'color.text.accent.orange': "_syaz1q28",
+  'color.text.accent.orange.bolder': "_syaz1vps",
+  'color.text.accent.yellow': "_syazfb2s",
+  'color.text.accent.yellow.bolder': "_syazekll",
+  'color.text.accent.green': "_syazh55r",
+  'color.text.accent.green.bolder': "_syaz1y78",
+  'color.text.accent.teal': "_syaz17qg",
+  'color.text.accent.teal.bolder': "_syaz12v7",
+  'color.text.accent.blue': "_syazpnps",
+  'color.text.accent.blue.bolder': "_syazsc1o",
+  'color.text.accent.purple': "_syaz10m5",
+  'color.text.accent.purple.bolder': "_syaz2ibx",
+  'color.text.accent.magenta': "_syaz1s8m",
+  'color.text.accent.magenta.bolder': "_syaz1qur",
+  'color.text.accent.gray': "_syaz1dyx",
+  'color.text.accent.gray.bolder': "_syaz1x9z",
+  'color.text.disabled': "_syaz1lh4",
+  'color.text.inverse': "_syaz15cr",
+  'color.text.selected': "_syazaqb7",
+  'color.text.brand': "_syaz1e6v",
+  'color.text.danger': "_syaz1tmw",
+  'color.text.warning': "_syazwx40",
+  'color.text.warning.inverse': "_syazal3n",
+  'color.text.success': "_syazy73q",
+  'color.text.discovery': "_syazzjem",
+  'color.text.information': "_syaze0os",
+  'color.text.subtlest': "_syaz131l",
+  'color.text.subtle': "_syaz1gjq",
+  'color.link': "_syaz14q2",
+  'color.link.pressed': "_syaz16c2",
+  'color.link.visited': "_syazw7te",
+  'color.link.visited.pressed': "_syazg3x0"
+};
+export var inverseColorMap = {
+  'color.background.neutral.bold': 'color.text.inverse',
+  'color.background.neutral.bold.hovered': 'color.text.inverse',
+  'color.background.neutral.bold.pressed': 'color.text.inverse',
+  'color.background.selected.bold': 'color.text.inverse',
+  'color.background.selected.bold.hovered': 'color.text.inverse',
+  'color.background.selected.bold.pressed': 'color.text.inverse',
+  'color.background.brand.bold': 'color.text.inverse',
+  'color.background.brand.bold.hovered': 'color.text.inverse',
+  'color.background.brand.bold.pressed': 'color.text.inverse',
+  'color.background.brand.boldest': 'color.text.inverse',
+  'color.background.brand.boldest.hovered': 'color.text.inverse',
+  'color.background.brand.boldest.pressed': 'color.text.inverse',
+  'color.background.danger.bold': 'color.text.inverse',
+  'color.background.danger.bold.hovered': 'color.text.inverse',
+  'color.background.danger.bold.pressed': 'color.text.inverse',
+  'color.background.warning.bold': 'color.text.warning.inverse',
+  'color.background.warning.bold.hovered': 'color.text.warning.inverse',
+  'color.background.warning.bold.pressed': 'color.text.warning.inverse',
+  'color.background.success.bold': 'color.text.inverse',
+  'color.background.success.bold.hovered': 'color.text.inverse',
+  'color.background.success.bold.pressed': 'color.text.inverse',
+  'color.background.discovery.bold': 'color.text.inverse',
+  'color.background.discovery.bold.hovered': 'color.text.inverse',
+  'color.background.discovery.bold.pressed': 'color.text.inverse',
+  'color.background.information.bold': 'color.text.inverse',
+  'color.background.information.bold.hovered': 'color.text.inverse',
+  'color.background.information.bold.pressed': 'color.text.inverse'
+};
+
+/**
+ * __Text__
+ *
+ * Text is a primitive component that has the Atlassian Design System's design guidelines baked in.
+ * This includes considerations for text attributes such as color, font size, font weight, and line height.
+ * It renders a `span` by default.
+ *
+ * @internal
+ */
+var Text = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? 'span' : _ref$as,
+    colorProp = _ref.color,
+    align = _ref.align,
+    testId = _ref.testId,
+    id = _ref.id,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    weight = _ref.weight,
+    maxLines = _ref.maxLines,
+    children = _ref.children;
+  invariant(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
+  var hasTextAncestor = useHasTextAncestor();
+  var color = useColor(colorProp, hasTextAncestor);
+  var component = /*#__PURE__*/React.createElement(Component, {
+    id: id,
+    style: {
+      WebkitLineClamp: maxLines
+    },
+    "data-testid": testId,
+    ref: ref,
+    className: ax([styles.root, fontSizeMap[size], color && textColorMap[color], maxLines && styles.truncation, maxLines === 1 && styles.breakAll, align && styles["textAlign.".concat(align)], weight && fontWeightMap[weight], Component === 'em' && styles['as.em'], Component === 'strong' && styles['as.strong']])
+  }, children);
+  if (hasTextAncestor) {
+    // no need to re-apply context if the text is already wrapped
+    return component;
+  }
+  return /*#__PURE__*/React.createElement(HasTextAncestorContext.Provider, {
+    value: true
+  }, component);
+});
+export default Text;

package/dist/esm/compiled/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/compiled/index.js

@@ -0,0 +1,13 @@
+export { default as Box } from './components/box';
+export { default as Inline } from './components/inline';
+export { default as Stack } from './components/stack';
+export { default as Flex } from './components/flex';
+export { default as Grid } from './components/grid';
+export { default as Bleed } from './components/bleed';
+export { default as Text } from './components/text';
+export { default as Pressable } from './components/pressable';
+export { default as Anchor } from './components/anchor';
+export { media } from './responsive';
+
+// TODO: This is still not figured out from before…
+export { useSurface as UNSAFE_useSurface } from './components/internal/surface-provider';

package/dist/esm/compiled/responsive/hide.compiled.css

@@ -0,0 +1,11 @@
+
+@media (min-width:30rem){._114bglyw{display:none}}
+@media not all and (min-width:30rem){._1m0aglyw{display:none}}
+@media (min-width:48rem){._181nglyw{display:none}}
+@media not all and (min-width:48rem){._sugaglyw{display:none}}
+@media (min-width:64rem){._dm25glyw{display:none}}
+@media not all and (min-width:64rem){._1mjbglyw{display:none}}
+@media (min-width:90rem){._je3oglyw{display:none}}
+@media not all and (min-width:90rem){._liwcglyw{display:none}}
+@media (min-width:110.5rem){._1uxvglyw{display:none}}
+@media not all and (min-width:110.5rem){._14wzglyw{display:none}}

package/dist/esm/compiled/responsive/hide.js

@@ -0,0 +1,37 @@
+/* hide.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./hide.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var styles = {
+  'above.xs': "_114bglyw",
+  'above.sm': "_181nglyw",
+  'above.md': "_dm25glyw",
+  'above.lg': "_je3oglyw",
+  'above.xl': "_1uxvglyw",
+  'below.xs': "_1m0aglyw",
+  'below.sm': "_sugaglyw",
+  'below.md': "_1mjbglyw",
+  'below.lg': "_liwcglyw",
+  'below.xl': "_14wzglyw"
+};
+/**
+ * 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 var Hide = function Hide(_ref) {
+  var above = _ref.above,
+    below = _ref.below,
+    children = _ref.children,
+    _ref$as = _ref.as,
+    AsElement = _ref$as === void 0 ? 'div' : _ref$as,
+    xcss = _ref.xcss;
+  return /*#__PURE__*/React.createElement(AsElement
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
+  , {
+    className: ax([above && styles["above.".concat(above)], below && styles["below.".concat(below)], xcss])
+  }, children);
+};

package/dist/esm/compiled/responsive/index.js

@@ -0,0 +1,4 @@
+export { media } from './media-helper';
+export { UNSAFE_useMediaQuery } from './use-media-query';
+export { Show } from './show';
+export { Hide } from './hide';

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

@@ -0,0 +1,36 @@
+/**
+ * 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 var media = {
+  above: {
+    // TODO: Should this even exist, we don't want `css({ [media.above.xxs]: { … } })` because that just adds duplicates styles!
+    xxs: '@media all',
+    xs: '@media (min-width: 30rem)',
+    sm: '@media (min-width: 48rem)',
+    md: '@media (min-width: 64rem)',
+    lg: '@media (min-width: 90rem)',
+    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: 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: 110.5rem)'
+  }
+};

package/dist/esm/compiled/responsive/show.compiled.css

@@ -0,0 +1,11 @@
+._1e0cglyw{display:none}
+@media (min-width:30rem){._114b19ly{display:revert}}
+@media not all and (min-width:30rem){._1m0a19ly{display:revert}}
+@media (min-width:48rem){._181n19ly{display:revert}}
+@media not all and (min-width:48rem){._suga19ly{display:revert}}
+@media (min-width:64rem){._dm2519ly{display:revert}}
+@media not all and (min-width:64rem){._1mjb19ly{display:revert}}
+@media (min-width:90rem){._je3o19ly{display:revert}}
+@media not all and (min-width:90rem){._liwc19ly{display:revert}}
+@media (min-width:110.5rem){._1uxv19ly{display:revert}}
+@media not all and (min-width:110.5rem){._14wz19ly{display:revert}}

package/dist/esm/compiled/responsive/show.js

@@ -0,0 +1,38 @@
+/* show.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./show.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var styles = {
+  default: "_1e0cglyw",
+  'above.xs': "_114b19ly",
+  'above.sm': "_181n19ly",
+  'above.md': "_dm2519ly",
+  'above.lg': "_je3o19ly",
+  'above.xl': "_1uxv19ly",
+  'below.xs': "_1m0a19ly",
+  'below.sm': "_suga19ly",
+  'below.md': "_1mjb19ly",
+  'below.lg': "_liwc19ly",
+  'below.xl': "_14wz19ly"
+};
+/**
+ * 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 var Show = function Show(_ref) {
+  var above = _ref.above,
+    below = _ref.below,
+    children = _ref.children,
+    _ref$as = _ref.as,
+    AsElement = _ref$as === void 0 ? 'div' : _ref$as,
+    xcss = _ref.xcss;
+  return /*#__PURE__*/React.createElement(AsElement
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
+  , {
+    className: ax([styles.default, above && styles["above.".concat(above)], below && styles["below.".concat(below)], xcss])
+  }, children);
+};

package/dist/esm/compiled/responsive/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/compiled/responsive/use-media-query.js

@@ -0,0 +1,71 @@
+var _window, _window$matchMedia, _window2, _window2$matchMedia, _window3, _window3$matchMedia, _window4, _window4$matchMedia, _window5, _window5$matchMedia, _window6, _window6$matchMedia, _window7, _window7$matchMedia, _window8, _window8$matchMedia, _window9, _window9$matchMedia, _window10, _window10$matchMedia, _window11, _window11$matchMedia;
+import { useEffect, useLayoutEffect, useRef } from 'react';
+import { bind } from 'bind-event-listener';
+import { media } from './media-helper';
+var queries = {
+  'above.xxs': typeof window === 'undefined' ? undefined : (_window = window) === null || _window === void 0 || (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, media.above.xxs.replace('@media ', '').trim()),
+  'above.xs': typeof window === 'undefined' ? undefined : (_window2 = window) === null || _window2 === void 0 || (_window2$matchMedia = _window2.matchMedia) === null || _window2$matchMedia === void 0 ? void 0 : _window2$matchMedia.call(_window2, media.above.xs.replace('@media ', '').trim()),
+  'above.sm': typeof window === 'undefined' ? undefined : (_window3 = window) === null || _window3 === void 0 || (_window3$matchMedia = _window3.matchMedia) === null || _window3$matchMedia === void 0 ? void 0 : _window3$matchMedia.call(_window3, media.above.sm.replace('@media ', '').trim()),
+  'above.md': typeof window === 'undefined' ? undefined : (_window4 = window) === null || _window4 === void 0 || (_window4$matchMedia = _window4.matchMedia) === null || _window4$matchMedia === void 0 ? void 0 : _window4$matchMedia.call(_window4, media.above.md.replace('@media ', '').trim()),
+  'above.lg': typeof window === 'undefined' ? undefined : (_window5 = window) === null || _window5 === void 0 || (_window5$matchMedia = _window5.matchMedia) === null || _window5$matchMedia === void 0 ? void 0 : _window5$matchMedia.call(_window5, media.above.lg.replace('@media ', '').trim()),
+  'above.xl': typeof window === 'undefined' ? undefined : (_window6 = window) === null || _window6 === void 0 || (_window6$matchMedia = _window6.matchMedia) === null || _window6$matchMedia === void 0 ? void 0 : _window6$matchMedia.call(_window6, media.above.xl.replace('@media ', '').trim()),
+  'below.xs': typeof window === 'undefined' ? undefined : (_window7 = window) === null || _window7 === void 0 || (_window7$matchMedia = _window7.matchMedia) === null || _window7$matchMedia === void 0 ? void 0 : _window7$matchMedia.call(_window7, media.below.xs.replace('@media ', '').trim()),
+  'below.sm': typeof window === 'undefined' ? undefined : (_window8 = window) === null || _window8 === void 0 || (_window8$matchMedia = _window8.matchMedia) === null || _window8$matchMedia === void 0 ? void 0 : _window8$matchMedia.call(_window8, media.below.sm.replace('@media ', '').trim()),
+  'below.md': typeof window === 'undefined' ? undefined : (_window9 = window) === null || _window9 === void 0 || (_window9$matchMedia = _window9.matchMedia) === null || _window9$matchMedia === void 0 ? void 0 : _window9$matchMedia.call(_window9, media.below.md.replace('@media ', '').trim()),
+  'below.lg': typeof window === 'undefined' ? undefined : (_window10 = window) === null || _window10 === void 0 || (_window10$matchMedia = _window10.matchMedia) === null || _window10$matchMedia === void 0 ? void 0 : _window10$matchMedia.call(_window10, media.below.lg.replace('@media ', '').trim()),
+  'below.xl': typeof window === 'undefined' ? undefined : (_window11 = window) === null || _window11 === void 0 || (_window11$matchMedia = _window11.matchMedia) === null || _window11$matchMedia === void 0 ? void 0 : _window11$matchMedia.call(_window11, media.below.xl.replace('@media ', '').trim())
+};
+
+/**
+ * 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 var UNSAFE_useMediaQuery = function UNSAFE_useMediaQuery(queryString, listener) {
+  var listenerRef = useRef(listener);
+  useEffect(function () {
+    // Bind the listener if changed so it's called on the next change event; no guarantee on timing.
+    listenerRef.current = listener;
+  }, [listener]);
+
+  /**
+   * We explicitly only react to boolean changes for binding our listener
+   * Changes to the functional reference are ignored.
+   */
+  var hasListener = !!listener;
+
+  /**
+   * The `matchMedia(…)` return value for our breakpoint query.
+   */
+  var mq = queries[queryString];
+  useLayoutEffect(function () {
+    listenerRef.current = listener; // Bind the listener now in case the `useEffect` hasn't fired above yet
+    if (!mq || !hasListener || !listenerRef.current) {
+      return;
+    }
+    return bind(mq, {
+      type: 'change',
+      listener: function listener(event) {
+        // We explicitly call the current version of the function
+        return listenerRef.current(event);
+      }
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- explicitly do not trigger the effect on `listener` reference change, only on a boolean representation of it.
+  [mq, hasListener]);
+  return mq || null;
+};

package/dist/esm/components/anchor.js

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

package/dist/esm/components/pressable.js

@@ -89,7 +89,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "12.2.7",
+    packageVersion: "13.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/index.js

@@ -13,5 +13,5 @@ export {
  */
 default as UNSAFE_ANCHOR, default as Anchor } from './components/anchor';
 export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } 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/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/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/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;