@atlaskit/primitives 0.13.0 → 0.14.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 0.14.1
+
+### Patch Changes
+
+- [`d79b6172a93`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d79b6172a93) - Add documentation for responsive xcss.
+
+## 0.14.0
+
+### Minor Changes
+
+- [`5af07899f5b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5af07899f5b) - Loosens types to better reflect `xcss` API.
+
 ## 0.13.0
 
 ### Minor Changes

package/constellation/xcss/examples.mdx

@@ -6,16 +6,23 @@ order: 1
 
 import xcssBasic from '../../examples/constellation/xcss/basic';
 import xcssInteractive from '../../examples/constellation/xcss/interactivity';
+import xcssResponsive from '../../examples/constellation/xcss/responsiveness';
 
 ## Basic
 
-`xcss` can be used to pull together different types of interactions and UI in a safer more composable way.
+`xcss` can pull together different types of interactions and UI in a safer more composable way.
 
 <Example Component={xcssBasic} packageName="@atlaskit/primitives/xcss" />
 
 ## Interactivity
 
-To enable interactivity you can lean on familiar selectors like `:hover` and `:focus-visible`.
+To enable interactivity, use familiar selectors like `:hover` and `:focus-visible`.
 
 <Example Component={xcssInteractive} packageName="@atlaskit/primitives/xcss" />
 
+
+## Responsiveness
+
+xCSS also accepts a subset of media queries at predefined breakpoints:
+
+<Example Component={xcssResponsive} packageName="@atlaskit/primitives/xcss" />

package/constellation/xcss/migration.mdx

@@ -8,8 +8,8 @@ order: 2
 
 ### Changes for developers
 
-There are two key changes to be mindful of when migrating to use `xcss`.
-The first is needing to update callsites to remove any nested styles and
+There are two key changes to be mindful of when migrating to `xcss`.
+The first is updating callsites to remove any nested styles and
 tokenised values.
 
 ```diff
@@ -26,9 +26,9 @@ tokenised values.
 });
 ```
 
-The second is that for the `xcss` function to be applied correctly it must be applied on a
-component with an `xcss` JSXAttribute. By default this won't work with the `css` or `className`
-JSXAttributes - so be aware if you're not seeing your styles appear.
+The second change is that for the `xcss` function to be applied correctly it must be applied on a
+component with an `xcss` JSXAttribute. This won't work with the `css` or `className`
+JSXAttributes, be aware if you're not seeing your styles appear.
 
 ```diff
 - <div css={someStyles} />
@@ -38,8 +38,7 @@ JSXAttributes - so be aware if you're not seeing your styles appear.
 
 #### Changing the way you express styles
 
-Why are nested selectors a problem? A key philosophy of `xcss` is encouraging more deterministic style application. This restriction is designed to eliminate side-effects and
-encourage component encapsulation. Consider the below example:
+Why are nested selectors a problem? A key philosophy of `xcss` is encouraging more deterministic style application. Restricting nested styles eliminates side-effects and encourages component encapsulation. Consider the below example:
 
 ```tsx
 const myComponentStyles = css({
@@ -55,12 +54,12 @@ const MyComponent = () => (
 );
 ```
 
-Here the component is applying styles that are implicity meant for the text wrapped in the `p` below.
+Here the component is applying styles that are implicitly meant for the text wrapped in the `p` below.
 In this simple example, it may seem okay, desirable even, but cases like these often occur across module or component boundaries.
 
 This makes the visibility of these dependencies harder to capture or reason about.
-Styles that are inherited or indirectly apply make a UI brittle to change and hard to evolve.
-Instead, if the same styles are applied directly on the affected element we can minimize and in some cases completely eliminate this problem.
+Styles that are inherited or indirectly apply make a UI vulnerable to change and harder to maintain.
+Instead, if the same styles are applied directly to the affected element this can minimize and in some cases completely eliminate this problem.
 
 ```diff
 const myTextStyles = xcss({
@@ -77,17 +76,15 @@ const MyComponent = () => (
 );
 ```
 
-There are likely to be cases where nesting is the only option. While not desirable, this is fine as long as it's considered
-a last resort.
+There will likely be cases where nesting is the only option. While not desirable, nesting can be used minimally, and when the potential impact is considered.
 
 ### FAQ
 
-Overall migration to `xcss` is fairly simple for the majority of cases. Here are some common strategies for migrations.
+Migration to `xcss` is simple for the majority of cases. Here are some common strategies for migrations.
 
 #### Non-tokenised values
 
-If you're yet to migrate to tokens, you have two options. You can migrate to tokens first and then on a second pass
-migrate to `xcss` or you can make the jump directly.
+Before migrating to tokens, there are two options. Migrate to tokens first and then on a second pass migrate to `xcss` or make the jump directly to use both tokens and `xcss`.
 
 ```tsx
 const someStyles = css({
@@ -107,9 +104,8 @@ const someStyles = xcss({
 
 #### Moving from the `styled` API
 
-If you're currently using the `styled` API there are a few steps required to migration.
-The safest approach is to a step change to use object styles, migrate to tokens (optionally)
-and then migrate to `xcss`.
+If currently using the `styled` API there are a few steps to migrate.
+The safest approach is to a step change to use object styles, migrate to tokens (optionally) and then migrate to `xcss`.
 
 ```tsx
 const MyComponent = styled.div`

package/constellation/xcss/usage.mdx

@@ -3,26 +3,24 @@ title: xCSS
 description: xCSS is a safer, tokens-first approach to CSS-in-JS.
 order: 0
 ---
+import { MediaQueriesTable } from '@af/design-system-docs-ui';
 
 ![xcss Logo](logo.png "xcss Logo")
 
-`xcss` is an Atlassian Design System styling API designed to natively integrate with
-Atlassian's [design tokens](/tokens) and [primitives](/components/primitives) in a safer, more resilient and evolvable way.
+`xcss` is an Atlassian Design System styling API that natively integrates with Atlassian's [design tokens](/tokens) and [primitives](/components/primitives).
 
-The `xcss` utility behaves similarly to the `css` utility in libraries
-like `styled-components`, `@compiled` or `@emotion` - so if you've used those libraries before
-it will feel very familiar, with a few additional features and some constraints.
+The `xcss` utility behaves similarly to the `css` utility in libraries like `styled-components`, `@compiled` or `@emotion`. If you've used these libraries, `xcss` will feel familiar, with a few additional features and constraints.
 
-Features that will feel familiar:
+Familiar features:
 
-* `xcss` will generate a `className` to be applied on your components
-* `xcss` will provide key-value pairs of CSS properties in an object format
+* `xcss` generates a `className` that is applied to the components
+* `xcss` provides key-value pairs of CSS properties in an object format
 * `xcss` supports style precedence and conditional styles
 
-But it also has a few key differences.
+Key differences:
 
-* `xcss` has type-safety that uses token names for all CSS properties that are represented by design tokens.
-* `xcss` restricts nested selectors completely from usage.
+* `xcss` has type-safety that ensures token name usage for all CSS properties represented by design tokens.
+* `xcss` restricts nested selectors completely from usage
 
 ## Usage
 
@@ -51,17 +49,14 @@ const MyBox = () => {
   return <Box xcss={someStyles} />
 }
 ```
+The `xcss` prop and the `xcss` function are direct complements and are designed to be used together.
 
-The prop and the `xcss` function are direct complements and are meant
-to be used together. Note: styles generated from `xcss` cannot be applied directly
-to the `className` property or `css` as they are with other CSS-in-JS libraries.
+Note: styles generated from `xcss` cannot be applied directly to the `className` property or `css` as they are with other CSS-in-JS libraries.
 
 ### Type safety
 
-`xcss` uses strongly-typed values generated from design token
-definitions to make it simpler to apply the right token for the right CSS property.
-This is intended to be more ergonomic and intuitive but also prevent the misapplication of tokens
-to the wrong properties.
+`xcss` uses strongly-typed values generated from design token definitions, making it simpler to apply the right token to the right CSS property. 
+This is intended to be more ergonomic and intuitive, but also prevent the misapplication of tokens to the wrong properties.
 
 Any [valid token name](/components/tokens/all-tokens) is available to be applied against its
 matching CSS property. For example, the token name `space.200`
@@ -79,6 +74,10 @@ const someStyles = xcss({
 ```
 
 ### Restricted nesting
+`xcss` is flexible enough to implement any design, but it does restrict the application of styles in one key way. 
+Selectors cannot be nested or target elements beyond the element on which styles are applied.
+This restriction is intended to encourage better component encapsulation, reduce side-effects and make the codebase more resilient to change.
+
 
 `xcss` is meant to be flexible enough for you to implement any design but it does
 restrict the application of styles in one key way. Selectors cannot be
@@ -106,7 +105,46 @@ const someStyles = xcss({
 ```
 
 These unsafe selectors will throw a type error if applied.
-For richer examples of how to use `xcss` please see our [documentation here](/components/primitives/xcss/examples).
+For richer examples of how to use `xcss` please see the [primitives `xcss` documentation](/components/primitives/xcss/examples).
+
+### Media Queries
+xCSS can create responsive layouts at predefined breakpoints that are consistent with the Atlassian Design System. To enable responsive behavior, xCSS exposes the following pre-defined breakpoints:
+<MediaQueriesTable />
+
+Media queries can be applied through keys that can be imported from `@atlaskit/primitives/responsive`.
+For in depth examples on how to enable responsive behavior, please see our [primitive responsiveness documentation](/components/primitives/xcss/examples#responsiveness).
+
+The objects defined at each breakpoint behave in much the same way as a normal xCSS object, and can apply responsiveness to any CSS.
+The only limitation is that a media query can't contain another media query. This is to prevent arbitrary nesting. 
+Additionally, pseudo-selectors can't contain media queries. To use media queries and pseudos, the media query must contain the pseudo.
+
+```
+import { xcss } from '@atlaskit/primitives';
+import { media } from '@atlaskit/primitives/responsive';
+
+const someStyles = xcss({
+  // This is okay, since media queries can contain pseudos
+  [media.above.md]: {
+    ':hover': {
+      backgroundColor: 'color.background.primary.hovered'
+    }
+  },
+
+  // This is not okay, since pseudos can't contain media queries
+  ':hover': {
+    [media.above.md]: {
+      backgroundColor: 'color.background.primary.hovered'
+    }
+  },
+
+  // This is not okay, since media queries can't contain media queries
+  [media.above.md]: {
+    [media.above.xs]: {
+      backgroundColor: 'color.background.primary.hovered'
+    }
+  },
+});
+```
 
 ## Get help
 

package/dist/cjs/index.js

@@ -22,6 +22,18 @@ Object.defineProperty(exports, "Stack", {
     return _stack.default;
   }
 });
+Object.defineProperty(exports, "UNSAFE_BREAKPOINTS_CONFIG", {
+  enumerable: true,
+  get: function get() {
+    return _responsive.UNSAFE_BREAKPOINTS_CONFIG;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_media", {
+  enumerable: true,
+  get: function get() {
+    return _responsive.UNSAFE_media;
+  }
+});
 Object.defineProperty(exports, "xcss", {
   enumerable: true,
   get: function get() {
@@ -31,4 +43,5 @@ Object.defineProperty(exports, "xcss", {
 var _box = _interopRequireDefault(require("./components/box"));
 var _inline = _interopRequireDefault(require("./components/inline"));
 var _xcss = require("./xcss/xcss");
-var _stack = _interopRequireDefault(require("./components/stack"));
+var _stack = _interopRequireDefault(require("./components/stack"));
+var _responsive = require("./helpers/responsive");

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.13.0",
+	"version": "0.14.1",
 	"sideEffects": false
 }

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

@@ -4,16 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.positionMap = exports.paddingStylesMap = exports.overflowMap = exports.overflowInlineMap = exports.overflowBlockMap = exports.layerMap = exports.flexShrinkMap = exports.flexMap = exports.flexGrowMap = exports.flexDirectionMap = exports.fillMap = exports.displayMap = exports.dimensionMap = exports.borderWidthMap = exports.borderStyleMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.alignSelfMap = void 0;
+exports.textColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.paddingStylesMap = exports.layerMap = exports.fillMap = exports.dimensionMap = exports.borderWidthMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b6657585e3df6f8017d4c35bb9150e3f>>
+ * @codegen <<SignedSource::7af6097e56f7fb03635b6f8aaf121b02>>
  * @codegenId dimensions
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["dimensions"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
  */
 var dimensionMap = {
   '100%': '100%',
@@ -278,63 +278,13 @@ exports.fillMap = fillMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7787d50b7bc64a9350e4cf35ae608a79>>
+ * @codegen <<SignedSource::01a4b055c311d198921d4e000a2d7a54>>
  * @codegenId misc
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
- * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
- * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
- * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::486569d9e228265c1688d0a7122bdedc>>
- * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
- * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
- * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::77effeb1e5c39997e34b21b000a91faf>>
- * @codegenDependency ../../scripts/codegen-file-templates/flex.tsx <<SignedSource::ffa0189d14f1f00a16ec1e9f43a17ce9>>
+ * @codegenParams ["layer"]
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
- * @codegenDependency ../../scripts/codegen-file-templates/overflow.tsx <<SignedSource::ccb841f2f51525aed895c06e00f15089>>
- * @codegenDependency ../../scripts/codegen-file-templates/position.tsx <<SignedSource::8709494ef16c48046c1784a9aaec6d80>>
  */
-var alignSelfMap = {
-  center: 'center',
-  start: 'start',
-  stretch: 'stretch',
-  end: 'end',
-  baseline: 'baseline'
-};
-exports.alignSelfMap = alignSelfMap;
-var borderStyleMap = {
-  none: 'none',
-  solid: 'solid'
-};
-exports.borderStyleMap = borderStyleMap;
-var displayMap = {
-  flex: 'flex',
-  block: 'block',
-  inline: 'inline',
-  inlineBlock: 'inline-block',
-  inlineFlex: 'inline-flex',
-  grid: 'grid'
-};
-exports.displayMap = displayMap;
-var flexDirectionMap = {
-  row: 'row',
-  column: 'column'
-};
-exports.flexDirectionMap = flexDirectionMap;
-var flexGrowMap = {
-  '0': 0,
-  '1': 1
-};
-exports.flexGrowMap = flexGrowMap;
-var flexShrinkMap = {
-  '0': '0',
-  '1': 1
-};
-exports.flexShrinkMap = flexShrinkMap;
-var flexMap = {
-  '1': 1
-};
-exports.flexMap = flexMap;
 var layerMap = {
   card: 100,
   navigation: 200,
@@ -347,28 +297,6 @@ var layerMap = {
   tooltip: 800
 };
 exports.layerMap = layerMap;
-var overflowMap = {
-  auto: 'auto',
-  hidden: 'hidden'
-};
-exports.overflowMap = overflowMap;
-var overflowInlineMap = {
-  auto: 'auto',
-  hidden: 'hidden'
-};
-exports.overflowInlineMap = overflowInlineMap;
-var overflowBlockMap = {
-  auto: 'auto',
-  hidden: 'hidden'
-};
-exports.overflowBlockMap = overflowBlockMap;
-var positionMap = {
-  absolute: 'absolute',
-  fixed: 'fixed',
-  relative: 'relative',
-  static: 'static'
-};
-exports.positionMap = positionMap;
 /**
  * @codegenEnd
  */

package/dist/cjs/xcss/xcss.js

@@ -16,23 +16,15 @@ var _styleMaps = require("./style-maps.partial");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 var tokensMap = {
-  alignSelf: _styleMaps.alignSelfMap,
   backgroundColor: _styleMaps.backgroundColorMap,
   blockSize: _styleMaps.dimensionMap,
   borderColor: _styleMaps.borderColorMap,
   borderRadius: _styleMaps.borderRadiusMap,
-  borderStyle: _styleMaps.borderStyleMap,
   borderWidth: _styleMaps.borderWidthMap,
-  bottom: _styleMaps.dimensionMap,
+  bottom: _styleMaps.spaceMap,
   boxShadow: _styleMaps.shadowMap,
   color: _styleMaps.textColorMap,
   columnGap: _styleMaps.spaceMap,
-  display: _styleMaps.displayMap,
-  fill: _styleMaps.fillMap,
-  flex: _styleMaps.flexMap,
-  flexDirection: _styleMaps.flexDirectionMap,
-  flexGrow: _styleMaps.flexGrowMap,
-  flexShrink: _styleMaps.flexShrinkMap,
   gap: _styleMaps.spaceMap,
   height: _styleMaps.dimensionMap,
   inlineSize: _styleMaps.dimensionMap,
@@ -43,7 +35,14 @@ var tokensMap = {
   insetInline: _styleMaps.spaceMap,
   insetInlineEnd: _styleMaps.spaceMap,
   insetInlineStart: _styleMaps.spaceMap,
-  left: _styleMaps.dimensionMap,
+  margin: _styleMaps.spaceMap,
+  marginBlock: _styleMaps.spaceMap,
+  marginBlockEnd: _styleMaps.spaceMap,
+  marginBlockStart: _styleMaps.spaceMap,
+  marginInline: _styleMaps.spaceMap,
+  marginInlineEnd: _styleMaps.spaceMap,
+  marginInlineStart: _styleMaps.spaceMap,
+  left: _styleMaps.spaceMap,
   maxBlockSize: _styleMaps.dimensionMap,
   maxHeight: _styleMaps.dimensionMap,
   maxInlineSize: _styleMaps.dimensionMap,
@@ -55,9 +54,6 @@ var tokensMap = {
   outlineOffset: _styleMaps.spaceMap,
   outlineWidth: _styleMaps.borderWidthMap,
   outlineColor: _styleMaps.borderColorMap,
-  overflow: _styleMaps.overflowMap,
-  overflowBlock: _styleMaps.overflowBlockMap,
-  overflowInline: _styleMaps.overflowInlineMap,
   padding: _styleMaps.spaceMap,
   paddingBlock: _styleMaps.spaceMap,
   paddingBlockEnd: _styleMaps.spaceMap,
@@ -69,10 +65,9 @@ var tokensMap = {
   paddingLeft: _styleMaps.spaceMap,
   paddingRight: _styleMaps.spaceMap,
   paddingTop: _styleMaps.spaceMap,
-  position: _styleMaps.positionMap,
-  right: _styleMaps.dimensionMap,
+  right: _styleMaps.spaceMap,
   rowGap: _styleMaps.spaceMap,
-  top: _styleMaps.dimensionMap,
+  top: _styleMaps.spaceMap,
   width: _styleMaps.dimensionMap,
   zIndex: _styleMaps.layerMap
 };

package/dist/es2019/index.js

@@ -1,4 +1,5 @@
 export { default as Box } from './components/box';
 export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
-export { default as Stack } from './components/stack';
+export { default as Stack } from './components/stack';
+export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './helpers/responsive';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.13.0",
+	"version": "0.14.1",
 	"sideEffects": false
 }

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

@@ -1,11 +1,11 @@
 import { css } from '@emotion/react';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b6657585e3df6f8017d4c35bb9150e3f>>
+ * @codegen <<SignedSource::7af6097e56f7fb03635b6f8aaf121b02>>
  * @codegenId dimensions
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["dimensions"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
  */
 export const dimensionMap = {
   '100%': '100%',
@@ -260,56 +260,13 @@ export const fillMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7787d50b7bc64a9350e4cf35ae608a79>>
+ * @codegen <<SignedSource::01a4b055c311d198921d4e000a2d7a54>>
  * @codegenId misc
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
- * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
- * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
- * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::486569d9e228265c1688d0a7122bdedc>>
- * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
- * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
- * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::77effeb1e5c39997e34b21b000a91faf>>
- * @codegenDependency ../../scripts/codegen-file-templates/flex.tsx <<SignedSource::ffa0189d14f1f00a16ec1e9f43a17ce9>>
+ * @codegenParams ["layer"]
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
- * @codegenDependency ../../scripts/codegen-file-templates/overflow.tsx <<SignedSource::ccb841f2f51525aed895c06e00f15089>>
- * @codegenDependency ../../scripts/codegen-file-templates/position.tsx <<SignedSource::8709494ef16c48046c1784a9aaec6d80>>
  */
-export const alignSelfMap = {
-  center: 'center',
-  start: 'start',
-  stretch: 'stretch',
-  end: 'end',
-  baseline: 'baseline'
-};
-export const borderStyleMap = {
-  none: 'none',
-  solid: 'solid'
-};
-export const displayMap = {
-  flex: 'flex',
-  block: 'block',
-  inline: 'inline',
-  inlineBlock: 'inline-block',
-  inlineFlex: 'inline-flex',
-  grid: 'grid'
-};
-export const flexDirectionMap = {
-  row: 'row',
-  column: 'column'
-};
-export const flexGrowMap = {
-  '0': 0,
-  '1': 1
-};
-export const flexShrinkMap = {
-  '0': '0',
-  '1': 1
-};
-export const flexMap = {
-  '1': 1
-};
 export const layerMap = {
   card: 100,
   navigation: 200,
@@ -321,24 +278,6 @@ export const layerMap = {
   spotlight: 700,
   tooltip: 800
 };
-export const overflowMap = {
-  auto: 'auto',
-  hidden: 'hidden'
-};
-export const overflowInlineMap = {
-  auto: 'auto',
-  hidden: 'hidden'
-};
-export const overflowBlockMap = {
-  auto: 'auto',
-  hidden: 'hidden'
-};
-export const positionMap = {
-  absolute: 'absolute',
-  fixed: 'fixed',
-  relative: 'relative',
-  static: 'static'
-};
 /**
  * @codegenEnd
  */

package/dist/es2019/xcss/xcss.js

@@ -2,25 +2,17 @@
 import { css as cssEmotion } from '@emotion/react';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import { media } from '../helpers/responsive';
-import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, fillMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
+import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
 const tokensMap = {
-  alignSelf: alignSelfMap,
   backgroundColor: backgroundColorMap,
   blockSize: dimensionMap,
   borderColor: borderColorMap,
   borderRadius: borderRadiusMap,
-  borderStyle: borderStyleMap,
   borderWidth: borderWidthMap,
-  bottom: dimensionMap,
+  bottom: spaceMap,
   boxShadow: shadowMap,
   color: textColorMap,
   columnGap: spaceMap,
-  display: displayMap,
-  fill: fillMap,
-  flex: flexMap,
-  flexDirection: flexDirectionMap,
-  flexGrow: flexGrowMap,
-  flexShrink: flexShrinkMap,
   gap: spaceMap,
   height: dimensionMap,
   inlineSize: dimensionMap,
@@ -31,7 +23,14 @@ const tokensMap = {
   insetInline: spaceMap,
   insetInlineEnd: spaceMap,
   insetInlineStart: spaceMap,
-  left: dimensionMap,
+  margin: spaceMap,
+  marginBlock: spaceMap,
+  marginBlockEnd: spaceMap,
+  marginBlockStart: spaceMap,
+  marginInline: spaceMap,
+  marginInlineEnd: spaceMap,
+  marginInlineStart: spaceMap,
+  left: spaceMap,
   maxBlockSize: dimensionMap,
   maxHeight: dimensionMap,
   maxInlineSize: dimensionMap,
@@ -43,9 +42,6 @@ const tokensMap = {
   outlineOffset: spaceMap,
   outlineWidth: borderWidthMap,
   outlineColor: borderColorMap,
-  overflow: overflowMap,
-  overflowBlock: overflowBlockMap,
-  overflowInline: overflowInlineMap,
   padding: spaceMap,
   paddingBlock: spaceMap,
   paddingBlockEnd: spaceMap,
@@ -57,10 +53,9 @@ const tokensMap = {
   paddingLeft: spaceMap,
   paddingRight: spaceMap,
   paddingTop: spaceMap,
-  position: positionMap,
-  right: dimensionMap,
+  right: spaceMap,
   rowGap: spaceMap,
-  top: dimensionMap,
+  top: spaceMap,
   width: dimensionMap,
   zIndex: layerMap
 };

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 export { default as Box } from './components/box';
 export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
-export { default as Stack } from './components/stack';
+export { default as Stack } from './components/stack';
+export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './helpers/responsive';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.13.0",
+	"version": "0.14.1",
 	"sideEffects": false
 }