@atlaskit/primitives 8.2.0 → 8.2.1

package/dist/es2019/components/anchor.js

@@ -1,5 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { forwardRef, useCallback, useContext } from 'react';
+/**
+ * @jsxRuntime classic
+ */
+/** @jsx jsx */
+import { forwardRef, useCallback, useContext } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
@@ -7,36 +14,47 @@ import { useRouterLink } from '@atlaskit/app-provider';
 import noop from '@atlaskit/ds-lib/noop';
 import InteractionContext from '@atlaskit/interaction-context';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-import { xcss } from '../xcss/xcss';
-import Box from './box';
-// TODO: Duplicated FocusRing styles due to lack of `xcss` support
-// and to prevent additional dependency
-const baseFocusRingStyles = {
-  outlineColor: 'color.border.focused',
-  outlineWidth: 'border.width.outline',
-  outlineStyle: 'solid',
-  outlineOffset: 'space.025'
-};
-const defaultStyles = xcss({
-  textDecoration: 'underline'
-});
-const focusRingStyles = xcss({
-  // Focus styles used when :focus-visible isn't supported
-  ':focus': baseFocusRingStyles,
-  // Remove default focus styles for mouse interactions if :focus-visible is supported
-  ':focus:not(:focus-visible)': {
+import { backgroundColorStylesMap, borderColorMap, borderWidthMap, isSurfaceColorToken, paddingStylesMap, positiveSpaceMap, surfaceColorStylesMap } from '../xcss/style-maps.partial';
+import { parseXcss } from '../xcss/xcss';
+import { SurfaceContext } from './internal/surface-provider';
+// TODO: duplicates FocusRing styles from `@atlaskit/focus-ring`.
+const focusRingStyles = css({
+  '&:focus, &:focus-visible': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    outlineColor: borderColorMap['color.border.focused'],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    outlineOffset: positiveSpaceMap['space.025'],
+    outlineStyle: 'solid',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    outlineWidth: borderWidthMap['border.width.outline']
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '&:focus:not(:focus-visible)': {
     outline: 'none'
   },
-  ':focus-visible': baseFocusRingStyles,
   '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
-    ':focus-visible': {
+    '&:focus-visible': {
       outline: '1px solid'
     }
   }
 });
+const baseStyles = css({
+  boxSizing: 'border-box',
+  textDecoration: 'underline'
+});
 const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 const IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
 const OPENS_NEW_WINDOW_LABEL = '(opens new window)';
+
+/**
+ * __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)
+ */
 const AnchorNoRef = ({
   href,
   children,
@@ -48,15 +66,16 @@ const AnchorNoRef = ({
   paddingInline,
   paddingInlineStart,
   paddingInlineEnd,
-  testId,
-  xcss: xcssStyles,
-  target,
   onClick: providedOnClick = noop,
   interactionName,
   componentName,
   analyticsContext,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
+  style,
+  target,
+  testId,
+  xcss,
   ...htmlAttributes
 }, ref) => {
   const interactionContext = useContext(InteractionContext);
@@ -64,6 +83,7 @@ const AnchorNoRef = ({
     interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
     providedOnClick(e, analyticsEvent);
   }, [providedOnClick, interactionContext, interactionName]);
+
   // TODO: Use React 18's useId() hook when we update.
   // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
   const opensNewWindowLabelId = uid({
@@ -74,16 +94,19 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "8.2.0",
+    packageVersion: "8.2.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
-  const RouterLink = useRouterLink();
 
-  // We're type coercing this as Compiled styles in an array isn't supported by the types
-  // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
-  // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
-  const styles = Array.isArray(xcssStyles) ? [defaultStyles, focusRingStyles, ...xcssStyles] : [defaultStyles, focusRingStyles, xcssStyles];
+  // This is to remove className from safeHtmlAttributes
+  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
+  const {
+    className: _spreadClass,
+    ...safeHtmlAttributes
+  } = htmlAttributes;
+  const resolvedStyles = parseXcss(xcss);
+  const RouterLink = useRouterLink();
   const isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
   const isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);
 
@@ -97,33 +120,52 @@ const AnchorNoRef = ({
   const isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
   const hrefObjectUsedWithoutRouterLink = RouterLink === undefined && typeof href === 'object';
   invariant(!hrefObjectUsedWithoutRouterLink, `@atlaskit/primitives: Anchor primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider`);
-  return /*#__PURE__*/React.createElement(Box
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  , _extends({}, htmlAttributes, {
-    // @ts-expect-error (TODO: Box doesn't allow `as` components)
-    as: isRouterLink ? RouterLink : 'a',
-    ref: ref,
-    testId: testId,
-    "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
+  const Component = isRouterLink ? RouterLink : 'a';
+  const node = jsx(Component
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  , _extends({
+    style: style,
+    ref: ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: resolvedStyles.static
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, safeHtmlAttributes, {
+    // @ts-expect-error
     href: !isRouterLink && typeof href !== 'string' ? undefined : href,
     target: target,
-    backgroundColor: backgroundColor,
-    padding: padding,
-    paddingBlock: paddingBlock,
-    paddingBlockStart: paddingBlockStart,
-    paddingBlockEnd: paddingBlockEnd,
-    paddingInline: paddingInline,
-    paddingInlineStart: paddingInlineStart,
-    paddingInlineEnd: paddingInlineEnd,
     onClick: onClick,
     "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? `${ariaLabel} ${OPENS_NEW_WINDOW_LABEL}` : ariaLabel,
-    "aria-labelledby": ariaLabelledBy && target === '_blank' ? `${ariaLabelledBy} ${opensNewWindowLabelId}` : ariaLabelledBy
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    xcss: styles
-  }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
+    "aria-labelledby": ariaLabelledBy && target === '_blank' ? `${ariaLabelledBy} ${opensNewWindowLabelId}` : ariaLabelledBy,
+    css: [baseStyles, focusRingStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    backgroundColor && backgroundColorStylesMap[backgroundColor],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    isSurfaceColorToken(backgroundColor) && surfaceColorStylesMap[backgroundColor],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    padding && paddingStylesMap.padding[padding],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlock && paddingStylesMap.paddingBlock[paddingBlock],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInline && paddingStylesMap.paddingInline[paddingInline],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    resolvedStyles.emotion],
+    "data-testid": testId,
+    "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
+  }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && jsx(VisuallyHidden, {
     id: opensNewWindowLabelId
   }, OPENS_NEW_WINDOW_LABEL));
+  return backgroundColor ? jsx(SurfaceContext.Provider, {
+    value: backgroundColor
+  }, node) : node;
 };
 
 // Workarounds to support generic types with forwardRef

package/dist/es2019/components/pressable.js

@@ -1,32 +1,50 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { forwardRef, useCallback, useContext } from 'react';
+/**
+ * @jsxRuntime classic
+ */
+/** @jsx jsx */
+import { forwardRef, useCallback, useContext } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import InteractionContext from '@atlaskit/interaction-context';
-import { xcss } from '../xcss/xcss';
-import Box from './box';
-// TODO: Duplicated FocusRing styles due to lack of `xcss` support
-// and to prevent additional dependency
-const baseFocusRingStyles = {
-  outlineColor: 'color.border.focused',
-  outlineWidth: 'border.width.outline',
-  outlineStyle: 'solid',
-  outlineOffset: 'space.025'
-};
-const focusRingStyles = xcss({
-  // Focus styles used when :focus-visible isn't supported
-  ':focus': baseFocusRingStyles,
-  // Remove default focus styles for mouse interactions if :focus-visible is supported
-  ':focus:not(:focus-visible)': {
+import { backgroundColorStylesMap, borderColorMap, borderWidthMap, isSurfaceColorToken, paddingStylesMap, positiveSpaceMap, surfaceColorStylesMap } from '../xcss/style-maps.partial';
+import { parseXcss } from '../xcss/xcss';
+import { SurfaceContext } from './internal/surface-provider';
+// This duplicates FocusRing styles from `@atlaskit/focus-ring`.
+const focusRingStyles = css({
+  '&:focus, &:focus-visible': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    outlineColor: borderColorMap['color.border.focused'],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    outlineOffset: positiveSpaceMap['space.025'],
+    outlineStyle: 'solid',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    outlineWidth: borderWidthMap['border.width.outline']
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '&:focus:not(:focus-visible)': {
     outline: 'none'
   },
-  ':focus-visible': baseFocusRingStyles,
   '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
-    ':focus-visible': {
+    '&:focus-visible': {
       outline: '1px solid'
     }
   }
 });
+const baseStyles = css({
+  boxSizing: 'border-box',
+  appearance: 'none',
+  border: 'none'
+});
+const enabledStyles = css({
+  cursor: 'pointer'
+});
+const disabledStyles = css({
+  cursor: 'not-allowed'
+});
 
 /**
  * __Pressable__
@@ -49,12 +67,13 @@ const Pressable = /*#__PURE__*/forwardRef(({
   paddingInlineEnd,
   isDisabled,
   type = 'button',
-  testId,
-  xcss: xcssStyles,
   onClick: providedOnClick = noop,
   interactionName,
   componentName,
   analyticsContext,
+  style,
+  testId,
+  xcss,
   ...htmlAttributes
 }, ref) => {
   const interactionContext = useContext(InteractionContext);
@@ -67,39 +86,58 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "8.2.0",
+    packageVersion: "8.2.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
 
-  // Combine default styles with supplied styles. XCSS does not support deep nested arrays
-  let styles = [xcss({
-    cursor: isDisabled ? 'not-allowed' : 'pointer'
-  }), focusRingStyles];
-
-  // We're type coercing this as Compiled styles in an array isn't supported by the types
-  // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
-  // 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,
+  // This is to remove className from safeHtmlAttributes
+  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
+  const {
+    className: _spreadClass,
+    ...safeHtmlAttributes
+  } = htmlAttributes;
+  const resolvedStyles = parseXcss(xcss);
+  const node =
+  // eslint-disable-next-line @atlaskit/design-system/no-html-button
+  jsx("button", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    style: style,
+    ref: ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: resolvedStyles.static
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, safeHtmlAttributes, {
+    // eslint-disable-next-line react/button-has-type
     type: type,
     onClick: onClick,
-    backgroundColor: backgroundColor,
-    padding: padding,
-    paddingBlock: paddingBlock,
-    paddingBlockStart: paddingBlockStart,
-    paddingBlockEnd: paddingBlockEnd,
-    paddingInline: paddingInline,
-    paddingInlineStart: paddingInlineStart,
-    paddingInlineEnd: paddingInlineEnd
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    xcss: styles,
-    disabled: isDisabled
+    disabled: isDisabled,
+    css: [baseStyles, focusRingStyles, isDisabled ? disabledStyles : enabledStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    backgroundColor && backgroundColorStylesMap[backgroundColor],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    isSurfaceColorToken(backgroundColor) && surfaceColorStylesMap[backgroundColor],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    padding && paddingStylesMap.padding[padding],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlock && paddingStylesMap.paddingBlock[paddingBlock],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInline && paddingStylesMap.paddingInline[paddingInline],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    resolvedStyles.emotion],
+    "data-testid": testId
   }), children);
+  return backgroundColor ? jsx(SurfaceContext.Provider, {
+    value: backgroundColor
+  }, node) : node;
 });
 export default Pressable;

package/dist/esm/components/anchor.js

@@ -1,9 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby"];
-import React, { forwardRef, useCallback, useContext } from 'react';
+var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby", "style", "target", "testId", "xcss"],
+  _excluded2 = ["className"];
+/**
+ * @jsxRuntime classic
+ */
+/** @jsx jsx */
+import { forwardRef, useCallback, useContext } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
@@ -11,36 +18,47 @@ import { useRouterLink } from '@atlaskit/app-provider';
 import noop from '@atlaskit/ds-lib/noop';
 import InteractionContext from '@atlaskit/interaction-context';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-import { xcss } from '../xcss/xcss';
-import Box from './box';
-// TODO: Duplicated FocusRing styles due to lack of `xcss` support
-// and to prevent additional dependency
-var baseFocusRingStyles = {
-  outlineColor: 'color.border.focused',
-  outlineWidth: 'border.width.outline',
-  outlineStyle: 'solid',
-  outlineOffset: 'space.025'
-};
-var defaultStyles = xcss({
-  textDecoration: 'underline'
-});
-var focusRingStyles = xcss({
-  // Focus styles used when :focus-visible isn't supported
-  ':focus': baseFocusRingStyles,
-  // Remove default focus styles for mouse interactions if :focus-visible is supported
-  ':focus:not(:focus-visible)': {
+import { backgroundColorStylesMap, borderColorMap, borderWidthMap, isSurfaceColorToken, paddingStylesMap, positiveSpaceMap, surfaceColorStylesMap } from '../xcss/style-maps.partial';
+import { parseXcss } from '../xcss/xcss';
+import { SurfaceContext } from './internal/surface-provider';
+// TODO: duplicates FocusRing styles from `@atlaskit/focus-ring`.
+var focusRingStyles = css({
+  '&:focus, &:focus-visible': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    outlineColor: borderColorMap['color.border.focused'],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    outlineOffset: positiveSpaceMap['space.025'],
+    outlineStyle: 'solid',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    outlineWidth: borderWidthMap['border.width.outline']
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '&:focus:not(:focus-visible)': {
     outline: 'none'
   },
-  ':focus-visible': baseFocusRingStyles,
   '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
-    ':focus-visible': {
+    '&:focus-visible': {
       outline: '1px solid'
     }
   }
 });
+var baseStyles = css({
+  boxSizing: 'border-box',
+  textDecoration: 'underline'
+});
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
 var OPENS_NEW_WINDOW_LABEL = '(opens new window)';
+
+/**
+ * __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)
+ */
 var AnchorNoRef = function AnchorNoRef(_ref, ref) {
   var href = _ref.href,
     children = _ref.children,
@@ -52,9 +70,6 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     paddingInline = _ref.paddingInline,
     paddingInlineStart = _ref.paddingInlineStart,
     paddingInlineEnd = _ref.paddingInlineEnd,
-    testId = _ref.testId,
-    xcssStyles = _ref.xcss,
-    target = _ref.target,
     _ref$onClick = _ref.onClick,
     providedOnClick = _ref$onClick === void 0 ? noop : _ref$onClick,
     interactionName = _ref.interactionName,
@@ -62,12 +77,17 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     analyticsContext = _ref.analyticsContext,
     ariaLabel = _ref['aria-label'],
     ariaLabelledBy = _ref['aria-labelledby'],
+    style = _ref.style,
+    target = _ref.target,
+    testId = _ref.testId,
+    xcss = _ref.xcss,
     htmlAttributes = _objectWithoutProperties(_ref, _excluded);
   var interactionContext = useContext(InteractionContext);
   var handleClick = useCallback(function (e, analyticsEvent) {
     interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
     providedOnClick(e, analyticsEvent);
   }, [providedOnClick, interactionContext, interactionName]);
+
   // TODO: Use React 18's useId() hook when we update.
   // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
   var opensNewWindowLabelId = uid({
@@ -78,16 +98,17 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "8.2.0",
+    packageVersion: "8.2.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
-  var RouterLink = useRouterLink();
 
-  // We're type coercing this as Compiled styles in an array isn't supported by the types
-  // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
-  // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
-  var styles = Array.isArray(xcssStyles) ? [defaultStyles, focusRingStyles].concat(_toConsumableArray(xcssStyles)) : [defaultStyles, focusRingStyles, xcssStyles];
+  // This is to remove className from safeHtmlAttributes
+  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
+  var _spreadClass = htmlAttributes.className,
+    safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
+  var resolvedStyles = parseXcss(xcss);
+  var RouterLink = useRouterLink();
   var isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
   var isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);
 
@@ -101,33 +122,52 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
   var isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
   var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && _typeof(href) === 'object';
   invariant(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Anchor primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
-  return /*#__PURE__*/React.createElement(Box
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  , _extends({}, htmlAttributes, {
-    // @ts-expect-error (TODO: Box doesn't allow `as` components)
-    as: isRouterLink ? RouterLink : 'a',
-    ref: ref,
-    testId: testId,
-    "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
+  var Component = isRouterLink ? RouterLink : 'a';
+  var node = jsx(Component
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  , _extends({
+    style: style,
+    ref: ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: resolvedStyles.static
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, safeHtmlAttributes, {
+    // @ts-expect-error
     href: !isRouterLink && typeof href !== 'string' ? undefined : href,
     target: target,
-    backgroundColor: backgroundColor,
-    padding: padding,
-    paddingBlock: paddingBlock,
-    paddingBlockStart: paddingBlockStart,
-    paddingBlockEnd: paddingBlockEnd,
-    paddingInline: paddingInline,
-    paddingInlineStart: paddingInlineStart,
-    paddingInlineEnd: paddingInlineEnd,
     onClick: onClick,
     "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(OPENS_NEW_WINDOW_LABEL) : ariaLabel,
-    "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    xcss: styles
-  }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
+    "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy,
+    css: [baseStyles, focusRingStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    backgroundColor && backgroundColorStylesMap[backgroundColor],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    isSurfaceColorToken(backgroundColor) && surfaceColorStylesMap[backgroundColor],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    padding && paddingStylesMap.padding[padding],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlock && paddingStylesMap.paddingBlock[paddingBlock],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInline && paddingStylesMap.paddingInline[paddingInline],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    resolvedStyles.emotion],
+    "data-testid": testId,
+    "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
+  }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && jsx(VisuallyHidden, {
     id: opensNewWindowLabelId
   }, OPENS_NEW_WINDOW_LABEL));
+  return backgroundColor ? jsx(SurfaceContext.Provider, {
+    value: backgroundColor
+  }, node) : node;
 };
 
 // Workarounds to support generic types with forwardRef