@atlaskit/ds-explorations 2.3.1 → 2.4.0

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

@@ -0,0 +1,182 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+/** @jsx jsx */
+
+/**
+ * @private
+ * @deprecated DSP-8009: This type is scheduled for deletion.
+ * Please use `Inline` from `@atlaskit/primitives` instead.
+ */
+
+var flexAlignItemsMap = {
+  center: (0, _react2.css)({
+    alignItems: 'center'
+  }),
+  baseline: (0, _react2.css)({
+    alignItems: 'baseline'
+  }),
+  flexStart: (0, _react2.css)({
+    alignItems: 'flex-start'
+  }),
+  flexEnd: (0, _react2.css)({
+    alignItems: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    alignItems: 'start'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'end'
+  })
+};
+var flexJustifyContentMap = {
+  center: (0, _react2.css)({
+    justifyContent: 'center'
+  }),
+  flexStart: (0, _react2.css)({
+    justifyContent: 'flex-start'
+  }),
+  'space-between': (0, _react2.css)({
+    justifyContent: 'space-between'
+  }),
+  flexEnd: (0, _react2.css)({
+    justifyContent: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    justifyContent: 'start'
+  }),
+  end: (0, _react2.css)({
+    justifyContent: 'end'
+  }),
+  spaceBetween: (0, _react2.css)({
+    justifyContent: 'space-between'
+  })
+};
+var flexWrapMap = {
+  wrap: (0, _react2.css)({
+    flexWrap: 'wrap'
+  })
+};
+var baseStyles = (0, _react2.css)({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'row'
+});
+var dividerStyles = (0, _react2.css)({
+  margin: "0 ".concat("var(--ds-space-negative-025, -2px)"),
+  color: "var(--ds-text-subtle, #42526E)",
+  pointerEvents: 'none',
+  userSelect: 'none'
+});
+var Divider = function Divider(_ref) {
+  var children = _ref.children;
+  return (0, _react2.jsx)("span", {
+    css: dividerStyles
+  }, children);
+};
+
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ * Renders a `div` by default.
+ *
+ * @private
+ * @deprecated DSP-8009: This primitive is scheduled for deletion.
+ * Please use `Inline` from `@atlaskit/primitives` instead.
+ *
+ * @example
+ * ```tsx
+ * const App = () => (
+ *   <Inline gap="space.100">
+ *     <Button />
+ *     <Button />
+ *   </Inline>
+ * )
+ * ```
+ */
+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;
+  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, {
+      key: index
+    }, divider && index > 0 ? dividerComponent : null, child);
+  }) : rawChildren;
+  return (0, _react2.jsx)("div", {
+    style: UNSAFE_style,
+    css: [baseStyles, gap && columnGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Inline.displayName = 'Inline';
+var _default = exports.default = Inline;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::63747c8b92ba373ad2259fa1fff3f434>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["columnGap"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::298080e8024fb3eb37589721413e0156>>
+ */
+var columnGapMap = {
+  'space.0': (0, _react2.css)({
+    columnGap: "var(--ds-space-0, 0px)"
+  }),
+  'space.025': (0, _react2.css)({
+    columnGap: "var(--ds-space-025, 2px)"
+  }),
+  'space.050': (0, _react2.css)({
+    columnGap: "var(--ds-space-050, 4px)"
+  }),
+  'space.075': (0, _react2.css)({
+    columnGap: "var(--ds-space-075, 6px)"
+  }),
+  'space.100': (0, _react2.css)({
+    columnGap: "var(--ds-space-100, 8px)"
+  }),
+  'space.1000': (0, _react2.css)({
+    columnGap: "var(--ds-space-1000, 80px)"
+  }),
+  'space.150': (0, _react2.css)({
+    columnGap: "var(--ds-space-150, 12px)"
+  }),
+  'space.200': (0, _react2.css)({
+    columnGap: "var(--ds-space-200, 16px)"
+  }),
+  'space.250': (0, _react2.css)({
+    columnGap: "var(--ds-space-250, 20px)"
+  }),
+  'space.300': (0, _react2.css)({
+    columnGap: "var(--ds-space-300, 24px)"
+  }),
+  'space.400': (0, _react2.css)({
+    columnGap: "var(--ds-space-400, 32px)"
+  }),
+  'space.500': (0, _react2.css)({
+    columnGap: "var(--ds-space-500, 40px)"
+  }),
+  'space.600': (0, _react2.css)({
+    columnGap: "var(--ds-space-600, 48px)"
+  }),
+  'space.800': (0, _react2.css)({
+    columnGap: "var(--ds-space-800, 64px)"
+  })
+};
+
+/**
+ * @codegenEnd
+ */

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

@@ -50,7 +50,7 @@ var InteractionSurface = function InteractionSurface(_ref) {
     css: [baseStyles, surface && backgroundHoverColorMap[surface], surface && backgroundActiveColorMap[surface]]
   }), children);
 };
-var _default = InteractionSurface;
+var _default = exports.default = InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::b4ea5e1af482e869a4e0a65e8080cfbf>>
@@ -59,7 +59,6 @@ var _default = InteractionSurface;
  * @codegenParams ["background"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
  */
-exports.default = _default;
 var backgroundActiveColorMap = {
   'accent.lime.subtlest': (0, _react2.css)({
     ':active': {

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

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+/** @jsx jsx */
+
+/**
+ * @private
+ * @deprecated DSP-8009: This type is scheduled for deletion.
+ * Please use `Stack` from `@atlaskit/primitives` instead.
+ */
+
+var flexAlignItemsMap = {
+  center: (0, _react2.css)({
+    alignItems: 'center'
+  }),
+  baseline: (0, _react2.css)({
+    alignItems: 'baseline'
+  }),
+  flexStart: (0, _react2.css)({
+    alignItems: 'flex-start'
+  }),
+  flexEnd: (0, _react2.css)({
+    alignItems: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    alignItems: 'start'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'end'
+  })
+};
+var flexJustifyContentMap = {
+  center: (0, _react2.css)({
+    justifyContent: 'center'
+  }),
+  flexStart: (0, _react2.css)({
+    justifyContent: 'flex-start'
+  }),
+  flexEnd: (0, _react2.css)({
+    justifyContent: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    justifyContent: 'start'
+  }),
+  end: (0, _react2.css)({
+    justifyContent: 'end'
+  })
+};
+var flexWrapMap = {
+  wrap: (0, _react2.css)({
+    flexWrap: 'wrap'
+  })
+};
+var baseStyles = (0, _react2.css)({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'column'
+});
+
+/**
+ * __Stack__
+ *
+ * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ * Renders a `div` by default.
+ *
+ * @private
+ * @deprecated DSP-8009: This primitive is scheduled for deletion.
+ * Please use `Stack` from `@atlaskit/primitives` instead.
+ *
+ */
+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;
+  return (0, _react2.jsx)("div", {
+    style: UNSAFE_style,
+    css: [baseStyles, gap && rowGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Stack.displayName = 'Stack';
+var _default = exports.default = Stack;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::02ffa7c4ee52871441d288f44a054685>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["rowGap"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::298080e8024fb3eb37589721413e0156>>
+ */
+var rowGapMap = {
+  'space.0': (0, _react2.css)({
+    rowGap: "var(--ds-space-0, 0px)"
+  }),
+  'space.025': (0, _react2.css)({
+    rowGap: "var(--ds-space-025, 2px)"
+  }),
+  'space.050': (0, _react2.css)({
+    rowGap: "var(--ds-space-050, 4px)"
+  }),
+  'space.075': (0, _react2.css)({
+    rowGap: "var(--ds-space-075, 6px)"
+  }),
+  'space.100': (0, _react2.css)({
+    rowGap: "var(--ds-space-100, 8px)"
+  }),
+  'space.1000': (0, _react2.css)({
+    rowGap: "var(--ds-space-1000, 80px)"
+  }),
+  'space.150': (0, _react2.css)({
+    rowGap: "var(--ds-space-150, 12px)"
+  }),
+  'space.200': (0, _react2.css)({
+    rowGap: "var(--ds-space-200, 16px)"
+  }),
+  'space.250': (0, _react2.css)({
+    rowGap: "var(--ds-space-250, 20px)"
+  }),
+  'space.300': (0, _react2.css)({
+    rowGap: "var(--ds-space-300, 24px)"
+  }),
+  'space.400': (0, _react2.css)({
+    rowGap: "var(--ds-space-400, 32px)"
+  }),
+  'space.500': (0, _react2.css)({
+    rowGap: "var(--ds-space-500, 40px)"
+  }),
+  'space.600': (0, _react2.css)({
+    rowGap: "var(--ds-space-600, 48px)"
+  }),
+  'space.800': (0, _react2.css)({
+    rowGap: "var(--ds-space-800, 64px)"
+  })
+};
+
+/**
+ * @codegenEnd
+ */

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

@@ -10,7 +10,7 @@ var _react = require("react");
  *
  * A surface context provides context information on the current background (if set).
  */
-var SurfaceContext = /*#__PURE__*/(0, _react.createContext)('elevation.surface');
+var SurfaceContext = exports.SurfaceContext = /*#__PURE__*/(0, _react.createContext)('elevation.surface');
 
 /**
  * __useSurface__
@@ -19,9 +19,7 @@ var SurfaceContext = /*#__PURE__*/(0, _react.createContext)('elevation.surface')
  *
  * @see SurfaceContext
  */
-exports.SurfaceContext = SurfaceContext;
-var useSurface = function useSurface() {
+var useSurface = exports.useSurface = function useSurface() {
   return (0, _react.useContext)(SurfaceContext);
 };
-exports.useSurface = useSurface;
 SurfaceContext.displayName = 'SurfaceProvider';

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

@@ -132,16 +132,15 @@ var Text = function Text(_ref) {
     value: true
   }, component);
 };
-var _default = Text;
+var _default = exports.default = Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::de3943f17f27e9d5895c249c30c12802>>
+ * @codegen <<SignedSource::14dcf59f69533f453ffa8a5c5d165d19>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::85d34d11efbf90832fccaf960c2ea033>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::b01e60e475c0cb12960865631f2b4e2c>>
  */
-exports.default = _default;
 var fontSizeMap = {
   'size.050': (0, _react2.css)({
     fontSize: "var(--ds-font-size-050, 11px)"
@@ -184,7 +183,7 @@ var fontWeightMap = {
 };
 var fontFamilyMap = {
   body: (0, _react2.css)({
-    fontFamily: "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)"
+    fontFamily: "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
   }),
   brand: (0, _react2.css)({
     fontFamily: "var(--ds-font-family-brand, Charlie Sans)"
@@ -193,7 +192,7 @@ var fontFamilyMap = {
     fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
   }),
   heading: (0, _react2.css)({
-    fontFamily: "var(--ds-font-family-heading, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)"
+    fontFamily: "var(--ds-font-family-heading, ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
   }),
   monospace: (0, _react2.css)({
     fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"

package/dist/cjs/constants.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LAYERS = void 0;
-var LAYERS = {
+var LAYERS = exports.LAYERS = {
   card: 100,
   navigation: 200,
   dialog: 300,
@@ -14,5 +14,4 @@ var LAYERS = {
   flag: 600,
   spotlight: 700,
   tooltip: 800
-};
-exports.LAYERS = LAYERS;
+};

package/dist/cjs/index.js

@@ -4,17 +4,38 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "UNSAFE_Box", {
+  enumerable: true,
+  get: function get() {
+    return _box.default;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_Inline", {
+  enumerable: true,
+  get: function get() {
+    return _inline.default;
+  }
+});
 Object.defineProperty(exports, "UNSAFE_InteractionSurface", {
   enumerable: true,
   get: function get() {
     return _interactionSurface.default;
   }
 });
+Object.defineProperty(exports, "UNSAFE_Stack", {
+  enumerable: true,
+  get: function get() {
+    return _stack.default;
+  }
+});
 Object.defineProperty(exports, "UNSAFE_Text", {
   enumerable: true,
   get: function get() {
     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

@@ -13,7 +13,7 @@ exports.default = void 0;
  * @codegenCommand yarn codegen-styles
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
  */
-var _default = {
+var _default = exports.default = {
   'neutral.bold': 'inverse',
   'neutral.bold.hovered': 'inverse',
   'neutral.bold.pressed': 'inverse',
@@ -41,5 +41,4 @@ var _default = {
   'information.bold': 'inverse',
   'information.bold.hovered': 'inverse',
   'information.bold.pressed': 'inverse'
-};
-exports.default = _default;
+};

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

@@ -31,5 +31,4 @@ var roleToElementType = {
   presentation: 'div',
   group: 'fieldset'
 };
-var _default = roleToElementType;
-exports.default = _default;
+var _default = exports.default = roleToElementType;

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

@@ -12,5 +12,4 @@ exports.spacingScale = void 0;
  * @codegen <<SignedSource::885d6c601dfa9fccaf33a7bd461ef59d>>
  * @codegenCommand yarn codegen-styles
  */
-var spacingScale = ['space.0', 'space.025', 'space.050', 'space.075', 'space.100', 'space.150', 'space.200', 'space.250', 'space.300', 'space.400', 'space.500', 'space.600', 'space.800', 'space.1000'];
-exports.spacingScale = spacingScale;
+var spacingScale = exports.spacingScale = ['space.0', 'space.025', 'space.050', 'space.075', 'space.100', 'space.150', 'space.200', 'space.250', 'space.300', 'space.400', 'space.500', 'space.600', 'space.800', 'space.1000'];