@atlaskit/ds-explorations 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/ds-explorations
 
+## 2.0.2
+
+### Patch Changes
+
+- [`cf16d8f8bcc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf16d8f8bcc) - Removes usage of tokens which have been removed from the codebase
+- Updated dependencies
+
+## 2.0.1
+
+### Patch Changes
+
+- [`290b1f069bd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/290b1f069bd) - Regenerate codegen styles
+
 ## 2.0.0
 
 ### Major Changes

package/dist/cjs/components/box.partial.js

@@ -1,26 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Box = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _constants = require("../constants");
-
 var _surfaceProvider = require("./surface-provider");
-
 var _excluded = ["children", "as", "className", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "shadow", "layer", "padding", "paddingBlock", "paddingInline", "position", "height", "overflow", "width", "UNSAFE_style", "testId"];
-
 /**
  * __Box__
  *
@@ -31,36 +22,36 @@ var _excluded = ["children", "as", "className", "display", "flexDirection", "ali
  */
 var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
-      as = _ref.as,
-      className = _ref.className,
-      _ref$display = _ref.display,
-      display = _ref$display === void 0 ? 'flex' : _ref$display,
-      flexDirection = _ref.flexDirection,
-      alignItems = _ref.alignItems,
-      justifyContent = _ref.justifyContent,
-      backgroundColor = _ref.backgroundColor,
-      borderColor = _ref.borderColor,
-      borderStyle = _ref.borderStyle,
-      borderWidth = _ref.borderWidth,
-      borderRadius = _ref.borderRadius,
-      shadow = _ref.shadow,
-      layer = _ref.layer,
-      padding = _ref.padding,
-      paddingBlock = _ref.paddingBlock,
-      paddingInline = _ref.paddingInline,
-      _ref$position = _ref.position,
-      position = _ref$position === void 0 ? 'relative' : _ref$position,
-      height = _ref.height,
-      overflow = _ref.overflow,
-      width = _ref.width,
-      UNSAFE_style = _ref.UNSAFE_style,
-      testId = _ref.testId,
-      htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    as = _ref.as,
+    className = _ref.className,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'flex' : _ref$display,
+    flexDirection = _ref.flexDirection,
+    alignItems = _ref.alignItems,
+    justifyContent = _ref.justifyContent,
+    backgroundColor = _ref.backgroundColor,
+    borderColor = _ref.borderColor,
+    borderStyle = _ref.borderStyle,
+    borderWidth = _ref.borderWidth,
+    borderRadius = _ref.borderRadius,
+    shadow = _ref.shadow,
+    layer = _ref.layer,
+    padding = _ref.padding,
+    paddingBlock = _ref.paddingBlock,
+    paddingInline = _ref.paddingInline,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'relative' : _ref$position,
+    height = _ref.height,
+    overflow = _ref.overflow,
+    width = _ref.width,
+    UNSAFE_style = _ref.UNSAFE_style,
+    testId = _ref.testId,
+    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var Component = as || 'div';
   var node = (0, _react2.jsx)(Component, (0, _extends2.default)({
     style: UNSAFE_style,
-    ref: ref // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
+    ref: ref
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, htmlAttributes, {
     className: className,
     css: [baseStyles, display && displayMap[display], padding && paddingMap[padding], position && positionMap[position], paddingBlock && paddingBlockMap[paddingBlock], paddingInline && paddingInlineMap[paddingInline], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], borderRadius && borderRadiusMap[borderRadius], shadow && shadowMap[shadow], layer && layerMap[layer], flexDirection && flexDirectionMap[flexDirection], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
@@ -73,7 +64,6 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 exports.Box = Box;
 Box.displayName = 'Box';
 var _default = Box; // <<< STYLES GO HERE >>>
-
 exports.default = _default;
 var borderStyleMap = {
   none: (0, _react2.css)({
@@ -114,6 +104,7 @@ var borderRadiusMap = {
     borderRadius: '8px'
   })
 };
+
 /**
  * @experimental - this is likely to be removed
  */
@@ -126,6 +117,7 @@ var flexDirectionMap = {
     flexDirection: 'row'
   })
 };
+
 /**
  * @experimental - this is likely to be removed
  */
@@ -150,6 +142,7 @@ var flexAlignItemsMap = {
     alignItems: 'end'
   })
 };
+
 /**
  * @experimental - this is likely to be removed
  */
@@ -215,6 +208,7 @@ var baseStyles = (0, _react2.css)({
   appearance: 'none',
   border: 'none'
 });
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::327e769aaa3da9422a919a0ca9490070>>
@@ -222,7 +216,6 @@ var baseStyles = (0, _react2.css)({
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["width", "height"]
  */
-
 var widthMap = {
   '100%': (0, _react2.css)({
     width: '100%'
@@ -275,18 +268,17 @@ var heightMap = {
     height: '96px'
   })
 };
-
 /**
  * @codegenEnd
  */
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::99c5403dd8b57b15bf1240cc456b6b16>>
+ * @codegen <<SignedSource::dd066079dac7b8cd6f947965a2f1a744>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::a2b43f8447798dfdd9c6223bd22b78c7>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::b0b8f1a822ed84e0407ad83e6fda5a1c>>
  */
 var paddingMap = {
   'space.0': (0, _react2.css)({
@@ -420,28 +412,24 @@ var paddingInlineMap = {
     paddingInline: "var(--ds-space-800, 64px)"
   })
 };
-
 /**
  * @codegenEnd
  */
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::201c8a6c6ff88ac47cdb02365c643ff2>>
+ * @codegen <<SignedSource::514663609a5a48a284de40c5c4ad200b>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background", "shadow"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 var borderColorMap = {
   'color.border': (0, _react2.css)({
     borderColor: "var(--ds-border, #091e4221)"
   }),
-  bold: (0, _react2.css)({
-    borderColor: "var(--ds-border-bold, #344563)"
-  }),
-  inverse: (0, _react2.css)({
-    borderColor: "var(--ds-border-inverse, #FFFFFF)"
+  disabled: (0, _react2.css)({
+    borderColor: "var(--ds-border-disabled, #FAFBFC)"
   }),
   focused: (0, _react2.css)({
     borderColor: "var(--ds-border-focused, #4C9AFF)"
@@ -449,15 +437,15 @@ var borderColorMap = {
   input: (0, _react2.css)({
     borderColor: "var(--ds-border-input, #FAFBFC)"
   }),
-  disabled: (0, _react2.css)({
-    borderColor: "var(--ds-border-disabled, #FAFBFC)"
-  }),
-  brand: (0, _react2.css)({
-    borderColor: "var(--ds-border-brand, #0052CC)"
+  inverse: (0, _react2.css)({
+    borderColor: "var(--ds-border-inverse, #FFFFFF)"
   }),
   selected: (0, _react2.css)({
     borderColor: "var(--ds-border-selected, #0052CC)"
   }),
+  brand: (0, _react2.css)({
+    borderColor: "var(--ds-border-brand, #0052CC)"
+  }),
   danger: (0, _react2.css)({
     borderColor: "var(--ds-border-danger, #FF5630)"
   }),
@@ -472,18 +460,21 @@ var borderColorMap = {
   }),
   information: (0, _react2.css)({
     borderColor: "var(--ds-border-information, #0065FF)"
+  }),
+  bold: (0, _react2.css)({
+    borderColor: "var(--ds-border-bold, #344563)"
   })
 };
 var backgroundColorMap = {
   disabled: (0, _react2.css)({
     backgroundColor: "var(--ds-background-disabled, #091e4289)"
   }),
-  'inverse.subtle': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-inverse-subtle, #00000029)"
-  }),
   input: (0, _react2.css)({
     backgroundColor: "var(--ds-background-input, #FAFBFC)"
   }),
+  'inverse.subtle': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-inverse-subtle, #00000029)"
+  }),
   neutral: (0, _react2.css)({
     backgroundColor: "var(--ds-background-neutral, #DFE1E6)"
   }),
@@ -493,15 +484,15 @@ var backgroundColorMap = {
   'neutral.bold': (0, _react2.css)({
     backgroundColor: "var(--ds-background-neutral-bold, #42526E)"
   }),
-  'brand.bold': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-brand-bold, #0052CC)"
-  }),
   selected: (0, _react2.css)({
     backgroundColor: "var(--ds-background-selected, #DEEBFF)"
   }),
   'selected.bold': (0, _react2.css)({
     backgroundColor: "var(--ds-background-selected-bold, #0052CC)"
   }),
+  'brand.bold': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-brand-bold, #0052CC)"
+  }),
   danger: (0, _react2.css)({
     backgroundColor: "var(--ds-background-danger, #FFEBE6)"
   }),
@@ -544,34 +535,33 @@ var backgroundColorMap = {
   'elevation.surface': (0, _react2.css)({
     backgroundColor: "var(--ds-surface, #FFFFFF)"
   }),
-  'elevation.surface.sunken': (0, _react2.css)({
-    backgroundColor: "var(--ds-surface-sunken, #F4F5F7)"
+  'elevation.surface.overlay': (0, _react2.css)({
+    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
   }),
   'elevation.surface.raised': (0, _react2.css)({
     backgroundColor: "var(--ds-surface-raised, #FFFFFF)"
   }),
-  'elevation.surface.overlay': (0, _react2.css)({
-    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
+  'elevation.surface.sunken': (0, _react2.css)({
+    backgroundColor: "var(--ds-surface-sunken, #F4F5F7)"
   })
 };
 var shadowMap = {
-  raised: (0, _react2.css)({
-    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
-  }),
   overflow: (0, _react2.css)({
     boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
   }),
-  'overflow.spread': (0, _react2.css)({
-    boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
-  }),
   'overflow.perimeter': (0, _react2.css)({
     boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
   }),
+  'overflow.spread': (0, _react2.css)({
+    boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
+  }),
   overlay: (0, _react2.css)({
     boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
+  }),
+  raised: (0, _react2.css)({
+    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
   })
 };
-
 /**
  * @codegenEnd
  */
@@ -612,6 +602,7 @@ var layerMap = {
     zIndex: _constants.LAYERS['tooltip']
   })
 };
+
 /**
  * @codegenEnd
  */

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

@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 /** @jsx jsx */
+
 var flexAlignItemsMap = {
   center: (0, _react2.css)({
     alignItems: 'center'
@@ -69,13 +67,13 @@ var dividerStyles = (0, _react2.css)({
   pointerEvents: 'none',
   userSelect: 'none'
 });
-
 var Divider = function Divider(_ref) {
   var children = _ref.children;
   return (0, _react2.jsx)("span", {
     css: dividerStyles
   }, children);
 };
+
 /**
  * __Inline__
  *
@@ -92,17 +90,15 @@ var Divider = function Divider(_ref) {
  * )
  * ```
  */
-
-
 var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var gap = _ref2.gap,
-      alignItems = _ref2.alignItems,
-      justifyContent = _ref2.justifyContent,
-      flexWrap = _ref2.flexWrap,
-      divider = _ref2.divider,
-      UNSAFE_style = _ref2.UNSAFE_style,
-      rawChildren = _ref2.children,
-      testId = _ref2.testId;
+    alignItems = _ref2.alignItems,
+    justifyContent = _ref2.justifyContent,
+    flexWrap = _ref2.flexWrap,
+    divider = _ref2.divider,
+    UNSAFE_style = _ref2.UNSAFE_style,
+    rawChildren = _ref2.children,
+    testId = _ref2.testId;
   var dividerComponent = typeof divider === 'string' ? (0, _react2.jsx)(Divider, null, divider) : divider;
   var children = divider ? _react.Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
     return (0, _react2.jsx)(_react.Fragment, {
@@ -120,13 +116,12 @@ Inline.displayName = 'Inline';
 var _default = Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0a2a4380b534d14cdad759ff2d33a6c8>>
+ * @codegen <<SignedSource::e4218f7c850d1484a192d5b8b5dce136>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::a2b43f8447798dfdd9c6223bd22b78c7>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::b0b8f1a822ed84e0407ad83e6fda5a1c>>
  */
-
 exports.default = _default;
 var columnGapMap = {
   'space.0': (0, _react2.css)({
@@ -172,6 +167,7 @@ var columnGapMap = {
     columnGap: "var(--ds-space-800, 64px)"
   })
 };
+
 /**
  * @codegenEnd
  */

package/dist/cjs/components/interaction-surface.partial.js

@@ -4,14 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _surfaceProvider = require("./surface-provider");
-
 /** @jsx jsx */
+
 var baseStyles = (0, _react2.css)({
   position: 'absolute',
   borderRadius: 'inherit',
@@ -23,7 +20,6 @@ var baseStyles = (0, _react2.css)({
     pointerEvents: 'none'
   }
 });
-
 /**
  *
  * @example
@@ -38,43 +34,41 @@ var baseStyles = (0, _react2.css)({
  */
 var InteractionSurface = function InteractionSurface(_ref) {
   var appearance = _ref.appearance,
-      children = _ref.children,
-      testId = _ref.testId;
+    children = _ref.children,
+    testId = _ref.testId;
   var defaultSurface = (0, _react.useContext)(_surfaceProvider.SurfaceContext);
-  var surface = appearance || defaultSurface; // This case will occur if the Box has not set a bg color and the ancestor surface
+  var surface = appearance || defaultSurface;
+
+  // This case will occur if the Box has not set a bg color and the ancestor surface
   // is an elevation. An alternative would be to throw an error here as it may be better
   // to ensure correct predictable behaviour based on user specification.
-
   if (!(surface in backgroundActiveColorMap)) {
     surface = 'neutral';
   }
-
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
     "data-testid": testId,
     css: [baseStyles, surface && backgroundHoverColorMap[surface], surface && backgroundActiveColorMap[surface]]
   }), children);
 };
-
 var _default = InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::46f9477bc75d77a16327328d1b49c35f>>
+ * @codegen <<SignedSource::4f6bde99739600abea2bbe6e62397bc4>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
-
 exports.default = _default;
 var backgroundActiveColorMap = {
-  'inverse.subtle': (0, _react2.css)({
+  input: (0, _react2.css)({
     ':active': {
-      backgroundColor: "var(--ds-background-inverse-subtle-pressed, #00000052)"
+      backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
     }
   }),
-  input: (0, _react2.css)({
+  'inverse.subtle': (0, _react2.css)({
     ':active': {
-      backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
+      backgroundColor: "var(--ds-background-inverse-subtle-pressed, #00000052)"
     }
   }),
   neutral: (0, _react2.css)({
@@ -92,11 +86,6 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-neutral-bold-pressed, #172B4D)"
     }
   }),
-  'brand.bold': (0, _react2.css)({
-    ':active': {
-      backgroundColor: "var(--ds-background-brand-bold-pressed, #09326C)"
-    }
-  }),
   selected: (0, _react2.css)({
     ':active': {
       backgroundColor: "var(--ds-background-selected-pressed, #85B8FF)"
@@ -107,6 +96,11 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-selected-bold-pressed, #09326C)"
     }
   }),
+  'brand.bold': (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-brand-bold-pressed, #09326C)"
+    }
+  }),
   danger: (0, _react2.css)({
     ':active': {
       backgroundColor: "var(--ds-background-danger-pressed, #FF9C8F)"
@@ -162,26 +156,26 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-surface-pressed, #DCDFE4)"
     }
   }),
-  'elevation.surface.raised': (0, _react2.css)({
+  'elevation.surface.overlay': (0, _react2.css)({
     ':active': {
-      backgroundColor: "var(--ds-surface-raised-pressed, #DCDFE4)"
+      backgroundColor: "var(--ds-surface-overlay-pressed, #DCDFE4)"
     }
   }),
-  'elevation.surface.overlay': (0, _react2.css)({
+  'elevation.surface.raised': (0, _react2.css)({
     ':active': {
-      backgroundColor: "var(--ds-surface-overlay-pressed, #DCDFE4)"
+      backgroundColor: "var(--ds-surface-raised-pressed, #DCDFE4)"
     }
   })
 };
 var backgroundHoverColorMap = {
-  'inverse.subtle': (0, _react2.css)({
+  input: (0, _react2.css)({
     ':hover': {
-      backgroundColor: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
+      backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
     }
   }),
-  input: (0, _react2.css)({
+  'inverse.subtle': (0, _react2.css)({
     ':hover': {
-      backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
+      backgroundColor: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
     }
   }),
   neutral: (0, _react2.css)({
@@ -199,11 +193,6 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-neutral-bold-hovered, #2C3E5D)"
     }
   }),
-  'brand.bold': (0, _react2.css)({
-    ':hover': {
-      backgroundColor: "var(--ds-background-brand-bold-hovered, #0055CC)"
-    }
-  }),
   selected: (0, _react2.css)({
     ':hover': {
       backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
@@ -214,6 +203,11 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-selected-bold-hovered, #0055CC)"
     }
   }),
+  'brand.bold': (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-brand-bold-hovered, #0055CC)"
+    }
+  }),
   danger: (0, _react2.css)({
     ':hover': {
       backgroundColor: "var(--ds-background-danger-hovered, #FFD2CC)"
@@ -269,17 +263,18 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-surface-hovered, #F1F2F4)"
     }
   }),
-  'elevation.surface.raised': (0, _react2.css)({
+  'elevation.surface.overlay': (0, _react2.css)({
     ':hover': {
-      backgroundColor: "var(--ds-surface-raised-hovered, #F1F2F4)"
+      backgroundColor: "var(--ds-surface-overlay-hovered, #F1F2F4)"
     }
   }),
-  'elevation.surface.overlay': (0, _react2.css)({
+  'elevation.surface.raised': (0, _react2.css)({
     ':hover': {
-      backgroundColor: "var(--ds-surface-overlay-hovered, #F1F2F4)"
+      backgroundColor: "var(--ds-surface-raised-hovered, #F1F2F4)"
     }
   })
 };
+
 /**
  * @codegenEnd
  */

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

@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 /** @jsx jsx */
+
 var flexAlignItemsMap = {
   center: (0, _react2.css)({
     alignItems: 'center'
@@ -57,6 +55,7 @@ var baseStyles = (0, _react2.css)({
   boxSizing: 'border-box',
   flexDirection: 'column'
 });
+
 /**
  * __Stack__
  *
@@ -64,15 +63,14 @@ var baseStyles = (0, _react2.css)({
  * Renders a `div` by default.
  *
  */
-
 var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var gap = _ref.gap,
-      alignItems = _ref.alignItems,
-      justifyContent = _ref.justifyContent,
-      flexWrap = _ref.flexWrap,
-      children = _ref.children,
-      UNSAFE_style = _ref.UNSAFE_style,
-      testId = _ref.testId;
+    alignItems = _ref.alignItems,
+    justifyContent = _ref.justifyContent,
+    flexWrap = _ref.flexWrap,
+    children = _ref.children,
+    UNSAFE_style = _ref.UNSAFE_style,
+    testId = _ref.testId;
   return (0, _react2.jsx)("div", {
     style: UNSAFE_style,
     css: [baseStyles, gap && rowGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
@@ -84,13 +82,12 @@ Stack.displayName = 'Stack';
 var _default = Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ac9028ae231558f3eedd10f0db04a8fe>>
+ * @codegen <<SignedSource::91d26b1ace8b38363779ae85a7ddc51b>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::a2b43f8447798dfdd9c6223bd22b78c7>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::b0b8f1a822ed84e0407ad83e6fda5a1c>>
  */
-
 exports.default = _default;
 var rowGapMap = {
   'space.0': (0, _react2.css)({
@@ -136,6 +133,7 @@ var rowGapMap = {
     rowGap: "var(--ds-space-800, 64px)"
   })
 };
+
 /**
  * @codegenEnd
  */

package/dist/cjs/components/surface-provider.js

@@ -4,15 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSurface = exports.SurfaceContext = void 0;
-
 var _react = require("react");
-
 /**
  * __Surface context__
  *
  * A surface context provides context information on the current background (if set).
  */
 var SurfaceContext = /*#__PURE__*/(0, _react.createContext)('elevation.surface');
+
 /**
  * __useSurface__
  *
@@ -20,12 +19,9 @@ var SurfaceContext = /*#__PURE__*/(0, _react.createContext)('elevation.surface')
  *
  * @see SurfaceContext
  */
-
 exports.SurfaceContext = SurfaceContext;
-
 var useSurface = function useSurface() {
   return (0, _react.useContext)(SurfaceContext);
 };
-
 exports.useSurface = useSurface;
 SurfaceContext.displayName = 'SurfaceProvider';