@atlaskit/ds-explorations 2.4.0 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/ds-explorations
 
+## 3.0.0
+
+### Major Changes
+
+- [#41301](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41301) [`5f80fdb81a0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f80fdb81a0) - Remove Box, Inline, Stack components. These components are deprecated in favour of @atlaskit/primitives.
+
 ## 2.4.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -4,38 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "UNSAFE_Box", {
-  enumerable: true,
-  get: function get() {
-    return _box.default;
-  }
-});
-Object.defineProperty(exports, "UNSAFE_Inline", {
-  enumerable: true,
-  get: function get() {
-    return _inline.default;
-  }
-});
 Object.defineProperty(exports, "UNSAFE_InteractionSurface", {
   enumerable: true,
   get: function get() {
     return _interactionSurface.default;
   }
 });
-Object.defineProperty(exports, "UNSAFE_Stack", {
-  enumerable: true,
-  get: function get() {
-    return _stack.default;
-  }
-});
 Object.defineProperty(exports, "UNSAFE_Text", {
   enumerable: true,
   get: function get() {
     return _text.default;
   }
 });
-var _box = _interopRequireDefault(require("./components/box.partial"));
 var _text = _interopRequireDefault(require("./components/text.partial"));
-var _inline = _interopRequireDefault(require("./components/inline.partial"));
-var _stack = _interopRequireDefault(require("./components/stack.partial"));
 var _interactionSurface = _interopRequireDefault(require("./components/interaction-surface.partial"));

package/dist/es2019/index.js

@@ -1,5 +1,2 @@
-export { default as UNSAFE_Box } from './components/box.partial';
 export { default as UNSAFE_Text } from './components/text.partial';
-export { default as UNSAFE_Inline } from './components/inline.partial';
-export { default as UNSAFE_Stack } from './components/stack.partial';
 export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';

package/dist/esm/index.js

@@ -1,5 +1,2 @@
-export { default as UNSAFE_Box } from './components/box.partial';
 export { default as UNSAFE_Text } from './components/text.partial';
-export { default as UNSAFE_Inline } from './components/inline.partial';
-export { default as UNSAFE_Stack } from './components/stack.partial';
 export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';

package/dist/types/components/surface-provider.d.ts

@@ -4,7 +4,7 @@
  *
  * A surface context provides context information on the current background (if set).
  */
-export declare const SurfaceContext: import("react").Context<"color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.overlay" | "elevation.surface.raised" | "elevation.surface.sunken" | "disabled" | "input" | "inverse.subtle" | "neutral" | "neutral.subtle" | "neutral.bold" | "selected" | "selected.bold" | "brand.subtlest" | "brand.bold" | "brand.boldest" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold">;
+export declare const SurfaceContext: import("react").Context<"color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current">;
 /**
  * __useSurface__
  *
@@ -12,4 +12,4 @@ export declare const SurfaceContext: import("react").Context<"color.blanket" | "
  *
  * @see SurfaceContext
  */
-export declare const useSurface: () => "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.overlay" | "elevation.surface.raised" | "elevation.surface.sunken" | "disabled" | "input" | "inverse.subtle" | "neutral" | "neutral.subtle" | "neutral.bold" | "selected" | "selected.bold" | "brand.subtlest" | "brand.bold" | "brand.boldest" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold";
+export declare const useSurface: () => "color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current";

package/dist/types/index.d.ts

@@ -1,9 +1,3 @@
-export { default as UNSAFE_Box } from './components/box.partial';
 export { default as UNSAFE_Text } from './components/text.partial';
-export { default as UNSAFE_Inline } from './components/inline.partial';
-export { default as UNSAFE_Stack } from './components/stack.partial';
 export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
-export type { BoxProps as UNSAFE_BoxProps } from './components/box.partial';
 export type { TextProps as UNSAFE_TextProps } from './components/text.partial';
-export type { InlineProps as UNSAFE_InlineProps } from './components/inline.partial';
-export type { StackProps as UNSAFE_StackProps } from './components/stack.partial';

package/dist/types-ts4.5/components/surface-provider.d.ts

@@ -4,7 +4,7 @@
  *
  * A surface context provides context information on the current background (if set).
  */
-export declare const SurfaceContext: import("react").Context<"color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.overlay" | "elevation.surface.raised" | "elevation.surface.sunken" | "disabled" | "input" | "inverse.subtle" | "neutral" | "neutral.subtle" | "neutral.bold" | "selected" | "selected.bold" | "brand.subtlest" | "brand.bold" | "brand.boldest" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold">;
+export declare const SurfaceContext: import("react").Context<"color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current">;
 /**
  * __useSurface__
  *
@@ -12,4 +12,4 @@ export declare const SurfaceContext: import("react").Context<"color.blanket" | "
  *
  * @see SurfaceContext
  */
-export declare const useSurface: () => "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.overlay" | "elevation.surface.raised" | "elevation.surface.sunken" | "disabled" | "input" | "inverse.subtle" | "neutral" | "neutral.subtle" | "neutral.bold" | "selected" | "selected.bold" | "brand.subtlest" | "brand.bold" | "brand.boldest" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold";
+export declare const useSurface: () => "color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current";

package/dist/types-ts4.5/index.d.ts

@@ -1,9 +1,3 @@
-export { default as UNSAFE_Box } from './components/box.partial';
 export { default as UNSAFE_Text } from './components/text.partial';
-export { default as UNSAFE_Inline } from './components/inline.partial';
-export { default as UNSAFE_Stack } from './components/stack.partial';
 export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
-export type { BoxProps as UNSAFE_BoxProps } from './components/box.partial';
 export type { TextProps as UNSAFE_TextProps } from './components/text.partial';
-export type { InlineProps as UNSAFE_InlineProps } from './components/inline.partial';
-export type { StackProps as UNSAFE_StackProps } from './components/stack.partial';

package/examples/02-text-advanced.tsx

@@ -1,37 +1,28 @@
 import React from 'react';
 
-import Inline from '@atlaskit/primitives/inline';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
 
-import Box from '../src/components/box.partial';
 import Text from '../src/components/text.partial';
 
+const boxStyles = xcss({
+  display: 'flex',
+  paddingBlock: 'space.400',
+  paddingInline: 'space.400',
+  alignItems: 'center',
+});
+
 export default () => {
   return (
     <Inline space="space.100">
-      <Box
-        paddingBlock="space.400"
-        paddingInline="space.400"
-        alignItems="center"
-        backgroundColor="information"
-      >
+      <Box xcss={boxStyles} backgroundColor="color.background.information">
         <Text>
           <Text>Text that deletes its redundant wrapping</Text>
         </Text>
       </Box>
-      <Box
-        paddingBlock="space.400"
-        paddingInline="space.400"
-        alignItems="center"
-        backgroundColor="information"
-      >
+      <Box xcss={boxStyles} backgroundColor="color.background.information">
         <Text fontWeight="semibold">Text on information</Text>
       </Box>
-      <Box
-        paddingBlock="space.400"
-        paddingInline="space.400"
-        alignItems="center"
-        backgroundColor="brand.bold"
-      >
+      <Box xcss={boxStyles} backgroundColor="color.background.brand.bold">
         <Text fontWeight="semibold">Text on brand bold</Text>
       </Box>
     </Inline>

package/examples/02-text.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
 
 import Heading from '@atlaskit/heading';
-import Inline from '@atlaskit/primitives/inline';
-import Stack from '@atlaskit/primitives/stack';
+import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
 
-import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '../src';
+import { UNSAFE_Text as Text } from '../src';
+
+const fixedWidthStyles = xcss({ display: 'flex', width: '200px' });
+
+const lineHeightContainerStyles = xcss({
+  display: 'inline-flex',
+});
 
 export default () => {
   return (
@@ -13,7 +18,7 @@ export default () => {
         Text examples
       </Heading>
       <Stack space="space.200">
-        <Box display="block">
+        <Box>
           <Heading level="h300">Font size</Heading>
           <Inline space="space.200" testId="font-sizes">
             {(
@@ -34,7 +39,7 @@ export default () => {
             ))}
           </Inline>
         </Box>
-        <Box display="block">
+        <Box>
           <Heading level="h300" as="h4">
             Font weight
           </Heading>
@@ -48,7 +53,7 @@ export default () => {
             )}
           </Inline>
         </Box>
-        <Box display="block">
+        <Box>
           <Heading level="h300" as="h4">
             Line height
           </Heading>
@@ -65,15 +70,15 @@ export default () => {
             ).map((lineHeight) => (
               <Box
                 key={lineHeight}
-                display="inlineFlex"
-                backgroundColor="neutral"
+                xcss={lineHeightContainerStyles}
+                backgroundColor="color.background.neutral"
               >
                 <Text lineHeight={lineHeight}>lineHeight {lineHeight}</Text>
               </Box>
             ))}
           </Inline>
         </Box>
-        <Box display="block">
+        <Box>
           <Heading level="h300" as="h4">
             Testing
           </Heading>
@@ -92,7 +97,7 @@ export default () => {
             >
               Text with various props
             </Text>
-            <Box UNSAFE_style={{ width: '200px' }}>
+            <Box xcss={fixedWidthStyles}>
               <Text shouldTruncate>Long truncated text that is cut off.</Text>
             </Box>
           </Stack>

package/examples/06-section-message.tsx

@@ -6,14 +6,12 @@ import Button from '@atlaskit/button';
 import __noop from '@atlaskit/ds-lib/noop';
 import Heading from '@atlaskit/heading';
 import InfoIcon from '@atlaskit/icon/glyph/info';
-import Inline from '@atlaskit/primitives/inline';
-import Stack from '@atlaskit/primitives/stack';
+import { Box, Inline, Stack } from '@atlaskit/primitives';
 import SectionMessage, {
   SectionMessageAction,
 } from '@atlaskit/section-message';
 import { token } from '@atlaskit/tokens';
 
-import { UNSAFE_Box as Box } from '../src';
 import Text from '../src/components/text.partial';
 
 export default () => {
@@ -22,7 +20,7 @@ export default () => {
       <Box
         paddingBlock="space.200"
         paddingInline="space.200"
-        backgroundColor="information"
+        backgroundColor="color.background.information"
       >
         <Inline space="space.200">
           <InfoIcon

package/examples/07-comment.tsx

@@ -2,10 +2,8 @@
 import { jsx } from '@emotion/react';
 
 import Lozenge from '@atlaskit/lozenge';
-import Inline from '@atlaskit/primitives/inline';
-import Stack from '@atlaskit/primitives/stack';
+import { Box, Inline, Stack } from '@atlaskit/primitives';
 
-import { UNSAFE_Box as Box } from '../src';
 import Text from '../src/components/text.partial';
 
 const Author = ({ children }: any) => {

package/examples/08-lozenge.tsx

@@ -2,18 +2,22 @@
 import { jsx } from '@emotion/react';
 
 import Lozenge from '@atlaskit/lozenge';
-import Inline from '@atlaskit/primitives/inline';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
 
-import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '../src';
+import { UNSAFE_Text as Text } from '../src';
+
+const boxStyles = xcss({
+  borderRadius: 'border.radius',
+});
 
 export default () => {
   return (
     <Inline space="space.200">
       <Lozenge>Default</Lozenge>
       <Box
-        backgroundColor="neutral"
-        borderRadius="normal"
         as="span"
+        xcss={boxStyles}
+        backgroundColor="color.background.neutral"
         paddingInline="space.050"
       >
         <Text

package/examples/99-interactions.tsx

@@ -1,42 +1,55 @@
 /** @jsx jsx */
 import { Fragment } from 'react';
 
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 
 import Button from '@atlaskit/button';
 import { Code } from '@atlaskit/code';
 import FocusRing from '@atlaskit/focus-ring';
 import Heading from '@atlaskit/heading';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
-import Inline from '@atlaskit/primitives/inline';
-import Stack from '@atlaskit/primitives/stack';
+import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
-import { B200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
 import {
-  UNSAFE_Box as Box,
   UNSAFE_InteractionSurface as InteractionSurface,
   UNSAFE_Text as Text,
 } from '../src';
 
-const fieldsetStyles = css({
+const containerStyles = xcss({
+  width: 'size.500',
+});
+
+const fieldsetStyles = xcss({
   flex: '1 1 100%',
+  borderStyle: 'solid',
+  borderWidth: 'border.width',
+  borderColor: 'color.border',
   ':hover': {
-    backgroundColor: token('color.background.input.hovered', '#bbb'),
+    backgroundColor: 'color.background.input.hovered',
   },
   ':invalid': {
-    borderColor: token('color.border.danger', 'red'),
+    borderColor: 'color.border.danger',
+  },
+  ':focus': {
+    backgroundColor: 'color.background.input',
+    borderColor: 'color.border.focused',
   },
-  ':focus, :focus-within': {
-    backgroundColor: token('color.background.input', '#FAFBFC'),
-    borderColor: token('color.border.focused', B200),
+  ':focus-within': {
+    backgroundColor: 'color.background.input',
+    borderColor: 'color.border.focused',
   },
 });
 
+const focusRingBoxStyles = xcss({
+  borderRadius: 'border.radius',
+  position: 'relative',
+});
+
 export default () => {
   return (
-    <Box width="size.500" padding="space.100" testId="all">
+    <Box xcss={containerStyles} padding="space.100" testId="all">
       <Stack space="space.200">
         <Heading level="h400">Current ADS Buttons</Heading>
         <Inline space="space.200">
@@ -48,13 +61,18 @@ export default () => {
           Buttons with <Code>InteractionSurface</Code>
         </Heading>
         <Inline space="space.200" testId="buttons">
-          {(['brand.bold', 'neutral', 'warning.bold'] as const).map((app) => (
+          {(
+            [
+              'color.background.brand.bold',
+              'color.background.neutral',
+              'color.background.warning.bold',
+            ] as const
+          ).map((app) => (
             <FocusRing key={app}>
               <Box
                 as="button"
                 onClick={() => console.log('hello')}
-                borderRadius="normal"
-                position="relative"
+                xcss={focusRingBoxStyles}
                 paddingInline="space.150"
                 backgroundColor={app}
               >
@@ -79,11 +97,10 @@ export default () => {
           <FocusRing>
             <Box
               as="button"
-              backgroundColor="brand.bold"
+              backgroundColor="color.background.brand.bold"
               onClick={() => console.log('hello')}
-              borderRadius="normal"
-              position="relative"
               padding="space.050"
+              xcss={focusRingBoxStyles}
             >
               <InteractionSurface>
                 <WarningIcon
@@ -97,10 +114,9 @@ export default () => {
           <FocusRing>
             <Box
               as="button"
-              backgroundColor="neutral"
+              backgroundColor="color.background.neutral"
               onClick={() => console.log('hello')}
-              borderRadius="normal"
-              position="relative"
+              xcss={focusRingBoxStyles}
               padding="space.050"
             >
               <InteractionSurface>
@@ -111,10 +127,9 @@ export default () => {
           <FocusRing>
             <Box
               as="button"
-              backgroundColor="warning.bold"
+              backgroundColor="color.background.warning.bold"
               onClick={() => console.log('hello')}
-              borderRadius="normal"
-              position="relative"
+              xcss={focusRingBoxStyles}
               padding="space.050"
             >
               <InteractionSurface>
@@ -131,15 +146,20 @@ export default () => {
           Progress Indicator with <Code>InteractionSurface</Code>
         </Heading>
         <Inline space="space.200" testId="progress-indicators">
-          {(['brand.bold', 'neutral', 'warning.bold'] as const).map((app) => (
+          {(
+            [
+              'color.background.brand.bold',
+              'color.background.neutral',
+              'color.background.warning.bold',
+            ] as const
+          ).map((app) => (
             <FocusRing>
               <Box
                 key={app}
                 as="button"
                 backgroundColor={app}
                 onClick={() => console.log('hello')}
-                borderRadius="rounded"
-                position="relative"
+                xcss={focusRingBoxStyles}
                 padding="space.050"
               >
                 <InteractionSurface>
@@ -154,14 +174,10 @@ export default () => {
           <Textfield />
           <Box
             as="fieldset"
-            borderRadius="normal"
-            borderStyle="solid"
-            borderWidth="2px"
             padding="space.100"
             tabIndex={-1}
-            borderColor="color.border"
-            backgroundColor="input"
-            css={fieldsetStyles}
+            backgroundColor="color.background.input"
+            xcss={fieldsetStyles}
           >
             <input
               id="textfield"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@atlaskit/ds-lib": "*",
+    "@atlaskit/primitives": "^1.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/codegen": "^0.1.0",
@@ -73,10 +74,7 @@
   },
   "af:exports": {
     ".": "./src/index.tsx",
-    "./box": "./src/components/box.partial.tsx",
-    "./text": "./src/components/text.partial.tsx",
-    "./stack": "./src/components/stack.partial.tsx",
-    "./inline": "./src/components/inline.partial.tsx"
+    "./text": "./src/components/text.partial.tsx"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
   "homepage": "https://atlaskit.atlassian.com"