@atlaskit/primitives 2.1.0 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/primitives
 
+## 3.1.0
+
+### Minor Changes
+
+- [#76431](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/76431) [`c6819de73d02`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c6819de73d02) - Default text color + allow color inheritance if explicitly defined
+
+## 3.0.0
+
+### Major Changes
+
+- [#58240](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58240) [`a45d2049a22c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a45d2049a22c) - The "Link" primitive has been renamed to "Anchor" to avoid confusion with the upcoming "Link" component. Since Link is still in Alpha this should not cause any upgrade friction.
+
+### Minor Changes
+
+- [#58240](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58240) [`75b2ade8b254`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/75b2ade8b254) - Both the Pressable and Anchor primitives now support analytics tracking by default.
+- [#58240](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58240) [`39f3c929f0c4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/39f3c929f0c4) - Add Pressable and Anchor primitives (in Alpha) to root export as `UNSAFE_PRESSABLE` and `UNSAFE_LINK`.
+
+### Patch Changes
+
+- [#58240](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58240) [`4951390bc0ae`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4951390bc0ae) - [ux] Adds a default underline style to the Anchor primitive (Alpha)
+
 ## 2.1.0
 
 ### Minor Changes

package/anchor/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/primitives/anchor",
+  "main": "../dist/cjs/components/anchor.js",
+  "module": "../dist/esm/components/anchor.js",
+  "module:es2019": "../dist/es2019/components/anchor.js",
+  "sideEffects": false,
+  "types": "../dist/types/components/anchor.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "../dist/types-ts4.5/components/anchor.d.ts"
+      ]
+    }
+  }
+}

package/constellation/anchor/code.mdx

@@ -0,0 +1,21 @@
+---
+title: Anchor
+description: An anchor is a primitive for building custom links.
+order: 1
+---
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+import ERTAnchor from '!!extract-react-types-loader!../../extract-react-types/anchor-props';
+
+## Props
+
+Anchor also supports all valid `HTMLAnchorElement` props.
+
+<PropsTable heading="" props={ERTAnchor} />

package/constellation/anchor/examples.mdx

@@ -0,0 +1,33 @@
+---
+title: Anchor
+description: An anchor is a primitive for building custom links.
+order: 0
+---
+
+import AnchorDefault from '../../examples/constellation/anchor/default';
+import AnchorStyled from '../../examples/constellation/anchor/styled';
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+import SectionMessage from '@atlaskit/section-message';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+Anchor is a primitive used for building custom anchor links, with support for client-side routing and Atlassian Design System styling. This component is used by other design system components, such as the [Link component](/components/link/examples).
+
+For most links, use the [Link component](/components/link/examples) wherever possible, and use [XCSS](/components/primitives/xcss/usage) for any necessary customization. Only use Anchor if you aren't able to use Link.
+
+## Default
+
+Anchor comes unstyled, ready for styles to be applied. Note if you are using the [CSS reset](/components/css-reset/examples), anchor will inherit some default styles.
+
+<Example Component={AnchorDefault} packageName="@atlaskit/primitives/anchor" />
+
+## Styling
+
+Anchor consumes the Box primitive to provide a consistent styling API that supports design tokens. See [Box](/components/primitives/box/examples) for complete styling documentation and examples.
+
+<Example Component={AnchorStyled} packageName="@atlaskit/primitives/anchor" />

package/constellation/anchor/usage.mdx

@@ -0,0 +1,47 @@
+---
+title: Anchor
+description: An anchor is a primitive for building custom links.
+order: 2
+---
+
+## When not to use Anchor
+
+The [Link component](/components/link/usage) should be used whenever possible for links to maintain visual consistency. Only use Anchor when building custom links beyond the capabilities of the Link component. The decision to use Anchor should involve checking if the Link component can be customized to fit your needs using [XCSS](/components/primitives/XCSS/usage).
+
+Do not use Anchor for buttons that perform actions rather than navigation. Use the equivalent [Pressable primitive](/components/primitives/pressable/usage) instead.
+
+## Link types
+
+External links starting with `http://` or `https://` will automatically render with `target="_blank"` and `rel="noopener noreferrer"` attributes.
+
+### Router links
+
+Anchor supports automatic consumption of configured router link components through the [App Provider](/components/app-provider/examples#router-links). If an App Provider is not present or a router link component is not configured, the link will render as a standard anchor link.
+
+External links and non-HTTP-based links such as `tel:` and `mailto:` will not use router links and always render as standard anchor links.
+
+Anchor accepts a generic type object matching the router link configuration, allowing advanced usage of `href` prop. These values can be mapped to the underlying router link component in the App Provider.
+
+```jsx
+<Anchor<MyRouterLinkConfig>
+  href={{
+    to: '/home',
+    replace: true
+  }}
+>
+  Home
+</Anchor>
+```
+
+## Styling
+
+Display behavior follows the same patterns as [Box](/components/primitives/box/usage). Use available props or [XCSS](/components/primitives/xcss/usage) to customize padding options, background color, and other styles.
+
+## Related
+
+- [Configuring router link components with AppProvider](/components/app-provider/examples#router-links)
+- [The underlying box component](/components/primitives/box/usage)
+- [Counterpart pressable primitive for button tags](/components/primitives/button/usage)
+- [Manage horizontal layout using an inline component](/components/primitives/inline/usage)
+- [Manage vertical layout using a stack component](/components/primitives/stack/usage)
+- [Use design tokens in code with XCSS](/components/primitives/XCSS/usage)

package/constellation/box/examples.mdx

@@ -53,13 +53,15 @@ For more information on XCSS, see the dedicated [XCSS documentation](/components
 
 ## Conditional styles
 
-To achieve conditional styles, it is usually simpler to apply conditional behavior at the `xcss` object level, rather than applying conditional behavior to individual properties.
+To achieve conditional styles, we suggest composing conditional styles via the `props.xcss` API rather than applying conditional behaviour to individual props.
 
 <Example Component={BoxConditional} packageName="@atlaskit/primitives/box" />
 
-## Practical use case
+## Practical card example
 
-Box is designed to be used in conjunction with the inline and stack components to create layouts. This example demonstrates how these can be used to create familiar components and patterns.
+Box is designed to be composed with inline, stack, and other components to create layouts.
+
+Atlassian uses dozens of distinct card-like components across products. Therefore, rather than providing a strict component, the Atlassian Design System empowers and supports you to build your own card components in ways that are consistent and will scale over time.
 
 <Example
   Component={BoxPracticalUseCase}

package/constellation/pressable/code.mdx

@@ -0,0 +1,21 @@
+---
+title: Pressable
+description: A pressable is a primitive used for building custom buttons.
+order: 1
+---
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+import ERTPressable from '!!extract-react-types-loader!../../extract-react-types/pressable-props';
+
+## Props
+
+Pressable also supports all valid `HTMLButtonElement` props, except for `disabled` which is replaced by the `isDisabled` prop.
+
+<PropsTable heading="" props={ERTPressable} />

package/constellation/pressable/examples.mdx

@@ -0,0 +1,39 @@
+---
+title: Pressable
+description: A pressable is a primitive used for building custom buttons.
+order: 0
+---
+
+import PressableDefault from '../../examples/constellation/pressable/default';
+import PressableStyled from '../../examples/constellation/pressable/styled';
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+import SectionMessage from '@atlaskit/section-message';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+Pressable is a primitive used for building custom buttons with Atlassian Design System styling. This component is used by other design system components, such as the [Button component](/components/button/examples).
+
+For most buttons, use the [Button component](/components/button/examples) wherever possible, and use [XCSS](/components/primitives/xcss/usage) for any necessary customization. Only use pressable if you aren't able to use the button component.
+
+## Default
+
+Pressable comes unstyled, ready for styles to be applied.
+
+<Example
+  Component={PressableDefault}
+  packageName="@atlaskit/primitives/pressable"
+/>
+
+## Styling
+
+Pressable consumes the Box primitive to provide a consistent styling API that supports design tokens. See [Box](/components/primitives/box/examples) for complete styling documentation and examples.
+
+<Example
+  Component={PressableStyled}
+  packageName="@atlaskit/primitives/pressable"
+/>

package/constellation/pressable/usage.mdx

@@ -0,0 +1,23 @@
+---
+title: Pressable
+description: A pressable is a primitive used for building custom buttons.
+order: 2
+---
+
+## When not to use pressable
+
+The [Button component](/components/button/usage) should be used whenever possible for buttons to maintain visual consistency. Only use pressable when building custom buttons beyond the capabilities of the button component. The decision to use pressable should involve checking if the button component can be customized to fit your needs using [XCSS](/components/primitives/XCSS/usage).
+
+Do not use Pressable for links (anchor tags). Use the equivalent [Anchor primitive](/components/primitives/anchor/usage) instead.
+
+## Styling
+
+Display behavior follows the same patterns as [Box](/components/primitives/box/usage). Use available props or [XCSS](/components/primitives/xcss/usage) to customize padding options, background color, and other styles.
+
+## Related
+
+- [The underlying box component](/components/primitives/box/usage)
+- [Counterpart anchor primitive for anchor tags](/components/primitives/anchor/usage)
+- [Manage horizontal layout using an inline component](/components/primitives/inline/usage)
+- [Manage vertical layout using a stack component](/components/primitives/stack/usage)
+- [Use design tokens in code with XCSS](/components/primitives/XCSS/usage)

package/constellation/text/examples.mdx

@@ -4,9 +4,10 @@ description: Text is a token-backed typography component to display body and UI
 order: 0
 ---
 
-import TextDefault from '../../examples/constellation/text/basic';
-import TextAsElement from '../../examples/constellation/text/as-element';
+import Basic from '../../examples/constellation/text/basic';
 import ColorInverse from '../../examples/constellation/text/color-inverse';
+import Weight from '../../examples/constellation/text/weight';
+import AsElement from '../../examples/constellation/text/as-element';
 
 ## Basic
 
@@ -14,16 +15,22 @@ Implements the [Atlassian typography system](/foundations/typography/) as a comp
 
 The `variant` prop expresses the visual appearance of the text element.
 
-<Example Component={TextDefault} pacckageName="@atlaskit/primitives" />
+<Example Component={Basic} pacckageName="@atlaskit/primitives" />
 
-## Rendered HTML tag
+## Color
 
-By default, `body` variants are rendered as `<p>` tags and `ui` variants are rendered as `<span>` tags. This can be ovrridden by the `as` prop.
+Set `color` to change the text color, defaults to `text.color` if not nested in other Text components. When used within a [box component](/components/primitives/box) that has a bold background color, the text color will automatically be inverted.
 
-<Example Component={TextAsElement} packageName="@atlaskit/primitives" />
+<Example Component={ColorInverse} pacckageName="@atlaskit/primitives" />
 
-## Color
+## Weight
 
-Set `color` to change the text color. When used within a [box component](/components/primitives/box) that has a background color set, the text color can be automatically inverted without setting the `color` prop depending on the background color of the box.
+Set `weight` to change the front weight.
 
-<Example Component={ColorInverse} pacckageName="@atlaskit/primitives" />
+<Example Component={Weight} pacckageName="@atlaskit/primitives" />
+
+## Rendered HTML tag
+
+Set `as` to change the rendered HTML element, defaults to `span`.
+
+<Example Component={AsElement} packageName="@atlaskit/primitives" />

package/constellation/xcss/examples.mdx

@@ -37,6 +37,6 @@ XCSS also accepts a subset of media queries at [predefined breakpoints](/compone
 
 ## Conditional styles
 
-To achieve conditional styles, it is usually simpler to apply conditional behavior at the `xcss` object level, rather than applying conditional behavior to individual properties.
+For conditional styles, try composing styles together via the array with ternary or boolean operators.
 
 <Example Component={xcssConditional} packageName="@atlaskit/primitives/xcss" />

package/dist/cjs/components/{link.js → anchor.js}

@@ -29,6 +29,9 @@ var baseFocusRingStyles = {
   outlineStyle: 'solid',
   outlineOffset: 'space.025'
 };
+var defaultStyles = (0, _xcss.xcss)({
+  textDecoration: 'underline'
+});
 var focusRingStyles = (0, _xcss.xcss)({
   ':focus-visible': baseFocusRingStyles,
   '@supports not selector(*:focus-visible)': {
@@ -42,7 +45,7 @@ var focusRingStyles = (0, _xcss.xcss)({
 });
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
-var Link = function Link(_ref, ref) {
+var Anchor = function Anchor(_ref, ref) {
   var href = _ref.href,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
@@ -73,14 +76,14 @@ var Link = function Link(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "2.1.0",
+    packageVersion: "3.1.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
   var RouterLink = (0, _appProvider.useRouterLink)();
 
   // Combine default styles with supplied styles. XCSS does not support deep nested arrays
-  var styles = Array.isArray(xcssStyles) ? [focusRingStyles].concat((0, _toConsumableArray2.default)(xcssStyles)) : [focusRingStyles, xcssStyles];
+  var styles = Array.isArray(xcssStyles) ? [defaultStyles, focusRingStyles].concat((0, _toConsumableArray2.default)(xcssStyles)) : [defaultStyles, focusRingStyles, xcssStyles];
   var isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
   var isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);
 
@@ -93,7 +96,7 @@ var Link = function Link(_ref, ref) {
    */
   var isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
   var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && (0, _typeof2.default)(href) === 'object';
-  (0, _tinyInvariant.default)(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Link primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
+  (0, _tinyInvariant.default)(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Anchor primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
   return /*#__PURE__*/_react.default.createElement(_box.default
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , (0, _extends2.default)({}, htmlAttributes, {
@@ -112,12 +115,8 @@ var Link = function Link(_ref, ref) {
     paddingBlockEnd: paddingBlockEnd,
     paddingInline: paddingInline,
     paddingInlineStart: paddingInlineStart,
-    paddingInlineEnd: paddingInlineEnd
-    // TODO: This only tracks events if componentName is supplied, which makes tracking opt-in during
-    // the transition period. This will be removed once `@atlaskit/button` is bumped to use the latest
-    // version of primitives
-    ,
-    onClick: componentName ? onClick : providedOnClick
+    paddingInlineEnd: paddingInlineEnd,
+    onClick: onClick
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     xcss: styles
@@ -126,17 +125,17 @@ var Link = function Link(_ref, ref) {
 
 // Workarounds to support generic types with forwardRef
 /**
- * __UNSAFE_LINK__
+ * __UNSAFE_ANCHOR__
  *
  * @internal Still under development. Do not use.
  *
- * Link 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.
+ * 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.
  *
  * This component is mostly used by other design system components, such as the [link component](/components/link/usage).
  *
- * - [Examples](https://atlassian.design/components/primitives/link/examples)
- * - [Code](https://atlassian.design/components/primitives/link/code)
- * - [Usage](https://atlassian.design/components/primitives/link/usage)
+ * - [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 UNSAFE_LINK = /*#__PURE__*/(0, _react.forwardRef)(Link);
-var _default = exports.default = UNSAFE_LINK;
+var UNSAFE_ANCHOR = /*#__PURE__*/(0, _react.forwardRef)(Anchor);
+var _default = exports.default = UNSAFE_ANCHOR;

package/dist/cjs/components/pressable.js

@@ -80,7 +80,7 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "2.1.0",
+    packageVersion: "3.1.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -94,12 +94,8 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     as: "button",
     ref: ref,
     testId: testId,
-    type: type
-    // TODO: This only tracks events if componentName is supplied, which makes tracking opt-in during
-    // the transition period. This will be removed once `@atlaskit/button` is bumped to use the latest
-    // version of primitives
-    ,
-    onClick: componentName ? onClick : providedOnClick,
+    type: type,
+    onClick: onClick,
     backgroundColor: backgroundColor,
     padding: padding,
     paddingBlock: paddingBlock,

package/dist/cjs/components/text.js

@@ -7,7 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _styleMaps = require("../xcss/style-maps.partial");
 var _surfaceProvider = require("./internal/surface-provider");
@@ -18,50 +19,62 @@ var asAllowlist = ['span', 'p', 'strong', 'em'];
 // We're doing this because our CSS reset can add top margins to elements such as `p` which is totally insane.
 // Long term we should remove those instances from the reset - it should be a reset to 0.
 // For now, at least we know <Text> will be unaffected by this.
-var resetStyles = (0, _react.css)({
+var resetStyles = (0, _react2.css)({
   margin: 0
 });
 var variantStyles = _objectSpread(_objectSpread({}, _styleMaps.bodyTextStylesMap), _styleMaps.uiTextStylesMap);
-var strongStyles = (0, _react.css)({
+var strongStyles = (0, _react2.css)({
   fontWeight: 'bold'
 });
-var emStyles = (0, _react.css)({
+var emStyles = (0, _react2.css)({
   fontStyle: 'italic'
 });
 var textAlignMap = {
-  center: (0, _react.css)({
+  center: (0, _react2.css)({
     textAlign: 'center'
   }),
-  end: (0, _react.css)({
+  end: (0, _react2.css)({
     textAlign: 'end'
   }),
-  start: (0, _react.css)({
+  start: (0, _react2.css)({
     textAlign: 'start'
   })
 };
-var truncationStyles = (0, _react.css)({
+var truncationStyles = (0, _react2.css)({
   display: '-webkit-box',
   overflow: 'hidden',
   WebkitBoxOrient: 'vertical'
 });
 var wordBreakMap = {
-  breakAll: (0, _react.css)({
+  breakAll: (0, _react2.css)({
     wordBreak: 'break-all'
   })
 };
+var HasTextAncestorContext = /*#__PURE__*/(0, _react.createContext)(false);
+var useHasTextAncestor = function useHasTextAncestor() {
+  return (0, _react.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) {
+var useColor = function useColor(colorProp, hasTextAncestor) {
   var surface = (0, _surfaceProvider.useSurface)();
 
   /**
-   * Where the color of the surface is inverted we override the user choice
+   * 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.
    */
-  var color = _styleMaps.inverseColorMap.hasOwnProperty(surface) ? _styleMaps.inverseColorMap[surface] : colorProp;
-  return color;
+  if (_styleMaps.inverseColorMap.hasOwnProperty(surface)) {
+    return _styleMaps.inverseColorMap[surface];
+  }
+  if (colorProp === 'inherit') {
+    return undefined;
+  }
+  if (!colorProp && hasTextAncestor) {
+    return undefined;
+  }
+  return colorProp || 'color.text';
 };
 
 /**
@@ -76,7 +89,8 @@ var useColor = function useColor(colorProp) {
 var Text = function Text(_ref) {
   var children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var asElement = props.as,
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'span' : _props$as,
     colorProp = props.color,
     textAlign = props.textAlign,
     testId = props.testId,
@@ -84,10 +98,6 @@ var Text = function Text(_ref) {
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'body' : _props$variant,
     weight = props.weight;
-
-  // body variants -> p
-  // ui variants -> span
-  var Component = asElement || (variant.includes('body') ? 'p' : 'span');
   (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
 
   // Remove the ability to bypass typescript errors for maxLines
@@ -95,14 +105,20 @@ var Text = function Text(_ref) {
   if ('maxLines' in props && variant.includes('body')) {
     maxLines = props.maxLines;
   }
-  var color = useColor(colorProp);
-  return (0, _react.jsx)(Component, {
-    css: [resetStyles, variant && variantStyles[variant], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && _styleMaps.fontWeightStylesMap[weight], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+  var hasTextAncestor = useHasTextAncestor();
+  var color = useColor(colorProp, hasTextAncestor);
+  var component = (0, _react2.jsx)(Component, {
+    css: [resetStyles, variantStyles[variant], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && _styleMaps.fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },
     "data-testid": testId,
     id: id
   }, children);
+  return hasTextAncestor ?
+  // no need to re-apply context if the text is already wrapped
+  component : (0, _react2.jsx)(HasTextAncestorContext.Provider, {
+    value: true
+  }, component);
 };
 var _default = exports.default = Text;

package/dist/cjs/index.js

@@ -46,13 +46,19 @@ Object.defineProperty(exports, "Text", {
     return _text.default;
   }
 });
+Object.defineProperty(exports, "UNSAFE_ANCHOR", {
+  enumerable: true,
+  get: function get() {
+    return _anchor.default;
+  }
+});
 Object.defineProperty(exports, "UNSAFE_BREAKPOINTS_CONFIG", {
   enumerable: true,
   get: function get() {
     return _responsive.UNSAFE_BREAKPOINTS_CONFIG;
   }
 });
-Object.defineProperty(exports, "UNSAFE_Pressable", {
+Object.defineProperty(exports, "UNSAFE_PRESSABLE", {
   enumerable: true,
   get: function get() {
     return _pressable.default;
@@ -91,4 +97,5 @@ var _grid = _interopRequireDefault(require("./components/grid"));
 var _bleed = _interopRequireDefault(require("./components/bleed"));
 var _text = _interopRequireDefault(require("./components/text"));
 var _pressable = _interopRequireDefault(require("./components/pressable"));
+var _anchor = _interopRequireDefault(require("./components/anchor"));
 var _responsive = require("./responsive");