@atlaskit/primitives 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/primitives
 
+## 0.3.1
+
+### Patch Changes
+
+- [`114d6a73f72`](https://bitbucket.org/atlassian/atlassian-frontend/commits/114d6a73f72) - Cleanup the experimental responsive box utilizing our responsive helpers.
+
 ## 0.3.0
 
 ### Minor Changes

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

@@ -12,18 +12,18 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _constants = require("../../constants");
+var _responsive = require("../../helpers/responsive");
 var _types = require("./types");
 var _utils = require("./utils");
 var _excluded = ["as", "className", "children", "color", "backgroundColor", "shadow", "borderStyle", "borderWidth", "borderRadius", "borderColor", "layer", "flex", "flexGrow", "flexShrink", "alignSelf", "overflow", "overflowInline", "overflowBlock", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "height", "width", "display", "position", "UNSAFE_style", "testId"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var responsiveRules = _types.BOX_RESPONSIVE_PROPS.reduce(function (mapping, cssProperty) {
-  return Object.assign(mapping, (0, _defineProperty2.default)({}, cssProperty, _constants.BREAKPOINTS_LIST.reduce(function (configs, breakpoint) {
-    var config = _constants.BREAKPOINTS_CONFIG[breakpoint];
-    return Object.assign(configs, (0, _defineProperty2.default)({}, breakpoint, (0, _react2.css)((0, _defineProperty2.default)({}, "@media (min-width: ".concat(config.min, "px)"), (0, _defineProperty2.default)({}, cssProperty, "var(--ds-box-responsive-".concat(cssProperty, "-").concat(breakpoint, ")"))))));
-  }, {
+  return Object.assign(mapping, (0, _defineProperty2.default)({}, cssProperty, _objectSpread({
     static: (0, _react2.css)((0, _defineProperty2.default)({}, cssProperty, "var(--ds-box-static-".concat(cssProperty, ")")))
-  })));
+  }, (0, _responsive.UNSAFE_buildAboveMediaQueryCSS)(function (breakpoint) {
+    return (0, _defineProperty2.default)({}, cssProperty, "var(--ds-box-responsive-".concat(cssProperty, "-").concat(breakpoint, ")"));
+  }))));
 }, {});
 var getResponsiveVars = function getResponsiveVars(propertyName, propertyValue, mapping) {
   if ((0, _utils.isResponsiveStyleProp)(propertyValue)) {
@@ -37,8 +37,8 @@ var getResponsiveVars = function getResponsiveVars(propertyName, propertyValue,
 var getResponsiveStyles = function getResponsiveStyles(propertyName, propertyValue) {
   (0, _tinyInvariant.default)(typeof responsiveRules[propertyName] !== 'undefined', "Responsive rules for \"".concat(propertyName, "\" have not been statically defined."));
   if ((0, _utils.isResponsiveStyleProp)(propertyValue)) {
-    return Object.keys(propertyValue).map(function (responsiveProp) {
-      return responsiveRules[propertyName][responsiveProp];
+    return Object.keys(propertyValue).map(function (breakpoint) {
+      return responsiveRules[propertyName][breakpoint];
     });
   } else if ((0, _utils.isStaticStyleProp)(propertyValue)) {
     return responsiveRules[propertyName].static;
@@ -55,41 +55,41 @@ var getResponsiveStyles = function getResponsiveStyles(propertyName, propertyVal
  *
  * @internal
  */
-var BaseBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var as = _ref2.as,
-    className = _ref2.className,
-    children = _ref2.children,
-    color = _ref2.color,
-    backgroundColor = _ref2.backgroundColor,
-    shadow = _ref2.shadow,
-    borderStyle = _ref2.borderStyle,
-    borderWidth = _ref2.borderWidth,
-    borderRadius = _ref2.borderRadius,
-    borderColor = _ref2.borderColor,
-    layer = _ref2.layer,
-    flex = _ref2.flex,
-    flexGrow = _ref2.flexGrow,
-    flexShrink = _ref2.flexShrink,
-    alignSelf = _ref2.alignSelf,
-    overflow = _ref2.overflow,
-    overflowInline = _ref2.overflowInline,
-    overflowBlock = _ref2.overflowBlock,
-    padding = _ref2.padding,
-    paddingBlock = _ref2.paddingBlock,
-    paddingBlockStart = _ref2.paddingBlockStart,
-    paddingBlockEnd = _ref2.paddingBlockEnd,
-    paddingInline = _ref2.paddingInline,
-    paddingInlineStart = _ref2.paddingInlineStart,
-    paddingInlineEnd = _ref2.paddingInlineEnd,
-    height = _ref2.height,
-    width = _ref2.width,
-    _ref2$display = _ref2.display,
-    display = _ref2$display === void 0 ? displayMap.block : _ref2$display,
-    _ref2$position = _ref2.position,
-    position = _ref2$position === void 0 ? 'static' : _ref2$position,
-    UNSAFE_style = _ref2.UNSAFE_style,
-    testId = _ref2.testId,
-    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+var BaseBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref) {
+  var as = _ref3.as,
+    className = _ref3.className,
+    children = _ref3.children,
+    color = _ref3.color,
+    backgroundColor = _ref3.backgroundColor,
+    shadow = _ref3.shadow,
+    borderStyle = _ref3.borderStyle,
+    borderWidth = _ref3.borderWidth,
+    borderRadius = _ref3.borderRadius,
+    borderColor = _ref3.borderColor,
+    layer = _ref3.layer,
+    flex = _ref3.flex,
+    flexGrow = _ref3.flexGrow,
+    flexShrink = _ref3.flexShrink,
+    alignSelf = _ref3.alignSelf,
+    overflow = _ref3.overflow,
+    overflowInline = _ref3.overflowInline,
+    overflowBlock = _ref3.overflowBlock,
+    padding = _ref3.padding,
+    paddingBlock = _ref3.paddingBlock,
+    paddingBlockStart = _ref3.paddingBlockStart,
+    paddingBlockEnd = _ref3.paddingBlockEnd,
+    paddingInline = _ref3.paddingInline,
+    paddingInlineStart = _ref3.paddingInlineStart,
+    paddingInlineEnd = _ref3.paddingInlineEnd,
+    height = _ref3.height,
+    width = _ref3.width,
+    _ref3$display = _ref3.display,
+    display = _ref3$display === void 0 ? displayMap.block : _ref3$display,
+    _ref3$position = _ref3.position,
+    position = _ref3$position === void 0 ? 'static' : _ref3$position,
+    UNSAFE_style = _ref3.UNSAFE_style,
+    testId = _ref3.testId,
+    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
   var Component = as || 'div';
   var 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));
   var node = (0, _react2.jsx)(Component, (0, _extends2.default)({

package/dist/cjs/constants.js

@@ -3,20 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "BREAKPOINTS_CONFIG", {
-  enumerable: true,
-  get: function get() {
-    return _dsExplorations.UNSAFE_BREAKPOINTS_CONFIG;
-  }
-});
-Object.defineProperty(exports, "BREAKPOINTS_LIST", {
-  enumerable: true,
-  get: function get() {
-    return _dsExplorations.UNSAFE_BREAKPOINTS_LIST;
-  }
-});
 exports.LAYERS = void 0;
-var _dsExplorations = require("@atlaskit/ds-explorations");
 var LAYERS = {
   card: 100,
   navigation: 200,

package/dist/cjs/version.json

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

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

@@ -3,26 +3,20 @@ import _extends from "@babel/runtime/helpers/extends";
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
-import { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST, LAYERS } from '../../constants';
+import { LAYERS } from '../../constants';
+import { UNSAFE_buildAboveMediaQueryCSS } from '../../helpers/responsive';
 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})`
-          }
-        })
-      });
-    }, {
+    [cssProperty]: {
       static: css({
         [cssProperty]: `var(--ds-box-static-${cssProperty})`
-      })
-    })
+      }),
+      ...UNSAFE_buildAboveMediaQueryCSS(breakpoint => ({
+        [cssProperty]: `var(--ds-box-responsive-${cssProperty}-${breakpoint})`
+      }))
+    }
   });
 }, {});
 const getResponsiveVars = (propertyName, propertyValue, mapping) => {
@@ -40,7 +34,7 @@ const getResponsiveVars = (propertyName, propertyValue, mapping) => {
 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]);
+    return Object.keys(propertyValue).map(breakpoint => responsiveRules[propertyName][breakpoint]);
   } else if (isStaticStyleProp(propertyValue)) {
     return responsiveRules[propertyName].static;
   }

package/dist/es2019/constants.js

@@ -1,4 +1,3 @@
-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,
@@ -9,5 +8,4 @@ export const LAYERS = {
   flag: 600,
   spotlight: 700,
   tooltip: 800
-};
-export { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST };
+};

package/dist/es2019/version.json

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

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

@@ -8,16 +8,16 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
-import { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST, LAYERS } from '../../constants';
+import { LAYERS } from '../../constants';
+import { UNSAFE_buildAboveMediaQueryCSS } from '../../helpers/responsive';
 import { BOX_RESPONSIVE_PROPS } from './types';
 import { isResponsiveStyleProp, isStaticStyleProp } from './utils';
 var responsiveRules = BOX_RESPONSIVE_PROPS.reduce(function (mapping, cssProperty) {
-  return Object.assign(mapping, _defineProperty({}, cssProperty, BREAKPOINTS_LIST.reduce(function (configs, breakpoint) {
-    var config = BREAKPOINTS_CONFIG[breakpoint];
-    return Object.assign(configs, _defineProperty({}, breakpoint, css(_defineProperty({}, "@media (min-width: ".concat(config.min, "px)"), _defineProperty({}, cssProperty, "var(--ds-box-responsive-".concat(cssProperty, "-").concat(breakpoint, ")"))))));
-  }, {
+  return Object.assign(mapping, _defineProperty({}, cssProperty, _objectSpread({
     static: css(_defineProperty({}, cssProperty, "var(--ds-box-static-".concat(cssProperty, ")")))
-  })));
+  }, UNSAFE_buildAboveMediaQueryCSS(function (breakpoint) {
+    return _defineProperty({}, cssProperty, "var(--ds-box-responsive-".concat(cssProperty, "-").concat(breakpoint, ")"));
+  }))));
 }, {});
 var getResponsiveVars = function getResponsiveVars(propertyName, propertyValue, mapping) {
   if (isResponsiveStyleProp(propertyValue)) {
@@ -31,8 +31,8 @@ var getResponsiveVars = function getResponsiveVars(propertyName, propertyValue,
 var getResponsiveStyles = function getResponsiveStyles(propertyName, propertyValue) {
   invariant(typeof responsiveRules[propertyName] !== 'undefined', "Responsive rules for \"".concat(propertyName, "\" have not been statically defined."));
   if (isResponsiveStyleProp(propertyValue)) {
-    return Object.keys(propertyValue).map(function (responsiveProp) {
-      return responsiveRules[propertyName][responsiveProp];
+    return Object.keys(propertyValue).map(function (breakpoint) {
+      return responsiveRules[propertyName][breakpoint];
     });
   } else if (isStaticStyleProp(propertyValue)) {
     return responsiveRules[propertyName].static;
@@ -49,41 +49,41 @@ var getResponsiveStyles = function getResponsiveStyles(propertyName, propertyVal
  *
  * @internal
  */
-export var BaseBox = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var as = _ref2.as,
-    className = _ref2.className,
-    children = _ref2.children,
-    color = _ref2.color,
-    backgroundColor = _ref2.backgroundColor,
-    shadow = _ref2.shadow,
-    borderStyle = _ref2.borderStyle,
-    borderWidth = _ref2.borderWidth,
-    borderRadius = _ref2.borderRadius,
-    borderColor = _ref2.borderColor,
-    layer = _ref2.layer,
-    flex = _ref2.flex,
-    flexGrow = _ref2.flexGrow,
-    flexShrink = _ref2.flexShrink,
-    alignSelf = _ref2.alignSelf,
-    overflow = _ref2.overflow,
-    overflowInline = _ref2.overflowInline,
-    overflowBlock = _ref2.overflowBlock,
-    padding = _ref2.padding,
-    paddingBlock = _ref2.paddingBlock,
-    paddingBlockStart = _ref2.paddingBlockStart,
-    paddingBlockEnd = _ref2.paddingBlockEnd,
-    paddingInline = _ref2.paddingInline,
-    paddingInlineStart = _ref2.paddingInlineStart,
-    paddingInlineEnd = _ref2.paddingInlineEnd,
-    height = _ref2.height,
-    width = _ref2.width,
-    _ref2$display = _ref2.display,
-    display = _ref2$display === void 0 ? displayMap.block : _ref2$display,
-    _ref2$position = _ref2.position,
-    position = _ref2$position === void 0 ? 'static' : _ref2$position,
-    UNSAFE_style = _ref2.UNSAFE_style,
-    testId = _ref2.testId,
-    htmlAttributes = _objectWithoutProperties(_ref2, _excluded);
+export var BaseBox = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var as = _ref3.as,
+    className = _ref3.className,
+    children = _ref3.children,
+    color = _ref3.color,
+    backgroundColor = _ref3.backgroundColor,
+    shadow = _ref3.shadow,
+    borderStyle = _ref3.borderStyle,
+    borderWidth = _ref3.borderWidth,
+    borderRadius = _ref3.borderRadius,
+    borderColor = _ref3.borderColor,
+    layer = _ref3.layer,
+    flex = _ref3.flex,
+    flexGrow = _ref3.flexGrow,
+    flexShrink = _ref3.flexShrink,
+    alignSelf = _ref3.alignSelf,
+    overflow = _ref3.overflow,
+    overflowInline = _ref3.overflowInline,
+    overflowBlock = _ref3.overflowBlock,
+    padding = _ref3.padding,
+    paddingBlock = _ref3.paddingBlock,
+    paddingBlockStart = _ref3.paddingBlockStart,
+    paddingBlockEnd = _ref3.paddingBlockEnd,
+    paddingInline = _ref3.paddingInline,
+    paddingInlineStart = _ref3.paddingInlineStart,
+    paddingInlineEnd = _ref3.paddingInlineEnd,
+    height = _ref3.height,
+    width = _ref3.width,
+    _ref3$display = _ref3.display,
+    display = _ref3$display === void 0 ? displayMap.block : _ref3$display,
+    _ref3$position = _ref3.position,
+    position = _ref3$position === void 0 ? 'static' : _ref3$position,
+    UNSAFE_style = _ref3.UNSAFE_style,
+    testId = _ref3.testId,
+    htmlAttributes = _objectWithoutProperties(_ref3, _excluded);
   var Component = as || 'div';
   var 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));
   var node = jsx(Component, _extends({

package/dist/esm/constants.js

@@ -1,4 +1,3 @@
-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 var LAYERS = {
   card: 100,
   navigation: 200,
@@ -9,5 +8,4 @@ export var LAYERS = {
   flag: 600,
   spotlight: 700,
   tooltip: 800
-};
-export { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST };
+};

package/dist/esm/version.json

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

package/dist/types/components/internal/base-box.partial.d.ts

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement, ReactNode } from 'react';
-import { Breakpoint, Layer } from '../../constants';
+import { Layer } from '../../constants';
+import { ResponsiveObject } from '../../helpers/responsive';
 import type { BasePrimitiveProps } from '../types';
 export declare type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'style'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
 declare type BaseBoxPropsFoundation<T extends ElementType> = {
@@ -43,7 +44,7 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
     /**
      * Defines border width.
      */
-    borderWidth?: BorderWidth | Partial<Record<Breakpoint, BorderWidth>>;
+    borderWidth?: BorderWidth | ResponsiveObject<BorderWidth>;
     /**
      * Token representing border color with a fallback.
      */
@@ -94,37 +95,37 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
      * @see paddingBlock
      * @see paddingInline
      */
-    padding?: Padding | Partial<Record<Breakpoint, Padding>>;
+    padding?: Padding | ResponsiveObject<Padding>;
     /**
      * Tokens representing CSS shorthand `paddingBlock`.
      *
      * @see paddingBlockStart
      * @see paddingBlockEnd
      */
-    paddingBlock?: PaddingBlock | Partial<Record<Breakpoint, PaddingBlock>>;
+    paddingBlock?: PaddingBlock | ResponsiveObject<PaddingBlock>;
     /**
      * Tokens representing CSS `paddingBlockStart`.
      */
-    paddingBlockStart?: PaddingBlockStart | Partial<Record<Breakpoint, PaddingBlockStart>>;
+    paddingBlockStart?: PaddingBlockStart | ResponsiveObject<PaddingBlockStart>;
     /**
      * Tokens representing CSS `paddingBlockEnd`.
      */
-    paddingBlockEnd?: PaddingBlockEnd | Partial<Record<Breakpoint, PaddingBlockEnd>>;
+    paddingBlockEnd?: PaddingBlockEnd | ResponsiveObject<PaddingBlockEnd>;
     /**
      * Tokens representing CSS shorthand `paddingInline`.
      *
      * @see paddingInlineStart
      * @see paddingInlineEnd
      */
-    paddingInline?: PaddingInline | Partial<Record<Breakpoint, PaddingInline>>;
+    paddingInline?: PaddingInline | ResponsiveObject<PaddingInline>;
     /**
      * Tokens representing CSS `paddingInlineStart`.
      */
-    paddingInlineStart?: PaddingInlineStart | Partial<Record<Breakpoint, PaddingInlineStart>>;
+    paddingInlineStart?: PaddingInlineStart | ResponsiveObject<PaddingInlineStart>;
     /**
      * Tokens representing CSS `paddingInlineEnd`.
      */
-    paddingInlineEnd?: PaddingInlineEnd | Partial<Record<Breakpoint, PaddingInlineEnd>>;
+    paddingInlineEnd?: PaddingInlineEnd | ResponsiveObject<PaddingInlineEnd>;
     /**
      * Token representing width.
      * @experimental The existing tokens will be replaced to better reflect dimensions.
@@ -138,7 +139,7 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
     /**
      * Defines display type and layout. Defaults to `block`.
      */
-    display?: Display | Partial<Record<Breakpoint, Display>>;
+    display?: Display | ResponsiveObject<Display>;
     /**
      * CSS position property.
      */

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

@@ -1,6 +1,8 @@
 import { SerializedStyles } from '@emotion/react';
-import { Breakpoint } from '../../constants';
+import { ResponsiveCSSObject, ResponsiveObject } from '../../helpers/responsive';
 export declare const BOX_RESPONSIVE_PROPS: readonly ["borderWidth", "display", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd"];
 export declare type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
-export declare type BreakpointIndexedStyle = Record<Breakpoint | 'static', SerializedStyles>;
-export declare type GenericPropertyValue = string | Partial<Record<Breakpoint, string>> | undefined;
+export declare type StaticResponsiveCSSObject = ResponsiveCSSObject & {
+    static: SerializedStyles;
+};
+export declare type GenericPropertyValue = string | ResponsiveObject<string> | undefined;

package/dist/types/constants.d.ts

@@ -1,4 +1,3 @@
-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 declare const LAYERS: {
     readonly card: 100;
     readonly navigation: 200;
@@ -11,4 +10,3 @@ export declare const LAYERS: {
     readonly tooltip: 800;
 };
 export declare type Layer = keyof typeof LAYERS;
-export { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST, type Breakpoint, type BreakpointConfig, };

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

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import { SerializedStyles } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
 /**
  * The breakpoints we have for responsiveness.
@@ -23,7 +23,7 @@ export declare type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
  * return <div css={setMarginBreakpoints.map(breakpoint => marginMediaQueries[breakpoint])} />
  * ```
  */
-export declare type ResponsiveCSSObject = ResponsiveObject<ReturnType<typeof css>>;
+export declare type ResponsiveCSSObject = ResponsiveObject<SerializedStyles>;
 /**
  * Our internal breakpoint config used to build media queries and define attributes for certain components.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -38,7 +38,6 @@
     "./responsive": "./src/helpers/responsive/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/ds-explorations": "*",
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/report.api.md

@@ -26,7 +26,6 @@ import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { SerializedStyles } from '@emotion/react';
-import { UNSAFE_Breakpoint } from '@atlaskit/ds-explorations';
 
 // @public (undocumented)
 type AlignBlock = 'baseline' | 'center' | 'end' | 'start';
@@ -138,7 +137,7 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
   backgroundColor?: BackgroundColor;
   shadow?: Shadow;
   borderStyle?: BorderStyle;
-  borderWidth?: BorderWidth | Partial<Record<UNSAFE_Breakpoint, BorderWidth>>;
+  borderWidth?: BorderWidth | ResponsiveObject<BorderWidth>;
   borderColor?: BorderColor;
   borderRadius?: BorderRadius;
   layer?: Layer;
@@ -149,28 +148,18 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
   overflow?: Overflow;
   overflowInline?: OverflowInline;
   overflowBlock?: OverflowBlock;
-  padding?: Padding | Partial<Record<UNSAFE_Breakpoint, Padding>>;
-  paddingBlock?:
-    | PaddingBlock
-    | Partial<Record<UNSAFE_Breakpoint, PaddingBlock>>;
-  paddingBlockStart?:
-    | PaddingBlockStart
-    | Partial<Record<UNSAFE_Breakpoint, PaddingBlockStart>>;
-  paddingBlockEnd?:
-    | PaddingBlockEnd
-    | Partial<Record<UNSAFE_Breakpoint, PaddingBlockEnd>>;
-  paddingInline?:
-    | PaddingInline
-    | Partial<Record<UNSAFE_Breakpoint, PaddingInline>>;
+  padding?: Padding | ResponsiveObject<Padding>;
+  paddingBlock?: PaddingBlock | ResponsiveObject<PaddingBlock>;
+  paddingBlockStart?: PaddingBlockStart | ResponsiveObject<PaddingBlockStart>;
+  paddingBlockEnd?: PaddingBlockEnd | ResponsiveObject<PaddingBlockEnd>;
+  paddingInline?: PaddingInline | ResponsiveObject<PaddingInline>;
   paddingInlineStart?:
     | PaddingInlineStart
-    | Partial<Record<UNSAFE_Breakpoint, PaddingInlineStart>>;
-  paddingInlineEnd?:
-    | PaddingInlineEnd
-    | Partial<Record<UNSAFE_Breakpoint, PaddingInlineEnd>>;
+    | ResponsiveObject<PaddingInlineStart>;
+  paddingInlineEnd?: PaddingInlineEnd | ResponsiveObject<PaddingInlineEnd>;
   width?: Width;
   height?: Height;
-  display?: Display | Partial<Record<UNSAFE_Breakpoint, Display>>;
+  display?: Display | ResponsiveObject<Display>;
   position?: Position;
   ref?: ComponentPropsWithRef<T>['ref'];
 };
@@ -275,6 +264,9 @@ export type BoxProps<T extends ElementType = 'div'> = Omit<
 // @public (undocumented)
 type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
 
+// @public
+type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
+
 // @public
 type CustomStyles = Pick<
   CSSProperties,
@@ -487,6 +479,9 @@ type PublicBoxPropsBase = {
   customStyles?: CustomStyles;
 };
 
+// @public
+type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
+
 // @public (undocumented)
 type Shadow = keyof typeof shadowMap;
 

package/tmp/api-report-tmp.d.ts

@@ -15,7 +15,6 @@ import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { SerializedStyles } from '@emotion/react';
-import { UNSAFE_Breakpoint } from '@atlaskit/ds-explorations';
 
 // @public (undocumented)
 type AlignBlock = 'baseline' | 'center' | 'end' | 'start';
@@ -122,7 +121,7 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
     backgroundColor?: BackgroundColor;
     shadow?: Shadow;
     borderStyle?: BorderStyle;
-    borderWidth?: BorderWidth | Partial<Record<UNSAFE_Breakpoint, BorderWidth>>;
+    borderWidth?: BorderWidth | ResponsiveObject<BorderWidth>;
     borderColor?: BorderColor;
     borderRadius?: BorderRadius;
     layer?: Layer;
@@ -133,16 +132,16 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
     overflow?: Overflow;
     overflowInline?: OverflowInline;
     overflowBlock?: OverflowBlock;
-    padding?: Padding | Partial<Record<UNSAFE_Breakpoint, Padding>>;
-    paddingBlock?: PaddingBlock | Partial<Record<UNSAFE_Breakpoint, PaddingBlock>>;
-    paddingBlockStart?: PaddingBlockStart | Partial<Record<UNSAFE_Breakpoint, PaddingBlockStart>>;
-    paddingBlockEnd?: PaddingBlockEnd | Partial<Record<UNSAFE_Breakpoint, PaddingBlockEnd>>;
-    paddingInline?: PaddingInline | Partial<Record<UNSAFE_Breakpoint, PaddingInline>>;
-    paddingInlineStart?: PaddingInlineStart | Partial<Record<UNSAFE_Breakpoint, PaddingInlineStart>>;
-    paddingInlineEnd?: PaddingInlineEnd | Partial<Record<UNSAFE_Breakpoint, PaddingInlineEnd>>;
+    padding?: Padding | ResponsiveObject<Padding>;
+    paddingBlock?: PaddingBlock | ResponsiveObject<PaddingBlock>;
+    paddingBlockStart?: PaddingBlockStart | ResponsiveObject<PaddingBlockStart>;
+    paddingBlockEnd?: PaddingBlockEnd | ResponsiveObject<PaddingBlockEnd>;
+    paddingInline?: PaddingInline | ResponsiveObject<PaddingInline>;
+    paddingInlineStart?: PaddingInlineStart | ResponsiveObject<PaddingInlineStart>;
+    paddingInlineEnd?: PaddingInlineEnd | ResponsiveObject<PaddingInlineEnd>;
     width?: Width;
     height?: Height;
-    display?: Display | Partial<Record<UNSAFE_Breakpoint, Display>>;
+    display?: Display | ResponsiveObject<Display>;
     position?: Position;
     ref?: ComponentPropsWithRef<T>['ref'];
 };
@@ -228,6 +227,9 @@ export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'UNS
 // @public (undocumented)
 type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
 
+// @public
+type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
+
 // @public
 type CustomStyles = Pick<CSSProperties, 'flex' | 'flexBasis' | 'float' | 'height' | 'insetBlockStart' | 'insetInlineEnd' | 'insetInlineStart' | 'margin' | 'marginBlock' | 'marginBlockEnd' | 'marginBlockStart' | 'marginInline' | 'marginInlineEnd' | 'marginInlineStart' | 'maxHeight' | 'maxWidth' | 'minHeight' | 'minWidth' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'width'>;
 
@@ -413,6 +415,9 @@ type PublicBoxPropsBase = {
     customStyles?: CustomStyles;
 };
 
+// @public
+type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
+
 // @public (undocumented)
 type Shadow = keyof typeof shadowMap;