@atlaskit/primitives 2.0.1 → 2.0.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/primitives
 
+## 2.0.3
+
+### Patch Changes
+
+- [#74836](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74836) [`3963062ac997`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3963062ac997) - Codegen to add in new font family tokens. Not exposed in any components.
+- Updated dependencies
+
+## 2.0.2
+
+### Patch Changes
+
+- [#72557](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72557) [`0c78c9c18cb7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0c78c9c18cb7) - Fix font family not preferencing apple system fonts on macOS
+
 ## 2.0.1
 
 ### Patch Changes

package/constellation/bleed/code.mdx

@@ -2,6 +2,10 @@
 title: Bleed
 description: A bleed controls negative whitespace in layouts.
 order: 1
+props:
+  packageName: '@atlaskit/primitives'
+  exports:
+    - Bleed
 ---
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
@@ -12,8 +16,6 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import ERTBleed from '!!extract-react-types-loader!../../extract-react-types/bleed-props';
-
 ## Props
 
-<PropsTable heading="" props={ERTBleed} />
+<TSMorphProps exportName="Bleed" packageName="@atlaskit/primitives" />

package/constellation/box/code.mdx

@@ -2,6 +2,10 @@
 title: Box
 description: A box is a generic container that provides managed access to design tokens.
 order: 1
+props:
+  packageName: '@atlaskit/primitives'
+  exports:
+    - Box
 ---
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
@@ -12,8 +16,6 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import ERTBox from '!!extract-react-types-loader!../../extract-react-types/box-props';
-
 ## Props
 
-<PropsTable heading="" props={ERTBox} />
+<TSMorphProps exportName="Box" packageName="@atlaskit/primitives" />

package/constellation/flex/code.mdx

@@ -2,6 +2,10 @@
 title: Flex
 description: A flex implements the CSS flexbox API.
 order: 1
+props:
+  packageName: '@atlaskit/primitives'
+  exports:
+    - Flex
 ---
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
@@ -12,8 +16,6 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import ERTFlex from '!!extract-react-types-loader!../../extract-react-types/flex-props';
-
 ## Props
 
-<PropsTable heading="" props={ERTFlex} />
+<TSMorphProps exportName="Flex" packageName="@atlaskit/primitives" />

package/constellation/grid/code.mdx

@@ -2,6 +2,10 @@
 title: Grid
 description: A grid uses the CSS grid API to create consistent layouts.
 order: 1
+props:
+  packageName: '@atlaskit/primitives'
+  exports:
+    - Grid
 ---
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
@@ -12,8 +16,6 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import ERTGrid from '!!extract-react-types-loader!../../extract-react-types/grid-props';
-
 ## Props
 
-<PropsTable heading="" props={ERTGrid} />
+<TSMorphProps exportName="Grid" packageName="@atlaskit/primitives" />

package/constellation/inline/code.mdx

@@ -2,6 +2,10 @@
 title: Inline
 description: An inline manages the horizontal layout of direct children using flexbox.
 order: 1
+props:
+  packageName: '@atlaskit/primitives'
+  exports:
+    - Inline
 ---
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
@@ -12,8 +16,6 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import ERTInline from '!!extract-react-types-loader!../../extract-react-types/inline-props';
-
 ## Props
 
-<PropsTable heading="" props={ERTInline} />
+<TSMorphProps exportName="Inline" packageName="@atlaskit/primitives" />

package/constellation/overview/index.mdx

@@ -67,7 +67,7 @@ The behavior within and around these boxes can then be broken down into their ho
 
 <SectionMessage>
   The ESLint rule{' '}
-  <a href="/components/eslint-plugin-design-system/usage#use-primitives">
+  <a href="/components/eslint-plugin-design-system/use-primitives">
     use-primitives
   </a>{' '}
   offers suggestions for possible primitives to apply in a layout.

package/constellation/stack/code.mdx

@@ -2,6 +2,10 @@
 title: Stack
 description: A stack manages the vertical layout of direct children using flexbox.
 order: 1
+props:
+  packageName: '@atlaskit/primitives'
+  exports:
+    - Stack
 ---
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
@@ -12,8 +16,6 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import ERTStack from '!!extract-react-types-loader!../../extract-react-types/stack-props';
-
 ## Props
 
-<PropsTable heading="" props={ERTStack} />
+<TSMorphProps exportName="Stack" packageName="@atlaskit/primitives" />

package/dist/cjs/components/link.js

@@ -64,9 +64,10 @@ var Link = function Link(_ref, ref) {
 
   /**
    * Renders a router link if:
+   *
    * - a link component is set in the app provider
-   * - it's not an external link (starting with http:// or https://)
-   * - it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.)
+   * - it's not an external link (starting with `http://` or `https://`)
+   * - it's not a non-HTTP-based link (e.g. Emails, phone numbers, hash links etc.).
    */
   var isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
   var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && (0, _typeof2.default)(href) === 'object';

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

@@ -12,7 +12,7 @@ exports.media = exports.UNSAFE_media = void 0;
  * eg. ```{ [media.above.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
  * Instead, make sure that only one breakpoint can take effect at a time,
  * e.g, ```{ [media.only.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
- * For more details, please see https://compiledcssinjs.com/docs/atomic-css#selector-specificity
+ * For more details, please see <https://compiledcssinjs.com/docs/atomic-css#selector-specificity>.
  */
 var media = exports.media = {
   above: {

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

@@ -496,7 +496,7 @@ var borderRadiusMap = exports.borderRadiusMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::402816562c359603300fda81596a2978>>
+ * @codegen <<SignedSource::aa70005b608c537f3d255a4a7f631198>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -520,10 +520,11 @@ var fontWeightMap = exports.fontWeightMap = {
   semibold: "var(--ds-font-weight-semibold, 600)"
 };
 var fontFamilyMap = exports.fontFamilyMap = {
-  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'font.family.brand': "var(--ds-font-family-brand, Charlie Sans)",
+  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'font.family.brand.body': "var(--ds-font-family-brand-body, \"Charlie Text\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'font.family.brand.heading': "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
-  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   'font.family.monospace': "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
   'font.family.sans': "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
 };
@@ -537,13 +538,13 @@ var lineHeightMap = exports.lineHeightMap = {
   'font.lineHeight.600': "var(--ds-font-lineHeight-600, 40px)"
 };
 var bodyTextMap = exports.bodyTextMap = {
-  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 var uiTextMap = exports.uiTextMap = {
-  ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 
 /**

package/dist/es2019/components/link.js

@@ -51,9 +51,10 @@ const Link = ({
 
   /**
    * Renders a router link if:
+   *
    * - a link component is set in the app provider
-   * - it's not an external link (starting with http:// or https://)
-   * - it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.)
+   * - it's not an external link (starting with `http://` or `https://`)
+   * - it's not a non-HTTP-based link (e.g. Emails, phone numbers, hash links etc.).
    */
   const isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
   const hrefObjectUsedWithoutRouterLink = RouterLink === undefined && typeof href === 'object';

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

@@ -6,7 +6,7 @@
  * eg. ```{ [media.above.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
  * Instead, make sure that only one breakpoint can take effect at a time,
  * e.g, ```{ [media.only.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
- * For more details, please see https://compiledcssinjs.com/docs/atomic-css#selector-specificity
+ * For more details, please see <https://compiledcssinjs.com/docs/atomic-css#selector-specificity>.
  */
 export const media = {
   above: {

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

@@ -484,7 +484,7 @@ export const borderRadiusMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::402816562c359603300fda81596a2978>>
+ * @codegen <<SignedSource::aa70005b608c537f3d255a4a7f631198>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -508,10 +508,11 @@ export const fontWeightMap = {
   semibold: "var(--ds-font-weight-semibold, 600)"
 };
 export const fontFamilyMap = {
-  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'font.family.brand': "var(--ds-font-family-brand, Charlie Sans)",
+  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'font.family.brand.body': "var(--ds-font-family-brand-body, \"Charlie Text\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'font.family.brand.heading': "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
-  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   'font.family.monospace': "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
   'font.family.sans': "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
 };
@@ -525,13 +526,13 @@ export const lineHeightMap = {
   'font.lineHeight.600': "var(--ds-font-lineHeight-600, 40px)"
 };
 export const bodyTextMap = {
-  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 export const uiTextMap = {
-  ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 
 /**

package/dist/esm/components/link.js

@@ -54,9 +54,10 @@ var Link = function Link(_ref, ref) {
 
   /**
    * Renders a router link if:
+   *
    * - a link component is set in the app provider
-   * - it's not an external link (starting with http:// or https://)
-   * - it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.)
+   * - it's not an external link (starting with `http://` or `https://`)
+   * - it's not a non-HTTP-based link (e.g. Emails, phone numbers, hash links etc.).
    */
   var isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
   var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && _typeof(href) === 'object';

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

@@ -6,7 +6,7 @@
  * eg. ```{ [media.above.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
  * Instead, make sure that only one breakpoint can take effect at a time,
  * e.g, ```{ [media.only.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
- * For more details, please see https://compiledcssinjs.com/docs/atomic-css#selector-specificity
+ * For more details, please see <https://compiledcssinjs.com/docs/atomic-css#selector-specificity>.
  */
 export var media = {
   above: {

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

@@ -484,7 +484,7 @@ export var borderRadiusMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::402816562c359603300fda81596a2978>>
+ * @codegen <<SignedSource::aa70005b608c537f3d255a4a7f631198>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -508,10 +508,11 @@ export var fontWeightMap = {
   semibold: "var(--ds-font-weight-semibold, 600)"
 };
 export var fontFamilyMap = {
-  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'font.family.brand': "var(--ds-font-family-brand, Charlie Sans)",
+  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'font.family.brand.body': "var(--ds-font-family-brand-body, \"Charlie Text\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'font.family.brand.heading': "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
-  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   'font.family.monospace': "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
   'font.family.sans': "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
 };
@@ -525,13 +526,13 @@ export var lineHeightMap = {
   'font.lineHeight.600': "var(--ds-font-lineHeight-600, 40px)"
 };
 export var bodyTextMap = {
-  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 export var uiTextMap = {
-  ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 
 /**

package/dist/types/components/box.d.ts

@@ -59,7 +59,7 @@ type BaseBoxProps<T extends CustomElementType> = {
      */
     paddingInlineEnd?: Space;
     /**
-     * Forwarded ref
+     * Forwarded ref.
      */
     ref?: ComponentPropsWithRef<T>['ref'];
 };

package/dist/types/components/flex.d.ts

@@ -40,7 +40,7 @@ export type FlexProps<T extends ElementType = 'div'> = {
      */
     children: ReactNode;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
@@ -130,7 +130,7 @@ declare const Flex: import("react").MemoExoticComponent<import("react").ForwardR
      */
     children: ReactNode;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: any;
 } & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignItems" | "direction" | "justifyContent" | "wrap" | "children" | "as" | keyof BasePrimitiveProps> & import("react").RefAttributes<any>>>;

package/dist/types/components/inline.d.ts

@@ -45,7 +45,7 @@ export type InlineProps<T extends ElementType = 'div'> = {
      */
     children: ReactNode;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
@@ -106,7 +106,7 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
      */
     children: ReactNode;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: any;
 } & BasePrimitiveProps, "space" | "separator" | "children" | "as" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;

package/dist/types/components/link.d.ts

@@ -3,7 +3,7 @@ import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
 import { type BoxProps } from './box';
 export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style'> & {
     /**
-     * `children` should be defined to ensure links have text
+     * `children` should be defined to ensure links have text.
      */
     children: ReactNode;
 };
@@ -22,7 +22,7 @@ declare const Link: <RouterLinkConfig extends Record<string, any> = never>({ hre
  */
 declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "href"> & {
     /**
-     * `children` should be defined to ensure links have text
+     * `children` should be defined to ensure links have text.
      */
     children: ReactNode;
 } & {

package/dist/types/components/stack.d.ts

@@ -32,7 +32,7 @@ export type StackProps<T extends ElementType = 'div'> = {
      */
     children: ReactNode;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
@@ -80,7 +80,7 @@ declare const Stack: import("react").MemoExoticComponent<import("react").Forward
      */
     children: ReactNode;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: any;
 } & BasePrimitiveProps, "space" | "children" | "as" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "spread" | "grow"> & import("react").RefAttributes<any>>>;

package/dist/types/components/text.d.ts

@@ -6,7 +6,7 @@ declare const asAllowlist: readonly ["span", "p", "strong", "em"];
 type AsElement = (typeof asAllowlist)[number];
 type TextPropsBody = {
     /**
-     * Text variant
+     * Text variant.
      */
     variant?: BodyText;
     /**
@@ -20,7 +20,7 @@ type TextPropsBody = {
 };
 type TextPropsUi = {
     /**
-     * Text variant
+     * Text variant.
      */
     variant: UiText;
     maxLines?: never;
@@ -31,7 +31,7 @@ type TextPropsBase = {
      */
     as?: AsElement;
     /**
-     * Elements rendered within the Text element
+     * Elements rendered within the Text element.
      */
     children: ReactNode;
     /**
@@ -41,15 +41,15 @@ type TextPropsBase = {
      */
     color?: TextColor;
     /**
-     * The HTML id attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+     * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
      */
     id?: string;
     /**
-     * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
+     * The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
      */
     textAlign?: TextAlign;
     /**
-     * Font weight https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+     * The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
      */
     weight?: FontWeight;
 };

package/dist/types/components/types.d.ts

@@ -5,13 +5,17 @@ export type BasePrimitiveProps = {
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * `data-testid` is strictly controlled through the `testId` prop.
+     * This lets consumers know that this data attribute will not be applied.
+     */
     'data-testid'?: never;
     /**
      * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
      */
     xcss?: XCSS | Array<XCSS | false | undefined>;
     /**
-     * Accessible role
+     * Accessible role.
      */
     role?: string;
 };

package/dist/types/responsive/hide.d.ts

@@ -12,7 +12,7 @@ type ResponsiveHideProps = {
      * Apply CSS to hide this specifically **below** this breakpoint.
      * The smallest breakpoint is not included as it would never be shown and this would not be performant.
      *
-     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     * @important do not mix `above` and `below` (TypeScript should prevent this).
      */
     below: Exclude<Breakpoint, 'xxs'>;
 } | {
@@ -20,7 +20,7 @@ type ResponsiveHideProps = {
      * Apply CSS to hide this specifically **above** this breakpoint.
      * The smallest breakpoint is not included as it would always be shown and this would not be performant.
      *
-     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     * @important do not mix `above` and `below` (TypeScript should prevent this).
      */
     above: Exclude<Breakpoint, 'xxs'>;
     below?: never;

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

@@ -6,7 +6,7 @@
  * eg. ```{ [media.above.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
  * Instead, make sure that only one breakpoint can take effect at a time,
  * e.g, ```{ [media.only.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
- * For more details, please see https://compiledcssinjs.com/docs/atomic-css#selector-specificity
+ * For more details, please see <https://compiledcssinjs.com/docs/atomic-css#selector-specificity>.
  */
 export declare const media: {
     above: {

package/dist/types/responsive/show.d.ts

@@ -12,7 +12,7 @@ type ResponsiveShowProps = {
      * Apply CSS to show this specifically **below** this breakpoint.
      * The smallest breakpoint is not included as it would never be shown and this would not be performant.
      *
-     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     * @important do not mix `above` and `below` (TypeScript should prevent this).
      */
     below: Exclude<Breakpoint, 'xxs'>;
 } | {
@@ -20,7 +20,7 @@ type ResponsiveShowProps = {
      * Apply CSS to show this specifically **above** this breakpoint.
      * The smallest breakpoint is not included as it would always be shown and this would not be performant.
      *
-     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     * @important do not mix `above` and `below` (TypeScript should prevent this).
      */
     above: Exclude<Breakpoint, 'xxs'>;
     below?: never;

package/dist/types/responsive/types.d.ts

@@ -6,13 +6,13 @@ import { media } from './media-helper';
  */
 export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
- * All supported media queries for use as keys, eg. in `xcss({ [MediaQuery]: { … } })`
+ * All supported media queries for use as keys, eg. in `xcss({ [MediaQuery]: { … } })`.
  *
  * TODO: Should this have `media.above.xxs`?  This is explicitly `@media all`, which I believe is just additional specificity (which could lead to some mistakes)
  */
 export type MediaQuery = (typeof media.above)[Breakpoint];
 /**
- * An object type mapping a value to each breakpoint (optionally)
+ * An object type mapping a value to each breakpoint (optionally).
  */
 export type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
 /**
@@ -44,7 +44,7 @@ export type BreakpointConfig = {
      */
     gridMargin: ReturnType<typeof token>;
     /**
-     * The min-width used in media queries
+     * The min-width used in media queries.
      */
     min: `${number}rem`;
     /**

package/dist/types/xcss/style-maps.partial.d.ts

@@ -515,7 +515,7 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::402816562c359603300fda81596a2978>>
+ * @codegen <<SignedSource::aa70005b608c537f3d255a4a7f631198>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -542,7 +542,8 @@ export declare const fontWeightMap: {
 export type FontWeight = keyof typeof fontWeightMap;
 export declare const fontFamilyMap: {
     'font.family.body': "var(--ds-font-family-body)";
-    'font.family.brand': "var(--ds-font-family-brand)";
+    'font.family.brand.body': "var(--ds-font-family-brand-body)";
+    'font.family.brand.heading': "var(--ds-font-family-brand-heading)";
     'font.family.code': "var(--ds-font-family-code)";
     'font.family.heading': "var(--ds-font-family-heading)";
     'font.family.monospace': "var(--ds-font-family-monospace)";

package/dist/types-ts4.5/components/box.d.ts

@@ -59,7 +59,7 @@ type BaseBoxProps<T extends CustomElementType> = {
      */
     paddingInlineEnd?: Space;
     /**
-     * Forwarded ref
+     * Forwarded ref.
      */
     ref?: ComponentPropsWithRef<T>['ref'];
 };

package/dist/types-ts4.5/components/flex.d.ts

@@ -40,7 +40,7 @@ export type FlexProps<T extends ElementType = 'div'> = {
      */
     children: ReactNode;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
@@ -130,7 +130,7 @@ declare const Flex: import("react").MemoExoticComponent<import("react").ForwardR
      */
     children: ReactNode;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: any;
 } & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignItems" | "direction" | "justifyContent" | "wrap" | "children" | "as" | keyof BasePrimitiveProps> & import("react").RefAttributes<any>>>;

package/dist/types-ts4.5/components/inline.d.ts

@@ -45,7 +45,7 @@ export type InlineProps<T extends ElementType = 'div'> = {
      */
     children: ReactNode;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
@@ -106,7 +106,7 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
      */
     children: ReactNode;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: any;
 } & BasePrimitiveProps, "space" | "separator" | "children" | "as" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;

package/dist/types-ts4.5/components/link.d.ts

@@ -3,7 +3,7 @@ import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
 import { type BoxProps } from './box';
 export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style'> & {
     /**
-     * `children` should be defined to ensure links have text
+     * `children` should be defined to ensure links have text.
      */
     children: ReactNode;
 };
@@ -22,7 +22,7 @@ declare const Link: <RouterLinkConfig extends Record<string, any> = never>({ hre
  */
 declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "href"> & {
     /**
-     * `children` should be defined to ensure links have text
+     * `children` should be defined to ensure links have text.
      */
     children: ReactNode;
 } & {

package/dist/types-ts4.5/components/stack.d.ts

@@ -32,7 +32,7 @@ export type StackProps<T extends ElementType = 'div'> = {
      */
     children: ReactNode;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
@@ -80,7 +80,7 @@ declare const Stack: import("react").MemoExoticComponent<import("react").Forward
      */
     children: ReactNode;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: any;
 } & BasePrimitiveProps, "space" | "children" | "as" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "spread" | "grow"> & import("react").RefAttributes<any>>>;

package/dist/types-ts4.5/components/text.d.ts

@@ -11,7 +11,7 @@ declare const asAllowlist: readonly [
 type AsElement = (typeof asAllowlist)[number];
 type TextPropsBody = {
     /**
-     * Text variant
+     * Text variant.
      */
     variant?: BodyText;
     /**
@@ -25,7 +25,7 @@ type TextPropsBody = {
 };
 type TextPropsUi = {
     /**
-     * Text variant
+     * Text variant.
      */
     variant: UiText;
     maxLines?: never;
@@ -36,7 +36,7 @@ type TextPropsBase = {
      */
     as?: AsElement;
     /**
-     * Elements rendered within the Text element
+     * Elements rendered within the Text element.
      */
     children: ReactNode;
     /**
@@ -46,15 +46,15 @@ type TextPropsBase = {
      */
     color?: TextColor;
     /**
-     * The HTML id attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+     * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
      */
     id?: string;
     /**
-     * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
+     * The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
      */
     textAlign?: TextAlign;
     /**
-     * Font weight https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+     * The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
      */
     weight?: FontWeight;
 };

package/dist/types-ts4.5/components/types.d.ts

@@ -5,13 +5,17 @@ export type BasePrimitiveProps = {
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * `data-testid` is strictly controlled through the `testId` prop.
+     * This lets consumers know that this data attribute will not be applied.
+     */
     'data-testid'?: never;
     /**
      * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
      */
     xcss?: XCSS | Array<XCSS | false | undefined>;
     /**
-     * Accessible role
+     * Accessible role.
      */
     role?: string;
 };

package/dist/types-ts4.5/responsive/hide.d.ts

@@ -12,7 +12,7 @@ type ResponsiveHideProps = {
      * Apply CSS to hide this specifically **below** this breakpoint.
      * The smallest breakpoint is not included as it would never be shown and this would not be performant.
      *
-     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     * @important do not mix `above` and `below` (TypeScript should prevent this).
      */
     below: Exclude<Breakpoint, 'xxs'>;
 } | {
@@ -20,7 +20,7 @@ type ResponsiveHideProps = {
      * Apply CSS to hide this specifically **above** this breakpoint.
      * The smallest breakpoint is not included as it would always be shown and this would not be performant.
      *
-     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     * @important do not mix `above` and `below` (TypeScript should prevent this).
      */
     above: Exclude<Breakpoint, 'xxs'>;
     below?: never;

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

@@ -6,7 +6,7 @@
  * eg. ```{ [media.above.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
  * Instead, make sure that only one breakpoint can take effect at a time,
  * e.g, ```{ [media.only.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
- * For more details, please see https://compiledcssinjs.com/docs/atomic-css#selector-specificity
+ * For more details, please see <https://compiledcssinjs.com/docs/atomic-css#selector-specificity>.
  */
 export declare const media: {
     above: {

package/dist/types-ts4.5/responsive/show.d.ts

@@ -12,7 +12,7 @@ type ResponsiveShowProps = {
      * Apply CSS to show this specifically **below** this breakpoint.
      * The smallest breakpoint is not included as it would never be shown and this would not be performant.
      *
-     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     * @important do not mix `above` and `below` (TypeScript should prevent this).
      */
     below: Exclude<Breakpoint, 'xxs'>;
 } | {
@@ -20,7 +20,7 @@ type ResponsiveShowProps = {
      * Apply CSS to show this specifically **above** this breakpoint.
      * The smallest breakpoint is not included as it would always be shown and this would not be performant.
      *
-     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     * @important do not mix `above` and `below` (TypeScript should prevent this).
      */
     above: Exclude<Breakpoint, 'xxs'>;
     below?: never;

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

@@ -6,13 +6,13 @@ import { media } from './media-helper';
  */
 export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
- * All supported media queries for use as keys, eg. in `xcss({ [MediaQuery]: { … } })`
+ * All supported media queries for use as keys, eg. in `xcss({ [MediaQuery]: { … } })`.
  *
  * TODO: Should this have `media.above.xxs`?  This is explicitly `@media all`, which I believe is just additional specificity (which could lead to some mistakes)
  */
 export type MediaQuery = (typeof media.above)[Breakpoint];
 /**
- * An object type mapping a value to each breakpoint (optionally)
+ * An object type mapping a value to each breakpoint (optionally).
  */
 export type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
 /**
@@ -44,7 +44,7 @@ export type BreakpointConfig = {
      */
     gridMargin: ReturnType<typeof token>;
     /**
-     * The min-width used in media queries
+     * The min-width used in media queries.
      */
     min: `${number}rem`;
     /**

package/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -515,7 +515,7 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::402816562c359603300fda81596a2978>>
+ * @codegen <<SignedSource::aa70005b608c537f3d255a4a7f631198>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -542,7 +542,8 @@ export declare const fontWeightMap: {
 export type FontWeight = keyof typeof fontWeightMap;
 export declare const fontFamilyMap: {
     'font.family.body': "var(--ds-font-family-body)";
-    'font.family.brand': "var(--ds-font-family-brand)";
+    'font.family.brand.body': "var(--ds-font-family-brand-body)";
+    'font.family.brand.heading': "var(--ds-font-family-brand-heading)";
     'font.family.code': "var(--ds-font-family-code)";
     'font.family.heading': "var(--ds-font-family-heading)";
     'font.family.monospace': "var(--ds-font-family-monospace)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -105,7 +105,7 @@
   },
   "dependencies": {
     "@atlaskit/app-provider": "^1.0.0",
-    "@atlaskit/tokens": "^1.35.0",
+    "@atlaskit/tokens": "^1.38.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",