@atlaskit/primitives 0.7.1 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/primitives
 
+## 0.8.1
+
+### Patch Changes
+
+- [`2e01c9c74b5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e01c9c74b5) - DUMMY remove before merging to master; dupe adf-schema via adf-utils
+
+## 0.8.0
+
+### Minor Changes
+
+- [`ac4c8695d3f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac4c8695d3f) - Constrain CSS values of flex-direction to account for accessibility considerations.
+- [`4d19bdd2218`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4d19bdd2218) - **Inline**:
+
+  - `space` prop now accepts values in the form `space.XXX`. For example: `space="space.100"`.
+  - `rowSpace` prop now accepts values in the form `space.XXX`. For example: `rowSpace="space.100"`.
+
+  **Stack**:
+
+  - `space` prop now accepts values in the form `space.XXX`. For example: `space="space.100"`.
+
 ## 0.7.1
 
 ### Patch Changes

package/constellation/accessibility/examples.mdx

@@ -0,0 +1,9 @@
+---
+title: Accessibility
+description: Primitives accessibility.
+order: 0
+---
+
+## Default
+
+This is placeholder text.

package/constellation/box/code.mdx

@@ -0,0 +1,7 @@
+---
+title: Box
+description: A box is...
+order: 1
+---
+
+*Coming soon*

package/constellation/box/examples.mdx

@@ -0,0 +1,7 @@
+---
+title: Box
+description: Box primitive...
+order: 0
+---
+
+*Coming soon*

package/constellation/inline/examples.mdx

@@ -0,0 +1,83 @@
+---
+title: Inline
+description: Inline is an abstraction to lay-out a group of elements horizontally.
+order: 0
+---
+
+import InlineBasic from '../../examples/constellation/inline/basic';
+import InlineSpaceBasic from '../../examples/constellation/inline/space-basic';
+import InlineSpaceWrap from '../../examples/constellation/inline/space-wrap';
+import InlineAlignBlock from '../../examples/constellation/inline/align-block';
+import InlineAlignInline from '../../examples/constellation/inline/align-inline';
+import InlineSpread from '../../examples/constellation/inline/spread';
+import InlineWrap from '../../examples/constellation/inline/wrap';
+import InlineSeparator from '../../examples/constellation/inline/separator';
+import InlineGrow from '../../examples/constellation/inline/grow';
+import InlineAs from '../../examples/constellation/inline/as';
+
+## Basic
+
+Inline is an abstraction to efficiently lay-out a group of elements horizontally.  
+Use the given props to configure display behaviour using scalable recommendations of the Atlassian Design System.
+
+<Example Component={InlineBasic} packageName="@atlaskit/primitives/inline" />
+
+## Space
+
+Spacing between items can be controlled with the `space` prop:
+
+<Example Component={InlineSpaceBasic} packageName="@atlaskit/primitives/inline" />
+
+When content is set to wrap the `space` prop applies equal spacing between rows as well:
+
+<Example Component={InlineSpaceWrap} packageName="@atlaskit/primitives/inline" />
+
+For a different space value between rows use the `rowSpace` prop, as shown in the dynamic example above.
+
+## Alignment
+
+To control the alignment of items you can use the `alignBlock` and `alignInline` props which, respectively, control
+aligment in the block and inline directions.
+
+### Block alignment
+
+<Example Component={InlineAlignBlock} packageName="@atlaskit/primitives/inline" />
+
+### Inline alignment
+
+<Example Component={InlineAlignInline} packageName="@atlaskit/primitives/inline" />
+
+## Spread
+
+Elements can be set to stay together next to each other (default behaviour) or spread equally in the space available.
+
+<Example Component={InlineSpread} packageName="@atlaskit/primitives/inline" />
+
+## Wrap
+
+When the number of items goes beyond the available space `shouldWrap` can be used to create new rows of content.
+
+<Example Component={InlineWrap} packageName="@atlaskit/primitives/inline" />
+
+## Separator
+
+For logically related elements it's possible to specify an arbitrary `separator` value.
+
+<Example Component={InlineSeparator} packageName="@atlaskit/primitives/inline" />
+
+## Width control
+
+By default an `Inline` will have its width influenced by the context where it appears.  
+
+To control that the `grow` prop can be used with the values:
+
+* `hug` (default) to use space only as required by its children, or
+* `fill` to take all space provided by the parent element.
+
+<Example Component={InlineGrow} packageName="@atlaskit/primitives/inline" />
+
+## Output element
+
+It's possible to control the rendered HTML element with the `as` prop.
+
+<Example Component={InlineAs} packageName="@atlaskit/primitives/inline" />

package/constellation/inline/props.mdx

@@ -0,0 +1,3 @@
+## Props
+
+*Coming soon*

package/constellation/inline/usage.mdx

@@ -0,0 +1,7 @@
+---
+order: 2
+---
+
+## Usage
+
+*Coming soon*

package/constellation/overview/examples.mdx

@@ -0,0 +1,9 @@
+---
+title: Overview
+description: Overview of primitives..
+order: 0
+---
+
+## Default
+
+This is placeholder text.

package/constellation/stack/code.mdx

@@ -0,0 +1,9 @@
+---
+title: Box
+description: A stack is...
+order: 1
+---
+
+## Props
+
+*Coming soon*

package/constellation/stack/examples.mdx

@@ -0,0 +1,7 @@
+---
+title: Stack
+description: Stack primitive...
+order: 0
+---
+
+*Coming soon*

package/dist/cjs/components/{inline.partial.js → inline.js}

@@ -1,13 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _styleMaps = require("../internal/style-maps.partial");
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 
@@ -51,37 +50,6 @@ var flexGrowMap = {
 var flexWrapStyles = (0, _react2.css)({
   flexWrap: 'wrap'
 });
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::fb7587b114753ed19425e2b07b5deb0d>>
- * @codegenId spacing
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["inlineSpace"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
- */
-var inlineSpaceMap = Object.fromEntries(['gap', 'rowGap'].map(function (property) {
-  return [property, {
-    '0': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-0, 0px)")),
-    '025': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-025, 2px)")),
-    '050': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-050, 4px)")),
-    '075': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-075, 6px)")),
-    '100': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-100, 8px)")),
-    '150': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-150, 12px)")),
-    '200': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-200, 16px)")),
-    '250': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-250, 20px)")),
-    '300': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-300, 24px)")),
-    '400': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-400, 32px)")),
-    '500': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-500, 40px)")),
-    '600': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-600, 48px)")),
-    '800': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-800, 64px)")),
-    '1000': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-1000, 80px)"))
-  }];
-}));
-/**
- * @codegenEnd
- */
-
 var baseStyles = (0, _react2.css)({
   display: 'flex',
   boxSizing: 'border-box',
@@ -138,7 +106,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
   }) : rawChildren;
   var justifyContent = spread || alignInline;
   return (0, _react2.jsx)(Component, {
-    css: [baseStyles, space && inlineSpaceMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && inlineSpaceMap.rowGap[rowSpace]],
+    css: [baseStyles, space && _styleMaps.spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && _styleMaps.spaceStylesMap.rowGap[rowSpace]],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/cjs/components/stack.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _styleMaps = require("../internal/style-maps.partial");
+/* eslint-disable @repo/internal/styles/no-exported-styles */
+/** @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)({
+    width: '100%',
+    flexGrow: 1
+  })
+};
+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.
+ *
+ * @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 as = _ref.as,
+    alignItems = _ref.alignInline,
+    alignBlock = _ref.alignBlock,
+    spread = _ref.spread,
+    grow = _ref.grow,
+    space = _ref.space,
+    children = _ref.children,
+    testId = _ref.testId;
+  var Component = as || 'div';
+  var justifyContent = spread || alignBlock;
+  return (0, _react2.jsx)(Component, {
+    css: [baseStyles, space && _styleMaps.spaceStylesMap.gap[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;

package/dist/cjs/index.js

@@ -29,6 +29,6 @@ Object.defineProperty(exports, "xcss", {
   }
 });
 var _box = _interopRequireDefault(require("./components/box"));
-var _inline = _interopRequireDefault(require("./components/inline.partial"));
+var _inline = _interopRequireDefault(require("./components/inline"));
 var _xcss = require("./internal/xcss");
-var _stack = _interopRequireDefault(require("./components/stack.partial"));
+var _stack = _interopRequireDefault(require("./components/stack"));

package/dist/cjs/internal/style-maps.partial.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textColorMap = exports.shadowMap = exports.positionMap = exports.paddingStylesMap = exports.paddingMap = exports.overflowMap = exports.overflowInlineMap = exports.overflowBlockMap = exports.layerMap = exports.flexShrinkMap = exports.flexMap = exports.flexGrowMap = exports.dimensionMap = exports.borderWidthMap = exports.borderStyleMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.alignSelfMap = void 0;
+exports.textColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.positionMap = exports.paddingStylesMap = exports.paddingMap = exports.overflowMap = exports.overflowInlineMap = exports.overflowBlockMap = exports.layerMap = exports.flexShrinkMap = exports.flexMap = exports.flexGrowMap = exports.flexDirectionMap = exports.dimensionMap = exports.borderWidthMap = exports.borderStyleMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.alignSelfMap = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 /**
@@ -32,10 +32,10 @@ exports.dimensionMap = dimensionMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c9769f86fc43a4afcc45953fc5f06926>>
+ * @codegen <<SignedSource::b8ac4fd29ba83e2ab1c2713c35915067>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["padding"]
+ * @codegenParams ["padding", "space"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
 var paddingMap = {
@@ -55,6 +55,23 @@ var paddingMap = {
   'space.1000': "var(--ds-space-1000, 80px)"
 };
 exports.paddingMap = paddingMap;
+var spaceMap = {
+  'space.0': "var(--ds-space-0, 0px)",
+  'space.025': "var(--ds-space-025, 2px)",
+  'space.050': "var(--ds-space-050, 4px)",
+  'space.075': "var(--ds-space-075, 6px)",
+  'space.100': "var(--ds-space-100, 8px)",
+  'space.150': "var(--ds-space-150, 12px)",
+  'space.200': "var(--ds-space-200, 16px)",
+  'space.250': "var(--ds-space-250, 20px)",
+  'space.300': "var(--ds-space-300, 24px)",
+  'space.400': "var(--ds-space-400, 32px)",
+  'space.500': "var(--ds-space-500, 40px)",
+  'space.600': "var(--ds-space-600, 48px)",
+  'space.800': "var(--ds-space-800, 64px)",
+  'space.1000': "var(--ds-space-1000, 80px)"
+};
+exports.spaceMap = spaceMap;
 /**
  * @codegenEnd
  */
@@ -247,14 +264,15 @@ exports.textColorMap = textColorMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::dd62140c127dcca8e478ad22341d4626>>
+ * @codegen <<SignedSource::8ab54fc337c6a02f403dad852dd626a0>>
  * @codegenId misc
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["align-self", "border-style", "display", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
+ * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::89d19ca3937408eb7de5d72f4476a0f9>>
  * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::e6e390f80609060bfd12a55a489d5f54>>
+ * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::bf6626972898bf22d2eeee2130693d47>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex.tsx <<SignedSource::ffa0189d14f1f00a16ec1e9f43a17ce9>>
@@ -275,6 +293,11 @@ var borderStyleMap = {
   solid: 'solid'
 };
 exports.borderStyleMap = borderStyleMap;
+var flexDirectionMap = {
+  row: 'row',
+  column: 'column'
+};
+exports.flexDirectionMap = flexDirectionMap;
 var flexGrowMap = {
   '0': 0,
   '1': 1
@@ -354,7 +377,7 @@ var borderRadiusMap = {
  * @codegenEnd
  */
 exports.borderRadiusMap = borderRadiusMap;
-var spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd'];
+var spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'gap', 'rowGap'];
 var getSerializedStylesMap = function getSerializedStylesMap(cssProperty, tokenMap) {
   return Object.keys(tokenMap).reduce(function (emotionSpacingMap, token) {
     emotionSpacingMap[token] = (0, _react.css)((0, _defineProperty2.default)({}, cssProperty, tokenMap[token]));
@@ -366,5 +389,10 @@ var paddingStylesMap = spacingProperties.reduce(function (styleMap, spacingPrope
   return styleMap;
 }, {});
 exports.paddingStylesMap = paddingStylesMap;
+var spaceStylesMap = spacingProperties.reduce(function (styleMap, spacingProperty) {
+  styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);
+  return styleMap;
+}, {});
+exports.spaceStylesMap = spaceStylesMap;
 var backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
 exports.backgroundColorStylesMap = backgroundColorStylesMap;

package/dist/cjs/internal/xcss.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transformStyles = exports.parseXcss = void 0;
+exports.parseXcss = void 0;
 exports.xcss = xcss;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
@@ -38,11 +38,8 @@ var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called saf
 var isSafeEnvToThrow = function isSafeEnvToThrow() {
   return (typeof process === "undefined" ? "undefined" : (0, _typeof2.default)(process)) === 'object' && (0, _typeof2.default)(process.env) === 'object' && process.env.NODE_ENV !== 'production';
 };
-
-/**
- * Only exposed for testing.
- * @internal
- */
+var reNestedSelectors = /(\.|\s|&+|\*\>|#|\[.*\])/;
+var rePseudos = /^::?.*$/;
 var transformStyles = function transformStyles(styleObj) {
   if (!styleObj || (0, _typeof2.default)(styleObj) !== 'object') {
     return styleObj;
@@ -60,14 +57,14 @@ var transformStyles = function transformStyles(styleObj) {
       value = _ref2[1];
     if (isSafeEnvToThrow()) {
       // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
-      if (/(\.|\s|&+|\*\>|#|\[.*\])/.test(key)) {
+      if (reNestedSelectors.test(key)) {
         throw new Error("Styles not supported for key '".concat(key, "'."));
       }
     }
 
     // If key is a pseudo class or a pseudo element, then value should be an object.
     // So, call transformStyles on the value
-    if (/^::?.*$/.test(key)) {
+    if (rePseudos.test(key)) {
       styleObj[key] = transformStyles(value);
       return;
     }
@@ -92,7 +89,6 @@ var transformStyles = function transformStyles(styleObj) {
   });
   return styleObj;
 };
-exports.transformStyles = transformStyles;
 var baseXcss = function baseXcss(style) {
   var transformedStyles = transformStyles(style);
   return {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.7.1",
+	"version": "0.8.1",
 	"sideEffects": false
 }

package/dist/es2019/components/{inline.partial.js → inline.js}

@@ -2,6 +2,7 @@
 /** @jsx jsx */
 import { Children, forwardRef, Fragment, memo } from 'react';
 import { css, jsx } from '@emotion/react';
+import { spaceStylesMap } from '../internal/style-maps.partial';
 const alignItemsMap = {
   center: css({
     alignItems: 'center'
@@ -42,63 +43,6 @@ const flexGrowMap = {
 const flexWrapStyles = css({
   flexWrap: 'wrap'
 });
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::fb7587b114753ed19425e2b07b5deb0d>>
- * @codegenId spacing
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["inlineSpace"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
- */
-const inlineSpaceMap = Object.fromEntries(['gap', 'rowGap'].map(property => [property, {
-  '0': css({
-    [property]: "var(--ds-space-0, 0px)"
-  }),
-  '025': css({
-    [property]: "var(--ds-space-025, 2px)"
-  }),
-  '050': css({
-    [property]: "var(--ds-space-050, 4px)"
-  }),
-  '075': css({
-    [property]: "var(--ds-space-075, 6px)"
-  }),
-  '100': css({
-    [property]: "var(--ds-space-100, 8px)"
-  }),
-  '150': css({
-    [property]: "var(--ds-space-150, 12px)"
-  }),
-  '200': css({
-    [property]: "var(--ds-space-200, 16px)"
-  }),
-  '250': css({
-    [property]: "var(--ds-space-250, 20px)"
-  }),
-  '300': css({
-    [property]: "var(--ds-space-300, 24px)"
-  }),
-  '400': css({
-    [property]: "var(--ds-space-400, 32px)"
-  }),
-  '500': css({
-    [property]: "var(--ds-space-500, 40px)"
-  }),
-  '600': css({
-    [property]: "var(--ds-space-600, 48px)"
-  }),
-  '800': css({
-    [property]: "var(--ds-space-800, 64px)"
-  }),
-  '1000': css({
-    [property]: "var(--ds-space-1000, 80px)"
-  })
-}]));
-/**
- * @codegenEnd
- */
-
 const baseStyles = css({
   display: 'flex',
   boxSizing: 'border-box',
@@ -154,7 +98,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }) : rawChildren;
   const justifyContent = spread || alignInline;
   return jsx(Component, {
-    css: [baseStyles, space && inlineSpaceMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && inlineSpaceMap.rowGap[rowSpace]],
+    css: [baseStyles, space && spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && spaceStylesMap.rowGap[rowSpace]],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/es2019/components/stack.js

@@ -0,0 +1,79 @@
+/* eslint-disable @repo/internal/styles/no-exported-styles */
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { spaceStylesMap } from '../internal/style-maps.partial';
+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({
+    width: '100%',
+    flexGrow: 1
+  })
+};
+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(({
+  as,
+  alignInline: alignItems,
+  alignBlock,
+  spread,
+  grow,
+  space,
+  children,
+  testId
+}, ref) => {
+  const Component = as || 'div';
+  const justifyContent = spread || alignBlock;
+  return jsx(Component, {
+    css: [baseStyles, space && spaceStylesMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Stack.displayName = 'Stack';
+export default Stack;

package/dist/es2019/index.js

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