@atlaskit/ds-explorations 2.0.0 → 2.0.2

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

@@ -1,24 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
-
 var _colorMap = _interopRequireDefault(require("../internal/color-map"));
-
 var _surfaceProvider = require("./surface-provider");
-
 var _excluded = ["children"];
 var asAllowlist = ['span', 'div', 'p', 'strong'];
 var textAlignMap = {
@@ -64,27 +56,26 @@ var truncateStyles = (0, _react2.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 = (0, _surfaceProvider.useSurface)();
   var inverseTextColor = _colorMap.default[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__*/(0, _react.createContext)(false);
-
 var useHasTextAncestor = function useHasTextAncestor() {
   return (0, _react.useContext)(HasTextAncestorContext);
 };
+
 /**
  * __Text__
  *
@@ -94,59 +85,55 @@ var useHasTextAncestor = function useHasTextAncestor() {
  *
  * @internal
  */
-
-
 var Text = function Text(_ref) {
   var children = _ref.children,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    props = (0, _objectWithoutProperties2.default)(_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;
   (0, _tinyInvariant.default)(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 (0, _react2.jsx)(_react.Fragment, null, children);
   }
-
   var component = (0, _react2.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 : (0, _react2.jsx)(HasTextAncestorContext.Provider, {
     value: true
   }, component);
 };
-
 var _default = Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::bd36caff8bedb3bdc89b6f2311c6160a>>
+ * @codegen <<SignedSource::9f746e797b8b5262d58b40dfecb39e6d>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::39bc8db0f376f5635a25be0137792642>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6bf70c53b8eecdb84ae4c79966537e3>>
  */
-
 exports.default = _default;
 var fontSizeMap = {
   'size.050': (0, _react2.css)({
@@ -216,41 +203,34 @@ 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::d88a2527302fee634bec7ae405e9217b>>
+ * @codegen <<SignedSource::3780858df77f5fe0c6e0f39a4c989741>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 var textColorMap = {
   'color.text': (0, _react2.css)({
     color: "var(--ds-text, #172B4D)"
   }),
-  subtle: (0, _react2.css)({
-    color: "var(--ds-text-subtle, #42526E)"
-  }),
-  subtlest: (0, _react2.css)({
-    color: "var(--ds-text-subtlest, #7A869A)"
-  }),
   disabled: (0, _react2.css)({
     color: "var(--ds-text-disabled, #A5ADBA)"
   }),
   inverse: (0, _react2.css)({
     color: "var(--ds-text-inverse, #FFFFFF)"
   }),
-  brand: (0, _react2.css)({
-    color: "var(--ds-text-brand, #0065FF)"
-  }),
   selected: (0, _react2.css)({
     color: "var(--ds-text-selected, #0052CC)"
   }),
+  brand: (0, _react2.css)({
+    color: "var(--ds-text-brand, #0065FF)"
+  }),
   danger: (0, _react2.css)({
     color: "var(--ds-text-danger, #DE350B)"
   }),
@@ -268,8 +248,15 @@ var textColorMap = {
   }),
   information: (0, _react2.css)({
     color: "var(--ds-text-information, #0052CC)"
+  }),
+  subtlest: (0, _react2.css)({
+    color: "var(--ds-text-subtlest, #7A869A)"
+  }),
+  subtle: (0, _react2.css)({
+    color: "var(--ds-text-subtle, #42526E)"
   })
 };
+
 /**
  * @codegenEnd
  */

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -35,13 +34,8 @@ Object.defineProperty(exports, "UNSAFE_Text", {
     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/cjs/internal/color-map.js

@@ -4,26 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::55412dc750db330e0a2a51918237e29f>>
+ * @codegen <<SignedSource::d168519874a16bbb92cfbfd4747a39b4>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 var _default = {
   'neutral.bold': 'inverse',
   'neutral.bold.hovered': 'inverse',
   'neutral.bold.pressed': 'inverse',
-  'brand.bold': 'inverse',
-  'brand.bold.hovered': 'inverse',
-  'brand.bold.pressed': 'inverse',
   'selected.bold': 'inverse',
   'selected.bold.hovered': 'inverse',
   'selected.bold.pressed': 'inverse',
+  'brand.bold': 'inverse',
+  'brand.bold.hovered': 'inverse',
+  'brand.bold.pressed': 'inverse',
   'danger.bold': 'inverse',
   'danger.bold.hovered': 'inverse',
   'danger.bold.pressed': 'inverse',

package/dist/cjs/internal/role-to-element.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /**
  * Adapted straight from react-mui, with a small change.
  * @see https://www.unpkg.com/browse/react-gui@0.2.1/src/modules/getAccessibilityElementWithSideEffect.js

package/dist/cjs/internal/spacing-scale.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.spacingScale = void 0;
-
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *

package/dist/cjs/version.json

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

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

@@ -1,11 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { LAYERS } from '../constants';
 import { SurfaceContext } from './surface-provider';
-
 /**
  * __Box__
  *
@@ -43,8 +41,8 @@ export const Box = /*#__PURE__*/forwardRef(({
   const Component = as || 'div';
   const 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]],
@@ -55,7 +53,9 @@ export const Box = /*#__PURE__*/forwardRef(({
   }, node) : node;
 });
 Box.displayName = 'Box';
-export default Box; // <<< STYLES GO HERE >>>
+export default Box;
+
+// <<< STYLES GO HERE >>>
 
 const borderStyleMap = {
   none: css({
@@ -96,6 +96,7 @@ const borderRadiusMap = {
     borderRadius: '8px'
   })
 };
+
 /**
  * @experimental - this is likely to be removed
  */
@@ -108,6 +109,7 @@ const flexDirectionMap = {
     flexDirection: 'row'
   })
 };
+
 /**
  * @experimental - this is likely to be removed
  */
@@ -132,6 +134,7 @@ const flexAlignItemsMap = {
     alignItems: 'end'
   })
 };
+
 /**
  * @experimental - this is likely to be removed
  */
@@ -197,6 +200,7 @@ const baseStyles = css({
   appearance: 'none',
   border: 'none'
 });
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::327e769aaa3da9422a919a0ca9490070>>
@@ -204,7 +208,6 @@ const baseStyles = css({
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["width", "height"]
  */
-
 const widthMap = {
   '100%': css({
     width: '100%'
@@ -257,18 +260,17 @@ const 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>>
  */
 const paddingMap = {
   'space.0': css({
@@ -402,28 +404,24 @@ const 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>>
  */
 const 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)"
@@ -431,15 +429,15 @@ const 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)"
   }),
@@ -454,18 +452,21 @@ const borderColorMap = {
   }),
   information: css({
     borderColor: "var(--ds-border-information, #0065FF)"
+  }),
+  bold: css({
+    borderColor: "var(--ds-border-bold, #344563)"
   })
 };
 const 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)"
   }),
@@ -475,15 +476,15 @@ const 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)"
   }),
@@ -526,34 +527,33 @@ const 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)"
   })
 };
 const 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
  */
@@ -594,6 +594,7 @@ const layerMap = {
     zIndex: LAYERS['tooltip']
   })
 };
+
 /**
  * @codegenEnd
  */

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

@@ -60,12 +60,12 @@ const dividerStyles = css({
   pointerEvents: 'none',
   userSelect: 'none'
 });
-
 const Divider = ({
   children
 }) => jsx("span", {
   css: dividerStyles
 }, children);
+
 /**
  * __Inline__
  *
@@ -82,8 +82,6 @@ const Divider = ({
  * )
  * ```
  */
-
-
 const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   gap,
   alignItems,
@@ -109,15 +107,15 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 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>>
  */
-
 const columnGapMap = {
   'space.0': css({
     columnGap: "var(--ds-space-0, 0px)"
@@ -162,6 +160,7 @@ const columnGapMap = {
     columnGap: "var(--ds-space-800, 64px)"
   })
 };
+
 /**
  * @codegenEnd
  */