@atlaskit/ds-explorations 2.0.1 → 2.0.2

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

@@ -13,7 +13,6 @@ var baseStyles = css({
     pointerEvents: 'none'
   }
 });
-
 /**
  *
  * @example
@@ -28,33 +27,32 @@ 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::86378a9df36e53f14f179490e5850418>>
+ * @codegen <<SignedSource::4f6bde99739600abea2bbe6e62397bc4>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::e348c7cd343cf53ff944fdb7023c577a>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
-
 var backgroundActiveColorMap = {
   input: css({
     ':active': {
@@ -269,6 +267,7 @@ var backgroundHoverColorMap = {
     }
   })
 };
+
 /**
  * @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,6 +73,7 @@ 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::91d26b1ace8b38363779ae85a7ddc51b>>
@@ -81,7 +82,6 @@ export default Stack;
  * @codegenParams ["rowGap"]
  * @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);
 };

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

@@ -1,6 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
-
 /** @jsx jsx */
 import { createContext, Fragment, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -51,27 +50,26 @@ var truncateStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+
 /**
  * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
  */
-
 var useColor = function useColor(colorProp) {
   var surface = useSurface();
   var inverseTextColor = surfaceColorMap[surface];
+
   /**
    * Where the color of the surface is inverted we override the user choice
    * as there is no valid choice that is not covered by the override.
    */
-
   var color = inverseTextColor !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp;
   return color;
 };
-
 var HasTextAncestorContext = /*#__PURE__*/createContext(false);
-
 var useHasTextAncestor = function useHasTextAncestor() {
   return useContext(HasTextAncestorContext);
 };
+
 /**
  * __Text__
  *
@@ -81,51 +79,48 @@ var useHasTextAncestor = function useHasTextAncestor() {
  *
  * @internal
  */
-
-
 var Text = function Text(_ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    props = _objectWithoutProperties(_ref, _excluded);
   var _props$as = props.as,
-      Component = _props$as === void 0 ? 'span' : _props$as,
-      colorProp = props.color,
-      fontSize = props.fontSize,
-      fontWeight = props.fontWeight,
-      lineHeight = props.lineHeight,
-      _props$shouldTruncate = props.shouldTruncate,
-      shouldTruncate = _props$shouldTruncate === void 0 ? false : _props$shouldTruncate,
-      textAlign = props.textAlign,
-      textTransform = props.textTransform,
-      verticalAlign = props.verticalAlign,
-      testId = props.testId,
-      UNSAFE_style = props.UNSAFE_style,
-      id = props.id;
+    Component = _props$as === void 0 ? 'span' : _props$as,
+    colorProp = props.color,
+    fontSize = props.fontSize,
+    fontWeight = props.fontWeight,
+    lineHeight = props.lineHeight,
+    _props$shouldTruncate = props.shouldTruncate,
+    shouldTruncate = _props$shouldTruncate === void 0 ? false : _props$shouldTruncate,
+    textAlign = props.textAlign,
+    textTransform = props.textTransform,
+    verticalAlign = props.verticalAlign,
+    testId = props.testId,
+    UNSAFE_style = props.UNSAFE_style,
+    id = props.id;
   invariant(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));
   var color = useColor(colorProp);
   var isWrapped = useHasTextAncestor();
+
   /**
    * If the text is already wrapped and applies no props we can just
    * render the children directly as a fragment.
    */
-
   if (isWrapped && Object.keys(props).length === 0) {
     return jsx(Fragment, null, children);
   }
-
   var component = jsx(Component, {
     style: UNSAFE_style,
     css: [baseStyles, fontFamilyMap.sans, 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,
     id: id
   }, children);
-  return isWrapped ? // no need to re-apply context if the text is already wrapped
+  return isWrapped ?
+  // no need to re-apply context if the text is already wrapped
   component : jsx(HasTextAncestorContext.Provider, {
     value: true
   }, component);
 };
-
 export default Text;
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::9f746e797b8b5262d58b40dfecb39e6d>>
@@ -134,7 +129,6 @@ export default Text;
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6bf70c53b8eecdb84ae4c79966537e3>>
  */
-
 var fontSizeMap = {
   'size.050': css({
     fontSize: "var(--ds-font-size-050, 11px)"
@@ -203,18 +197,17 @@ var lineHeightMap = {
     lineHeight: "var(--ds-font-lineHeight-600, 40px)"
   })
 };
-
 /**
  * @codegenEnd
  */
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ca24871d7a06dd779f21c85960ded8ba>>
+ * @codegen <<SignedSource::3780858df77f5fe0c6e0f39a4c989741>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::e348c7cd343cf53ff944fdb7023c577a>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 var textColorMap = {
   'color.text': css({
@@ -257,6 +250,7 @@ var textColorMap = {
     color: "var(--ds-text-subtle, #42526E)"
   })
 };
+
 /**
  * @codegenEnd
  */

package/dist/esm/internal/color-map.js

@@ -3,9 +3,9 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::2ca647ee8f34f9282287118d86be4585>>
+ * @codegen <<SignedSource::d168519874a16bbb92cfbfd4747a39b4>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::e348c7cd343cf53ff944fdb7023c577a>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 export default {
   'neutral.bold': 'inverse',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "2.0.1",
+	"version": "2.0.2",
 	"sideEffects": false
 }

package/dist/types/components/box.partial.d.ts

@@ -284,11 +284,11 @@ export declare type PaddingInline = keyof typeof paddingInlineMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::04c05379e7c6ad157383d5f77e66911a>>
+ * @codegen <<SignedSource::514663609a5a48a284de40c5c4ad200b>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background", "shadow"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::e348c7cd343cf53ff944fdb7023c577a>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 declare const borderColorMap: {
     readonly 'color.border': import("@emotion/react").SerializedStyles;

package/dist/types/components/text.partial.d.ts

@@ -124,11 +124,11 @@ export declare type LineHeight = keyof typeof lineHeightMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ca24871d7a06dd779f21c85960ded8ba>>
+ * @codegen <<SignedSource::3780858df77f5fe0c6e0f39a4c989741>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::e348c7cd343cf53ff944fdb7023c577a>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 declare const textColorMap: {
     readonly 'color.text': import("@emotion/react").SerializedStyles;

package/dist/types/internal/color-map.d.ts

@@ -29,8 +29,8 @@ declare const _default: {
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::2ca647ee8f34f9282287118d86be4585>>
+ * @codegen <<SignedSource::d168519874a16bbb92cfbfd4747a39b4>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::e348c7cd343cf53ff944fdb7023c577a>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "license": "Apache-2.0",
   "atlassian": {
@@ -39,7 +39,7 @@
     "./inline": "./src/components/inline.partial.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "tiny-invariant": "^1.2.0"

package/src/components/box.partial.tsx

@@ -503,11 +503,11 @@ export type PaddingInline = keyof typeof paddingInlineMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::04c05379e7c6ad157383d5f77e66911a>>
+ * @codegen <<SignedSource::514663609a5a48a284de40c5c4ad200b>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background", "shadow"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::e348c7cd343cf53ff944fdb7023c577a>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 const borderColorMap = {
   'color.border': css({

package/src/components/interaction-surface.partial.tsx

@@ -70,11 +70,11 @@ export default InteractionSurface;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::86378a9df36e53f14f179490e5850418>>
+ * @codegen <<SignedSource::4f6bde99739600abea2bbe6e62397bc4>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::e348c7cd343cf53ff944fdb7023c577a>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 const backgroundActiveColorMap = {
   input: css({

package/src/components/text.partial.tsx

@@ -287,11 +287,11 @@ export type LineHeight = keyof typeof lineHeightMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ca24871d7a06dd779f21c85960ded8ba>>
+ * @codegen <<SignedSource::3780858df77f5fe0c6e0f39a4c989741>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::e348c7cd343cf53ff944fdb7023c577a>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 const textColorMap = {
   'color.text': css({

package/src/internal/color-map.tsx

@@ -3,9 +3,9 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::2ca647ee8f34f9282287118d86be4585>>
+ * @codegen <<SignedSource::d168519874a16bbb92cfbfd4747a39b4>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::e348c7cd343cf53ff944fdb7023c577a>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 export default {
   'neutral.bold': 'inverse',