@atlaskit/ds-explorations 0.1.1 → 0.1.2

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "as", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "padding", "paddingBlock", "paddingInline", "height", "width", "UNSAFE_style", "testId", "className"];
+var _excluded = ["children", "as", "className", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "padding", "paddingBlock", "paddingInline", "position", "height", "width", "UNSAFE_style", "testId"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -10,8 +10,75 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { SPACING_SCALE } from '../constants';
+import { SurfaceContext } from './surface-provider';
+
+/**
+ * __Box__
+ *
+ * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
+ *
+ * @internal
+ */
+var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      _ref$as = _ref.as,
+      Component = _ref$as === void 0 ? 'div' : _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,
+      backgroundColorTuple = _ref.backgroundColor,
+      borderColorTuple = _ref.borderColor,
+      borderStyle = _ref.borderStyle,
+      borderWidth = _ref.borderWidth,
+      borderRadius = _ref.borderRadius,
+      padding = _ref.padding,
+      paddingBlock = _ref.paddingBlock,
+      paddingInline = _ref.paddingInline,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? 'relative' : _ref$position,
+      height = _ref.height,
+      width = _ref.width,
+      UNSAFE_style = _ref.UNSAFE_style,
+      testId = _ref.testId,
+      htmlAttributes = _objectWithoutProperties(_ref, _excluded);
+
+  var _ref2 = backgroundColorTuple || [],
+      _ref3 = _slicedToArray(_ref2, 2),
+      backgroundColor = _ref3[0],
+      backgroundColorFallback = _ref3[1];
+
+  var _ref4 = borderColorTuple || [],
+      _ref5 = _slicedToArray(_ref4, 2),
+      borderColor = _ref5[0],
+      borderColorFallback = _ref5[1];
+
+  var node = jsx(Component, _extends({
+    style: _objectSpread(_objectSpread(_objectSpread({}, UNSAFE_style), backgroundColorFallback && {
+      '--ds-bg-fb': backgroundColorFallback
+    }), borderColorFallback && {
+      '--ds-bo-fb': borderColorFallback
+    }) // @ts-ignore
+    ,
+    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], flexDirection && flexDirectionMap[flexDirection], width && widthMap[width], height && heightMap[height]],
+    "data-testid": testId
+  }), children);
+  return backgroundColor ? jsx(SurfaceContext.Provider, {
+    value: backgroundColor
+  }, node) : node;
+});
+Box.displayName = 'Box';
+export default Box; // <<< STYLES GO HERE >>>
+
 var borderStyleMap = {
   none: css({
     borderStyle: 'none'
@@ -99,68 +166,24 @@ var displayMap = {
   })
 };
 var baseStyles = css({
-  boxSizing: 'border-box'
-});
-/**
- * __Box__
- *
- * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
- * Renders a `div` by default.
- *
- * @internal
- */
-
-var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      _ref$as = _ref.as,
-      Component = _ref$as === void 0 ? 'div' : _ref$as,
-      _ref$display = _ref.display,
-      display = _ref$display === void 0 ? 'flex' : _ref$display,
-      flexDirection = _ref.flexDirection,
-      alignItems = _ref.alignItems,
-      justifyContent = _ref.justifyContent,
-      backgroundColorTuple = _ref.backgroundColor,
-      borderColorTuple = _ref.borderColor,
-      borderStyle = _ref.borderStyle,
-      borderWidth = _ref.borderWidth,
-      borderRadius = _ref.borderRadius,
-      padding = _ref.padding,
-      paddingBlock = _ref.paddingBlock,
-      paddingInline = _ref.paddingInline,
-      height = _ref.height,
-      width = _ref.width,
-      UNSAFE_style = _ref.UNSAFE_style,
-      testId = _ref.testId,
-      dontUseThisProperty = _ref.className,
-      htmlAttributes = _objectWithoutProperties(_ref, _excluded);
-
-  var _ref2 = backgroundColorTuple || [],
-      _ref3 = _slicedToArray(_ref2, 2),
-      backgroundColor = _ref3[0],
-      backgroundColorFallback = _ref3[1];
-
-  var _ref4 = borderColorTuple || [],
-      _ref5 = _slicedToArray(_ref4, 2),
-      borderColor = _ref5[0],
-      borderColorFallback = _ref5[1];
-
-  return jsx(Component, _extends({
-    style: _objectSpread(_objectSpread(_objectSpread({}, UNSAFE_style), backgroundColorFallback && {
-      '--ds-bg-fb': backgroundColorFallback
-    }), borderColorFallback && {
-      '--ds-bo-fb': borderColorFallback
-    }),
-    ref: ref // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
-  }, htmlAttributes, {
-    css: [baseStyles, display && displayMap[display], padding && paddingMap[padding], 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], flexDirection && flexDirectionMap[flexDirection], width && widthMap[width], height && heightMap[height]],
-    "data-testid": testId
-  }), children);
+  boxSizing: 'border-box',
+  appearance: 'none',
+  border: 'none'
 });
-export default Box;
+var positionMap = {
+  absolute: css({
+    position: 'absolute'
+  }),
+  relative: css({
+    position: 'relative'
+  }),
+  static: css({
+    position: 'static'
+  })
+};
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c20a27ff33adec8c016044959564409d>>
+ * @codegen <<SignedSource::57b4c7c177fdfae3f7cd4f00287fd30e>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
@@ -182,6 +205,9 @@ var paddingMap = {
   'sp-100': css({
     padding: SPACING_SCALE['sp-100']
   }),
+  'sp-150': css({
+    padding: SPACING_SCALE['sp-150']
+  }),
   'sp-200': css({
     padding: SPACING_SCALE['sp-200']
   }),
@@ -217,6 +243,9 @@ var paddingBlockMap = {
   'sp-100': css({
     paddingBlock: SPACING_SCALE['sp-100']
   }),
+  'sp-150': css({
+    paddingBlock: SPACING_SCALE['sp-150']
+  }),
   'sp-200': css({
     paddingBlock: SPACING_SCALE['sp-200']
   }),
@@ -252,6 +281,9 @@ var paddingInlineMap = {
   'sp-100': css({
     paddingInline: SPACING_SCALE['sp-100']
   }),
+  'sp-150': css({
+    paddingInline: SPACING_SCALE['sp-150']
+  }),
   'sp-200': css({
     paddingInline: SPACING_SCALE['sp-200']
   }),
@@ -287,6 +319,9 @@ var widthMap = {
   'sp-100': css({
     width: SPACING_SCALE['sp-100']
   }),
+  'sp-150': css({
+    width: SPACING_SCALE['sp-150']
+  }),
   'sp-200': css({
     width: SPACING_SCALE['sp-200']
   }),
@@ -322,6 +357,9 @@ var heightMap = {
   'sp-100': css({
     height: SPACING_SCALE['sp-100']
   }),
+  'sp-150': css({
+    height: SPACING_SCALE['sp-150']
+  }),
   'sp-200': css({
     height: SPACING_SCALE['sp-200']
   }),
@@ -347,7 +385,7 @@ var heightMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e3f27406477352f51168b4108558f051>>
+ * @codegen <<SignedSource::ebb55786a54803214357d0eef0cac448>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background"]

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { Children, forwardRef, Fragment } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { SPACING_SCALE } from '../constants';
 import Text from './text.partial';
 var flexAlignItemsMap = {
@@ -57,10 +57,11 @@ var Inline = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return jsx(Fragment, null, divider && index > 0 ? dividerComponent : null, child);
   }));
 });
+Inline.displayName = 'Inline';
 export default Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ac3192fbc453a94ab5e720d0273556ef>>
+ * @codegen <<SignedSource::36d00b5586593733c7f84e9a10ddb7fd>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["gap"]
@@ -82,6 +83,9 @@ var gapMap = {
   'sp-100': css({
     gap: SPACING_SCALE['sp-100']
   }),
+  'sp-150': css({
+    gap: SPACING_SCALE['sp-150']
+  }),
   'sp-200': css({
     gap: SPACING_SCALE['sp-200']
   }),

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

@@ -0,0 +1,242 @@
+/** @jsx jsx */
+import { Fragment, useContext } from 'react';
+import { css, jsx } from '@emotion/react';
+import { SurfaceContext } from './surface-provider';
+var baseStyles = css({
+  position: 'absolute',
+  borderRadius: 'inherit',
+  cursor: 'pointer',
+  inset: 0,
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '~ *': {
+    position: 'relative',
+    pointerEvents: 'none'
+  }
+});
+
+/**
+ *
+ * @example
+ * ```js
+ * // a minimal icon button
+ * <Box as="button">
+ *   <InteractionSurface />
+ *   <WarningIcon label="icon button" />
+ * </Box>
+ * ```
+ */
+var InteractionSurface = function InteractionSurface(_ref) {
+  var appearance = _ref.appearance,
+      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
+  // 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::45000716488a9f41306a232c1f4c9f8d>>
+ * @codegenId interactions
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["background"]
+ */
+
+var backgroundActiveColorMap = {
+  'inverse.subtle': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-inverse-subtle-pressed, #00000052)"
+    }
+  }),
+  input: css({
+    ':active': {
+      backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
+    }
+  }),
+  neutral: css({
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-pressed, #091E424F)"
+    }
+  }),
+  'neutral.subtle': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+    }
+  }),
+  'neutral.bold': css({
+    ':active': {
+      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)"
+    }
+  }),
+  'selected.bold': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-selected-bold-pressed, #09326C)"
+    }
+  }),
+  danger: css({
+    ':active': {
+      backgroundColor: "var(--ds-background-danger-pressed, #FF9C8F)"
+    }
+  }),
+  'danger.bold': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-danger-bold-pressed, #601E16)"
+    }
+  }),
+  warning: css({
+    ':active': {
+      backgroundColor: "var(--ds-background-warning-pressed, #F5CD47)"
+    }
+  }),
+  'warning.bold': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-warning-bold-pressed, #B38600)"
+    }
+  }),
+  success: css({
+    ':active': {
+      backgroundColor: "var(--ds-background-success-pressed, #7EE2B8)"
+    }
+  }),
+  'success.bold': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-success-bold-pressed, #164B35)"
+    }
+  }),
+  discovery: css({
+    ':active': {
+      backgroundColor: "var(--ds-background-discovery-pressed, #B8ACF6)"
+    }
+  }),
+  'discovery.bold': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-discovery-bold-pressed, #352C63)"
+    }
+  }),
+  information: css({
+    ':active': {
+      backgroundColor: "var(--ds-background-information-pressed, #85B8FF)"
+    }
+  }),
+  'information.bold': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-information-bold-pressed, #09326C)"
+    }
+  })
+};
+var backgroundHoverColorMap = {
+  'inverse.subtle': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
+    }
+  }),
+  input: css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
+    }
+  }),
+  neutral: css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
+    }
+  }),
+  'neutral.subtle': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    }
+  }),
+  'neutral.bold': css({
+    ':hover': {
+      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)"
+    }
+  }),
+  'selected.bold': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-selected-bold-hovered, #0055CC)"
+    }
+  }),
+  danger: css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-danger-hovered, #FFD2CC)"
+    }
+  }),
+  'danger.bold': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-danger-bold-hovered, #AE2A19)"
+    }
+  }),
+  warning: css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-warning-hovered, #F8E6A0)"
+    }
+  }),
+  'warning.bold': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-warning-bold-hovered, #CF9F02)"
+    }
+  }),
+  success: css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-success-hovered, #BAF3DB)"
+    }
+  }),
+  'success.bold': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-success-bold-hovered, #216E4E)"
+    }
+  }),
+  discovery: css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-discovery-hovered, #DFD8FD)"
+    }
+  }),
+  'discovery.bold': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-discovery-bold-hovered, #5E4DB2)"
+    }
+  }),
+  information: css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-information-hovered, #CCE0FF)"
+    }
+  }),
+  'information.bold': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-information-bold-hovered, #0055CC)"
+    }
+  })
+};
+/**
+ * @codegenEnd
+ */

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { SPACING_SCALE } from '../constants';
 var flexAlignItemsMap = {
   center: css({
@@ -52,10 +52,11 @@ var Stack = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref
   }, children);
 });
+Stack.displayName = 'Stack';
 export default Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ac3192fbc453a94ab5e720d0273556ef>>
+ * @codegen <<SignedSource::36d00b5586593733c7f84e9a10ddb7fd>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["gap"]
@@ -77,6 +78,9 @@ var gapMap = {
   'sp-100': css({
     gap: SPACING_SCALE['sp-100']
   }),
+  'sp-150': css({
+    gap: SPACING_SCALE['sp-150']
+  }),
   'sp-200': css({
     gap: SPACING_SCALE['sp-200']
   }),

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

@@ -0,0 +1,20 @@
+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__
+ *
+ * Return the current surface. If no parent sets a surface color it falls back to the default surface.
+ *
+ * @see SurfaceContext
+ */
+
+export var useSurface = function useSurface() {
+  return useContext(SurfaceContext);
+};
+SurfaceContext.displayName = 'SurfaceProvider';

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

@@ -6,16 +6,20 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
+import invariant from 'tiny-invariant';
+import { colorMap } from '../internal/color-map';
+import { useSurface } from './surface-provider';
+var asAllowlist = ['span', 'div', 'p'];
 var fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
 var fontSizeMap = {
-  '11': css({
+  '11px': css({
     fontSize: '11px'
   }),
-  '12': css({
+  '12px': css({
     fontSize: '12px'
   }),
-  '14': css({
+  '14px': css({
     fontSize: '14px'
   })
 };
@@ -26,6 +30,9 @@ var fontWeightMap = {
   }),
   '500': css({
     fontWeight: 500
+  }),
+  '700': css({
+    fontWeight: 700
   })
 };
 var lineHeightMap = {
@@ -62,9 +69,37 @@ var textAlignMap = {
     textAlign: 'start'
   })
 };
+var textTransformMap = {
+  none: css({
+    textTransform: 'none'
+  }),
+  lowercase: css({
+    textTransform: 'lowercase'
+  }),
+  uppercase: css({
+    textTransform: 'uppercase'
+  })
+};
+var verticalAlignMap = {
+  top: css({
+    verticalAlign: 'top'
+  }),
+  middle: css({
+    verticalAlign: 'middle'
+  }),
+  bottom: css({
+    verticalAlign: 'bottom'
+  })
+};
 var baseStyles = css({
+  boxSizing: 'border-box',
   fontFamily: fontFamily
 });
+var truncateStyles = css({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
 /**
  * __Text__
  *
@@ -76,6 +111,8 @@ var baseStyles = css({
  */
 
 var Text = function Text(_ref) {
+  var _colorMap$surface;
+
   var _ref$as = _ref.as,
       Component = _ref$as === void 0 ? 'span' : _ref$as,
       children = _ref.children,
@@ -83,22 +120,27 @@ var Text = function Text(_ref) {
       fontSize = _ref.fontSize,
       fontWeight = _ref.fontWeight,
       lineHeight = _ref.lineHeight,
+      _ref$shouldTruncate = _ref.shouldTruncate,
+      shouldTruncate = _ref$shouldTruncate === void 0 ? false : _ref$shouldTruncate,
       textAlign = _ref.textAlign,
-      href = _ref.href,
+      textTransform = _ref.textTransform,
+      verticalAlign = _ref.verticalAlign,
       testId = _ref.testId,
       UNSAFE_style = _ref.UNSAFE_style;
+  var surface = useSurface(); // @ts-ignore
 
   var _ref2 = colorTuple || [],
       _ref3 = _slicedToArray(_ref2, 2),
-      color = _ref3[0],
+      _ref3$ = _ref3[0],
+      color = _ref3$ === void 0 ? (_colorMap$surface = colorMap[surface]) !== null && _colorMap$surface !== void 0 ? _colorMap$surface : 'color.text' : _ref3$,
       fallback = _ref3[1];
 
+  invariant(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));
   return jsx(Component, {
     style: _objectSpread(_objectSpread({}, UNSAFE_style), fallback && {
       '--ds-co-fb': fallback
     }),
-    css: [baseStyles, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight], lineHeight && lineHeightMap[lineHeight], textAlign && textAlignMap[textAlign]],
-    href: href,
+    css: [baseStyles, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight], lineHeight && lineHeightMap[lineHeight], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], textTransform && textTransformMap[textTransform], verticalAlign && verticalAlignMap[verticalAlign]],
     "data-testid": testId
   }, children);
 };
@@ -106,7 +148,7 @@ var Text = function Text(_ref) {
 export default Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::85a0a0bc073c7af8fd63101d6c88d59e>>
+ * @codegen <<SignedSource::140ffff6e1310c1c37e2067e2c232b92>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]

package/dist/esm/constants.js

@@ -4,6 +4,7 @@ export var SPACING_SCALE = {
   'sp-50': 4,
   'sp-75': 6,
   'sp-100': 8,
+  'sp-150': 12,
   'sp-200': 16,
   'sp-300': 24,
   'sp-400': 32,

package/dist/esm/index.js

@@ -1,4 +1,6 @@
 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_Stack } from './components/stack.partial';
+export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
+export { SPACING_SCALE as UNSAFE_SPACING_SCALE } from './constants';