@atlaskit/primitives 0.2.1 → 0.3.0

package/dist/cjs/helpers/responsive/constants.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNSAFE_BREAKPOINTS_ORDERED_LIST = exports.UNSAFE_BREAKPOINTS_CONFIG = exports.SMALLEST_BREAKPOINT = void 0;
+/**
+ * Our internal configuration for breakpoints configuration.
+ *
+ * @experimental Unsafe for consumption outside of the design system itself.
+ */
+var UNSAFE_BREAKPOINTS_CONFIG = {
+  // mobile
+  xxs: {
+    gridItemGutter: "var(--ds-space-200, 16px)",
+    gridMargin: "var(--ds-space-200, 16px)",
+    min: 0,
+    max: 479
+  },
+  // phablet
+  xs: {
+    gridItemGutter: "var(--ds-space-200, 16px)",
+    gridMargin: "var(--ds-space-200, 16px)",
+    min: 480,
+    max: 767
+  },
+  // tablet
+  sm: {
+    gridItemGutter: "var(--ds-space-200, 16px)",
+    gridMargin: "var(--ds-space-300, 24px)",
+    min: 768,
+    max: 1023
+  },
+  // laptop desktop
+  md: {
+    gridItemGutter: "var(--ds-space-300, 24px)",
+    gridMargin: "var(--ds-space-400, 32px)",
+    min: 1024,
+    max: 1439
+  },
+  // monitor
+  lg: {
+    gridItemGutter: "var(--ds-space-400, 32px)",
+    gridMargin: "var(--ds-space-400, 32px)",
+    min: 1440,
+    max: 1767
+  },
+  // large high res
+  xl: {
+    gridItemGutter: "var(--ds-space-400, 32px)",
+    gridMargin: "var(--ds-space-500, 40px)",
+    min: 1768,
+    max: 2159
+  },
+  // extra large high res
+  xxl: {
+    gridItemGutter: "var(--ds-space-500, 40px)",
+    gridMargin: "var(--ds-space-500, 40px)",
+    min: 2160,
+    max: Number.MAX_SAFE_INTEGER
+  }
+};
+
+/**
+ * The list of breakpoints in order from smallest to largest.  You may need to clone and reverse this list if you want the opposite.
+ *
+ * This is intentional for cascading with `min-width` or `media.above`. Media queries go from lowest width to highest.
+ *
+ * @experimental Unsafe for consumption outside of the design system itself.
+ */
+exports.UNSAFE_BREAKPOINTS_CONFIG = UNSAFE_BREAKPOINTS_CONFIG;
+var UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG).sort(function (a, b) {
+  return UNSAFE_BREAKPOINTS_CONFIG[a].min - UNSAFE_BREAKPOINTS_CONFIG[b].min;
+});
+
+/**
+ * This is our smallest breakpoint with a few nuances to it:
+ * 1. It is the default value for shorthands, eg. `<GridItem span={6} />` maps to `{ [SMALLEST_BREAKPOINT]: props.span }`
+ * 2. It's omitted in `media.below` as there's nothing below `0px`.
+ *
+ * @experimental There's a chance this will change in _value_, but should only be used in a way that it will not matter if this value changes.
+ */
+exports.UNSAFE_BREAKPOINTS_ORDERED_LIST = UNSAFE_BREAKPOINTS_ORDERED_LIST;
+var SMALLEST_BREAKPOINT = UNSAFE_BREAKPOINTS_ORDERED_LIST[0];
+exports.SMALLEST_BREAKPOINT = SMALLEST_BREAKPOINT;

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UNSAFE_BREAKPOINTS_CONFIG", {
+  enumerable: true,
+  get: function get() {
+    return _constants.UNSAFE_BREAKPOINTS_CONFIG;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_BREAKPOINTS_ORDERED_LIST", {
+  enumerable: true,
+  get: function get() {
+    return _constants.UNSAFE_BREAKPOINTS_ORDERED_LIST;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_buildAboveMediaQueryCSS", {
+  enumerable: true,
+  get: function get() {
+    return _buildMediaQueryCss.UNSAFE_buildAboveMediaQueryCSS;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_buildBelowMediaQueryCSS", {
+  enumerable: true,
+  get: function get() {
+    return _buildMediaQueryCss.UNSAFE_buildBelowMediaQueryCSS;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_media", {
+  enumerable: true,
+  get: function get() {
+    return _mediaHelper.UNSAFE_media;
+  }
+});
+var _mediaHelper = require("./media-helper");
+var _buildMediaQueryCss = require("./build-media-query-css");
+var _constants = require("./constants");

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

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNSAFE_media = void 0;
+var _constants = require("./constants");
+/**
+ * To ensure min-width and max-width do both target at the same time, we subtract a value.
+ * We use a fractional value here as used in other libraries and described in @link https://www.w3.org/TR/mediaqueries-4/#mq-min-max: "…possibility of fractional viewport sizes which can occur as a result of non-integer pixel densities…"
+ */
+var BELOW_PRECISION = 0.02;
+
+/**
+ * This is the full internal version.  The import has been separated to only expose as-needed.
+ */
+var internalMedia = {
+  /**
+   * A media query to target viewports above the min width of a given breakpoint.
+   * Note that `media.above.xs` is redundant and should not be used, but it's included for programatic purposes.
+   */
+  above: {
+    /**
+     * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
+     *
+     * Eg. this is `@media (min-width: 0px)`
+     */
+    xxs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.min, "px)"),
+    xs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min, "px)"),
+    sm: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min, "px)"),
+    md: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min, "px)"),
+    lg: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min, "px)"),
+    xl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, "px)"),
+    xxl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.min, "px)")
+  },
+  below: {
+    /**
+     * A media query to target viewports below the min width of a given breakpoint.
+     * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0px)`
+     */
+    xs: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min - BELOW_PRECISION, "px)"),
+    sm: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min - BELOW_PRECISION, "px)"),
+    md: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min - BELOW_PRECISION, "px)"),
+    lg: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min - BELOW_PRECISION, "px)"),
+    xl: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min - BELOW_PRECISION, "px)"),
+    xxl: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.min - BELOW_PRECISION, "px)")
+  },
+  /**
+   * A media query to target viewports exactly between the min and max of a given breakpoint.
+   */
+  only: {
+    xxs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.max, "px)"),
+    xs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.max, "px)"),
+    sm: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.max, "px)"),
+    md: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.max, "px)"),
+    lg: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.max, "px)"),
+    xl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.max, "px)"),
+    xxl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.max, "px)")
+  }
+};
+
+/**
+ * This is an object of usable media query helpers using our internal breakpoints configuration.
+ *
+ * @experimental Unsafe for usage as the API is not finalized.
+ */
+var UNSAFE_media = {
+  above: internalMedia.above,
+  below: internalMedia.below
+};
+
+/**
+ * With these types:
+ * ```
+ * type MediaQuery = `@media (${string})`;
+ * type ResponsiveMediaObject = Record<Breakpoint, MediaQuery>;
+ * ```
+ *
+ * TODO: This `media` object as of typescript@4.9, would benefit from satisfies, eg.:
+ * ```
+ * const UNSAFE_media = { … } satisfies Record<'above' | 'only', ResponsiveMediaObject> & { below: Omit<ResponsiveMediaObject, 'xxs'> }
+ * ```
+ */
+exports.UNSAFE_media = UNSAFE_media;

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

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

package/dist/cjs/version.json

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

package/dist/es2019/components/inline.partial.js

@@ -43,56 +43,56 @@ const flexWrapStyles = css({
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
+ * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["space"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-const spaceMap = Object.fromEntries(['gap'].map(property => [property, {
+const spaceMap = {
   '0': css({
-    [property]: "var(--ds-space-0, 0px)"
+    gap: "var(--ds-space-0, 0px)"
   }),
   '025': css({
-    [property]: "var(--ds-space-025, 2px)"
+    gap: "var(--ds-space-025, 2px)"
   }),
   '050': css({
-    [property]: "var(--ds-space-050, 4px)"
+    gap: "var(--ds-space-050, 4px)"
   }),
   '075': css({
-    [property]: "var(--ds-space-075, 6px)"
+    gap: "var(--ds-space-075, 6px)"
   }),
   '100': css({
-    [property]: "var(--ds-space-100, 8px)"
+    gap: "var(--ds-space-100, 8px)"
   }),
   '150': css({
-    [property]: "var(--ds-space-150, 12px)"
+    gap: "var(--ds-space-150, 12px)"
   }),
   '200': css({
-    [property]: "var(--ds-space-200, 16px)"
+    gap: "var(--ds-space-200, 16px)"
   }),
   '250': css({
-    [property]: "var(--ds-space-250, 20px)"
+    gap: "var(--ds-space-250, 20px)"
   }),
   '300': css({
-    [property]: "var(--ds-space-300, 24px)"
+    gap: "var(--ds-space-300, 24px)"
   }),
   '400': css({
-    [property]: "var(--ds-space-400, 32px)"
+    gap: "var(--ds-space-400, 32px)"
   }),
   '500': css({
-    [property]: "var(--ds-space-500, 40px)"
+    gap: "var(--ds-space-500, 40px)"
   }),
   '600': css({
-    [property]: "var(--ds-space-600, 48px)"
+    gap: "var(--ds-space-600, 48px)"
   }),
   '800': css({
-    [property]: "var(--ds-space-800, 64px)"
+    gap: "var(--ds-space-800, 64px)"
   }),
   '1000': css({
-    [property]: "var(--ds-space-1000, 80px)"
+    gap: "var(--ds-space-1000, 80px)"
   })
-}]));
+};
 /**
  * @codegenEnd
  */
@@ -149,7 +149,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }) : rawChildren;
   const justifyContent = spread || alignInline;
   return jsx("div", {
-    css: [baseStyles, space && spaceMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
+    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/es2019/components/internal/base-box.partial.js

@@ -2,7 +2,52 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
-import { LAYERS } from '../../constants';
+import invariant from 'tiny-invariant';
+import { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST, LAYERS } from '../../constants';
+import { BOX_RESPONSIVE_PROPS } from './types';
+import { isResponsiveStyleProp, isStaticStyleProp } from './utils';
+const responsiveRules = BOX_RESPONSIVE_PROPS.reduce((mapping, cssProperty) => {
+  return Object.assign(mapping, {
+    [cssProperty]: BREAKPOINTS_LIST.reduce((configs, breakpoint) => {
+      const config = BREAKPOINTS_CONFIG[breakpoint];
+      return Object.assign(configs, {
+        [breakpoint]: css({
+          // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+          [`@media (min-width: ${config.min}px)`]: {
+            [cssProperty]: `var(--ds-box-responsive-${cssProperty}-${breakpoint})`
+          }
+        })
+      });
+    }, {
+      static: css({
+        [cssProperty]: `var(--ds-box-static-${cssProperty})`
+      })
+    })
+  });
+}, {});
+const getResponsiveVars = (propertyName, propertyValue, mapping) => {
+  if (isResponsiveStyleProp(propertyValue)) {
+    return Object.keys(propertyValue).reduce((vars, breakpoint) => ({
+      ...vars,
+      [`--ds-box-responsive-${propertyName}-${breakpoint}`]: mapping[propertyValue[breakpoint]]
+    }), {});
+  } else if (isStaticStyleProp(propertyValue)) {
+    return {
+      [`--ds-box-static-${propertyName}`]: mapping[propertyValue]
+    };
+  }
+};
+const getResponsiveStyles = (propertyName, propertyValue) => {
+  invariant(typeof responsiveRules[propertyName] !== 'undefined', `Responsive rules for "${propertyName}" have not been statically defined.`);
+  if (isResponsiveStyleProp(propertyValue)) {
+    return Object.keys(propertyValue).map(responsiveProp => responsiveRules[propertyName][responsiveProp]);
+  } else if (isStaticStyleProp(propertyValue)) {
+    return responsiveRules[propertyName].static;
+  }
+};
+
+// Without this type annotation on Box we don't get autocomplete for props due to forwardRef types
+
 /**
  * __Box__
  *
@@ -39,20 +84,21 @@ export const BaseBox = /*#__PURE__*/forwardRef(({
   paddingInlineEnd,
   height,
   width,
-  display = 'block',
+  display = displayMap.block,
   position = 'static',
   UNSAFE_style,
   testId,
   ...htmlAttributes
 }, ref) => {
   const Component = as || 'div';
+  const inlineStyles = Object.assign({}, UNSAFE_style, getResponsiveVars('borderWidth', borderWidth, borderWidthMap), getResponsiveVars('display', display, displayMap), getResponsiveVars('padding', padding, paddingMap), getResponsiveVars('paddingBlock', paddingBlock, paddingMap), getResponsiveVars('paddingBlockStart', paddingBlockStart, paddingMap), getResponsiveVars('paddingBlockEnd', paddingBlockEnd, paddingMap), getResponsiveVars('paddingInline', paddingInline, paddingMap), getResponsiveVars('paddingInlineStart', paddingInlineStart, paddingMap), getResponsiveVars('paddingInlineEnd', paddingInlineEnd, paddingMap));
   const node = jsx(Component, _extends({
-    style: UNSAFE_style,
+    style: inlineStyles,
     ref: ref
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, htmlAttributes, {
     className: className,
-    css: [baseStyles, display && displayMap[display], backgroundColor && backgroundColorMap[backgroundColor], color && textColorMap[color], flex && flexMap[flex], flexGrow && flexGrowMap[flexGrow], flexShrink && flexShrinkMap[flexShrink], alignSelf && alignSelfMap[alignSelf], overflow && overflowMap[overflow], overflowInline && overflowInlineMap[overflowInline], overflowBlock && overflowBlockMap[overflowBlock], padding && paddingMap.padding[padding], position && positionMap[position], paddingBlock && paddingMap.paddingBlock[paddingBlock], paddingBlockStart && paddingMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingMap.paddingInline[paddingInline], paddingInlineStart && paddingMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingMap.paddingInlineEnd[paddingInlineEnd], borderColor && borderColorMap[borderColor], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], borderRadius && borderRadiusMap[borderRadius], shadow && shadowMap[shadow], layer && layerMap[layer], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
+    css: [baseStyles, ...[getResponsiveStyles('borderWidth', borderWidth), getResponsiveStyles('display', display), getResponsiveStyles('padding', padding), getResponsiveStyles('paddingBlock', paddingBlock), getResponsiveStyles('paddingBlockStart', paddingBlockStart), getResponsiveStyles('paddingBlockEnd', paddingBlockEnd), getResponsiveStyles('paddingInline', paddingInline), getResponsiveStyles('paddingInlineStart', paddingInlineStart), getResponsiveStyles('paddingInlineEnd', paddingInlineEnd)], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], color && textColorMap[color], flex && flexMap[flex], flexGrow && flexGrowMap[flexGrow], flexShrink && flexShrinkMap[flexShrink], alignSelf && alignSelfMap[alignSelf], overflow && overflowMap[overflow], overflowInline && overflowInlineMap[overflowInline], overflowBlock && overflowBlockMap[overflowBlock], position && positionMap[position], borderStyle && borderStyleMap[borderStyle], borderRadius && borderRadiusMap[borderRadius], shadow && shadowMap[shadow], layer && layerMap[layer], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
     "data-testid": testId
   }), children);
   return node;
@@ -71,12 +117,9 @@ const borderStyleMap = {
   })
 };
 const borderWidthMap = {
-  'size.050': css({
-    borderWidth: "var(--ds-width-050, 1px)"
-  }),
-  'size.100': css({
-    borderWidth: "var(--ds-width-100, 2px)"
-  })
+  'size.0': "var(--ds-width-0, 0)",
+  'size.050': "var(--ds-width-050, 1px)",
+  'size.100': "var(--ds-width-100, 2px)"
 };
 const borderRadiusMap = {
   'radius.100': css({
@@ -134,21 +177,11 @@ const alignSelfMap = {
   })
 };
 const displayMap = {
-  block: css({
-    display: 'block'
-  }),
-  inline: css({
-    display: 'inline'
-  }),
-  flex: css({
-    display: 'flex'
-  }),
-  'inline-flex': css({
-    display: 'inline-flex'
-  }),
-  'inline-block': css({
-    display: 'inline-block'
-  })
+  block: 'block',
+  inline: 'inline',
+  flex: 'flex',
+  'inline-flex': 'inline-flex',
+  'inline-block': 'inline-block'
 };
 const positionMap = {
   absolute: css({
@@ -363,56 +396,28 @@ const maxHeightMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::6da0ceaa2c227230e3a93bc724ff8648>>
+ * @codegen <<SignedSource::84fd352b0e6509d380a0dcf8ad023ca2>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding"]
  * @codegenDependency ../../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-const paddingMap = Object.fromEntries(['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd'].map(property => [property, {
-  'space.0': css({
-    [property]: "var(--ds-space-0, 0px)"
-  }),
-  'space.025': css({
-    [property]: "var(--ds-space-025, 2px)"
-  }),
-  'space.050': css({
-    [property]: "var(--ds-space-050, 4px)"
-  }),
-  'space.075': css({
-    [property]: "var(--ds-space-075, 6px)"
-  }),
-  'space.100': css({
-    [property]: "var(--ds-space-100, 8px)"
-  }),
-  'space.150': css({
-    [property]: "var(--ds-space-150, 12px)"
-  }),
-  'space.200': css({
-    [property]: "var(--ds-space-200, 16px)"
-  }),
-  'space.250': css({
-    [property]: "var(--ds-space-250, 20px)"
-  }),
-  'space.300': css({
-    [property]: "var(--ds-space-300, 24px)"
-  }),
-  'space.400': css({
-    [property]: "var(--ds-space-400, 32px)"
-  }),
-  'space.500': css({
-    [property]: "var(--ds-space-500, 40px)"
-  }),
-  'space.600': css({
-    [property]: "var(--ds-space-600, 48px)"
-  }),
-  'space.800': css({
-    [property]: "var(--ds-space-800, 64px)"
-  }),
-  'space.1000': css({
-    [property]: "var(--ds-space-1000, 80px)"
-  })
-}]));
+const paddingMap = {
+  'space.0': "var(--ds-space-0, 0px)",
+  'space.025': "var(--ds-space-025, 2px)",
+  'space.050': "var(--ds-space-050, 4px)",
+  'space.075': "var(--ds-space-075, 6px)",
+  'space.100': "var(--ds-space-100, 8px)",
+  'space.150': "var(--ds-space-150, 12px)",
+  'space.200': "var(--ds-space-200, 16px)",
+  'space.250': "var(--ds-space-250, 20px)",
+  'space.300': "var(--ds-space-300, 24px)",
+  'space.400': "var(--ds-space-400, 32px)",
+  'space.500': "var(--ds-space-500, 40px)",
+  'space.600': "var(--ds-space-600, 48px)",
+  'space.800': "var(--ds-space-800, 64px)",
+  'space.1000': "var(--ds-space-1000, 80px)"
+};
 /**
  * @codegenEnd
  */

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

@@ -0,0 +1 @@
+export const BOX_RESPONSIVE_PROPS = ['borderWidth', 'display', 'padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd'];

package/dist/es2019/components/internal/utils.js

@@ -0,0 +1,2 @@
+export const isResponsiveStyleProp = propertyValue => typeof propertyValue === 'object';
+export const isStaticStyleProp = propertyValue => typeof propertyValue === 'string';

package/dist/es2019/components/stack.partial.js

@@ -37,56 +37,56 @@ const flexGrowMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
+ * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["space"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-const spaceMap = Object.fromEntries(['gap'].map(property => [property, {
+const spaceMap = {
   '0': css({
-    [property]: "var(--ds-space-0, 0px)"
+    gap: "var(--ds-space-0, 0px)"
   }),
   '025': css({
-    [property]: "var(--ds-space-025, 2px)"
+    gap: "var(--ds-space-025, 2px)"
   }),
   '050': css({
-    [property]: "var(--ds-space-050, 4px)"
+    gap: "var(--ds-space-050, 4px)"
   }),
   '075': css({
-    [property]: "var(--ds-space-075, 6px)"
+    gap: "var(--ds-space-075, 6px)"
   }),
   '100': css({
-    [property]: "var(--ds-space-100, 8px)"
+    gap: "var(--ds-space-100, 8px)"
   }),
   '150': css({
-    [property]: "var(--ds-space-150, 12px)"
+    gap: "var(--ds-space-150, 12px)"
   }),
   '200': css({
-    [property]: "var(--ds-space-200, 16px)"
+    gap: "var(--ds-space-200, 16px)"
   }),
   '250': css({
-    [property]: "var(--ds-space-250, 20px)"
+    gap: "var(--ds-space-250, 20px)"
   }),
   '300': css({
-    [property]: "var(--ds-space-300, 24px)"
+    gap: "var(--ds-space-300, 24px)"
   }),
   '400': css({
-    [property]: "var(--ds-space-400, 32px)"
+    gap: "var(--ds-space-400, 32px)"
   }),
   '500': css({
-    [property]: "var(--ds-space-500, 40px)"
+    gap: "var(--ds-space-500, 40px)"
   }),
   '600': css({
-    [property]: "var(--ds-space-600, 48px)"
+    gap: "var(--ds-space-600, 48px)"
   }),
   '800': css({
-    [property]: "var(--ds-space-800, 64px)"
+    gap: "var(--ds-space-800, 64px)"
   }),
   '1000': css({
-    [property]: "var(--ds-space-1000, 80px)"
+    gap: "var(--ds-space-1000, 80px)"
   })
-}]));
+};
 /**
  * @codegenEnd
  */
@@ -122,7 +122,7 @@ const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, ref) => {
   const justifyContent = spread || alignBlock;
   return jsx("div", {
-    css: [baseStyles, space && spaceMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/es2019/constants.js

@@ -1,3 +1,4 @@
+import { UNSAFE_Breakpoint as Breakpoint, UNSAFE_BreakpointConfig as BreakpointConfig, UNSAFE_BREAKPOINTS_CONFIG as BREAKPOINTS_CONFIG, UNSAFE_BREAKPOINTS_LIST as BREAKPOINTS_LIST } from '@atlaskit/ds-explorations';
 export const LAYERS = {
   card: 100,
   navigation: 200,
@@ -8,4 +9,5 @@ export const LAYERS = {
   flag: 600,
   spotlight: 700,
   tooltip: 800
-};
+};
+export { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST };