@atlaskit/ds-explorations 2.0.0 → 2.0.2

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

@@ -1,13 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 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"];
-
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { LAYERS } from '../constants';
 import { SurfaceContext } from './surface-provider';
-
 /**
  * __Box__
  *
@@ -18,37 +16,36 @@ import { SurfaceContext } from './surface-provider';
  */
 export var Box = /*#__PURE__*/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 = _objectWithoutProperties(_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 = _objectWithoutProperties(_ref, _excluded);
   var Component = as || 'div';
   var node = jsx(Component, _extends({
     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]],
@@ -59,7 +56,9 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, node) : node;
 });
 Box.displayName = 'Box';
-export default Box; // <<< STYLES GO HERE >>>
+export default Box;
+
+// <<< STYLES GO HERE >>>
 
 var borderStyleMap = {
   none: css({
@@ -100,6 +99,7 @@ var borderRadiusMap = {
     borderRadius: '8px'
   })
 };
+
 /**
  * @experimental - this is likely to be removed
  */
@@ -112,6 +112,7 @@ var flexDirectionMap = {
     flexDirection: 'row'
   })
 };
+
 /**
  * @experimental - this is likely to be removed
  */
@@ -136,6 +137,7 @@ var flexAlignItemsMap = {
     alignItems: 'end'
   })
 };
+
 /**
  * @experimental - this is likely to be removed
  */
@@ -201,6 +203,7 @@ var baseStyles = css({
   appearance: 'none',
   border: 'none'
 });
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::327e769aaa3da9422a919a0ca9490070>>
@@ -208,7 +211,6 @@ var baseStyles = css({
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["width", "height"]
  */
-
 var widthMap = {
   '100%': css({
     width: '100%'
@@ -261,18 +263,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': css({
@@ -406,28 +407,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': css({
     borderColor: "var(--ds-border, #091e4221)"
   }),
-  bold: css({
-    borderColor: "var(--ds-border-bold, #344563)"
-  }),
-  inverse: css({
-    borderColor: "var(--ds-border-inverse, #FFFFFF)"
+  disabled: css({
+    borderColor: "var(--ds-border-disabled, #FAFBFC)"
   }),
   focused: css({
     borderColor: "var(--ds-border-focused, #4C9AFF)"
@@ -435,15 +432,15 @@ var borderColorMap = {
   input: css({
     borderColor: "var(--ds-border-input, #FAFBFC)"
   }),
-  disabled: css({
-    borderColor: "var(--ds-border-disabled, #FAFBFC)"
-  }),
-  brand: css({
-    borderColor: "var(--ds-border-brand, #0052CC)"
+  inverse: css({
+    borderColor: "var(--ds-border-inverse, #FFFFFF)"
   }),
   selected: css({
     borderColor: "var(--ds-border-selected, #0052CC)"
   }),
+  brand: css({
+    borderColor: "var(--ds-border-brand, #0052CC)"
+  }),
   danger: css({
     borderColor: "var(--ds-border-danger, #FF5630)"
   }),
@@ -458,18 +455,21 @@ var borderColorMap = {
   }),
   information: css({
     borderColor: "var(--ds-border-information, #0065FF)"
+  }),
+  bold: css({
+    borderColor: "var(--ds-border-bold, #344563)"
   })
 };
 var backgroundColorMap = {
   disabled: css({
     backgroundColor: "var(--ds-background-disabled, #091e4289)"
   }),
-  'inverse.subtle': css({
-    backgroundColor: "var(--ds-background-inverse-subtle, #00000029)"
-  }),
   input: css({
     backgroundColor: "var(--ds-background-input, #FAFBFC)"
   }),
+  'inverse.subtle': css({
+    backgroundColor: "var(--ds-background-inverse-subtle, #00000029)"
+  }),
   neutral: css({
     backgroundColor: "var(--ds-background-neutral, #DFE1E6)"
   }),
@@ -479,15 +479,15 @@ var backgroundColorMap = {
   'neutral.bold': css({
     backgroundColor: "var(--ds-background-neutral-bold, #42526E)"
   }),
-  'brand.bold': css({
-    backgroundColor: "var(--ds-background-brand-bold, #0052CC)"
-  }),
   selected: css({
     backgroundColor: "var(--ds-background-selected, #DEEBFF)"
   }),
   'selected.bold': css({
     backgroundColor: "var(--ds-background-selected-bold, #0052CC)"
   }),
+  'brand.bold': css({
+    backgroundColor: "var(--ds-background-brand-bold, #0052CC)"
+  }),
   danger: css({
     backgroundColor: "var(--ds-background-danger, #FFEBE6)"
   }),
@@ -530,34 +530,33 @@ var backgroundColorMap = {
   'elevation.surface': css({
     backgroundColor: "var(--ds-surface, #FFFFFF)"
   }),
-  'elevation.surface.sunken': css({
-    backgroundColor: "var(--ds-surface-sunken, #F4F5F7)"
+  'elevation.surface.overlay': css({
+    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
   }),
   'elevation.surface.raised': css({
     backgroundColor: "var(--ds-surface-raised, #FFFFFF)"
   }),
-  'elevation.surface.overlay': css({
-    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
+  'elevation.surface.sunken': css({
+    backgroundColor: "var(--ds-surface-sunken, #F4F5F7)"
   })
 };
 var shadowMap = {
-  raised: css({
-    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
-  }),
   overflow: css({
     boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
   }),
-  'overflow.spread': css({
-    boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
-  }),
   'overflow.perimeter': css({
     boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
   }),
+  'overflow.spread': css({
+    boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
+  }),
   overlay: css({
     boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
+  }),
+  raised: css({
+    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
   })
 };
-
 /**
  * @codegenEnd
  */
@@ -598,6 +597,7 @@ var layerMap = {
     zIndex: LAYERS['tooltip']
   })
 };
+
 /**
  * @codegenEnd
  */

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

@@ -60,13 +60,13 @@ var dividerStyles = css({
   pointerEvents: 'none',
   userSelect: 'none'
 });
-
 var Divider = function Divider(_ref) {
   var children = _ref.children;
   return jsx("span", {
     css: dividerStyles
   }, children);
 };
+
 /**
  * __Inline__
  *
@@ -83,17 +83,15 @@ var Divider = function Divider(_ref) {
  * )
  * ```
  */
-
-
 var Inline = /*#__PURE__*/memo( /*#__PURE__*/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' ? jsx(Divider, null, divider) : divider;
   var children = divider ? Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
     return jsx(Fragment, {
@@ -109,15 +107,15 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
 }));
 Inline.displayName = 'Inline';
 export 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>>
  */
-
 var columnGapMap = {
   'space.0': css({
     columnGap: "var(--ds-space-0, 0px)"
@@ -162,6 +160,7 @@ var columnGapMap = {
     columnGap: "var(--ds-space-800, 64px)"
   })
 };
+
 /**
  * @codegenEnd
  */

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

@@ -13,7 +13,6 @@ var baseStyles = css({
     pointerEvents: 'none'
   }
 });
-
 /**
  *
  * @example
@@ -28,42 +27,41 @@ var baseStyles = css({
  */
 var InteractionSurface = function InteractionSurface(_ref) {
   var appearance = _ref.appearance,
-      children = _ref.children,
-      testId = _ref.testId;
+    children = _ref.children,
+    testId = _ref.testId;
   var defaultSurface = useContext(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 jsx(Fragment, null, jsx("span", {
     "data-testid": testId,
     css: [baseStyles, surface && backgroundHoverColorMap[surface], surface && backgroundActiveColorMap[surface]]
   }), children);
 };
-
 export 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>>
  */
-
 var backgroundActiveColorMap = {
-  'inverse.subtle': css({
+  input: css({
     ':active': {
-      backgroundColor: "var(--ds-background-inverse-subtle-pressed, #00000052)"
+      backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
     }
   }),
-  input: css({
+  'inverse.subtle': css({
     ':active': {
-      backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
+      backgroundColor: "var(--ds-background-inverse-subtle-pressed, #00000052)"
     }
   }),
   neutral: css({
@@ -81,11 +79,6 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-neutral-bold-pressed, #172B4D)"
     }
   }),
-  'brand.bold': css({
-    ':active': {
-      backgroundColor: "var(--ds-background-brand-bold-pressed, #09326C)"
-    }
-  }),
   selected: css({
     ':active': {
       backgroundColor: "var(--ds-background-selected-pressed, #85B8FF)"
@@ -96,6 +89,11 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-selected-bold-pressed, #09326C)"
     }
   }),
+  'brand.bold': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-brand-bold-pressed, #09326C)"
+    }
+  }),
   danger: css({
     ':active': {
       backgroundColor: "var(--ds-background-danger-pressed, #FF9C8F)"
@@ -151,26 +149,26 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-surface-pressed, #DCDFE4)"
     }
   }),
-  'elevation.surface.raised': css({
+  'elevation.surface.overlay': css({
     ':active': {
-      backgroundColor: "var(--ds-surface-raised-pressed, #DCDFE4)"
+      backgroundColor: "var(--ds-surface-overlay-pressed, #DCDFE4)"
     }
   }),
-  'elevation.surface.overlay': css({
+  'elevation.surface.raised': css({
     ':active': {
-      backgroundColor: "var(--ds-surface-overlay-pressed, #DCDFE4)"
+      backgroundColor: "var(--ds-surface-raised-pressed, #DCDFE4)"
     }
   })
 };
 var backgroundHoverColorMap = {
-  'inverse.subtle': css({
+  input: css({
     ':hover': {
-      backgroundColor: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
+      backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
     }
   }),
-  input: css({
+  'inverse.subtle': css({
     ':hover': {
-      backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
+      backgroundColor: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
     }
   }),
   neutral: css({
@@ -188,11 +186,6 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-neutral-bold-hovered, #2C3E5D)"
     }
   }),
-  'brand.bold': css({
-    ':hover': {
-      backgroundColor: "var(--ds-background-brand-bold-hovered, #0055CC)"
-    }
-  }),
   selected: css({
     ':hover': {
       backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
@@ -203,6 +196,11 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-selected-bold-hovered, #0055CC)"
     }
   }),
+  'brand.bold': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-brand-bold-hovered, #0055CC)"
+    }
+  }),
   danger: css({
     ':hover': {
       backgroundColor: "var(--ds-background-danger-hovered, #FFD2CC)"
@@ -258,17 +256,18 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-surface-hovered, #F1F2F4)"
     }
   }),
-  'elevation.surface.raised': css({
+  'elevation.surface.overlay': css({
     ':hover': {
-      backgroundColor: "var(--ds-surface-raised-hovered, #F1F2F4)"
+      backgroundColor: "var(--ds-surface-overlay-hovered, #F1F2F4)"
     }
   }),
-  'elevation.surface.overlay': css({
+  'elevation.surface.raised': css({
     ':hover': {
-      backgroundColor: "var(--ds-surface-overlay-hovered, #F1F2F4)"
+      backgroundColor: "var(--ds-surface-raised-hovered, #F1F2F4)"
     }
   })
 };
+
 /**
  * @codegenEnd
  */

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

@@ -48,6 +48,7 @@ var baseStyles = css({
   boxSizing: 'border-box',
   flexDirection: 'column'
 });
+
 /**
  * __Stack__
  *
@@ -55,15 +56,14 @@ var baseStyles = css({
  * Renders a `div` by default.
  *
  */
-
 var Stack = /*#__PURE__*/memo( /*#__PURE__*/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 jsx("div", {
     style: UNSAFE_style,
     css: [baseStyles, gap && rowGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
@@ -73,15 +73,15 @@ var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
 }));
 Stack.displayName = 'Stack';
 export 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>>
  */
-
 var rowGapMap = {
   'space.0': css({
     rowGap: "var(--ds-space-0, 0px)"
@@ -126,6 +126,7 @@ var rowGapMap = {
     rowGap: "var(--ds-space-800, 64px)"
   })
 };
+
 /**
  * @codegenEnd
  */

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

@@ -1,11 +1,11 @@
 import { createContext, useContext } from 'react';
-
 /**
  * __Surface context__
  *
  * A surface context provides context information on the current background (if set).
  */
 export var SurfaceContext = /*#__PURE__*/createContext('elevation.surface');
+
 /**
  * __useSurface__
  *
@@ -13,7 +13,6 @@ export var SurfaceContext = /*#__PURE__*/createContext('elevation.surface');
  *
  * @see SurfaceContext
  */
-
 export var useSurface = function useSurface() {
   return useContext(SurfaceContext);
 };