@atlaskit/primitives 1.6.0 → 1.6.2

package/constellation/box/code.mdx

@@ -12,7 +12,7 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import ERTBox from '!!extract-react-types-loader!../../extract-react-types/box-props'
+import ERTBox from '!!extract-react-types-loader!../../extract-react-types/box-props';
 
 ## Props
 

package/constellation/box/examples.mdx

@@ -37,7 +37,10 @@ The nomenclature used by these props follows [logical properties](https://develo
 
 `Box` accepts a wide variety of background colors, referenced as semantic design tokens. For the full list of color tokens or to learn more, visit our [Token documentation](/tokens/design-tokens/).
 
-<Example Component={BoxBackgroundColor} packageName="@atlaskit/primitives/box" />
+<Example
+  Component={BoxBackgroundColor}
+  packageName="@atlaskit/primitives/box"
+/>
 
 ## xcss
 
@@ -49,4 +52,5 @@ For more information on xcss, see the dedicated [xcss documentation](/components
 ## Practical use case
 
 `Box` is designed to be used in conjunction with `Inline` and `Stack` to create layouts. This example demonstrates how primitives can be used to create familiar components and patterns.
+
 <Example Component={PracticalUseCase} packageName="@atlaskit/primitives/box" />

package/constellation/box/usage.mdx

@@ -8,6 +8,7 @@ A `Box` is a generic container with convenient and managed access to design toke
 Use a `Box` to compose layouts and add styling to child elements through visual props, including spacing and color through design tokens.
 
 ## `Box` styling
+
 Display behavior is set by using the available props or using `xcss`. Makers can make design decisions for `Box` by setting:
 
 - `padding`
@@ -20,10 +21,12 @@ Display behavior is set by using the available props or using `xcss`. Makers can
 - `backgroundColor`
 
 ## 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.
 
 ## Related
+
 - [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)

package/constellation/flex/code.mdx

@@ -12,7 +12,7 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import ERTFlex from '!!extract-react-types-loader!../../extract-react-types/flex-props'
+import ERTFlex from '!!extract-react-types-loader!../../extract-react-types/flex-props';
 
 ## Props
 

package/constellation/flex/examples.mdx

@@ -17,12 +17,14 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-
 ## Basic
 
 The `Flex` component is a basic mapping to the CSS Flexbox API. It can be used as a less richly-configured `Inline` or `Stack`. Like Stack and Inline, `Flex` exclusively supports token-backed `gap` properties to ensure layouts using `Flex` match the Atlassian Design System spacing scale.
 
-<Example Component={FlexJustifyContent} packageName="@atlaskit/primitives/flex" />
+<Example
+  Component={FlexJustifyContent}
+  packageName="@atlaskit/primitives/flex"
+/>
 
 ## Align items and justify content
 
@@ -32,7 +34,7 @@ The `Flex` component is a basic mapping to the CSS Flexbox API. It can be used a
 
 ## Wrap
 
-Flex-prefixed properties in CSS do not have this prefix in the component API. 
+Flex-prefixed properties in CSS do not have this prefix in the component API.
 For example, `flex-wrap` is instead applied as the `wrap` property.
 
 <Example Component={FlexWrap} packageName="@atlaskit/primitives/flex" />

package/constellation/grid/code.mdx

@@ -12,7 +12,7 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import ERTGrid from '!!extract-react-types-loader!../../extract-react-types/grid-props'
+import ERTGrid from '!!extract-react-types-loader!../../extract-react-types/grid-props';
 
 ## Props
 

package/constellation/grid/examples.mdx

@@ -28,8 +28,8 @@ It can be used as an alternative to [Flex](/components/primitives/flex), [Inline
 
 ## Gap properties
 
-
 Gap properties `rowGap`, `columnGap` and `gap` only allow token-backed values. This is to aid ergonomics and keep the whitespace of the grid harmonious with the spacing system.
+
 <Example Component={GridGap} packageName="@atlaskit/primitives/grid" />
 
 ## Template syntax
@@ -62,5 +62,6 @@ Grid-prefixed properties in CSS do not have this prefix in the component API. `g
 <Example Component={GridAutoFlow} packageName="@atlaskit/primitives/grid" />
 
 You may also be looking for:
-* [responsive layout grid](/components/grid)
-* [legacy page grid](/components/page/grid)
+
+- [responsive layout grid](/components/grid)
+- [legacy page grid](/components/page/grid)

package/constellation/inline/code.mdx

@@ -12,7 +12,7 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import ERTInline from '!!extract-react-types-loader!../../extract-react-types/inline-props'
+import ERTInline from '!!extract-react-types-loader!../../extract-react-types/inline-props';
 
 ## Props
 

package/constellation/inline/examples.mdx

@@ -24,7 +24,6 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-
 ## Basic
 
 Inline should be used to efficiently lay-out a group of elements horizontally.
@@ -37,13 +36,19 @@ Use the given props to configure display behaviour using designs tokens, as show
 
 Spacing between items can be controlled with the `space` prop:
 
-<Example Component={InlineSpaceBasic} packageName="@atlaskit/primitives/inline" />
+<Example
+  Component={InlineSpaceBasic}
+  packageName="@atlaskit/primitives/inline"
+/>
 
 When content is set to wrap, the `space` prop applies equal spacing between rows.
 
 For a different space value between rows use the `rowSpace` prop.
 
-<Example Component={InlineSpaceWrap} packageName="@atlaskit/primitives/inline" />
+<Example
+  Component={InlineSpaceWrap}
+  packageName="@atlaskit/primitives/inline"
+/>
 
 ## Alignment
 
@@ -51,11 +56,17 @@ To control the alignment of items you can use the `alignBlock` and `alignInline`
 
 ### Block alignment
 
-<Example Component={InlineAlignBlock} packageName="@atlaskit/primitives/inline" />
+<Example
+  Component={InlineAlignBlock}
+  packageName="@atlaskit/primitives/inline"
+/>
 
 ### Inline alignment
 
-<Example Component={InlineAlignInline} packageName="@atlaskit/primitives/inline" />
+<Example
+  Component={InlineAlignInline}
+  packageName="@atlaskit/primitives/inline"
+/>
 
 ## Spread
 
@@ -73,15 +84,18 @@ When the number of items goes beyond the available space `shouldWrap` can be use
 
 For logically related elements it's possible to specify a `separator` character value.
 
-<Example Component={InlineSeparator} packageName="@atlaskit/primitives/inline" />
+<Example
+  Component={InlineSeparator}
+  packageName="@atlaskit/primitives/inline"
+/>
 
 ## Width control
 
-By default an `Inline` will have its width influenced by the context where it appears. 
+By default an `Inline` will have its width influenced by the context where it appears.
 To control the width, the `grow` prop can be used with the values:
 
-* `hug` (default) to use space only as required by its children, or
-* `fill` to take all space provided by the parent element.
+- `hug` (default) to use space only as required by its children, or
+- `fill` to take all space provided by the parent element.
 
 <Example Component={InlineGrow} packageName="@atlaskit/primitives/inline" />
 
@@ -95,4 +109,7 @@ It's possible to control the rendered HTML element with the `as` prop.
 
 An example of how an `Inline` might be used in product, using Atlassian Design System components.
 
-<Example Component={InlinePracticalUseCase} packageName="@atlaskit/primitives/inline" />
+<Example
+  Component={InlinePracticalUseCase}
+  packageName="@atlaskit/primitives/inline"
+/>

package/constellation/inline/usage.mdx

@@ -19,6 +19,7 @@ In its simplest form, `Inline` operates like a flexbox row, however adds the bui
 `Inline` also has a flex-direction: row; this is the default for flexbox, so it is not explicitly applied.
 
 ## 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:
@@ -33,6 +34,7 @@ The various Inline props can then be used to customize the spacing and styling o
 - `separator`
 
 ## 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)

package/constellation/overview/index.mdx

@@ -32,11 +32,13 @@ Each primitive is designed to have a single responsibility, and it should be imm
 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:
+
 - in a container (see [box](/components/primitives/box))
 - horizontally (see [inline](/components/primitives/inline))
 - vertically (see [stack](/components/primitives/stack))
 
 Additional layouts not well-expressed by these core primitives can also be composed using:
+
 - CSS Flexbox (see [flex](/components/primitives/flex))
 - CSS Grid (see [grid](/components/primitives/grid))
 - Bleed (see [bleed](/components/primitives/bleed))
@@ -44,6 +46,7 @@ Additional layouts not well-expressed by these core primitives can also be compo
 ## Installation
 
 To install primitive components, add @atlaskit/primitives as a dependency on your project:
+
 ```bash
 $ yarn add @atlaskit/primitives
 ```
@@ -63,7 +66,11 @@ in a layout and grouping them together under a `Box`.
 The behavior within and around these boxes can then be broken down into their horizontal `Inline` and vertical `Stack` components.
 
 <SectionMessage>
-The ESLint rule <a href="/components/eslint-plugin-design-system/usage#use-primitives">use-primitives</a> offers suggestions for possible primitives to apply in a layout.
+  The ESLint rule{' '}
+  <a href="/components/eslint-plugin-design-system/usage#use-primitives">
+    use-primitives
+  </a>{' '}
+  offers suggestions for possible primitives to apply in a layout.
 </SectionMessage>
 
 <Image src={inlineUsageExample} />

package/constellation/responsive/01-show/code.mdx

@@ -12,7 +12,7 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import ShowProps from '!!extract-react-types-loader!../../../extract-react-types/show-props'
+import ShowProps from '!!extract-react-types-loader!../../../extract-react-types/show-props';
 
 ## Props
 

package/constellation/responsive/01-show/examples.mdx

@@ -15,17 +15,22 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-
 ### Show
 
 Using `Show` allows you to show the children using CSS `display: …` when the viewport size is above a specified breakpoint. By default, unless the breakpoint is met, contents are hidden.
 
 Children that are not shown are still rendered into the DOM, so there so there is typically little performance savings — primarily that they are not painted.
 
-<Example Component={ShowExample} packageName="@atlaskit/primitives/responsive" />
+<Example
+  Component={ShowExample}
+  packageName="@atlaskit/primitives/responsive"
+/>
 
 ### Mixing Show and Hide
 
 Prefer using consistent `above` or `below` for readability and consistency.
 
-<Example Component={ShowHideExample} packageName="@atlaskit/primitives/responsive" />
+<Example
+  Component={ShowHideExample}
+  packageName="@atlaskit/primitives/responsive"
+/>

package/constellation/responsive/02-hide/code.mdx

@@ -12,7 +12,7 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import HideProps from '!!extract-react-types-loader!../../../extract-react-types/hide-props'
+import HideProps from '!!extract-react-types-loader!../../../extract-react-types/hide-props';
 
 ## Props
 

package/constellation/responsive/02-hide/examples.mdx

@@ -21,10 +21,16 @@ Using Hide allows you to Hide the children using CSS `display: none` when the vi
 
 Children that are hidden are still rendered into the DOM, so there so there is typically little performance savings — primarily that they are not painted.
 
-<Example Component={HideExample} packageName="@atlaskit/primitives/responsive" />
+<Example
+  Component={HideExample}
+  packageName="@atlaskit/primitives/responsive"
+/>
 
 ### Mixing Show and Hide
 
 Prefer using consistent `above` or `below` for readability and consistency.
 
-<Example Component={ShowHideExample} packageName="@atlaskit/primitives/responsive" />
+<Example
+  Component={ShowHideExample}
+  packageName="@atlaskit/primitives/responsive"
+/>

package/constellation/responsive/03-breakpoints/examples.mdx

@@ -15,7 +15,7 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 />
 
 ### Media Queries
-Media queries can be applied through the `media` object.
 
+Media queries can be applied through the `media` object.
 
 <MediaQueriesTable />

package/constellation/responsive/examples.mdx

@@ -10,7 +10,6 @@ import ShowExample from '../../examples/constellation/responsive/show';
 import HideExample from '../../examples/constellation/responsive/hide';
 import ShowHideExample from '../../examples/constellation/responsive/show-hide';
 
-
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 <CodeDocsHeader
@@ -25,16 +24,20 @@ Utilize our media queries exposed in `css`, `styled`, or `xcss` as computed keys
 
 ### Using with `xcss`
 
-Please use `xcss` whenever possible to ensure consistency and safety with style overrides.  Read more at [xcss](/components/primitives/xcss)
+Please use `xcss` whenever possible to ensure consistency and safety with style overrides. Read more at [xcss](/components/primitives/xcss)
 
-<Example Component={XCSSExample} packageName="@atlaskit/primitives/responsive" />
+<Example
+  Component={XCSSExample}
+  packageName="@atlaskit/primitives/responsive"
+/>
 
 ### Using with `css`
-<Example Component={CSSExample} packageName="@atlaskit/primitives/responsive" />
 
+<Example Component={CSSExample} packageName="@atlaskit/primitives/responsive" />
 
 ## Responsive primitives
 
 Consider these shortcuts to writing your own custom media queries. Composing with our primitives will be far quicker and consistent to implement, but may result in excess DOM nodes.
-* [Show](/components/primitives/responsive/show)
-* [Hide](/components/primitives/responsive/hide)
+
+- [Show](/components/primitives/responsive/show)
+- [Hide](/components/primitives/responsive/hide)

package/constellation/stack/code.mdx

@@ -12,7 +12,7 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import ERTStack from '!!extract-react-types-loader!../../extract-react-types/stack-props'
+import ERTStack from '!!extract-react-types-loader!../../extract-react-types/stack-props';
 
 ## Props
 

package/constellation/stack/examples.mdx

@@ -44,7 +44,10 @@ To control the alignment of items you can use the `alignBlock` and `alignInline`
 
 ### Inline alignment
 
-<Example Component={StackAlignInline} packageName="@atlaskit/primitives/stack" />
+<Example
+  Component={StackAlignInline}
+  packageName="@atlaskit/primitives/stack"
+/>
 
 ## Spread
 
@@ -58,8 +61,8 @@ By default a `Stack` will have its width influenced by the context where it appe
 
 To control that the `grow` prop can be used with the values:
 
-* `hug` (default) to use space only as required by its children, or
-* `fill` to take all space provided by the parent element.
+- `hug` (default) to use space only as required by its children, or
+- `fill` to take all space provided by the parent element.
 
 <Example Component={StackGrow} packageName="@atlaskit/primitives/stack" />
 
@@ -71,4 +74,7 @@ It's possible to control the rendered HTML element with the `as` prop.
 
 ## Practical use case
 
-<Example Component={PracticalUseCase} packageName="@atlaskit/primitives/stack" />
+<Example
+  Component={PracticalUseCase}
+  packageName="@atlaskit/primitives/stack"
+/>

package/constellation/stack/usage.mdx

@@ -17,9 +17,11 @@ In its simplest form, `Stack` operates like a flexbox column, however adds the b
 ```
 
 ## Use `Stack`
+
 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.
 
 The various `Stack` props can then be used to customize the spacing and styling on any child elements. These include:
+
 - `alignBlock`
 - `alignInline`
 - `spread`
@@ -27,6 +29,7 @@ The various `Stack` props can then be used to customize the spacing and styling
 - `space`
 
 ## 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)

package/constellation/xcss/examples.mdx

@@ -29,7 +29,6 @@ To enable interactivity, use familiar selectors like `:hover` and `:focus-visibl
 
 <Example Component={xcssInteractive} packageName="@atlaskit/primitives/xcss" />
 
-
 ## Responsiveness
 
 `xcss` also accepts a subset of media queries at [predefined breakpoints](/components/primitives/responsive/breakpoints/examples).

package/constellation/xcss/migration.mdx

@@ -35,7 +35,6 @@ JSXAttributes, be aware if you're not seeing your styles appear.
 + <Box xcss={someStyles} />
 ```
 
-
 #### Changing the way you express styles
 
 Why are nested selectors a problem? A key philosophy of `xcss` is encouraging more deterministic style application. Restricting nested styles eliminates side-effects and encourages component encapsulation. Consider the below example:
@@ -44,7 +43,7 @@ Why are nested selectors a problem? A key philosophy of `xcss` is encouraging mo
 const myComponentStyles = css({
   '> *': {
     color: 'color.text.danger',
-  }
+  },
 });
 
 const MyComponent = () => (
@@ -130,9 +129,8 @@ const myComponentStyles = xcss({
 const MyComponent = () => <Box xcss={myComponentStyles} />
 ```
 
-
 ## Get help
 
-* Atlassians can reach out in [Slack](slack://channel?team=TFCUTJ0G5&id=CFJ9DU39U) for help with `xcss` migration.
-* Other developers who need help with tokens or the `xcss` utility can post in the [public developer community](https://community.developer.atlassian.com/).
-* For general help with the Atlassian Design System, [contact us](/resources/contact-us).
+- Atlassians can reach out in [Slack](slack://channel?team=TFCUTJ0G5&id=CFJ9DU39U) for help with `xcss` migration.
+- Other developers who need help with tokens or the `xcss` utility can post in the [public developer community](https://community.developer.atlassian.com/).
+- For general help with the Atlassian Design System, [contact us](/resources/contact-us).

package/constellation/xcss/usage.mdx

@@ -3,9 +3,10 @@ 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 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).
 
@@ -13,14 +14,14 @@ The `xcss` utility behaves similarly to the `css` utility in libraries like `sty
 
 Familiar features:
 
-* `xcss` generates a `className` that is applied to the components
-* `xcss` provides key-value pairs of CSS properties in an object format
-* `xcss` supports style precedence and conditional styles
+- `xcss` generates a `className` that is applied to the components
+- `xcss` provides key-value pairs of CSS properties in an object format
+- `xcss` supports style precedence and conditional styles
 
 Key differences:
 
-* `xcss` has type-safety that ensures token name usage for all CSS properties represented by design tokens.
-* `xcss` restricts nested selectors completely from usage
+- `xcss` has type-safety that ensures token name usage for all CSS properties represented by design tokens.
+- `xcss` restricts nested selectors completely from usage
 
 ## Usage
 
@@ -46,9 +47,10 @@ const someStyles = xcss({
 });
 
 const MyBox = () => {
-  return <Box xcss={someStyles} />
-}
+  return <Box xcss={someStyles} />;
+};
 ```
+
 The `xcss` prop and the `xcss` function are direct complements and are designed to be used together.
 
 It is important to note that styles generated from `xcss` cannot be applied directly to the `className` property or `css` as they are with other CSS-in-JS libraries.
@@ -68,12 +70,13 @@ import { xcss } from '@atlaskit/primitives';
 
 const someStyles = xcss({
   padding: 'space.200', // <--- works
-  color: 'space.200',   // <--- invalid and will error
-  borderRadius: 'border.radius.100' // <--- also valid
+  color: 'space.200', // <--- invalid and will error
+  borderRadius: 'border.radius.100', // <--- also valid
 });
 ```
 
 ### Restricted nesting
+
 `xcss` is flexible enough to implement any design, but it does restrict the application of styles in one key way.
 Selectors cannot be nested or target elements beyond the element on which styles are applied.
 This restriction is intended to encourage better component encapsulation, reduce side-effects and make the codebase more resilient to change.
@@ -83,16 +86,16 @@ import { xcss } from '@atlaskit/primitives';
 
 const someStyles = xcss({
   ':hover': {
-    transform: 'scale(1)' // this is okay
+    transform: 'scale(1)', // this is okay
   },
   // This is not okay as this selector affects any nested div in
   // the component tree.
   'div:hover': {
-    transform: 'scale(1)'
+    transform: 'scale(1)',
   },
   // Neither is this
   '> * > div:hover': {
-    transform: 'scale(1)'
+    transform: 'scale(1)',
   },
 });
 ```
@@ -101,6 +104,7 @@ These unsafe selectors will throw a type error if applied.
 For richer examples of how to use `xcss` please see the [primitives `xcss` documentation](/components/primitives/xcss/examples).
 
 ### Media Queries
+
 xcss can create responsive layouts at predefined breakpoints that are consistent with the Atlassian Design System. To enable responsive behavior, xcss exposes the following pre-defined breakpoints:
 
 <MediaQueriesTable />
@@ -142,6 +146,6 @@ const someStyles = xcss({
 
 ## Get help
 
-* Atlassians can reach out in [Slack](slack://channel?team=TFCUTJ0G5&id=CFJ9DU39U) for help with `xcss` migration.
-* Other developers who need help with tokens or the `xcss` utility can post in the [public developer community](https://community.developer.atlassian.com/).
-* For general help with the Atlassian Design System, [contact us](/resources/contact-us).
+- Atlassians can reach out in [Slack](slack://channel?team=TFCUTJ0G5&id=CFJ9DU39U) for help with `xcss` migration.
+- Other developers who need help with tokens or the `xcss` utility can post in the [public developer community](https://community.developer.atlassian.com/).
+- For general help with the Atlassian Design System, [contact us](/resources/contact-us).

package/dist/cjs/xcss/style-maps.partial.js

@@ -73,11 +73,11 @@ exports.negativeSpaceMap = negativeSpaceMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3db44f53b728773bb3ba1473d4567724>>
+ * @codegen <<SignedSource::2d67e9258c01e48d564a26a1e4400b94>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill", "surface"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
  */
 var borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",
@@ -346,7 +346,8 @@ var textColorMap = {
   'color.text.subtlest': "var(--ds-text-subtlest, #7A869A)",
   'color.text.subtle': "var(--ds-text-subtle, #42526E)",
   'color.link': "var(--ds-link, #0052CC)",
-  'color.link.pressed': "var(--ds-link-pressed, #0747A6)"
+  'color.link.pressed': "var(--ds-link-pressed, #0747A6)",
+  'color.link.visited': "var(--ds-link-visited, #403294)"
 };
 exports.textColorMap = textColorMap;
 var fillMap = {

package/dist/es2019/xcss/style-maps.partial.js

@@ -61,11 +61,11 @@ export const negativeSpaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3db44f53b728773bb3ba1473d4567724>>
+ * @codegen <<SignedSource::2d67e9258c01e48d564a26a1e4400b94>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill", "surface"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
  */
 export const borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",
@@ -331,7 +331,8 @@ export const textColorMap = {
   'color.text.subtlest': "var(--ds-text-subtlest, #7A869A)",
   'color.text.subtle': "var(--ds-text-subtle, #42526E)",
   'color.link': "var(--ds-link, #0052CC)",
-  'color.link.pressed': "var(--ds-link-pressed, #0747A6)"
+  'color.link.pressed': "var(--ds-link-pressed, #0747A6)",
+  'color.link.visited': "var(--ds-link-visited, #403294)"
 };
 export const fillMap = {
   'color.icon': "var(--ds-icon, #505F79)",

package/dist/esm/xcss/style-maps.partial.js

@@ -62,11 +62,11 @@ export var negativeSpaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3db44f53b728773bb3ba1473d4567724>>
+ * @codegen <<SignedSource::2d67e9258c01e48d564a26a1e4400b94>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill", "surface"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
  */
 export var borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",
@@ -332,7 +332,8 @@ export var textColorMap = {
   'color.text.subtlest': "var(--ds-text-subtlest, #7A869A)",
   'color.text.subtle': "var(--ds-text-subtle, #42526E)",
   'color.link': "var(--ds-link, #0052CC)",
-  'color.link.pressed': "var(--ds-link-pressed, #0747A6)"
+  'color.link.pressed': "var(--ds-link-pressed, #0747A6)",
+  'color.link.visited': "var(--ds-link-visited, #403294)"
 };
 export var fillMap = {
   'color.icon': "var(--ds-icon, #505F79)",