@atlaskit/primitives 12.2.6 → 13.0.0

package/dist/es2019/compiled/components/text.js

@@ -0,0 +1,164 @@
+/* text.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./text.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { createContext, forwardRef, useContext } from 'react';
+import invariant from 'tiny-invariant';
+import { useSurface } from './internal/surface-provider';
+const asAllowlist = ['span', 'p', 'strong', 'em'];
+const HasTextAncestorContext = /*#__PURE__*/createContext(false);
+const useHasTextAncestor = () => useContext(HasTextAncestorContext);
+
+/**
+ * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
+ */
+const useColor = (colorProp, hasTextAncestor) => {
+  const surface = useSurface();
+
+  /*
+   * Where the color of the surface is inverted we always override the color
+   * as there is no valid choice that is not covered by the override.
+   */
+  if (surface in inverseColorMap) {
+    return inverseColorMap[surface];
+  }
+  if (colorProp === 'inherit') {
+    return undefined;
+  }
+  if (!colorProp && hasTextAncestor) {
+    return undefined;
+  }
+  return colorProp || 'color.text';
+};
+const styles = {
+  root: "_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1i4qfg65",
+  'as.strong': "_k48p8n31",
+  'as.em': "_zg8l1m30",
+  'textAlign.center': "_y3gn1h6o",
+  'textAlign.end': "_y3gnh9n0",
+  'textAlign.start': "_y3gnv2br",
+  truncation: "_1e0ccj1k _1reo15vq _18m915vq _sudp1e54",
+  breakAll: "_1nmz9jpi"
+};
+const fontSizeMap = {
+  medium: "_11c81oud",
+  UNSAFE_small: "_11c8qk37",
+  large: "_11c81doa",
+  small: "_11c81vlj"
+};
+const fontWeightMap = {
+  bold: "_k48pmoej",
+  medium: "_k48p1wq8",
+  regular: "_k48pi7a9",
+  semibold: "_k48p1pd9"
+};
+const textColorMap = {
+  'color.text': "_syaz1fxt",
+  'color.text.accent.lime': "_syaz1tco",
+  'color.text.accent.lime.bolder': "_syaz1ik3",
+  'color.text.accent.red': "_syaz9lu1",
+  'color.text.accent.red.bolder': "_syazhwvp",
+  'color.text.accent.orange': "_syaz1q28",
+  'color.text.accent.orange.bolder': "_syaz1vps",
+  'color.text.accent.yellow': "_syazfb2s",
+  'color.text.accent.yellow.bolder': "_syazekll",
+  'color.text.accent.green': "_syazh55r",
+  'color.text.accent.green.bolder': "_syaz1y78",
+  'color.text.accent.teal': "_syaz17qg",
+  'color.text.accent.teal.bolder': "_syaz12v7",
+  'color.text.accent.blue': "_syazpnps",
+  'color.text.accent.blue.bolder': "_syazsc1o",
+  'color.text.accent.purple': "_syaz10m5",
+  'color.text.accent.purple.bolder': "_syaz2ibx",
+  'color.text.accent.magenta': "_syaz1s8m",
+  'color.text.accent.magenta.bolder': "_syaz1qur",
+  'color.text.accent.gray': "_syaz1dyx",
+  'color.text.accent.gray.bolder': "_syaz1x9z",
+  'color.text.disabled': "_syaz1lh4",
+  'color.text.inverse': "_syaz15cr",
+  'color.text.selected': "_syazaqb7",
+  'color.text.brand': "_syaz1e6v",
+  'color.text.danger': "_syaz1tmw",
+  'color.text.warning': "_syazwx40",
+  'color.text.warning.inverse': "_syazal3n",
+  'color.text.success': "_syazy73q",
+  'color.text.discovery': "_syazzjem",
+  'color.text.information': "_syaze0os",
+  'color.text.subtlest': "_syaz131l",
+  'color.text.subtle': "_syaz1gjq",
+  'color.link': "_syaz14q2",
+  'color.link.pressed': "_syaz16c2",
+  'color.link.visited': "_syazw7te",
+  'color.link.visited.pressed': "_syazg3x0"
+};
+export const inverseColorMap = {
+  'color.background.neutral.bold': 'color.text.inverse',
+  'color.background.neutral.bold.hovered': 'color.text.inverse',
+  'color.background.neutral.bold.pressed': 'color.text.inverse',
+  'color.background.selected.bold': 'color.text.inverse',
+  'color.background.selected.bold.hovered': 'color.text.inverse',
+  'color.background.selected.bold.pressed': 'color.text.inverse',
+  'color.background.brand.bold': 'color.text.inverse',
+  'color.background.brand.bold.hovered': 'color.text.inverse',
+  'color.background.brand.bold.pressed': 'color.text.inverse',
+  'color.background.brand.boldest': 'color.text.inverse',
+  'color.background.brand.boldest.hovered': 'color.text.inverse',
+  'color.background.brand.boldest.pressed': 'color.text.inverse',
+  'color.background.danger.bold': 'color.text.inverse',
+  'color.background.danger.bold.hovered': 'color.text.inverse',
+  'color.background.danger.bold.pressed': 'color.text.inverse',
+  'color.background.warning.bold': 'color.text.warning.inverse',
+  'color.background.warning.bold.hovered': 'color.text.warning.inverse',
+  'color.background.warning.bold.pressed': 'color.text.warning.inverse',
+  'color.background.success.bold': 'color.text.inverse',
+  'color.background.success.bold.hovered': 'color.text.inverse',
+  'color.background.success.bold.pressed': 'color.text.inverse',
+  'color.background.discovery.bold': 'color.text.inverse',
+  'color.background.discovery.bold.hovered': 'color.text.inverse',
+  'color.background.discovery.bold.pressed': 'color.text.inverse',
+  'color.background.information.bold': 'color.text.inverse',
+  'color.background.information.bold.hovered': 'color.text.inverse',
+  'color.background.information.bold.pressed': 'color.text.inverse'
+};
+
+/**
+ * __Text__
+ *
+ * Text is a primitive component that has the Atlassian Design System's design guidelines baked in.
+ * This includes considerations for text attributes such as color, font size, font weight, and line height.
+ * It renders a `span` by default.
+ *
+ * @internal
+ */
+const Text = /*#__PURE__*/forwardRef(({
+  as: Component = 'span',
+  color: colorProp,
+  align,
+  testId,
+  id,
+  size = 'medium',
+  weight,
+  maxLines,
+  children
+}, ref) => {
+  invariant(asAllowlist.includes(Component), `@atlaskit/primitives: Text received an invalid "as" value of "${Component}"`);
+  const hasTextAncestor = useHasTextAncestor();
+  const color = useColor(colorProp, hasTextAncestor);
+  const component = /*#__PURE__*/React.createElement(Component, {
+    id: id,
+    style: {
+      WebkitLineClamp: maxLines
+    },
+    "data-testid": testId,
+    ref: ref,
+    className: ax([styles.root, fontSizeMap[size], color && textColorMap[color], maxLines && styles.truncation, maxLines === 1 && styles.breakAll, align && styles[`textAlign.${align}`], weight && fontWeightMap[weight], Component === 'em' && styles['as.em'], Component === 'strong' && styles['as.strong']])
+  }, children);
+  if (hasTextAncestor) {
+    // no need to re-apply context if the text is already wrapped
+    return component;
+  }
+  return /*#__PURE__*/React.createElement(HasTextAncestorContext.Provider, {
+    value: true
+  }, component);
+});
+export default Text;

package/dist/es2019/compiled/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/compiled/index.js

@@ -0,0 +1,13 @@
+export { default as Box } from './components/box';
+export { default as Inline } from './components/inline';
+export { default as Stack } from './components/stack';
+export { default as Flex } from './components/flex';
+export { default as Grid } from './components/grid';
+export { default as Bleed } from './components/bleed';
+export { default as Text } from './components/text';
+export { default as Pressable } from './components/pressable';
+export { default as Anchor } from './components/anchor';
+export { media } from './responsive';
+
+// TODO: This is still not figured out from before…
+export { useSurface as UNSAFE_useSurface } from './components/internal/surface-provider';

package/dist/es2019/compiled/responsive/hide.compiled.css

@@ -0,0 +1,11 @@
+
+@media (min-width:30rem){._114bglyw{display:none}}
+@media not all and (min-width:30rem){._1m0aglyw{display:none}}
+@media (min-width:48rem){._181nglyw{display:none}}
+@media not all and (min-width:48rem){._sugaglyw{display:none}}
+@media (min-width:64rem){._dm25glyw{display:none}}
+@media not all and (min-width:64rem){._1mjbglyw{display:none}}
+@media (min-width:90rem){._je3oglyw{display:none}}
+@media not all and (min-width:90rem){._liwcglyw{display:none}}
+@media (min-width:110.5rem){._1uxvglyw{display:none}}
+@media not all and (min-width:110.5rem){._14wzglyw{display:none}}

package/dist/es2019/compiled/responsive/hide.js

@@ -0,0 +1,37 @@
+/* hide.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./hide.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const styles = {
+  'above.xs': "_114bglyw",
+  'above.sm': "_181nglyw",
+  'above.md': "_dm25glyw",
+  'above.lg': "_je3oglyw",
+  'above.xl': "_1uxvglyw",
+  'below.xs': "_1m0aglyw",
+  'below.sm': "_sugaglyw",
+  'below.md': "_1mjbglyw",
+  'below.lg': "_liwcglyw",
+  'below.xl': "_14wzglyw"
+};
+/**
+ * Hides the content at a given breakpoint.  By default, content is shown.  The primary use case is for visual presentation.
+ * Mix `<Hide above="md">` with `<Show above="md">` to achieve content that shifts at a breakpoint.
+ *
+ * Please note:
+ * - This only uses `display: none` hide, it does not skip rendering of children trees.
+ * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
+ */
+export const Hide = ({
+  above,
+  below,
+  children,
+  as: AsElement = 'div',
+  xcss
+}) => {
+  return /*#__PURE__*/React.createElement(AsElement
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
+  , {
+    className: ax([above && styles[`above.${above}`], below && styles[`below.${below}`], xcss])
+  }, children);
+};

package/dist/es2019/compiled/responsive/index.js

@@ -0,0 +1,4 @@
+export { media } from './media-helper';
+export { UNSAFE_useMediaQuery } from './use-media-query';
+export { Show } from './show';
+export { Hide } from './hide';

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

@@ -0,0 +1,36 @@
+/**
+ * This is an object of usable media query helpers using our internal breakpoints configuration.
+ *
+ * When using Compiled CSS-in-JS, please ensure that only a single declaration can take effect at a time.
+ * This means that you should avoid multiple breakpoints taking effect at the same time,
+ * 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>.
+ */
+export const media = {
+  above: {
+    // TODO: Should this even exist, we don't want `css({ [media.above.xxs]: { … } })` because that just adds duplicates styles!
+    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: 110.5rem)'
+  },
+  only: {
+    xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)',
+    xs: '@media (min-width: 30rem) and (max-width: 47.99rem)',
+    sm: '@media (min-width: 48rem) and (max-width: 63.99rem)',
+    md: '@media (min-width: 64rem) and (max-width: 89.99rem)',
+    lg: '@media (min-width: 90rem) and (max-width: 110.49rem)',
+    xl: '@media (min-width: 110.5rem)'
+  },
+  below: {
+    xs: '@media not all and (min-width: 30rem)',
+    sm: '@media not all and (min-width: 48rem)',
+    md: '@media not all and (min-width: 64rem)',
+    lg: '@media not all and (min-width: 90rem)',
+    xl: '@media not all and (min-width: 110.5rem)'
+  }
+};

package/dist/es2019/compiled/responsive/show.compiled.css

@@ -0,0 +1,11 @@
+._1e0cglyw{display:none}
+@media (min-width:30rem){._114b19ly{display:revert}}
+@media not all and (min-width:30rem){._1m0a19ly{display:revert}}
+@media (min-width:48rem){._181n19ly{display:revert}}
+@media not all and (min-width:48rem){._suga19ly{display:revert}}
+@media (min-width:64rem){._dm2519ly{display:revert}}
+@media not all and (min-width:64rem){._1mjb19ly{display:revert}}
+@media (min-width:90rem){._je3o19ly{display:revert}}
+@media not all and (min-width:90rem){._liwc19ly{display:revert}}
+@media (min-width:110.5rem){._1uxv19ly{display:revert}}
+@media not all and (min-width:110.5rem){._14wz19ly{display:revert}}

package/dist/es2019/compiled/responsive/show.js

@@ -0,0 +1,38 @@
+/* show.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./show.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const styles = {
+  default: "_1e0cglyw",
+  'above.xs': "_114b19ly",
+  'above.sm': "_181n19ly",
+  'above.md': "_dm2519ly",
+  'above.lg': "_je3o19ly",
+  'above.xl': "_1uxv19ly",
+  'below.xs': "_1m0a19ly",
+  'below.sm': "_suga19ly",
+  'below.md': "_1mjb19ly",
+  'below.lg': "_liwc19ly",
+  'below.xl': "_14wz19ly"
+};
+/**
+ * Shows the content at a given breakpoint.  By default, content is hidden.  The primary use case is for visual presentation.
+ * Mix `<Show above="md">` with `<Hide above="md">` to achieve content that shifts at a breakpoint.
+ *
+ * Please note:
+ * - This only uses `display: none` and `display: revert` to show/hide, it does not skip rendering of children trees.
+ * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
+ */
+export const Show = ({
+  above,
+  below,
+  children,
+  as: AsElement = 'div',
+  xcss
+}) => {
+  return /*#__PURE__*/React.createElement(AsElement
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
+  , {
+    className: ax([styles.default, above && styles[`above.${above}`], below && styles[`below.${below}`], xcss])
+  }, children);
+};

package/dist/es2019/compiled/responsive/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/compiled/responsive/use-media-query.js

@@ -0,0 +1,71 @@
+var _window, _window$matchMedia, _window2, _window2$matchMedia, _window3, _window3$matchMedia, _window4, _window4$matchMedia, _window5, _window5$matchMedia, _window6, _window6$matchMedia, _window7, _window7$matchMedia, _window8, _window8$matchMedia, _window9, _window9$matchMedia, _window10, _window10$matchMedia, _window11, _window11$matchMedia;
+import { useEffect, useLayoutEffect, useRef } from 'react';
+import { bind } from 'bind-event-listener';
+import { media } from './media-helper';
+const queries = {
+  'above.xxs': typeof window === 'undefined' ? undefined : (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, media.above.xxs.replace('@media ', '').trim()),
+  'above.xs': typeof window === 'undefined' ? undefined : (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$matchMedia = _window2.matchMedia) === null || _window2$matchMedia === void 0 ? void 0 : _window2$matchMedia.call(_window2, media.above.xs.replace('@media ', '').trim()),
+  'above.sm': typeof window === 'undefined' ? undefined : (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$matchMedia = _window3.matchMedia) === null || _window3$matchMedia === void 0 ? void 0 : _window3$matchMedia.call(_window3, media.above.sm.replace('@media ', '').trim()),
+  'above.md': typeof window === 'undefined' ? undefined : (_window4 = window) === null || _window4 === void 0 ? void 0 : (_window4$matchMedia = _window4.matchMedia) === null || _window4$matchMedia === void 0 ? void 0 : _window4$matchMedia.call(_window4, media.above.md.replace('@media ', '').trim()),
+  'above.lg': typeof window === 'undefined' ? undefined : (_window5 = window) === null || _window5 === void 0 ? void 0 : (_window5$matchMedia = _window5.matchMedia) === null || _window5$matchMedia === void 0 ? void 0 : _window5$matchMedia.call(_window5, media.above.lg.replace('@media ', '').trim()),
+  'above.xl': typeof window === 'undefined' ? undefined : (_window6 = window) === null || _window6 === void 0 ? void 0 : (_window6$matchMedia = _window6.matchMedia) === null || _window6$matchMedia === void 0 ? void 0 : _window6$matchMedia.call(_window6, media.above.xl.replace('@media ', '').trim()),
+  'below.xs': typeof window === 'undefined' ? undefined : (_window7 = window) === null || _window7 === void 0 ? void 0 : (_window7$matchMedia = _window7.matchMedia) === null || _window7$matchMedia === void 0 ? void 0 : _window7$matchMedia.call(_window7, media.below.xs.replace('@media ', '').trim()),
+  'below.sm': typeof window === 'undefined' ? undefined : (_window8 = window) === null || _window8 === void 0 ? void 0 : (_window8$matchMedia = _window8.matchMedia) === null || _window8$matchMedia === void 0 ? void 0 : _window8$matchMedia.call(_window8, media.below.sm.replace('@media ', '').trim()),
+  'below.md': typeof window === 'undefined' ? undefined : (_window9 = window) === null || _window9 === void 0 ? void 0 : (_window9$matchMedia = _window9.matchMedia) === null || _window9$matchMedia === void 0 ? void 0 : _window9$matchMedia.call(_window9, media.below.md.replace('@media ', '').trim()),
+  'below.lg': typeof window === 'undefined' ? undefined : (_window10 = window) === null || _window10 === void 0 ? void 0 : (_window10$matchMedia = _window10.matchMedia) === null || _window10$matchMedia === void 0 ? void 0 : _window10$matchMedia.call(_window10, media.below.lg.replace('@media ', '').trim()),
+  'below.xl': typeof window === 'undefined' ? undefined : (_window11 = window) === null || _window11 === void 0 ? void 0 : (_window11$matchMedia = _window11.matchMedia) === null || _window11$matchMedia === void 0 ? void 0 : _window11$matchMedia.call(_window11, media.below.xl.replace('@media ', '').trim())
+};
+
+/**
+ * A hook which returnes a `window.matchMedia` result to help you build responsively around breakpoints in JavaScript.
+ *
+ * The returning value **WILL NOT** update or react to change.  You can use `mq.matches` to get the latest version and you can use the optional listener argument to react to changes as desired.
+ *
+ * @important
+ *  - This will always be `null` in SSR and the event listener should not fire on SSR => clientside hydration.
+ *  - `above.xxs` will always be truthy, your listener should never fire.
+ *
+ * @experimental This hook only works on the client-side and is not safe in an SSR environment as `window` is unavailable (and the user's viewport would be unknown)
+ *
+ * @example
+ * const mq = useMediaQuery('below.md', useCallback((event) => console.log('changed', event.matches)), []))
+ * const isMobile = mq?.matches;
+ *
+ * @returns
+ *  - `MediaQueryList`, primarily used to get if that media query is currently
+ *  - `null` when `matchMedia` is unavailable, eg. in SSR.
+ */
+export const UNSAFE_useMediaQuery = (queryString, listener) => {
+  const listenerRef = useRef(listener);
+  useEffect(() => {
+    // Bind the listener if changed so it's called on the next change event; no guarantee on timing.
+    listenerRef.current = listener;
+  }, [listener]);
+
+  /**
+   * We explicitly only react to boolean changes for binding our listener
+   * Changes to the functional reference are ignored.
+   */
+  const hasListener = !!listener;
+
+  /**
+   * The `matchMedia(…)` return value for our breakpoint query.
+   */
+  const mq = queries[queryString];
+  useLayoutEffect(() => {
+    listenerRef.current = listener; // Bind the listener now in case the `useEffect` hasn't fired above yet
+    if (!mq || !hasListener || !listenerRef.current) {
+      return;
+    }
+    return bind(mq, {
+      type: 'change',
+      listener: event => {
+        // We explicitly call the current version of the function
+        return listenerRef.current(event);
+      }
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- explicitly do not trigger the effect on `listener` reference change, only on a boolean representation of it.
+  [mq, hasListener]);
+  return mq || null;
+};

package/dist/es2019/components/anchor.js

@@ -90,7 +90,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "12.2.6",
+    packageVersion: "13.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/pressable.js

@@ -85,7 +85,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "12.2.6",
+    packageVersion: "13.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/index.js

@@ -13,5 +13,5 @@ export {
  */
 default as UNSAFE_ANCHOR, default as Anchor } from './components/anchor';
 export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
-export { useSurface as UNSAFE_useSurface, SurfaceContext as UNSAFE_SurfaceContext } from './components/internal/surface-provider';
+export { useSurface as UNSAFE_useSurface } from './components/internal/surface-provider';
 export { inverseColorMap as UNSAFE_inverseColorMap } from './xcss/style-maps.partial';

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

@@ -443,14 +443,15 @@ export const fillMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::dbfb4c7de16d0ae4a53d66f9663aca91>>
+ * @codegen <<SignedSource::042cbfe8041c09e3817ae74154994f32>>
  * @codegenId misc
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["layer"]
  * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
- * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
+ * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::92793ca02dbfdad66e53ffbe9f0baa0a>>
  */
 export const layerMap = {
+  '1': 1,
   card: 100,
   navigation: 200,
   dialog: 300,
@@ -494,12 +495,12 @@ export const borderRadiusMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::97e5ae47f252660a5ef7569a3880c26c>>
+ * @codegen <<SignedSource::96d9a841cb440c2bd770d0af5c670f10>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
  * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
- * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
+ * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::92793ca02dbfdad66e53ffbe9f0baa0a>>
  */
 export const fontMap = {
   'font.body': "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
@@ -534,11 +535,11 @@ export const fontFamilyMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7dc7abf82a13bc780c338b9602508ae6>>
+ * @codegen <<SignedSource::ae96213e36b930556f9ad18382088ff8>>
  * @codegenId text
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
- * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
+ * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::92793ca02dbfdad66e53ffbe9f0baa0a>>
  */
 export const textSizeMap = {
   medium: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",

package/dist/esm/compiled/components/anchor.compiled.css

@@ -0,0 +1,12 @@
+
+._1hms8stv{text-decoration-line:underline}
+._4bfu18uv{text-decoration-color:initial}
+._ajmmnqa1{text-decoration-style:solid}
+._vchhusvi{box-sizing:border-box}
+._ymio1r31:focus:not(:focus-visible){outline-color:currentColor}
+._ypr0glyw:focus:not(:focus-visible){outline-style:none}
+._zcxs1o36:focus:not(:focus-visible){outline-width:medium}._1bg4v77o:focus, ._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
+._1hvw1bk5:focus, ._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
+._49pcnqa1:focus, ._ra3xnqa1:focus-visible{outline-style:solid}
+._nt751p6i:focus, ._mizu1p6i:focus-visible{outline-color:var(--ds-border-focused,#388bff)}
+@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._qa7m1r31:focus-visible{outline-color:currentColor}._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}

package/dist/esm/compiled/components/anchor.js

@@ -0,0 +1,120 @@
+/* anchor.tsx generated by @compiled/babel-plugin v0.32.2 */
+import _extends from "@babel/runtime/helpers/extends";
+import _typeof from "@babel/runtime/helpers/typeof";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["href", "children", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby", "style", "target", "testId", "xcss", "opensInNewWindowLabel"],
+  _excluded2 = ["className"];
+import "./anchor.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef, useCallback, useContext } from 'react';
+import invariant from 'tiny-invariant';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import { useRouterLink } from '@atlaskit/app-provider';
+import noop from '@atlaskit/ds-lib/noop';
+import { useId } from '@atlaskit/ds-lib/use-id';
+import InteractionContext from '@atlaskit/interaction-context';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+var styles = {
+  root: "_vchhusvi _4bfu18uv _1hms8stv _ajmmnqa1",
+  focusRing: "_ymio1r31 _ypr0glyw _zcxs1o36 _nt751p6i _mizu1p6i _1bg4v77o _1ah3v77o _49pcnqa1 _ra3xnqa1 _1hvw1bk5 _128m1bk5 _qa7m1r31 _1cvmnqa1 _4davt94y"
+};
+var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
+var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
+
+/**
+ * __Anchor__
+ *
+ * A primitive for building custom anchor links.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
+ * - [Code](https://atlassian.design/components/primitives/anchor/code)
+ * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
+ */
+var AnchorNoRef = function AnchorNoRef(_ref, ref) {
+  var href = _ref.href,
+    children = _ref.children,
+    _ref$onClick = _ref.onClick,
+    providedOnClick = _ref$onClick === void 0 ? noop : _ref$onClick,
+    interactionName = _ref.interactionName,
+    componentName = _ref.componentName,
+    analyticsContext = _ref.analyticsContext,
+    ariaLabel = _ref['aria-label'],
+    ariaLabelledBy = _ref['aria-labelledby'],
+    style = _ref.style,
+    target = _ref.target,
+    testId = _ref.testId,
+    xcss = _ref.xcss,
+    _ref$opensInNewWindow = _ref.opensInNewWindowLabel,
+    opensInNewWindowLabel = _ref$opensInNewWindow === void 0 ? '(opens new window)' : _ref$opensInNewWindow,
+    htmlAttributes = _objectWithoutProperties(_ref, _excluded);
+  var interactionContext = useContext(InteractionContext);
+  var handleClick = useCallback(function (e, analyticsEvent) {
+    interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
+    providedOnClick(e, analyticsEvent);
+  }, [providedOnClick, interactionContext, interactionName]);
+  var opensNewWindowLabelId = useId();
+  var onClick = usePlatformLeafEventHandler({
+    fn: handleClick,
+    action: 'clicked',
+    componentName: componentName || 'Anchor',
+    packageName: "@atlaskit/primitives",
+    packageVersion: "13.0.0",
+    analyticsData: analyticsContext,
+    actionSubject: 'link'
+  });
+
+  // This is to remove className from safeHtmlAttributes
+  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
+  var _spreadClass = htmlAttributes.className,
+    safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
+  var RouterLink = useRouterLink();
+  var isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
+  var isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);
+
+  /**
+   * 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.).
+   */
+  var isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
+  var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && _typeof(href) === 'object';
+  invariant(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Anchor primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
+  var Component = isRouterLink ? RouterLink : 'a';
+  return /*#__PURE__*/React.createElement(Component
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
+  , _extends({
+    className: ax([styles.root, styles.focusRing, xcss])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- TODO: Properly type this and allow pass-through if we can determine the type
+    ,
+    style: style,
+    ref: ref
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, safeHtmlAttributes, {
+    // @ts-expect-error
+    href: !isRouterLink && typeof href !== 'string' ? undefined : href,
+    target: target,
+    onClick: onClick,
+    "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(opensInNewWindowLabel) : ariaLabel,
+    "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy,
+    "data-testid": testId,
+    "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
+  }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
+    id: opensNewWindowLabelId
+  }, opensInNewWindowLabel));
+};
+
+// Workarounds to support generic types with forwardRef
+/**
+ * __Anchor__
+ *
+ * Anchor is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
+ * - [Code](https://atlassian.design/components/primitives/anchor/code)
+ * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
+ */
+var Anchor = /*#__PURE__*/forwardRef(AnchorNoRef);
+export default Anchor;

package/dist/esm/compiled/components/bleed.compiled.css

@@ -0,0 +1,11 @@
+._195g1e8l{margin-inline:var(--ds-space-negative-200,-1rem)}
+._195g4pxn{margin-inline:var(--ds-space-negative-025,-.125rem)}
+._195ggp71{margin-inline:var(--ds-space-negative-050,-.25rem)}
+._195gkqjj{margin-inline:var(--ds-space-negative-150,-.75rem)}
+._195gtdkl{margin-inline:var(--ds-space-negative-100,-.5rem)}
+._1mou1e8l{margin-block:var(--ds-space-negative-200,-1rem)}
+._1mou4pxn{margin-block:var(--ds-space-negative-025,-.125rem)}
+._1mougp71{margin-block:var(--ds-space-negative-050,-.25rem)}
+._1moukqjj{margin-block:var(--ds-space-negative-150,-.75rem)}
+._1moutdkl{margin-block:var(--ds-space-negative-100,-.5rem)}
+._vchhusvi{box-sizing:border-box}