@atlaskit/primitives 12.2.6 → 13.0.0

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/compiled/index.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Anchor", {
+  enumerable: true,
+  get: function get() {
+    return _anchor.default;
+  }
+});
+Object.defineProperty(exports, "Bleed", {
+  enumerable: true,
+  get: function get() {
+    return _bleed.default;
+  }
+});
+Object.defineProperty(exports, "Box", {
+  enumerable: true,
+  get: function get() {
+    return _box.default;
+  }
+});
+Object.defineProperty(exports, "Flex", {
+  enumerable: true,
+  get: function get() {
+    return _flex.default;
+  }
+});
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function get() {
+    return _grid.default;
+  }
+});
+Object.defineProperty(exports, "Inline", {
+  enumerable: true,
+  get: function get() {
+    return _inline.default;
+  }
+});
+Object.defineProperty(exports, "Pressable", {
+  enumerable: true,
+  get: function get() {
+    return _pressable.default;
+  }
+});
+Object.defineProperty(exports, "Stack", {
+  enumerable: true,
+  get: function get() {
+    return _stack.default;
+  }
+});
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function get() {
+    return _text.default;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_useSurface", {
+  enumerable: true,
+  get: function get() {
+    return _surfaceProvider.useSurface;
+  }
+});
+Object.defineProperty(exports, "media", {
+  enumerable: true,
+  get: function get() {
+    return _responsive.media;
+  }
+});
+var _box = _interopRequireDefault(require("./components/box"));
+var _inline = _interopRequireDefault(require("./components/inline"));
+var _stack = _interopRequireDefault(require("./components/stack"));
+var _flex = _interopRequireDefault(require("./components/flex"));
+var _grid = _interopRequireDefault(require("./components/grid"));
+var _bleed = _interopRequireDefault(require("./components/bleed"));
+var _text = _interopRequireDefault(require("./components/text"));
+var _pressable = _interopRequireDefault(require("./components/pressable"));
+var _anchor = _interopRequireDefault(require("./components/anchor"));
+var _responsive = require("./responsive");
+var _surfaceProvider = require("./components/internal/surface-provider");

package/dist/cjs/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/cjs/compiled/responsive/hide.js

@@ -0,0 +1,46 @@
+/* hide.tsx generated by @compiled/babel-plugin v0.32.2 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Hide = void 0;
+require("./hide.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var 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).
+ */
+var Hide = exports.Hide = function Hide(_ref) {
+  var above = _ref.above,
+    below = _ref.below,
+    children = _ref.children,
+    _ref$as = _ref.as,
+    AsElement = _ref$as === void 0 ? 'div' : _ref$as,
+    xcss = _ref.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: (0, _runtime.ax)([above && styles["above.".concat(above)], below && styles["below.".concat(below)], xcss])
+  }, children);
+};

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Hide", {
+  enumerable: true,
+  get: function get() {
+    return _hide.Hide;
+  }
+});
+Object.defineProperty(exports, "Show", {
+  enumerable: true,
+  get: function get() {
+    return _show.Show;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_useMediaQuery", {
+  enumerable: true,
+  get: function get() {
+    return _useMediaQuery.UNSAFE_useMediaQuery;
+  }
+});
+Object.defineProperty(exports, "media", {
+  enumerable: true,
+  get: function get() {
+    return _mediaHelper.media;
+  }
+});
+var _mediaHelper = require("./media-helper");
+var _useMediaQuery = require("./use-media-query");
+var _show = require("./show");
+var _hide = require("./hide");

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

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.media = void 0;
+/**
+ * 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>.
+ */
+var media = exports.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/cjs/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/cjs/compiled/responsive/show.js

@@ -0,0 +1,47 @@
+/* show.tsx generated by @compiled/babel-plugin v0.32.2 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Show = void 0;
+require("./show.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var 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).
+ */
+var Show = exports.Show = function Show(_ref) {
+  var above = _ref.above,
+    below = _ref.below,
+    children = _ref.children,
+    _ref$as = _ref.as,
+    AsElement = _ref$as === void 0 ? 'div' : _ref$as,
+    xcss = _ref.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: (0, _runtime.ax)([styles.default, above && styles["above.".concat(above)], below && styles["below.".concat(below)], xcss])
+  }, children);
+};

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNSAFE_useMediaQuery = void 0;
+var _react = require("react");
+var _bindEventListener = require("bind-event-listener");
+var _mediaHelper = require("./media-helper");
+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;
+var queries = {
+  'above.xxs': typeof window === 'undefined' ? undefined : (_window = window) === null || _window === void 0 || (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, _mediaHelper.media.above.xxs.replace('@media ', '').trim()),
+  'above.xs': typeof window === 'undefined' ? undefined : (_window2 = window) === null || _window2 === void 0 || (_window2$matchMedia = _window2.matchMedia) === null || _window2$matchMedia === void 0 ? void 0 : _window2$matchMedia.call(_window2, _mediaHelper.media.above.xs.replace('@media ', '').trim()),
+  'above.sm': typeof window === 'undefined' ? undefined : (_window3 = window) === null || _window3 === void 0 || (_window3$matchMedia = _window3.matchMedia) === null || _window3$matchMedia === void 0 ? void 0 : _window3$matchMedia.call(_window3, _mediaHelper.media.above.sm.replace('@media ', '').trim()),
+  'above.md': typeof window === 'undefined' ? undefined : (_window4 = window) === null || _window4 === void 0 || (_window4$matchMedia = _window4.matchMedia) === null || _window4$matchMedia === void 0 ? void 0 : _window4$matchMedia.call(_window4, _mediaHelper.media.above.md.replace('@media ', '').trim()),
+  'above.lg': typeof window === 'undefined' ? undefined : (_window5 = window) === null || _window5 === void 0 || (_window5$matchMedia = _window5.matchMedia) === null || _window5$matchMedia === void 0 ? void 0 : _window5$matchMedia.call(_window5, _mediaHelper.media.above.lg.replace('@media ', '').trim()),
+  'above.xl': typeof window === 'undefined' ? undefined : (_window6 = window) === null || _window6 === void 0 || (_window6$matchMedia = _window6.matchMedia) === null || _window6$matchMedia === void 0 ? void 0 : _window6$matchMedia.call(_window6, _mediaHelper.media.above.xl.replace('@media ', '').trim()),
+  'below.xs': typeof window === 'undefined' ? undefined : (_window7 = window) === null || _window7 === void 0 || (_window7$matchMedia = _window7.matchMedia) === null || _window7$matchMedia === void 0 ? void 0 : _window7$matchMedia.call(_window7, _mediaHelper.media.below.xs.replace('@media ', '').trim()),
+  'below.sm': typeof window === 'undefined' ? undefined : (_window8 = window) === null || _window8 === void 0 || (_window8$matchMedia = _window8.matchMedia) === null || _window8$matchMedia === void 0 ? void 0 : _window8$matchMedia.call(_window8, _mediaHelper.media.below.sm.replace('@media ', '').trim()),
+  'below.md': typeof window === 'undefined' ? undefined : (_window9 = window) === null || _window9 === void 0 || (_window9$matchMedia = _window9.matchMedia) === null || _window9$matchMedia === void 0 ? void 0 : _window9$matchMedia.call(_window9, _mediaHelper.media.below.md.replace('@media ', '').trim()),
+  'below.lg': typeof window === 'undefined' ? undefined : (_window10 = window) === null || _window10 === void 0 || (_window10$matchMedia = _window10.matchMedia) === null || _window10$matchMedia === void 0 ? void 0 : _window10$matchMedia.call(_window10, _mediaHelper.media.below.lg.replace('@media ', '').trim()),
+  'below.xl': typeof window === 'undefined' ? undefined : (_window11 = window) === null || _window11 === void 0 || (_window11$matchMedia = _window11.matchMedia) === null || _window11$matchMedia === void 0 ? void 0 : _window11$matchMedia.call(_window11, _mediaHelper.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.
+ */
+var UNSAFE_useMediaQuery = exports.UNSAFE_useMediaQuery = function UNSAFE_useMediaQuery(queryString, listener) {
+  var listenerRef = (0, _react.useRef)(listener);
+  (0, _react.useEffect)(function () {
+    // 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.
+   */
+  var hasListener = !!listener;
+
+  /**
+   * The `matchMedia(…)` return value for our breakpoint query.
+   */
+  var mq = queries[queryString];
+  (0, _react.useLayoutEffect)(function () {
+    listenerRef.current = listener; // Bind the listener now in case the `useEffect` hasn't fired above yet
+    if (!mq || !hasListener || !listenerRef.current) {
+      return;
+    }
+    return (0, _bindEventListener.bind)(mq, {
+      type: 'change',
+      listener: function 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/cjs/components/anchor.js

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

package/dist/cjs/components/pressable.js

@@ -95,7 +95,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "12.2.6",
+    packageVersion: "13.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/cjs/index.js

@@ -70,12 +70,6 @@ Object.defineProperty(exports, "UNSAFE_BREAKPOINTS_CONFIG", {
     return _responsive.UNSAFE_BREAKPOINTS_CONFIG;
   }
 });
-Object.defineProperty(exports, "UNSAFE_SurfaceContext", {
-  enumerable: true,
-  get: function get() {
-    return _surfaceProvider.SurfaceContext;
-  }
-});
 Object.defineProperty(exports, "UNSAFE_inverseColorMap", {
   enumerable: true,
   get: function get() {

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

@@ -448,14 +448,15 @@ var fillMap = exports.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>>
  */
 var layerMap = exports.layerMap = {
+  '1': 1,
   card: 100,
   navigation: 200,
   dialog: 300,
@@ -499,12 +500,12 @@ var borderRadiusMap = exports.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>>
  */
 var fontMap = exports.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)",
@@ -539,11 +540,11 @@ var fontFamilyMap = exports.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>>
  */
 var textSizeMap = exports.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/es2019/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/es2019/compiled/components/anchor.js

@@ -0,0 +1,117 @@
+/* anchor.tsx generated by @compiled/babel-plugin v0.32.2 */
+import _extends from "@babel/runtime/helpers/extends";
+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';
+const styles = {
+  root: "_vchhusvi _4bfu18uv _1hms8stv _ajmmnqa1",
+  focusRing: "_ymio1r31 _ypr0glyw _zcxs1o36 _nt751p6i _mizu1p6i _1bg4v77o _1ah3v77o _49pcnqa1 _ra3xnqa1 _1hvw1bk5 _128m1bk5 _qa7m1r31 _1cvmnqa1 _4davt94y"
+};
+const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
+const 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)
+ */
+const AnchorNoRef = ({
+  href,
+  children,
+  onClick: providedOnClick = noop,
+  interactionName,
+  componentName,
+  analyticsContext,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  style,
+  target,
+  testId,
+  xcss,
+  opensInNewWindowLabel = '(opens new window)',
+  ...htmlAttributes
+}, ref) => {
+  const interactionContext = useContext(InteractionContext);
+  const handleClick = useCallback((e, analyticsEvent) => {
+    interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
+    providedOnClick(e, analyticsEvent);
+  }, [providedOnClick, interactionContext, interactionName]);
+  const opensNewWindowLabelId = useId();
+  const 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
+  const {
+    className: _spreadClass,
+    ...safeHtmlAttributes
+  } = htmlAttributes;
+  const RouterLink = useRouterLink();
+  const isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
+  const 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.).
+   */
+  const isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
+  const 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`);
+  const 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 ? `${ariaLabel} ${opensInNewWindowLabel}` : ariaLabel,
+    "aria-labelledby": ariaLabelledBy && target === '_blank' ? `${ariaLabelledBy} ${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)
+ */
+const Anchor = /*#__PURE__*/forwardRef(AnchorNoRef);
+export default Anchor;

package/dist/es2019/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}

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

@@ -0,0 +1,43 @@
+/* bleed.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./bleed.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+// NOTE: This maintains a full map of 10 styles as Bleed is a bit of a semantic outlier
+const styles = {
+  root: "_vchhusvi",
+  'inline.space.025': "_195g4pxn",
+  'inline.space.050': "_195ggp71",
+  'inline.space.100': "_195gtdkl",
+  'inline.space.150': "_195gkqjj",
+  'inline.space.200': "_195g1e8l",
+  'block.space.025': "_1mou4pxn",
+  'block.space.050': "_1mougp71",
+  'block.space.100': "_1moutdkl",
+  'block.space.150': "_1moukqjj",
+  'block.space.200': "_1mou1e8l"
+};
+
+/**
+ * __Bleed__
+ *
+ * `Bleed` is a primitive layout component that controls negative whitespace.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/bleed/examples)
+ * - [Code](https://atlassian.design/components/primitives/bleed/code)
+ */
+const Bleed = /*#__PURE__*/React.memo(({
+  children,
+  testId,
+  inline,
+  block,
+  all,
+  xcss
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
+    className: ax([styles.root, all && styles[`inline.${all}`], inline && styles[`inline.${inline}`], all && styles[`block.${all}`], block && styles[`block.${block}`], xcss]),
+    "data-testid": testId
+  }, children);
+});
+Bleed.displayName = 'Bleed';
+export default Bleed;