@atlaskit/ds-explorations 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/ds-explorations
 
+## 1.2.0
+
+### Minor Changes
+
+- [`e6fb7598867`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e6fb7598867) - Exposes additional public entrypoints for `Inline` and `Stack`.
+  Loosens the types of `children` for the `Inline`, `Stack` and `Box` as it was causing unexpected friction.
+
+## 1.1.0
+
+### Minor Changes
+
+- [`93d75a4e289`](https://bitbucket.org/atlassian/atlassian-frontend/commits/93d75a4e289) - Adding id prop for Text component so that element can be updated with id attribute. It's a way for an element to be uniquely identifiable for a range of reasons. For example: URL anchors, reference target for integrations and accessible label references.
+
 ## 1.0.0
 
 ### Major Changes

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

@@ -180,11 +180,11 @@ var baseStyles = (0, _react2.css)({
 });
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::620ef1f3b2d7a6f92e5052efb270b5eb>>
+ * @codegen <<SignedSource::2d25a493458fa1cefdafcd559404f2ec>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 var paddingMap = {
@@ -384,11 +384,11 @@ var heightMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::832d4f0a888302a4fd097946cd7c582c>>
+ * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 var borderColorMap = {
   'color.border': (0, _react2.css)({

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

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,8 +9,6 @@ var _react = require("react");
 
 var _react2 = require("@emotion/react");
 
-var _text = _interopRequireDefault(require("./text.partial"));
-
 /** @jsx jsx */
 var flexAlignItemsMap = {
   center: (0, _react2.css)({
@@ -61,42 +57,69 @@ var baseStyles = (0, _react2.css)({
   boxSizing: 'border-box',
   flexDirection: 'row'
 });
+var dividerStyles = (0, _react2.css)({
+  margin: '0 -2px',
+  color: "var(--ds-text-subtle, #42526E)",
+  pointerEvents: '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.
  *
+ * @example
+ * ```tsx
+ * const App = () => (
+ *   <Inline gap="space.100">
+ *     <Button />
+ *     <Button />
+ *   </Inline>
+ * )
+ * ```
  */
 
-var Inline = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var gap = _ref.gap,
-      alignItems = _ref.alignItems,
-      justifyContent = _ref.justifyContent,
-      flexWrap = _ref.flexWrap,
-      divider = _ref.divider,
-      UNSAFE_style = _ref.UNSAFE_style,
-      children = _ref.children,
-      testId = _ref.testId;
-  var dividerComponent = typeof divider === 'string' ? (0, _react2.jsx)(_text.default, null, divider) : divider;
+
+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,
+      children = _ref2.children,
+      testId = _ref2.testId;
+  var dividerComponent = typeof divider === 'string' ? (0, _react2.jsx)(Divider, null, divider) : divider;
+
+  var childrenArray = _react.Children.toArray(children).filter(Boolean);
+
   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
-  }, _react.Children.map(children, function (child, index) {
-    return (0, _react2.jsx)(_react.Fragment, null, divider && index > 0 ? dividerComponent : null, child);
+  }, childrenArray.map(function (child, index) {
+    return (0, _react2.jsx)(_react.Fragment, {
+      key: index
+    }, divider && index > 0 ? dividerComponent : null, child);
   }));
-});
+}));
 Inline.displayName = 'Inline';
 var _default = Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cff5655983f2243060cade5b107d7762>>
+ * @codegen <<SignedSource::2dd7c6b8450b1bbd1fb8fabf12fffa33>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 exports.default = _default;

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

@@ -58,11 +58,11 @@ var InteractionSurface = function InteractionSurface(_ref) {
 var _default = InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1bad97ad2c03ae813521797686ac780d>>
+ * @codegen <<SignedSource::5289ea44928c279ad02274850623c9d1>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 exports.default = _default;

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

@@ -65,7 +65,7 @@ var baseStyles = (0, _react2.css)({
  *
  */
 
-var Stack = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var gap = _ref.gap,
       alignItems = _ref.alignItems,
       justifyContent = _ref.justifyContent,
@@ -79,16 +79,16 @@ var Stack = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "data-testid": testId,
     ref: ref
   }, children);
-});
+}));
 Stack.displayName = 'Stack';
 var _default = Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c486b14097494305925c3c989823d602>>
+ * @codegen <<SignedSource::5d82d50cdeb38664c4c45d02608e447d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 exports.default = _default;

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

@@ -162,7 +162,8 @@ var Text = function Text(_ref) {
       textTransform = props.textTransform,
       verticalAlign = props.verticalAlign,
       testId = props.testId,
-      UNSAFE_style = props.UNSAFE_style;
+      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();
@@ -178,7 +179,8 @@ var Text = function Text(_ref) {
   var component = (0, _react2.jsx)(Component, {
     style: UNSAFE_style,
     css: [baseStyles, 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
+    "data-testid": testId,
+    id: id
   }, children);
   return isWrapped ? // no need to re-apply context if the text is already wrapped
   component : (0, _react2.jsx)(HasTextAncestorContext.Provider, {
@@ -189,11 +191,11 @@ var Text = function Text(_ref) {
 var _default = Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::21771f01de3c37646642de03274f0738>>
+ * @codegen <<SignedSource::3d4d694e49f72e72f83ec28c1feafb76>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 exports.default = _default;

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

@@ -10,9 +10,9 @@ exports.default = void 0;
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::c9429c38d12f88de9f5be644bf5e704a>>
+ * @codegen <<SignedSource::b80b2a3d75c3215df8be35a6f5bda68d>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 var _default = {
   'neutral.bold': 'inverse',

package/dist/cjs/version.json

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

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

@@ -163,11 +163,11 @@ const baseStyles = css({
 });
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::620ef1f3b2d7a6f92e5052efb270b5eb>>
+ * @codegen <<SignedSource::2d25a493458fa1cefdafcd559404f2ec>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 const paddingMap = {
@@ -367,11 +367,11 @@ const heightMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::832d4f0a888302a4fd097946cd7c582c>>
+ * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 const borderColorMap = {
   'color.border': css({

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

@@ -1,7 +1,6 @@
 /** @jsx jsx */
-import { Children, forwardRef, Fragment } from 'react';
+import { Children, forwardRef, Fragment, memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import Text from './text.partial';
 const flexAlignItemsMap = {
   center: css({
     alignItems: 'center'
@@ -49,15 +48,36 @@ const baseStyles = css({
   boxSizing: 'border-box',
   flexDirection: 'row'
 });
+const dividerStyles = css({
+  margin: '0 -2px',
+  color: "var(--ds-text-subtle, #42526E)",
+  pointerEvents: 'none'
+});
+
+const Divider = ({
+  children
+}) => 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.
  *
+ * @example
+ * ```tsx
+ * const App = () => (
+ *   <Inline gap="space.100">
+ *     <Button />
+ *     <Button />
+ *   </Inline>
+ * )
+ * ```
  */
 
-const Inline = /*#__PURE__*/forwardRef(({
+
+const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   gap,
   alignItems,
   justifyContent,
@@ -67,25 +87,28 @@ const Inline = /*#__PURE__*/forwardRef(({
   children,
   testId
 }, ref) => {
-  const dividerComponent = typeof divider === 'string' ? jsx(Text, null, divider) : divider;
+  const dividerComponent = typeof divider === 'string' ? jsx(Divider, null, divider) : divider;
+  const childrenArray = Children.toArray(children).filter(Boolean);
   return 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.map(children, (child, index) => {
-    return jsx(Fragment, null, divider && index > 0 ? dividerComponent : null, child);
+  }, childrenArray.map((child, index) => {
+    return jsx(Fragment, {
+      key: index
+    }, divider && index > 0 ? dividerComponent : null, child);
   }));
-});
+}));
 Inline.displayName = 'Inline';
 export default Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cff5655983f2243060cade5b107d7762>>
+ * @codegen <<SignedSource::2dd7c6b8450b1bbd1fb8fabf12fffa33>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 const columnGapMap = {

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

@@ -49,11 +49,11 @@ const InteractionSurface = ({
 export default InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1bad97ad2c03ae813521797686ac780d>>
+ * @codegen <<SignedSource::5289ea44928c279ad02274850623c9d1>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 const backgroundActiveColorMap = {

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { forwardRef } from 'react';
+import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
 const flexAlignItemsMap = {
   center: css({
@@ -56,7 +56,7 @@ const baseStyles = css({
  *
  */
 
-const Stack = /*#__PURE__*/forwardRef(({
+const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   gap,
   alignItems,
   justifyContent,
@@ -71,16 +71,16 @@ const Stack = /*#__PURE__*/forwardRef(({
     "data-testid": testId,
     ref: ref
   }, children);
-});
+}));
 Stack.displayName = 'Stack';
 export default Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c486b14097494305925c3c989823d602>>
+ * @codegen <<SignedSource::5d82d50cdeb38664c4c45d02608e447d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 const rowGapMap = {

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

@@ -144,7 +144,8 @@ const Text = ({
     textTransform,
     verticalAlign,
     testId,
-    UNSAFE_style
+    UNSAFE_style,
+    id
   } = props;
   invariant(asAllowlist.includes(Component), `@atlaskit/ds-explorations: Text received an invalid "as" value of "${Component}"`);
   const color = useColor(colorProp);
@@ -161,7 +162,8 @@ const Text = ({
   const component = jsx(Component, {
     style: UNSAFE_style,
     css: [baseStyles, 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
+    "data-testid": testId,
+    id: id
   }, children);
   return isWrapped ? // no need to re-apply context if the text is already wrapped
   component : jsx(HasTextAncestorContext.Provider, {
@@ -172,11 +174,11 @@ const Text = ({
 export default Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::21771f01de3c37646642de03274f0738>>
+ * @codegen <<SignedSource::3d4d694e49f72e72f83ec28c1feafb76>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 const textColorMap = {

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

@@ -3,9 +3,9 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::c9429c38d12f88de9f5be644bf5e704a>>
+ * @codegen <<SignedSource::b80b2a3d75c3215df8be35a6f5bda68d>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 export default {
   'neutral.bold': 'inverse',

package/dist/es2019/version.json

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

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

@@ -167,11 +167,11 @@ var baseStyles = css({
 });
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::620ef1f3b2d7a6f92e5052efb270b5eb>>
+ * @codegen <<SignedSource::2d25a493458fa1cefdafcd559404f2ec>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 var paddingMap = {
@@ -371,11 +371,11 @@ var heightMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::832d4f0a888302a4fd097946cd7c582c>>
+ * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 var borderColorMap = {
   'color.border': css({

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

@@ -1,7 +1,6 @@
 /** @jsx jsx */
-import { Children, forwardRef, Fragment } from 'react';
+import { Children, forwardRef, Fragment, memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import Text from './text.partial';
 var flexAlignItemsMap = {
   center: css({
     alignItems: 'center'
@@ -49,42 +48,67 @@ var baseStyles = css({
   boxSizing: 'border-box',
   flexDirection: 'row'
 });
+var dividerStyles = css({
+  margin: '0 -2px',
+  color: "var(--ds-text-subtle, #42526E)",
+  pointerEvents: 'none'
+});
+
+var Divider = function Divider(_ref) {
+  var children = _ref.children;
+  return 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.
  *
+ * @example
+ * ```tsx
+ * const App = () => (
+ *   <Inline gap="space.100">
+ *     <Button />
+ *     <Button />
+ *   </Inline>
+ * )
+ * ```
  */
 
-var Inline = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var gap = _ref.gap,
-      alignItems = _ref.alignItems,
-      justifyContent = _ref.justifyContent,
-      flexWrap = _ref.flexWrap,
-      divider = _ref.divider,
-      UNSAFE_style = _ref.UNSAFE_style,
-      children = _ref.children,
-      testId = _ref.testId;
-  var dividerComponent = typeof divider === 'string' ? jsx(Text, null, divider) : divider;
+
+var Inline = /*#__PURE__*/memo( /*#__PURE__*/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,
+      children = _ref2.children,
+      testId = _ref2.testId;
+  var dividerComponent = typeof divider === 'string' ? jsx(Divider, null, divider) : divider;
+  var childrenArray = Children.toArray(children).filter(Boolean);
   return 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.map(children, function (child, index) {
-    return jsx(Fragment, null, divider && index > 0 ? dividerComponent : null, child);
+  }, childrenArray.map(function (child, index) {
+    return jsx(Fragment, {
+      key: index
+    }, divider && index > 0 ? dividerComponent : null, child);
   }));
-});
+}));
 Inline.displayName = 'Inline';
 export default Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cff5655983f2243060cade5b107d7762>>
+ * @codegen <<SignedSource::2dd7c6b8450b1bbd1fb8fabf12fffa33>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 var columnGapMap = {

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

@@ -48,11 +48,11 @@ var InteractionSurface = function InteractionSurface(_ref) {
 export default InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1bad97ad2c03ae813521797686ac780d>>
+ * @codegen <<SignedSource::5289ea44928c279ad02274850623c9d1>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 var backgroundActiveColorMap = {

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { forwardRef } from 'react';
+import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
 var flexAlignItemsMap = {
   center: css({
@@ -56,7 +56,7 @@ var baseStyles = css({
  *
  */
 
-var Stack = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
   var gap = _ref.gap,
       alignItems = _ref.alignItems,
       justifyContent = _ref.justifyContent,
@@ -70,16 +70,16 @@ var Stack = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "data-testid": testId,
     ref: ref
   }, children);
-});
+}));
 Stack.displayName = 'Stack';
 export default Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c486b14097494305925c3c989823d602>>
+ * @codegen <<SignedSource::5d82d50cdeb38664c4c45d02608e447d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 var rowGapMap = {