@atlaskit/ds-explorations 0.0.3 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/ds-explorations
 
+## 0.1.0
+
+### Minor Changes
+
+- [`57b94585c64`](https://bitbucket.org/atlassian/atlassian-frontend/commits/57b94585c64) - Breaking change to the color props which now require a fallback. Generated colors now also include additional background color types.
+- [`57c59a5c2d2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/57c59a5c2d2) - Initial implementation of UNSAFE_Box
+
+### Patch Changes
+
+- [`72c111790cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/72c111790cf) - [ux] Refine implementation of Text primitive
+- [`c28d7c86875`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c28d7c86875) - Add base interface to primitives in ds-explorations.
+- [`e11b4abd515`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e11b4abd515) - Adds initial implementation of Inline and Stack. Adds "block" option to Box `display` prop. Removes "baseline" option from Box `justifyContent` prop. Removes `gap` prop from Box.
+- [`0dbb4833163`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0dbb4833163) - Exports primitives components. Adds basic line-height values to Text.
+- [`ea36ea17c4e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ea36ea17c4e) - Text now supports text-align and it's used for Badge to retain existing visuals
+
 ## 0.0.3
 
 ### Patch Changes

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

@@ -9,13 +9,52 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _react = require("react");
+
 var _core = require("@emotion/core");
 
 var _constants = require("../constants");
 
-var _excluded = ["children", "as", "backgroundColor", "borderColor", "borderRadius", "alignItems", "flexDirection", "paddingBlock", "paddingInline", "gap", "height", "width", "display", "style", "testId", "className"];
+var _excluded = ["children", "as", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "padding", "paddingBlock", "paddingInline", "height", "width", "UNSAFE_style", "testId", "className"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var borderStyleMap = {
+  none: (0, _core.css)({
+    borderStyle: 'none'
+  }),
+  solid: (0, _core.css)({
+    borderStyle: 'solid'
+  }),
+  dashed: (0, _core.css)({
+    borderStyle: 'dashed'
+  }),
+  dotted: (0, _core.css)({
+    borderStyle: 'dotted'
+  })
+};
+var borderWidthMap = {
+  '0px': (0, _core.css)({
+    borderWidth: '0px'
+  }),
+  '1px': (0, _core.css)({
+    borderWidth: '1px'
+  }),
+  '2px': (0, _core.css)({
+    borderWidth: '2px'
+  }),
+  '3px': (0, _core.css)({
+    borderWidth: '3px'
+  })
+};
 var borderRadiusMap = {
   normal: (0, _core.css)({
     borderRadius: '3px'
@@ -35,73 +74,153 @@ var flexDirectionMap = {
     flexDirection: 'row'
   })
 };
-var flexAlignMap = {
+var flexAlignItemsMap = {
   center: (0, _core.css)({
     alignItems: 'center'
   }),
   baseline: (0, _core.css)({
     alignItems: 'baseline'
+  }),
+  flexStart: (0, _core.css)({
+    alignItems: 'flex-start'
+  }),
+  flexEnd: (0, _core.css)({
+    alignItems: 'flex-end'
+  })
+};
+var flexJustifyContentMap = {
+  center: (0, _core.css)({
+    justifyContent: 'center'
+  }),
+  flexStart: (0, _core.css)({
+    justifyContent: 'flex-start'
+  }),
+  flexEnd: (0, _core.css)({
+    justifyContent: 'flex-end'
   })
 };
 var displayMap = {
-  flex: (0, _core.css)({
-    display: 'flex'
+  block: (0, _core.css)({
+    display: 'block'
   }),
   inline: (0, _core.css)({
     display: 'inline'
   }),
+  flex: (0, _core.css)({
+    display: 'flex'
+  }),
   inlineFlex: (0, _core.css)({
     display: 'inline-flex'
   })
 };
+var baseStyles = (0, _core.css)({
+  boxSizing: 'border-box'
+});
 /**
  * __Box__
  *
- * A Box {description}.
+ * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
  *
  * @internal
  */
 
-function Box(_ref) {
+var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
       _ref$as = _ref.as,
       Component = _ref$as === void 0 ? 'div' : _ref$as,
-      backgroundColor = _ref.backgroundColor,
-      borderColor = _ref.borderColor,
-      borderRadius = _ref.borderRadius,
-      alignItems = _ref.alignItems,
+      _ref$display = _ref.display,
+      display = _ref$display === void 0 ? 'flex' : _ref$display,
       flexDirection = _ref.flexDirection,
+      alignItems = _ref.alignItems,
+      justifyContent = _ref.justifyContent,
+      backgroundColorTuple = _ref.backgroundColor,
+      borderColorTuple = _ref.borderColor,
+      borderStyle = _ref.borderStyle,
+      borderWidth = _ref.borderWidth,
+      borderRadius = _ref.borderRadius,
+      padding = _ref.padding,
       paddingBlock = _ref.paddingBlock,
       paddingInline = _ref.paddingInline,
-      gap = _ref.gap,
       height = _ref.height,
       width = _ref.width,
-      _ref$display = _ref.display,
-      display = _ref$display === void 0 ? 'flex' : _ref$display,
-      style = _ref.style,
+      UNSAFE_style = _ref.UNSAFE_style,
       testId = _ref.testId,
       dontUseThisProperty = _ref.className,
       htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _ref2 = backgroundColorTuple || [],
+      _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+      backgroundColor = _ref3[0],
+      backgroundColorFallback = _ref3[1];
+
+  var _ref4 = borderColorTuple || [],
+      _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
+      borderColor = _ref5[0],
+      borderColorFallback = _ref5[1];
+
   return (0, _core.jsx)(Component, (0, _extends2.default)({
-    style: style // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    style: _objectSpread(_objectSpread(_objectSpread({}, UNSAFE_style), backgroundColorFallback && {
+      '--ds-bg-fb': backgroundColorFallback
+    }), borderColorFallback && {
+      '--ds-bo-fb': borderColorFallback
+    }),
+    ref: ref // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 
   }, htmlAttributes, {
-    css: [display && displayMap[display], paddingBlock && paddingBlockMap[paddingBlock], paddingInline && paddingInlineMap[paddingInline], alignItems && flexAlignMap[alignItems], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderRadius && borderRadiusMap[borderRadius], flexDirection && flexDirectionMap[flexDirection], gap && gapMap[gap], width && widthMap[width], height && heightMap[height]],
+    css: [baseStyles, display && displayMap[display], padding && paddingMap[padding], paddingBlock && paddingBlockMap[paddingBlock], paddingInline && paddingInlineMap[paddingInline], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], borderRadius && borderRadiusMap[borderRadius], flexDirection && flexDirectionMap[flexDirection], width && widthMap[width], height && heightMap[height]],
     "data-testid": testId
   }), children);
-}
-
+});
 var _default = Box;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7bc92b308b72d1fe4aa9d758c2d1b073>>
+ * @codegen <<SignedSource::c20a27ff33adec8c016044959564409d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["paddingBlock", "paddingInline", "width", "height", "gap"]
+ * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
  */
 
 exports.default = _default;
+var paddingMap = {
+  'sp-0': (0, _core.css)({
+    padding: _constants.SPACING_SCALE['sp-0']
+  }),
+  'sp-25': (0, _core.css)({
+    padding: _constants.SPACING_SCALE['sp-25']
+  }),
+  'sp-50': (0, _core.css)({
+    padding: _constants.SPACING_SCALE['sp-50']
+  }),
+  'sp-75': (0, _core.css)({
+    padding: _constants.SPACING_SCALE['sp-75']
+  }),
+  'sp-100': (0, _core.css)({
+    padding: _constants.SPACING_SCALE['sp-100']
+  }),
+  'sp-200': (0, _core.css)({
+    padding: _constants.SPACING_SCALE['sp-200']
+  }),
+  'sp-300': (0, _core.css)({
+    padding: _constants.SPACING_SCALE['sp-300']
+  }),
+  'sp-400': (0, _core.css)({
+    padding: _constants.SPACING_SCALE['sp-400']
+  }),
+  'sp-500': (0, _core.css)({
+    padding: _constants.SPACING_SCALE['sp-500']
+  }),
+  'sp-600': (0, _core.css)({
+    padding: _constants.SPACING_SCALE['sp-600']
+  }),
+  'sp-800': (0, _core.css)({
+    padding: _constants.SPACING_SCALE['sp-800']
+  })
+};
 var paddingBlockMap = {
+  'sp-0': (0, _core.css)({
+    paddingBlock: _constants.SPACING_SCALE['sp-0']
+  }),
   'sp-25': (0, _core.css)({
     paddingBlock: _constants.SPACING_SCALE['sp-25']
   }),
@@ -123,6 +242,9 @@ var paddingBlockMap = {
   'sp-400': (0, _core.css)({
     paddingBlock: _constants.SPACING_SCALE['sp-400']
   }),
+  'sp-500': (0, _core.css)({
+    paddingBlock: _constants.SPACING_SCALE['sp-500']
+  }),
   'sp-600': (0, _core.css)({
     paddingBlock: _constants.SPACING_SCALE['sp-600']
   }),
@@ -131,6 +253,9 @@ var paddingBlockMap = {
   })
 };
 var paddingInlineMap = {
+  'sp-0': (0, _core.css)({
+    paddingInline: _constants.SPACING_SCALE['sp-0']
+  }),
   'sp-25': (0, _core.css)({
     paddingInline: _constants.SPACING_SCALE['sp-25']
   }),
@@ -152,6 +277,9 @@ var paddingInlineMap = {
   'sp-400': (0, _core.css)({
     paddingInline: _constants.SPACING_SCALE['sp-400']
   }),
+  'sp-500': (0, _core.css)({
+    paddingInline: _constants.SPACING_SCALE['sp-500']
+  }),
   'sp-600': (0, _core.css)({
     paddingInline: _constants.SPACING_SCALE['sp-600']
   }),
@@ -160,6 +288,9 @@ var paddingInlineMap = {
   })
 };
 var widthMap = {
+  'sp-0': (0, _core.css)({
+    width: _constants.SPACING_SCALE['sp-0']
+  }),
   'sp-25': (0, _core.css)({
     width: _constants.SPACING_SCALE['sp-25']
   }),
@@ -181,6 +312,9 @@ var widthMap = {
   'sp-400': (0, _core.css)({
     width: _constants.SPACING_SCALE['sp-400']
   }),
+  'sp-500': (0, _core.css)({
+    width: _constants.SPACING_SCALE['sp-500']
+  }),
   'sp-600': (0, _core.css)({
     width: _constants.SPACING_SCALE['sp-600']
   }),
@@ -189,6 +323,9 @@ var widthMap = {
   })
 };
 var heightMap = {
+  'sp-0': (0, _core.css)({
+    height: _constants.SPACING_SCALE['sp-0']
+  }),
   'sp-25': (0, _core.css)({
     height: _constants.SPACING_SCALE['sp-25']
   }),
@@ -210,6 +347,9 @@ var heightMap = {
   'sp-400': (0, _core.css)({
     height: _constants.SPACING_SCALE['sp-400']
   }),
+  'sp-500': (0, _core.css)({
+    height: _constants.SPACING_SCALE['sp-500']
+  }),
   'sp-600': (0, _core.css)({
     height: _constants.SPACING_SCALE['sp-600']
   }),
@@ -217,145 +357,137 @@ var heightMap = {
     height: _constants.SPACING_SCALE['sp-800']
   })
 };
-var gapMap = {
-  'sp-25': (0, _core.css)({
-    gap: _constants.SPACING_SCALE['sp-25']
-  }),
-  'sp-50': (0, _core.css)({
-    gap: _constants.SPACING_SCALE['sp-50']
-  }),
-  'sp-75': (0, _core.css)({
-    gap: _constants.SPACING_SCALE['sp-75']
-  }),
-  'sp-100': (0, _core.css)({
-    gap: _constants.SPACING_SCALE['sp-100']
-  }),
-  'sp-200': (0, _core.css)({
-    gap: _constants.SPACING_SCALE['sp-200']
-  }),
-  'sp-300': (0, _core.css)({
-    gap: _constants.SPACING_SCALE['sp-300']
-  }),
-  'sp-400': (0, _core.css)({
-    gap: _constants.SPACING_SCALE['sp-400']
-  }),
-  'sp-600': (0, _core.css)({
-    gap: _constants.SPACING_SCALE['sp-600']
-  }),
-  'sp-800': (0, _core.css)({
-    gap: _constants.SPACING_SCALE['sp-800']
-  })
-};
 /**
  * @codegenEnd
  */
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f48a8ffccf0c385e9e05322037509c45>>
+ * @codegen <<SignedSource::e3f27406477352f51168b4108558f051>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background"]
  */
 
 var borderColorMap = {
-  default: (0, _core.css)({
-    borderColor: "var(--ds-border, #091E4224)"
+  'color.border': (0, _core.css)({
+    borderColor: "var(--ds-border, var(--ds-bo-fb))"
   }),
   bold: (0, _core.css)({
-    borderColor: "var(--ds-border-bold, #758195)"
+    borderColor: "var(--ds-border-bold, var(--ds-bo-fb))"
   }),
   inverse: (0, _core.css)({
-    borderColor: "var(--ds-border-inverse, #FFFFFF)"
+    borderColor: "var(--ds-border-inverse, var(--ds-bo-fb))"
   }),
   focused: (0, _core.css)({
-    borderColor: "var(--ds-border-focused, #388BFF)"
+    borderColor: "var(--ds-border-focused, var(--ds-bo-fb))"
   }),
   input: (0, _core.css)({
-    borderColor: "var(--ds-border-input, #091E4224)"
+    borderColor: "var(--ds-border-input, var(--ds-bo-fb))"
   }),
   disabled: (0, _core.css)({
-    borderColor: "var(--ds-border-disabled, #091E420F)"
+    borderColor: "var(--ds-border-disabled, var(--ds-bo-fb))"
   }),
   brand: (0, _core.css)({
-    borderColor: "var(--ds-border-brand, #0C66E4)"
+    borderColor: "var(--ds-border-brand, var(--ds-bo-fb))"
   }),
   selected: (0, _core.css)({
-    borderColor: "var(--ds-border-selected, #0C66E4)"
+    borderColor: "var(--ds-border-selected, var(--ds-bo-fb))"
   }),
   danger: (0, _core.css)({
-    borderColor: "var(--ds-border-danger, #E34935)"
+    borderColor: "var(--ds-border-danger, var(--ds-bo-fb))"
   }),
   warning: (0, _core.css)({
-    borderColor: "var(--ds-border-warning, #D97008)"
+    borderColor: "var(--ds-border-warning, var(--ds-bo-fb))"
   }),
   success: (0, _core.css)({
-    borderColor: "var(--ds-border-success, #22A06B)"
+    borderColor: "var(--ds-border-success, var(--ds-bo-fb))"
   }),
   discovery: (0, _core.css)({
-    borderColor: "var(--ds-border-discovery, #8270DB)"
+    borderColor: "var(--ds-border-discovery, var(--ds-bo-fb))"
   }),
   information: (0, _core.css)({
-    borderColor: "var(--ds-border-information, #1D7AFC)"
+    borderColor: "var(--ds-border-information, var(--ds-bo-fb))"
   })
 };
 var backgroundColorMap = {
   disabled: (0, _core.css)({
-    backgroundColor: "var(--ds-background-disabled, #091E4208)"
+    backgroundColor: "var(--ds-background-disabled, var(--ds-bg-fb))"
   }),
   'inverse.subtle': (0, _core.css)({
-    backgroundColor: "var(--ds-background-inverse-subtle, #00000029)"
+    backgroundColor: "var(--ds-background-inverse-subtle, var(--ds-bg-fb))"
   }),
   input: (0, _core.css)({
-    backgroundColor: "var(--ds-background-input, #FFFFFF)"
+    backgroundColor: "var(--ds-background-input, var(--ds-bg-fb))"
   }),
   neutral: (0, _core.css)({
-    backgroundColor: "var(--ds-background-neutral, #091E420F)"
+    backgroundColor: "var(--ds-background-neutral, var(--ds-bg-fb))"
   }),
   'neutral.subtle': (0, _core.css)({
-    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
+    backgroundColor: "var(--ds-background-neutral-subtle, var(--ds-bg-fb))"
   }),
   'neutral.bold': (0, _core.css)({
-    backgroundColor: "var(--ds-background-neutral-bold, #44546F)"
+    backgroundColor: "var(--ds-background-neutral-bold, var(--ds-bg-fb))"
   }),
   'brand.bold': (0, _core.css)({
-    backgroundColor: "var(--ds-background-brand-bold, #0C66E4)"
+    backgroundColor: "var(--ds-background-brand-bold, var(--ds-bg-fb))"
   }),
   selected: (0, _core.css)({
-    backgroundColor: "var(--ds-background-selected, #E9F2FF)"
+    backgroundColor: "var(--ds-background-selected, var(--ds-bg-fb))"
   }),
   'selected.bold': (0, _core.css)({
-    backgroundColor: "var(--ds-background-selected-bold, #0C66E4)"
+    backgroundColor: "var(--ds-background-selected-bold, var(--ds-bg-fb))"
   }),
   danger: (0, _core.css)({
-    backgroundColor: "var(--ds-background-danger, #FFEDEB)"
+    backgroundColor: "var(--ds-background-danger, var(--ds-bg-fb))"
   }),
   'danger.bold': (0, _core.css)({
-    backgroundColor: "var(--ds-background-danger-bold, #CA3521)"
+    backgroundColor: "var(--ds-background-danger-bold, var(--ds-bg-fb))"
   }),
   warning: (0, _core.css)({
-    backgroundColor: "var(--ds-background-warning, #FFF7D6)"
+    backgroundColor: "var(--ds-background-warning, var(--ds-bg-fb))"
   }),
   'warning.bold': (0, _core.css)({
-    backgroundColor: "var(--ds-background-warning-bold, #E2B203)"
+    backgroundColor: "var(--ds-background-warning-bold, var(--ds-bg-fb))"
   }),
   success: (0, _core.css)({
-    backgroundColor: "var(--ds-background-success, #DFFCF0)"
+    backgroundColor: "var(--ds-background-success, var(--ds-bg-fb))"
   }),
   'success.bold': (0, _core.css)({
-    backgroundColor: "var(--ds-background-success-bold, #1F845A)"
+    backgroundColor: "var(--ds-background-success-bold, var(--ds-bg-fb))"
   }),
   discovery: (0, _core.css)({
-    backgroundColor: "var(--ds-background-discovery, #F3F0FF)"
+    backgroundColor: "var(--ds-background-discovery, var(--ds-bg-fb))"
   }),
   'discovery.bold': (0, _core.css)({
-    backgroundColor: "var(--ds-background-discovery-bold, #6E5DC6)"
+    backgroundColor: "var(--ds-background-discovery-bold, var(--ds-bg-fb))"
   }),
   information: (0, _core.css)({
-    backgroundColor: "var(--ds-background-information, #E9F2FF)"
+    backgroundColor: "var(--ds-background-information, var(--ds-bg-fb))"
   }),
   'information.bold': (0, _core.css)({
-    backgroundColor: "var(--ds-background-information-bold, #0C66E4)"
+    backgroundColor: "var(--ds-background-information-bold, var(--ds-bg-fb))"
+  }),
+  'color.blanket': (0, _core.css)({
+    backgroundColor: "var(--ds-blanket, var(--ds-bg-fb))"
+  }),
+  'color.blanket.selected': (0, _core.css)({
+    backgroundColor: "var(--ds-blanket-selected, var(--ds-bg-fb))"
+  }),
+  'color.blanket.danger': (0, _core.css)({
+    backgroundColor: "var(--ds-blanket-danger, var(--ds-bg-fb))"
+  }),
+  'elevation.surface': (0, _core.css)({
+    backgroundColor: "var(--ds-surface, var(--ds-bg-fb))"
+  }),
+  'elevation.surface.sunken': (0, _core.css)({
+    backgroundColor: "var(--ds-surface-sunken, var(--ds-bg-fb))"
+  }),
+  'elevation.surface.raised': (0, _core.css)({
+    backgroundColor: "var(--ds-surface-raised, var(--ds-bg-fb))"
+  }),
+  'elevation.surface.overlay': (0, _core.css)({
+    backgroundColor: "var(--ds-surface-overlay, var(--ds-bg-fb))"
   })
 };
 /**

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

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _constants = require("../constants");
+
+var _text = _interopRequireDefault(require("./text.partial"));
+
+/** @jsx jsx */
+var flexAlignItemsMap = {
+  center: (0, _core.css)({
+    alignItems: 'center'
+  }),
+  baseline: (0, _core.css)({
+    alignItems: 'baseline'
+  }),
+  flexStart: (0, _core.css)({
+    alignItems: 'flex-start'
+  }),
+  flexEnd: (0, _core.css)({
+    alignItems: 'flex-end'
+  })
+};
+var flexJustifyContentMap = {
+  center: (0, _core.css)({
+    justifyContent: 'center'
+  }),
+  flexStart: (0, _core.css)({
+    justifyContent: 'flex-start'
+  }),
+  flexEnd: (0, _core.css)({
+    justifyContent: 'flex-end'
+  })
+};
+var baseStyles = (0, _core.css)({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'row'
+});
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ * Renders a `div` by default.
+ *
+ */
+
+var Inline = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var gap = _ref.gap,
+      alignItems = _ref.alignItems,
+      justifyContent = _ref.justifyContent,
+      divider = _ref.divider,
+      children = _ref.children,
+      testId = _ref.testId;
+  var dividerComponent = typeof divider === 'string' ? (0, _core.jsx)(_text.default, null, divider) : divider;
+  return (0, _core.jsx)("div", {
+    css: [baseStyles, gap && gapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent]],
+    "data-testid": testId,
+    ref: ref
+  }, _react.Children.map(children, function (child, index) {
+    return (0, _core.jsx)(_react.Fragment, null, divider && index > 0 ? dividerComponent : null, child);
+  }));
+});
+var _default = Inline;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::ac3192fbc453a94ab5e720d0273556ef>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["gap"]
+ */
+
+exports.default = _default;
+var gapMap = {
+  'sp-0': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-0']
+  }),
+  'sp-25': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-25']
+  }),
+  'sp-50': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-50']
+  }),
+  'sp-75': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-75']
+  }),
+  'sp-100': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-100']
+  }),
+  'sp-200': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-200']
+  }),
+  'sp-300': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-300']
+  }),
+  'sp-400': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-400']
+  }),
+  'sp-500': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-500']
+  }),
+  'sp-600': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-600']
+  }),
+  'sp-800': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-800']
+  })
+};
+/**
+ * @codegenEnd
+ */