@atlaskit/primitives 1.6.7 → 1.6.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/primitives
 
+## 1.6.8
+
+### Patch Changes
+
+- [#42012](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42012) [`0a52fc9129e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0a52fc9129e) - Internal change to the `media` export to ensure compatibility with [Compiled](https://github.com/atlassian-labs/compiled). No change to public API.
+
 ## 1.6.7
 
 ### Patch Changes

package/constellation/bleed/code.mdx

@@ -1,6 +1,6 @@
 ---
 title: Bleed
-description: Bleed is a primitive layout component that controls negative whitespace.
+description: A bleed controls negative whitespace in layouts.
 order: 1
 ---
 

package/constellation/bleed/example.mdx

@@ -1,6 +1,6 @@
 ---
 title: Bleed
-description: Bleed is a primitive layout component that controls negative whitespace.
+description: A bleed controls negative whitespace in layouts.
 order: 0
 ---
 

package/constellation/box/code.mdx

@@ -1,6 +1,6 @@
 ---
 title: Box
-description: A box is a primitive component that acts as a generic container, and provides managed access to design tokens.
+description: A box is a generic container that provides managed access to design tokens.
 order: 1
 ---
 

package/constellation/box/examples.mdx

@@ -1,6 +1,6 @@
 ---
 title: Box
-description: A box is a primitive component that acts as a generic container, and provides managed access to design tokens.
+description: A box is a generic container that provides managed access to design tokens.
 order: 0
 ---
 

package/constellation/box/usage.mdx

@@ -1,15 +1,15 @@
 ---
 title: Box
-description: A box is a primitive component that acts as a generic container, and provides managed access to design tokens.
+description: A box is a generic container that provides managed access to design tokens.
 order: 2
 ---
 
 A `Box` is a generic container with convenient and managed access to design tokens, and built-in guidance for the best practices of the Atlassian Design System.
-Use a `Box` to compose layouts and add styling to child elements through visual props, including spacing and color through design tokens.
+Use a box to compose layouts and add styling to child elements through visual props, including spacing and color through design tokens.
 
-## `Box` styling
+## Styling
 
-Display behavior is set by using the available props or using `xcss`. Makers can make design decisions for `Box` by setting:
+Display behavior is set by using the available props or using `xcss`. Makers can make design decisions for box by setting:
 
 - `padding`
 - `paddingInline`
@@ -20,7 +20,7 @@ Display behavior is set by using the available props or using `xcss`. Makers can
 - `paddingBlockEnd`
 - `backgroundColor`
 
-## Using `Box`
+## Using box
 
 To identify usages of `Box` in a given design, look for where a UI element will receive some visual styles applied to a container. `Box` can be used on a range of sizes of elements, from buttons to section wrappers.
 `Box`, being generic in nature, can be "over-used", so it’s important to consider situations where more specific and expressive primitives could be used, for example: `Inline` and `Stack` to manage horizontal and vertical layouts, respectively.

package/constellation/flex/code.mdx

@@ -1,6 +1,6 @@
 ---
 title: Flex
-description: Flex is a primitive layout component that implements the CSS Flexbox API.
+description: A flex implements the CSS flexbox API.
 order: 1
 ---
 

package/constellation/flex/examples.mdx

@@ -1,6 +1,6 @@
 ---
 title: Flex
-description: Flex is a primitive layout component that implements the CSS Flexbox API.
+description: A flex implements the CSS flexbox API.
 order: 0
 ---
 

package/constellation/grid/code.mdx

@@ -1,6 +1,6 @@
 ---
 title: Grid
-description: Grid is a primitive layout component that implements the CSS Grid API.
+description: A grid uses the CSS grid API to create consistent layouts.
 order: 1
 ---
 

package/constellation/grid/examples.mdx

@@ -1,6 +1,6 @@
 ---
 title: Grid
-description: Grid is a primitive layout component that implements the CSS Grid API.
+description: A grid uses the CSS grid API to create consistent layouts.
 order: 0
 ---
 

package/constellation/inline/code.mdx

@@ -1,6 +1,6 @@
 ---
 title: Inline
-description: Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+description: An inline manages the horizontal layout of direct children using flexbox.
 order: 1
 ---
 

package/constellation/inline/examples.mdx

@@ -1,6 +1,6 @@
 ---
 title: Inline
-description: Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+description: An inline manages the horizontal layout of direct children using flexbox.
 order: 0
 ---
 
@@ -26,9 +26,9 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 ## Basic
 
-Inline should be used to efficiently lay-out a group of elements horizontally.
+Inline should be used to layout a group of elements horizontally.
 
-Use the given props to configure display behaviour using designs tokens, as shown in the more complex examples below.
+Use the given props to configure display behavior using design tokens, as shown in the more complex examples below.
 
 <Example Component={InlineBasic} packageName="@atlaskit/primitives/inline" />
 
@@ -70,7 +70,7 @@ To control the alignment of items you can use the `alignBlock` and `alignInline`
 
 ## Spread
 
-Elements can be set to stay together, spaced at the given value (default behaviour) or spread equally in the space available.
+Elements can be set to stay together, spaced at the given value (default behavior) or spread equally in the space available.
 
 <Example Component={InlineSpread} packageName="@atlaskit/primitives/inline" />
 

package/constellation/inline/usage.mdx

@@ -1,10 +1,10 @@
 ---
 title: Inline
-description: Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+description: An inline manages the horizontal layout of direct children using flexbox.
 order: 2
 ---
 
-Primitive components are designed to act as building blocks for composing a user experience. An Inline primitive should be used when you want to layout UI elements horizontally, and make use of the built-in design guidance from the Atlassian Design System.
+Primitive components act as building blocks for composing a user experience. Use the inline primitive to lay out UI elements horizontally using built-in design guidance from the Atlassian Design System.
 
 Inline primitives work as you might expect, aligning content horizontally across a page or layout, as a container that decides the horizontal layout of its children. Inline components also decide the specifics of how the children are displayed, for example, where they are aligned or how much space is between child elements. Inline should be used purely for visual alignment, and should have no opinions about the functionality of its children.
 
@@ -16,13 +16,13 @@ In its simplest form, `Inline` operates like a flexbox row, however adds the bui
 </Inline>
 ```
 
-`Inline` also has a flex-direction: row; this is the default for flexbox, so it is not explicitly applied.
+Inline also has a `flex-direction: row;`. This is the default for flexbox, so it is not explicitly applied.
 
-## Use `Inline`
+## Use inline
 
 The purpose of an Inline is primarily as a container element controlling how child components are displayed and positioned horizontally. Inline should be used any time you wish to layout elements or components horizontally.
 
-The various Inline props can then be used to customize the spacing and styling on any child elements. These include:
+The inline props can then be used to customize the spacing and styling on any child elements. These include:
 
 - `alignBlock`
 - `alignInline`
@@ -35,9 +35,9 @@ The various Inline props can then be used to customize the spacing and styling o
 
 ## Related
 
-- [Learn more about the Primitives](/components/primitives/overview)
-- [Learn more about the Box primitive](/components/primitives/box/usage)
-- [Learn more about the Stack primitive](/components/primitives/stack/usage)
-- [Learn more about the Grid primitive](/components/primitives/grid/examples)
-- [Learn more about the Bleed primitive](/components/primitives/bleed/examples)
-- [Learn more about the Flex primitive](/components/primitives/flex/examples)
+- [Primitives](/components/primitives/overview)
+- [Box](/components/primitives/box/usage)
+- [Stack](/components/primitives/stack/usage)
+- [Grid](/components/primitives/grid/examples)
+- [Bleed](/components/primitives/bleed/examples)
+- [Flex](/components/primitives/flex/examples)

package/constellation/overview/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Primitives
-description: Primitives are composable components that solve common layout problems.
+description: Primitives are components that create layouts, add styling, make up other components.
 order: 1
 ---
 
@@ -19,19 +19,16 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-Primitives are a new type of component for layouts and the placement of elements.
-They act as simple building blocks to compose different parts of the user experience,
+Primitives are a new type of component for layouts, styling, and the placement of elements.
+They act as building blocks to compose different parts of the user experience,
 from the smallest design decisions (for example, the spacing around an icon) to larger layout decisions (for example, how a page is structured).
 
-Primitives are powered by design tokens and add a layer of ergonomics and accessibility to token application. Tokens are great at describing the what of a design decision;
-primitives make it easier to reason about the when and how. This reduces cognitive overhead, improves productivity and prevents accidents or mistakes.
+Primitives are powered by design tokens and make it easier to apply design decisions. This reduces cognitive overhead, improves productivity and prevents accidents or mistakes.
 
-## Available Primitives
+## Available primitives
 
-Each primitive is designed to have a single responsibility, and it should be immediately clear where and when each primitive should be used.
-However, they are also flexible enough that they should be able to be used together to compose complex designs not otherwise implemented directly in the Design Systems.
-
-Currently, three core primitive components are available - Box, Inline and Stack. A large amount of layout problems can be reduced to laying out content:
+Primitives are used together to compose complex designs not otherwise implemented directly in the Design System.
+Currently, three layout primitive components are available:
 
 - in a container (see [box](/components/primitives/box))
 - horizontally (see [inline](/components/primitives/inline))
@@ -51,7 +48,7 @@ To install primitive components, add @atlaskit/primitives as a dependency on you
 $ yarn add @atlaskit/primitives
 ```
 
-## Using Primitives
+## Using primitives
 
 Use primitives for composing layouts.
 Primitives are not currently available in Figma, so the first step in implementing primitive components is identifying where they might fit in a given design.
@@ -87,9 +84,10 @@ The behavior within and around these boxes can then be broken down into their ho
 
 ## Related
 
-- [Learn more about the Box primitive](/components/primitives/box/usage)
-- [Learn more about the Inline primitive](/components/primitives/inline/usage)
-- [Learn more about the Stack primitive](/components/primitives/stack/usage)
-- [Learn more about the Grid primitive](/components/primitives/grid/examples)
-- [Learn more about the Bleed primitive](/components/primitives/bleed/examples)
-- [Learn more about the Flex primitive](/components/primitives/flex/examples)
+- [Box](/components/primitives/box/usage)
+- [Inline](/components/primitives/inline/usage)
+- [Stack](/components/primitives/stack/usage)
+- [Grid](/components/primitives/grid/examples)
+- [Bleed](/components/primitives/bleed/examples)
+- [Flex](/components/primitives/flex/examples)
+- [xcss](/components/primitives/xcss/usage)

package/constellation/responsive/examples.mdx

@@ -1,6 +1,6 @@
 ---
 title: Responsive
-description: Responsive helpers and primitives to build responsive UIs with
+description: Responsive helpers and primitives to build responsive UIs.
 order: 1
 ---
 

package/constellation/responsive/usage.mdx

@@ -1,6 +1,6 @@
 ---
 title: Responsive
-description: Responsive helpers and primitives to build responsive UIs with
+description: Responsive helpers and primitives to build responsive UIs.
 order: 2
 ---
 
@@ -10,7 +10,7 @@ The media query helper object `media.above[breakpoint]` maps to our [breakpoints
 
 These responsive helpers are designed be used in conjunction with [xcss](/components/primitives/xcss). It is recommended that both are used when available as this uses our media queries to allow for safe, responsive styling.
 
-### A basic example:
+### Basic example
 
 Compose your default styles alongside media overrides in [xcss](/components/primitives/xcss) or `css`.
 
@@ -27,7 +27,7 @@ export const Component = ({ children }: { children: ReactNode }) => (
 );
 ```
 
-### `media.above` usage
+### Using media.above
 
 It is important to note that the `media.above.xxs` will **always** match, it is explicitly `'@media all'`. This is only included for easy programatic usage, but it has a negative performance impact.
 

package/constellation/stack/code.mdx

@@ -1,6 +1,6 @@
 ---
 title: Stack
-description: Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+description: A stack manages the vertical layout of direct children using flexbox.
 order: 1
 ---
 

package/constellation/stack/examples.mdx

@@ -1,6 +1,6 @@
 ---
 title: Stack
-description: Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+description: A stack manages the vertical layout of direct children using flexbox.
 order: 0
 ---
 
@@ -24,7 +24,7 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 ## Basic
 
 Stack should be used to efficiently lay-out a group of elements vertically.
-Use the given props to configure display behaviour using designs tokens, as shown in the more complex examples below.
+Use the given props to configure display behavior using designs tokens, as shown in the more complex examples below.
 
 <Example Component={StackBasic} packageName="@atlaskit/primitives/stack" />
 
@@ -51,7 +51,7 @@ To control the alignment of items you can use the `alignBlock` and `alignInline`
 
 ## Spread
 
-Elements can be set to stay together, spaced at the given value (default behaviour) or spread equally in the space available.
+Elements can be set to stay together, spaced at the given value (default behavior) or spread equally in the space available.
 
 <Example Component={StackSpread} packageName="@atlaskit/primitives/stack" />
 

package/constellation/stack/usage.mdx

@@ -1,14 +1,14 @@
 ---
 title: Stack
-description: Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+description: A stack manages the vertical layout of direct children using flexbox.
 order: 2
 ---
 
-Primitive components are designed to act as building blocks for composing a user experience. A `Stack` primitive should be used when you want to layout UI elements vertically, and make use of the built-in design guidance from the Atlassian Design System.
+Primitive components are building blocks for composing a user experience. A `Stack` primitive lays out UI elements vertically, and makes use of the built-in design guidance from the Atlassian Design System.
 
-`Stack` primitives work by aligning content vertically on a page or layout, as a container that decides the vertical layout of its children. `Stack` components also decide the specifics of how the children are displayed, for example, where they are aligned or how much space is between child elements. `Stack` should be used purely for visual alignment, and should have no opinions about the functionality of its children.
+Stacks work by aligning content vertically on a page or layout, as a container that decides the vertical layout of its children. Stack components also decide the specifics of how the children are displayed, for example, where they are aligned or how much space is between child elements. Stack is purely for visual alignment, and should have no opinions about the functionality of its children.
 
-In its simplest form, `Stack` operates like a flexbox column, however adds the built in design token support and guidance.
+In its simplest form, `Stack` works like a flexbox column, with built-in design token support and guidance.
 
 ```jsx
 <Stack space="space.100" alignInline="center" alignBlock="start">
@@ -16,11 +16,11 @@ In its simplest form, `Stack` operates like a flexbox column, however adds the b
 </Stack>
 ```
 
-## Use `Stack`
+## Usage
 
-The purpose of a `Stack` is primarily as a container element controlling how content is displayed and aligned vertically. `Stack` should be used any time you wish to layout elements or components vertically.
+A `Stack` is primarily a container element controlling how content is displayed and aligned vertically. Use stack any time you wish to lay out elements or components vertically.
 
-The various `Stack` props can then be used to customize the spacing and styling on any child elements. These include:
+These props customize the spacing and styling of any child elements:
 
 - `alignBlock`
 - `alignInline`
@@ -30,9 +30,9 @@ The various `Stack` props can then be used to customize the spacing and styling
 
 ## Related
 
-- [Learn more about the Primitives](/components/primitives/overview)
-- [Learn more about the Box primitive](/components/primitives/box/usage)
-- [Learn more about the Inline primitive](/components/primitives/inline/usage)
-- [Learn more about the Grid primitive](/components/primitives/grid/examples)
-- [Learn more about the Bleed primitive](/components/primitives/bleed/examples)
-- [Learn more about the Flex primitive](/components/primitives/flex/examples)
+- [Primitives](/components/primitives/overview)
+- [Box](/components/primitives/box/usage)
+- [Inline](/components/primitives/inline/usage)
+- [Grid](/components/primitives/grid/examples)
+- [Bleed](/components/primitives/bleed/examples)
+- [Flex](/components/primitives/flex/examples)

package/constellation/text/code.mdx

@@ -0,0 +1,19 @@
+---
+title: Text
+description: Text is a token-backed typography component to display body and UI text.
+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 ERTText from '!!extract-react-types-loader!../../extract-react-types/text-props';
+
+## Props
+
+<PropsTable heading="" props={ERTText} />

package/constellation/text/examples.mdx

@@ -1,4 +1,6 @@
 ---
+title: Text
+description: Text is a token-backed typography component to display body and UI text.
 order: 0
 ---
 

package/constellation/text/usage.mdx

@@ -1,4 +1,6 @@
 ---
+title: Text
+description: Text is a token-backed typography component to display body and UI text.
 order: 2
 ---
 

package/constellation/xcss/examples.mdx

@@ -1,5 +1,5 @@
 ---
-title: xcss
+title: XCSS
 description: xcss is a safer, tokens-first approach to CSS-in-JS.
 order: 1
 ---

package/constellation/xcss/migration.mdx

@@ -1,5 +1,5 @@
 ---
-title: Migrating your app to xcss
+title: Migrating your app to XCSS
 description: xcss is a safer, tokens-first approach to CSS-in-JS.
 order: 2
 ---

package/constellation/xcss/usage.mdx

@@ -1,13 +1,11 @@
 ---
-title: xcss
-description: xcss is a safer, tokens-first approach to CSS-in-JS.
+title: XCSS
+description: XCSS is a safer, tokens-first approach to CSS-in-JS.
 order: 0
 ---
 
 import { MediaQueriesTable } from '@af/design-system-docs-ui';
 
-![xcss Logo](logo.png 'xcss Logo')
-
 `xcss` is an Atlassian Design System styling API that natively integrates with Atlassian's [design tokens](/tokens) and [primitives](/components/primitives).
 
 The `xcss` utility behaves similarly to the `css` utility in libraries like `styled-components`, `@compiled` or `@emotion`. If you've used these libraries, `xcss` will feel familiar, with a few additional features and constraints.

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

@@ -78,11 +78,25 @@ var UNSAFE_media = exports.UNSAFE_media = {
   }
 };
 
+/**
+ * We needed to simplify the `media` export below to rely on less AST traversal so that Compiled could understand it.
+ * This type provides the same guarantees as `const media = { above: UNSAFE_media.above }` would but allows it to be a simple
+ * object that Compiled parses easily.
+ * See https://product-fabric.atlassian.net/browse/DSP-13626 for more detail.
+ */
+
 /**
  * This is an object of usable media query helpers using our internal breakpoints configuration.
  *
  * We strictly only export `media.above` at this stage as we want makers to build mobile-first.
  */
 var media = exports.media = {
-  above: UNSAFE_media.above
+  above: {
+    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: 110rem)'
+  }
 };

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

@@ -73,11 +73,25 @@ export const UNSAFE_media = {
   }
 };
 
+/**
+ * We needed to simplify the `media` export below to rely on less AST traversal so that Compiled could understand it.
+ * This type provides the same guarantees as `const media = { above: UNSAFE_media.above }` would but allows it to be a simple
+ * object that Compiled parses easily.
+ * See https://product-fabric.atlassian.net/browse/DSP-13626 for more detail.
+ */
+
 /**
  * This is an object of usable media query helpers using our internal breakpoints configuration.
  *
  * We strictly only export `media.above` at this stage as we want makers to build mobile-first.
  */
 export const media = {
-  above: UNSAFE_media.above
+  above: {
+    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: 110rem)'
+  }
 };

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

@@ -73,11 +73,25 @@ export var UNSAFE_media = {
   }
 };
 
+/**
+ * We needed to simplify the `media` export below to rely on less AST traversal so that Compiled could understand it.
+ * This type provides the same guarantees as `const media = { above: UNSAFE_media.above }` would but allows it to be a simple
+ * object that Compiled parses easily.
+ * See https://product-fabric.atlassian.net/browse/DSP-13626 for more detail.
+ */
+
 /**
  * This is an object of usable media query helpers using our internal breakpoints configuration.
  *
  * We strictly only export `media.above` at this stage as we want makers to build mobile-first.
  */
 export var media = {
-  above: UNSAFE_media.above
+  above: {
+    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: 110rem)'
+  }
 };

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

@@ -70,36 +70,17 @@ export declare const UNSAFE_media: {
         readonly xl: "@media (min-width: 110rem)";
     };
 };
+/**
+ * We needed to simplify the `media` export below to rely on less AST traversal so that Compiled could understand it.
+ * This type provides the same guarantees as `const media = { above: UNSAFE_media.above }` would but allows it to be a simple
+ * object that Compiled parses easily.
+ * See https://product-fabric.atlassian.net/browse/DSP-13626 for more detail.
+ */
+type SafeMedia = Pick<typeof UNSAFE_media, 'above'>;
 /**
  * This is an object of usable media query helpers using our internal breakpoints configuration.
  *
  * We strictly only export `media.above` at this stage as we want makers to build mobile-first.
  */
-export declare const media: {
-    readonly above: {
-        /**
-         * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
-         */
-        readonly xxs: "@media all";
-        /**
-         * Used for mobile viewports.
-         */
-        readonly xs: "@media (min-width: 30rem)";
-        /**
-         * Used for tablet viewports.
-         */
-        readonly sm: "@media (min-width: 48rem)";
-        /**
-         * Used for laptop viewports.
-         */
-        readonly md: "@media (min-width: 64rem)";
-        /**
-         * Used for desktop viewports.
-         */
-        readonly lg: "@media (min-width: 90rem)";
-        /**
-         * Used for wide screen desktop viewports.
-         */
-        readonly xl: "@media (min-width: 110rem)";
-    };
-};
+export declare const media: SafeMedia;
+export {};

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

@@ -70,36 +70,17 @@ export declare const UNSAFE_media: {
         readonly xl: "@media (min-width: 110rem)";
     };
 };
+/**
+ * We needed to simplify the `media` export below to rely on less AST traversal so that Compiled could understand it.
+ * This type provides the same guarantees as `const media = { above: UNSAFE_media.above }` would but allows it to be a simple
+ * object that Compiled parses easily.
+ * See https://product-fabric.atlassian.net/browse/DSP-13626 for more detail.
+ */
+type SafeMedia = Pick<typeof UNSAFE_media, 'above'>;
 /**
  * This is an object of usable media query helpers using our internal breakpoints configuration.
  *
  * We strictly only export `media.above` at this stage as we want makers to build mobile-first.
  */
-export declare const media: {
-    readonly above: {
-        /**
-         * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
-         */
-        readonly xxs: "@media all";
-        /**
-         * Used for mobile viewports.
-         */
-        readonly xs: "@media (min-width: 30rem)";
-        /**
-         * Used for tablet viewports.
-         */
-        readonly sm: "@media (min-width: 48rem)";
-        /**
-         * Used for laptop viewports.
-         */
-        readonly md: "@media (min-width: 64rem)";
-        /**
-         * Used for desktop viewports.
-         */
-        readonly lg: "@media (min-width: 90rem)";
-        /**
-         * Used for wide screen desktop viewports.
-         */
-        readonly xl: "@media (min-width: 110rem)";
-    };
-};
+export declare const media: SafeMedia;
+export {};

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

@@ -0,0 +1,47 @@
+// TODO: This is all hacky, replace with ts-morph solution
+import { ReactNode } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+namespace Token {
+  // BoxProps['backgroundColor'] uses keyof, which ERT does not understand
+  export type TextColor = 'TextColor';
+}
+
+type TextAlign = 'center' | 'end' | 'start';
+type TextVariant = 'body' | 'body.large' | 'body.small' | 'ui' | 'ui.small';
+
+interface TextProps {
+  /**
+   * HTML tag to be rendered. Defaults to `span`.
+   */
+  as?: 'span' | 'p' | 'strong' | 'em';
+  /**
+   * Elements rendered within the Text element
+   */
+  children: ReactNode;
+  /**
+   * Text variant
+   */
+  variant?: TextVariant;
+  /**
+   * Token representing text color with a built-in fallback value.
+   * Will apply inverse text color automatically if placed within a Box with backgroundColor.
+   *
+   */
+  color?: Token.TextColor;
+  /**
+   * The HTML id attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id?: string;
+  /**
+   * Truncates text with an ellipsis when text overflows its parent container
+   * (i.e. `width` has been set on parent that is shorter than text length).
+   */
+  shouldTruncate?: boolean;
+  /**
+   * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
+   */
+  textAlign?: TextAlign;
+}
+
+export default function Text(_: TextProps) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.6.7",
+  "version": "1.6.8",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -125,7 +125,7 @@
     "codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.27.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",

package/report.api.md

@@ -845,16 +845,7 @@ const layerMap: {
 type MarginSpace = 'auto' | NegativeSpace | Space;
 
 // @public
-export const media: {
-  readonly 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: 110rem)';
-  };
-};
+export const media: SafeMedia;
 
 // @public
 type MediaQuery = (typeof media.above)[Breakpoint];
@@ -882,6 +873,9 @@ type SafeCSSObject = CSSPseudos &
   CSSMediaQueries &
   Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
 
+// @public
+type SafeMedia = Pick<typeof UNSAFE_media, 'above'>;
+
 // @public (undocumented)
 export type Shadow = keyof typeof shadowMap;
 

package/tmp/api-report-tmp.d.ts

@@ -597,16 +597,7 @@ const layerMap: {
 type MarginSpace = 'auto' | NegativeSpace | Space;
 
 // @public
-export const media: {
-    readonly 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: 110rem)";
-    };
-};
+export const media: SafeMedia;
 
 // @public
 type MediaQuery = (typeof media.above)[Breakpoint];
@@ -630,6 +621,9 @@ const negativeSpaceMap: {
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos & CSSAtRules & TokenisedProps & CSSMediaQueries & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
 
+// @public
+type SafeMedia = Pick<typeof UNSAFE_media, 'above'>;
+
 // @public (undocumented)
 export type Shadow = keyof typeof shadowMap;