@atlaskit/primitives - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

CHANGELOG.md

 # @atlaskit/primitives
 
+## 0.1.0
+
+### Minor Changes
+
+- [`eeb8baa5d74`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eeb8baa5d74) - - Create `Stack` component
+  - Create `Inline` component
+
 ## 0.0.2
@@ -4,0 +11,0 @@

dist/cjs/components/inline.partial.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Inline", {
-  enumerable: true,
-  get: function get() {
-    return _inline.default;
-  }
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+/** @jsx jsx */
+
+var alignItemsMap = {
+  center: (0, _react2.css)({
+    alignItems: 'center'
+  }),
+  baseline: (0, _react2.css)({
+    alignItems: 'baseline'
+  }),
+  start: (0, _react2.css)({
+    alignItems: 'flex-start'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'flex-end'
+  })
+};
+var justifyContentMap = {
+  start: (0, _react2.css)({
+    justifyContent: 'flex-start'
+  }),
+  center: (0, _react2.css)({
+    justifyContent: 'center'
+  }),
+  end: (0, _react2.css)({
+    justifyContent: 'flex-end'
+  }),
+  'space-between': (0, _react2.css)({
+    justifyContent: 'space-between'
+  })
+};
+var flexGrowMap = {
+  hug: (0, _react2.css)({
+    flexGrow: 0
+  }),
+  fill: (0, _react2.css)({
+    flexGrow: 1
+  })
+};
+var flexWrapStyles = (0, _react2.css)({
+  flexWrap: 'wrap'
 });
-var _inline = _interopRequireDefault(require("@atlaskit/ds-explorations/inline"));
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+var spaceMap = {
+  '0': (0, _react2.css)({
+    gap: "var(--ds-space-0, 0px)"
+  }),
+  '025': (0, _react2.css)({
+    gap: "var(--ds-space-025, 2px)"
+  }),
+  '050': (0, _react2.css)({
+    gap: "var(--ds-space-050, 4px)"
+  }),
+  '075': (0, _react2.css)({
+    gap: "var(--ds-space-075, 6px)"
+  }),
+  '100': (0, _react2.css)({
+    gap: "var(--ds-space-100, 8px)"
+  }),
+  '1000': (0, _react2.css)({
+    gap: "var(--ds-space-1000, 80px)"
+  }),
+  '150': (0, _react2.css)({
+    gap: "var(--ds-space-150, 12px)"
+  }),
+  '200': (0, _react2.css)({
+    gap: "var(--ds-space-200, 16px)"
+  }),
+  '250': (0, _react2.css)({
+    gap: "var(--ds-space-250, 20px)"
+  }),
+  '300': (0, _react2.css)({
+    gap: "var(--ds-space-300, 24px)"
+  }),
+  '400': (0, _react2.css)({
+    gap: "var(--ds-space-400, 32px)"
+  }),
+  '500': (0, _react2.css)({
+    gap: "var(--ds-space-500, 40px)"
+  }),
+  '600': (0, _react2.css)({
+    gap: "var(--ds-space-600, 48px)"
+  }),
+  '800': (0, _react2.css)({
+    gap: "var(--ds-space-800, 64px)"
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+var baseStyles = (0, _react2.css)({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'row'
+});
+var separatorStyles = (0, _react2.css)({
+  color: "var(--ds-text-subtle, #42526E)",
+  marginBlock: "var(--ds-space-0, 0px)",
+  marginInline: "-".concat("var(--ds-space-025, 2px)"),
+  pointerEvents: 'none',
+  userSelect: 'none'
+});
+var Separator = function Separator(_ref) {
+  var children = _ref.children;
+  return (0, _react2.jsx)("span", {
+    css: separatorStyles
+  }, children);
+};
+
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ *
+ *
+ * @example
+ * ```tsx
+ *  <Inline>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Inline>
+ * ```
+ *
+ */
+var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var alignInline = _ref2.alignInline,
+    alignItems = _ref2.alignBlock,
+    _ref2$shouldWrap = _ref2.shouldWrap,
+    shouldWrap = _ref2$shouldWrap === void 0 ? false : _ref2$shouldWrap,
+    spread = _ref2.spread,
+    grow = _ref2.grow,
+    space = _ref2.space,
+    separator = _ref2.separator,
+    testId = _ref2.testId,
+    rawChildren = _ref2.children;
+  var separatorComponent = typeof separator === 'string' ? (0, _react2.jsx)(Separator, null, separator) : separator;
+  var children = separatorComponent ? _react.Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
+    return (0, _react2.jsx)(_react.Fragment, {
+      key: index
+    }, separator && index > 0 ? separatorComponent : null, child);
+  }) : rawChildren;
+  var justifyContent = spread || alignInline;
+  return (0, _react2.jsx)("div", {
+    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Inline.displayName = 'Inline';
+var _default = Inline;
+exports.default = _default;

dist/cjs/components/stack.partial.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Stack", {
-  enumerable: true,
-  get: function get() {
-    return _stack.default;
-  }
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+/** @jsx jsx */
+
+var justifyContentMap = {
+  start: (0, _react2.css)({
+    justifyContent: 'start'
+  }),
+  center: (0, _react2.css)({
+    justifyContent: 'center'
+  }),
+  end: (0, _react2.css)({
+    justifyContent: 'end'
+  }),
+  'space-between': (0, _react2.css)({
+    justifyContent: 'space-between'
+  })
+};
+var alignItemsMap = {
+  start: (0, _react2.css)({
+    alignItems: 'start'
+  }),
+  center: (0, _react2.css)({
+    alignItems: 'center'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'end'
+  })
+};
+var flexGrowMap = {
+  hug: (0, _react2.css)({
+    flexGrow: 0
+  }),
+  fill: (0, _react2.css)({
+    flexGrow: 1
+  })
+};
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+var spaceMap = {
+  '0': (0, _react2.css)({
+    gap: "var(--ds-space-0, 0px)"
+  }),
+  '025': (0, _react2.css)({
+    gap: "var(--ds-space-025, 2px)"
+  }),
+  '050': (0, _react2.css)({
+    gap: "var(--ds-space-050, 4px)"
+  }),
+  '075': (0, _react2.css)({
+    gap: "var(--ds-space-075, 6px)"
+  }),
+  '100': (0, _react2.css)({
+    gap: "var(--ds-space-100, 8px)"
+  }),
+  '1000': (0, _react2.css)({
+    gap: "var(--ds-space-1000, 80px)"
+  }),
+  '150': (0, _react2.css)({
+    gap: "var(--ds-space-150, 12px)"
+  }),
+  '200': (0, _react2.css)({
+    gap: "var(--ds-space-200, 16px)"
+  }),
+  '250': (0, _react2.css)({
+    gap: "var(--ds-space-250, 20px)"
+  }),
+  '300': (0, _react2.css)({
+    gap: "var(--ds-space-300, 24px)"
+  }),
+  '400': (0, _react2.css)({
+    gap: "var(--ds-space-400, 32px)"
+  }),
+  '500': (0, _react2.css)({
+    gap: "var(--ds-space-500, 40px)"
+  }),
+  '600': (0, _react2.css)({
+    gap: "var(--ds-space-600, 48px)"
+  }),
+  '800': (0, _react2.css)({
+    gap: "var(--ds-space-800, 64px)"
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+var baseStyles = (0, _react2.css)({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'column'
 });
-var _stack = _interopRequireDefault(require("@atlaskit/ds-explorations/stack"));
+
+/**
+ * __Stack__
+ *
+ * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ *
+ * @example
+ * ```tsx
+ *  <Stack>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Stack>
+ * ```
+ *
+ */
+var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var alignItems = _ref.alignInline,
+    alignBlock = _ref.alignBlock,
+    spread = _ref.spread,
+    grow = _ref.grow,
+    space = _ref.space,
+    children = _ref.children,
+    testId = _ref.testId;
+  var justifyContent = spread || alignBlock;
+  return (0, _react2.jsx)("div", {
+    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Stack.displayName = 'Stack';
+var _default = Stack;
+exports.default = _default;

dist/cjs/index.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
@@ -15,3 +16,3 @@ value: true
   get: function get() {
-    return _inline.Inline;
+    return _inline.default;
   }
@@ -22,7 +23,7 @@ });
   get: function get() {
-    return _stack.Stack;
+    return _stack.default;
   }
 });
-var _stack = require("./components/stack.partial");
+var _stack = _interopRequireDefault(require("./components/stack.partial"));
 var _box = require("./components/box");
-var _inline = require("./components/inline.partial");
+var _inline = _interopRequireDefault(require("./components/inline.partial"));

dist/cjs/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.0.2",
+	"version": "0.1.0",
 	"sideEffects": false
 }

dist/es2019/components/inline.partial.js

@@ -1,2 +0,158 @@
-// eslint-disable-next-line @repo/internal/codegen/signed-source-integrity
-export { default as Inline } from '@atlaskit/ds-explorations/inline';
+/** @jsx jsx */
+import { Children, forwardRef, Fragment, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+const alignItemsMap = {
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  start: css({
+    alignItems: 'flex-start'
+  }),
+  end: css({
+    alignItems: 'flex-end'
+  })
+};
+const justifyContentMap = {
+  start: css({
+    justifyContent: 'flex-start'
+  }),
+  center: css({
+    justifyContent: 'center'
+  }),
+  end: css({
+    justifyContent: 'flex-end'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  })
+};
+const flexGrowMap = {
+  hug: css({
+    flexGrow: 0
+  }),
+  fill: css({
+    flexGrow: 1
+  })
+};
+const flexWrapStyles = css({
+  flexWrap: 'wrap'
+});
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+const spaceMap = {
+  '0': css({
+    gap: "var(--ds-space-0, 0px)"
+  }),
+  '025': css({
+    gap: "var(--ds-space-025, 2px)"
+  }),
+  '050': css({
+    gap: "var(--ds-space-050, 4px)"
+  }),
+  '075': css({
+    gap: "var(--ds-space-075, 6px)"
+  }),
+  '100': css({
+    gap: "var(--ds-space-100, 8px)"
+  }),
+  '1000': css({
+    gap: "var(--ds-space-1000, 80px)"
+  }),
+  '150': css({
+    gap: "var(--ds-space-150, 12px)"
+  }),
+  '200': css({
+    gap: "var(--ds-space-200, 16px)"
+  }),
+  '250': css({
+    gap: "var(--ds-space-250, 20px)"
+  }),
+  '300': css({
+    gap: "var(--ds-space-300, 24px)"
+  }),
+  '400': css({
+    gap: "var(--ds-space-400, 32px)"
+  }),
+  '500': css({
+    gap: "var(--ds-space-500, 40px)"
+  }),
+  '600': css({
+    gap: "var(--ds-space-600, 48px)"
+  }),
+  '800': css({
+    gap: "var(--ds-space-800, 64px)"
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+const baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'row'
+});
+const separatorStyles = css({
+  color: "var(--ds-text-subtle, #42526E)",
+  marginBlock: "var(--ds-space-0, 0px)",
+  marginInline: `-${"var(--ds-space-025, 2px)"}`,
+  pointerEvents: 'none',
+  userSelect: 'none'
+});
+const Separator = ({
+  children
+}) => jsx("span", {
+  css: separatorStyles
+}, children);
+
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ *
+ *
+ * @example
+ * ```tsx
+ *  <Inline>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Inline>
+ * ```
+ *
+ */
+const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  alignInline,
+  alignBlock: alignItems,
+  shouldWrap = false,
+  spread,
+  grow,
+  space,
+  separator,
+  testId,
+  children: rawChildren
+}, ref) => {
+  const separatorComponent = typeof separator === 'string' ? jsx(Separator, null, separator) : separator;
+  const children = separatorComponent ? Children.toArray(rawChildren).filter(Boolean).map((child, index) => {
+    return jsx(Fragment, {
+      key: index
+    }, separator && index > 0 ? separatorComponent : null, child);
+  }) : rawChildren;
+  const justifyContent = spread || alignInline;
+  return jsx("div", {
+    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Inline.displayName = 'Inline';
+export default Inline;

dist/es2019/components/stack.partial.js

@@ -1,2 +0,131 @@
-// eslint-disable-next-line @repo/internal/codegen/signed-source-integrity
-export { default as Stack } from '@atlaskit/ds-explorations/stack';
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+const justifyContentMap = {
+  start: css({
+    justifyContent: 'start'
+  }),
+  center: css({
+    justifyContent: 'center'
+  }),
+  end: css({
+    justifyContent: 'end'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  })
+};
+const alignItemsMap = {
+  start: css({
+    alignItems: 'start'
+  }),
+  center: css({
+    alignItems: 'center'
+  }),
+  end: css({
+    alignItems: 'end'
+  })
+};
+const flexGrowMap = {
+  hug: css({
+    flexGrow: 0
+  }),
+  fill: css({
+    flexGrow: 1
+  })
+};
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+const spaceMap = {
+  '0': css({
+    gap: "var(--ds-space-0, 0px)"
+  }),
+  '025': css({
+    gap: "var(--ds-space-025, 2px)"
+  }),
+  '050': css({
+    gap: "var(--ds-space-050, 4px)"
+  }),
+  '075': css({
+    gap: "var(--ds-space-075, 6px)"
+  }),
+  '100': css({
+    gap: "var(--ds-space-100, 8px)"
+  }),
+  '1000': css({
+    gap: "var(--ds-space-1000, 80px)"
+  }),
+  '150': css({
+    gap: "var(--ds-space-150, 12px)"
+  }),
+  '200': css({
+    gap: "var(--ds-space-200, 16px)"
+  }),
+  '250': css({
+    gap: "var(--ds-space-250, 20px)"
+  }),
+  '300': css({
+    gap: "var(--ds-space-300, 24px)"
+  }),
+  '400': css({
+    gap: "var(--ds-space-400, 32px)"
+  }),
+  '500': css({
+    gap: "var(--ds-space-500, 40px)"
+  }),
+  '600': css({
+    gap: "var(--ds-space-600, 48px)"
+  }),
+  '800': css({
+    gap: "var(--ds-space-800, 64px)"
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+const baseStyles = 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.
+ *
+ * @example
+ * ```tsx
+ *  <Stack>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Stack>
+ * ```
+ *
+ */
+const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  alignInline: alignItems,
+  alignBlock,
+  spread,
+  grow,
+  space,
+  children,
+  testId
+}, ref) => {
+  const justifyContent = spread || alignBlock;
+  return jsx("div", {
+    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Stack.displayName = 'Stack';
+export default Stack;

dist/es2019/index.js

@@ -1,3 +0,3 @@
-export { Stack } from './components/stack.partial';
+export { default as Stack } from './components/stack.partial';
 export { Box } from './components/box';
-export { Inline } from './components/inline.partial';
+export { default as Inline } from './components/inline.partial';

dist/es2019/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.0.2",
+	"version": "0.1.0",
 	"sideEffects": false
 }

dist/esm/components/inline.partial.js

@@ -1,2 +0,159 @@
-// eslint-disable-next-line @repo/internal/codegen/signed-source-integrity
-export { default as Inline } from '@atlaskit/ds-explorations/inline';
+/** @jsx jsx */
+import { Children, forwardRef, Fragment, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+var alignItemsMap = {
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  start: css({
+    alignItems: 'flex-start'
+  }),
+  end: css({
+    alignItems: 'flex-end'
+  })
+};
+var justifyContentMap = {
+  start: css({
+    justifyContent: 'flex-start'
+  }),
+  center: css({
+    justifyContent: 'center'
+  }),
+  end: css({
+    justifyContent: 'flex-end'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  })
+};
+var flexGrowMap = {
+  hug: css({
+    flexGrow: 0
+  }),
+  fill: css({
+    flexGrow: 1
+  })
+};
+var flexWrapStyles = css({
+  flexWrap: 'wrap'
+});
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+var spaceMap = {
+  '0': css({
+    gap: "var(--ds-space-0, 0px)"
+  }),
+  '025': css({
+    gap: "var(--ds-space-025, 2px)"
+  }),
+  '050': css({
+    gap: "var(--ds-space-050, 4px)"
+  }),
+  '075': css({
+    gap: "var(--ds-space-075, 6px)"
+  }),
+  '100': css({
+    gap: "var(--ds-space-100, 8px)"
+  }),
+  '1000': css({
+    gap: "var(--ds-space-1000, 80px)"
+  }),
+  '150': css({
+    gap: "var(--ds-space-150, 12px)"
+  }),
+  '200': css({
+    gap: "var(--ds-space-200, 16px)"
+  }),
+  '250': css({
+    gap: "var(--ds-space-250, 20px)"
+  }),
+  '300': css({
+    gap: "var(--ds-space-300, 24px)"
+  }),
+  '400': css({
+    gap: "var(--ds-space-400, 32px)"
+  }),
+  '500': css({
+    gap: "var(--ds-space-500, 40px)"
+  }),
+  '600': css({
+    gap: "var(--ds-space-600, 48px)"
+  }),
+  '800': css({
+    gap: "var(--ds-space-800, 64px)"
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+var baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'row'
+});
+var separatorStyles = css({
+  color: "var(--ds-text-subtle, #42526E)",
+  marginBlock: "var(--ds-space-0, 0px)",
+  marginInline: "-".concat("var(--ds-space-025, 2px)"),
+  pointerEvents: 'none',
+  userSelect: 'none'
+});
+var Separator = function Separator(_ref) {
+  var children = _ref.children;
+  return jsx("span", {
+    css: separatorStyles
+  }, children);
+};
+
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ *
+ *
+ * @example
+ * ```tsx
+ *  <Inline>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Inline>
+ * ```
+ *
+ */
+var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var alignInline = _ref2.alignInline,
+    alignItems = _ref2.alignBlock,
+    _ref2$shouldWrap = _ref2.shouldWrap,
+    shouldWrap = _ref2$shouldWrap === void 0 ? false : _ref2$shouldWrap,
+    spread = _ref2.spread,
+    grow = _ref2.grow,
+    space = _ref2.space,
+    separator = _ref2.separator,
+    testId = _ref2.testId,
+    rawChildren = _ref2.children;
+  var separatorComponent = typeof separator === 'string' ? jsx(Separator, null, separator) : separator;
+  var children = separatorComponent ? Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
+    return jsx(Fragment, {
+      key: index
+    }, separator && index > 0 ? separatorComponent : null, child);
+  }) : rawChildren;
+  var justifyContent = spread || alignInline;
+  return jsx("div", {
+    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Inline.displayName = 'Inline';
+export default Inline;

dist/esm/components/stack.partial.js

@@ -1,2 +0,130 @@
-// eslint-disable-next-line @repo/internal/codegen/signed-source-integrity
-export { default as Stack } from '@atlaskit/ds-explorations/stack';
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+var justifyContentMap = {
+  start: css({
+    justifyContent: 'start'
+  }),
+  center: css({
+    justifyContent: 'center'
+  }),
+  end: css({
+    justifyContent: 'end'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  })
+};
+var alignItemsMap = {
+  start: css({
+    alignItems: 'start'
+  }),
+  center: css({
+    alignItems: 'center'
+  }),
+  end: css({
+    alignItems: 'end'
+  })
+};
+var flexGrowMap = {
+  hug: css({
+    flexGrow: 0
+  }),
+  fill: css({
+    flexGrow: 1
+  })
+};
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+var spaceMap = {
+  '0': css({
+    gap: "var(--ds-space-0, 0px)"
+  }),
+  '025': css({
+    gap: "var(--ds-space-025, 2px)"
+  }),
+  '050': css({
+    gap: "var(--ds-space-050, 4px)"
+  }),
+  '075': css({
+    gap: "var(--ds-space-075, 6px)"
+  }),
+  '100': css({
+    gap: "var(--ds-space-100, 8px)"
+  }),
+  '1000': css({
+    gap: "var(--ds-space-1000, 80px)"
+  }),
+  '150': css({
+    gap: "var(--ds-space-150, 12px)"
+  }),
+  '200': css({
+    gap: "var(--ds-space-200, 16px)"
+  }),
+  '250': css({
+    gap: "var(--ds-space-250, 20px)"
+  }),
+  '300': css({
+    gap: "var(--ds-space-300, 24px)"
+  }),
+  '400': css({
+    gap: "var(--ds-space-400, 32px)"
+  }),
+  '500': css({
+    gap: "var(--ds-space-500, 40px)"
+  }),
+  '600': css({
+    gap: "var(--ds-space-600, 48px)"
+  }),
+  '800': css({
+    gap: "var(--ds-space-800, 64px)"
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+var baseStyles = 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.
+ *
+ * @example
+ * ```tsx
+ *  <Stack>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Stack>
+ * ```
+ *
+ */
+var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var alignItems = _ref.alignInline,
+    alignBlock = _ref.alignBlock,
+    spread = _ref.spread,
+    grow = _ref.grow,
+    space = _ref.space,
+    children = _ref.children,
+    testId = _ref.testId;
+  var justifyContent = spread || alignBlock;
+  return jsx("div", {
+    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Stack.displayName = 'Stack';
+export default Stack;

dist/esm/index.js

@@ -1,3 +0,3 @@
-export { Stack } from './components/stack.partial';
+export { default as Stack } from './components/stack.partial';
 export { Box } from './components/box';
-export { Inline } from './components/inline.partial';
+export { default as Inline } from './components/inline.partial';

dist/esm/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.0.2",
+	"version": "0.1.0",
 	"sideEffects": false
 }

dist/types/components/inline.partial.d.ts

@@ -1,1 +0,86 @@
-export { default as Inline } from '@atlaskit/ds-explorations/inline';
+/** @jsx jsx */
+import { ReactNode } from 'react';
+export interface InlineProps {
+    /**
+     * Used to align children along the main axis.
+     */
+    alignBlock?: AlignBlock;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignInline?: AlignInline;
+    /**
+     * Used to set whether children are forced onto one line or will wrap onto multiple lines.
+     */
+    shouldWrap?: boolean;
+    /**
+     * Used to distribute the children along the main axis.
+     */
+    spread?: Spread;
+    /**
+     * Used to set whether the content should grow to fill the available space.
+     */
+    grow?: Grow;
+    /**
+     * Represents the space between each child.
+     */
+    space?: Space;
+    /**
+     * Renders a separator string between each child.
+     */
+    separator?: string;
+    /**
+     * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Elements to be rendered inside the Stack.
+     */
+    children: ReactNode;
+}
+export declare type AlignInline = 'start' | 'center' | 'end';
+export declare type AlignBlock = 'start' | 'center' | 'end' | 'baseline';
+export declare type Spread = 'space-between';
+export declare type Grow = 'hug' | 'fill';
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+declare const spaceMap: {
+    '0': import("@emotion/react").SerializedStyles;
+    '025': import("@emotion/react").SerializedStyles;
+    '050': import("@emotion/react").SerializedStyles;
+    '075': import("@emotion/react").SerializedStyles;
+    '100': import("@emotion/react").SerializedStyles;
+    '1000': import("@emotion/react").SerializedStyles;
+    '150': import("@emotion/react").SerializedStyles;
+    '200': import("@emotion/react").SerializedStyles;
+    '250': import("@emotion/react").SerializedStyles;
+    '300': import("@emotion/react").SerializedStyles;
+    '400': import("@emotion/react").SerializedStyles;
+    '500': import("@emotion/react").SerializedStyles;
+    '600': import("@emotion/react").SerializedStyles;
+    '800': import("@emotion/react").SerializedStyles;
+};
+export declare type Space = keyof typeof spaceMap;
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ *
+ *
+ * @example
+ * ```tsx
+ *  <Inline>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Inline>
+ * ```
+ *
+ */
+declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<InlineProps & import("react").RefAttributes<HTMLDivElement>>>;
+export default Inline;

dist/types/components/stack.partial.d.ts

@@ -1,1 +0,77 @@
-export { default as Stack } from '@atlaskit/ds-explorations/stack';
+/** @jsx jsx */
+import { ReactNode } from 'react';
+export interface StackProps {
+    /**
+     * Used to align children along the main axis.
+     */
+    alignBlock?: AlignBlock;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignInline?: AlignInline;
+    /**
+     * Used to distribute the children along the main axis.
+     */
+    spread?: Spread;
+    /**
+     * Used to set whether the content should grow to fill the available space.
+     */
+    grow?: Grow;
+    /**
+     * Represents the space between each child.
+     */
+    space?: Space;
+    /**
+     * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Elements to be rendered inside the Stack.
+     */
+    children: ReactNode;
+}
+export declare type AlignInline = 'start' | 'center' | 'end';
+export declare type AlignBlock = 'start' | 'center' | 'end';
+export declare type Spread = 'space-between';
+export declare type Grow = 'hug' | 'fill';
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+declare const spaceMap: {
+    '0': import("@emotion/react").SerializedStyles;
+    '025': import("@emotion/react").SerializedStyles;
+    '050': import("@emotion/react").SerializedStyles;
+    '075': import("@emotion/react").SerializedStyles;
+    '100': import("@emotion/react").SerializedStyles;
+    '1000': import("@emotion/react").SerializedStyles;
+    '150': import("@emotion/react").SerializedStyles;
+    '200': import("@emotion/react").SerializedStyles;
+    '250': import("@emotion/react").SerializedStyles;
+    '300': import("@emotion/react").SerializedStyles;
+    '400': import("@emotion/react").SerializedStyles;
+    '500': import("@emotion/react").SerializedStyles;
+    '600': import("@emotion/react").SerializedStyles;
+    '800': import("@emotion/react").SerializedStyles;
+};
+export declare type Space = keyof typeof spaceMap;
+/**
+ * __Stack__
+ *
+ * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ *
+ * @example
+ * ```tsx
+ *  <Stack>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Stack>
+ * ```
+ *
+ */
+declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>>;
+export default Stack;

dist/types/index.d.ts

@@ -1,3 +0,3 @@
-export { Stack } from './components/stack.partial';
+export { default as Stack } from './components/stack.partial';
 export { Box } from './components/box';
-export { Inline } from './components/inline.partial';
+export { default as Inline } from './components/inline.partial';

package.json

 {
   "name": "@atlaskit/primitives",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Primitives are token-backed low-level building blocks.",
@@ -52,2 +52,3 @@ "author": "Atlassian Pty Ltd",
     "@atlaskit/ds-lib": "*",
+    "@atlaskit/heading": "*",
     "@atlaskit/ssr": "*",
@@ -90,2 +91,2 @@ "@atlaskit/visual-regression": "*",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}

report.api.md

@@ -19,11 +19,110 @@ <!-- API Report Version: 2.3 -->
 import { default as Box } from '@atlaskit/ds-explorations/box';
-import { default as Inline } from '@atlaskit/ds-explorations/inline';
-import { default as Stack } from '@atlaskit/ds-explorations/stack';
+import { ForwardRefExoticComponent } from 'react';
+import { MemoExoticComponent } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { SerializedStyles } from '@emotion/react';
 
+// @public (undocumented)
+type AlignBlock = 'center' | 'end' | 'start';
+
+// @public (undocumented)
+type AlignBlock_2 = 'baseline' | 'center' | 'end' | 'start';
+
+// @public (undocumented)
+type AlignInline = 'center' | 'end' | 'start';
+
+// @public (undocumented)
+type AlignInline_2 = 'center' | 'end' | 'start';
+
 export { Box };
 
-export { Inline };
+// @public (undocumented)
+type Grow = 'fill' | 'hug';
 
-export { Stack };
+// @public (undocumented)
+type Grow_2 = 'fill' | 'hug';
 
+// @public
+export const Inline: MemoExoticComponent<
+  ForwardRefExoticComponent<InlineProps & RefAttributes<HTMLDivElement>>
+>;
+
+// @public (undocumented)
+interface InlineProps {
+  alignBlock?: AlignBlock_2;
+  alignInline?: AlignInline_2;
+  children: ReactNode;
+  grow?: Grow_2;
+  separator?: string;
+  shouldWrap?: boolean;
+  space?: Space_2;
+  spread?: Spread_2;
+  testId?: string;
+}
+
+// @public (undocumented)
+type Space = keyof typeof spaceMap;
+
+// @public (undocumented)
+type Space_2 = keyof typeof spaceMap_2;
+
+// @public
+const spaceMap: {
+  '0': SerializedStyles;
+  '025': SerializedStyles;
+  '050': SerializedStyles;
+  '075': SerializedStyles;
+  '100': SerializedStyles;
+  '1000': SerializedStyles;
+  '150': SerializedStyles;
+  '200': SerializedStyles;
+  '250': SerializedStyles;
+  '300': SerializedStyles;
+  '400': SerializedStyles;
+  '500': SerializedStyles;
+  '600': SerializedStyles;
+  '800': SerializedStyles;
+};
+
+// @public
+const spaceMap_2: {
+  '0': SerializedStyles;
+  '025': SerializedStyles;
+  '050': SerializedStyles;
+  '075': SerializedStyles;
+  '100': SerializedStyles;
+  '1000': SerializedStyles;
+  '150': SerializedStyles;
+  '200': SerializedStyles;
+  '250': SerializedStyles;
+  '300': SerializedStyles;
+  '400': SerializedStyles;
+  '500': SerializedStyles;
+  '600': SerializedStyles;
+  '800': SerializedStyles;
+};
+
+// @public (undocumented)
+type Spread = 'space-between';
+
+// @public (undocumented)
+type Spread_2 = 'space-between';
+
+// @public
+export const Stack: MemoExoticComponent<
+  ForwardRefExoticComponent<StackProps & RefAttributes<HTMLDivElement>>
+>;
+
+// @public (undocumented)
+interface StackProps {
+  alignBlock?: AlignBlock;
+  alignInline?: AlignInline;
+  children: ReactNode;
+  grow?: Grow;
+  space?: Space;
+  spread?: Spread;
+  testId?: string;
+}
+
 // (No @packageDocumentation comment for this package)
@@ -30,0 +129,0 @@ ```

tmp/api-report-tmp.d.ts

@@ -8,13 +8,108 @@ ## API Report File for "@atlaskit/primitives"
 import { default as Box } from '@atlaskit/ds-explorations/box';
-import { default as Inline } from '@atlaskit/ds-explorations/inline';
-import { default as Stack } from '@atlaskit/ds-explorations/stack';
+import { ForwardRefExoticComponent } from 'react';
+import { MemoExoticComponent } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { SerializedStyles } from '@emotion/react';
 
+// @public (undocumented)
+type AlignBlock = 'center' | 'end' | 'start';
+
+// @public (undocumented)
+type AlignBlock_2 = 'baseline' | 'center' | 'end' | 'start';
+
+// @public (undocumented)
+type AlignInline = 'center' | 'end' | 'start';
+
+// @public (undocumented)
+type AlignInline_2 = 'center' | 'end' | 'start';
+
 export { Box }
 
-export { Inline }
+// @public (undocumented)
+type Grow = 'fill' | 'hug';
 
-export { Stack }
+// @public (undocumented)
+type Grow_2 = 'fill' | 'hug';
 
+// @public
+export const Inline: MemoExoticComponent<ForwardRefExoticComponent<InlineProps & RefAttributes<HTMLDivElement>>>;
+
+// @public (undocumented)
+interface InlineProps {
+    alignBlock?: AlignBlock_2;
+    alignInline?: AlignInline_2;
+    children: ReactNode;
+    grow?: Grow_2;
+    separator?: string;
+    shouldWrap?: boolean;
+    space?: Space_2;
+    spread?: Spread_2;
+    testId?: string;
+}
+
+// @public (undocumented)
+type Space = keyof typeof spaceMap;
+
+// @public (undocumented)
+type Space_2 = keyof typeof spaceMap_2;
+
+// @public
+const spaceMap: {
+    '0': SerializedStyles;
+    '025': SerializedStyles;
+    '050': SerializedStyles;
+    '075': SerializedStyles;
+    '100': SerializedStyles;
+    '1000': SerializedStyles;
+    '150': SerializedStyles;
+    '200': SerializedStyles;
+    '250': SerializedStyles;
+    '300': SerializedStyles;
+    '400': SerializedStyles;
+    '500': SerializedStyles;
+    '600': SerializedStyles;
+    '800': SerializedStyles;
+};
+
+// @public
+const spaceMap_2: {
+    '0': SerializedStyles;
+    '025': SerializedStyles;
+    '050': SerializedStyles;
+    '075': SerializedStyles;
+    '100': SerializedStyles;
+    '1000': SerializedStyles;
+    '150': SerializedStyles;
+    '200': SerializedStyles;
+    '250': SerializedStyles;
+    '300': SerializedStyles;
+    '400': SerializedStyles;
+    '500': SerializedStyles;
+    '600': SerializedStyles;
+    '800': SerializedStyles;
+};
+
+// @public (undocumented)
+type Spread = 'space-between';
+
+// @public (undocumented)
+type Spread_2 = 'space-between';
+
+// @public
+export const Stack: MemoExoticComponent<ForwardRefExoticComponent<StackProps & RefAttributes<HTMLDivElement>>>;
+
+// @public (undocumented)
+interface StackProps {
+    alignBlock?: AlignBlock;
+    alignInline?: AlignInline;
+    children: ReactNode;
+    grow?: Grow;
+    space?: Space;
+    spread?: Spread;
+    testId?: string;
+}
+
 // (No @packageDocumentation comment for this package)
 
 ```

No alert changes

Improved metrics

Total package byte prevSize

127918

31.36%

Lines of code

4001

37.02%

Worsened metrics

Dev dependency count

14

7.69%

No dependency changes