@atlaskit/primitives 0.4.2 → 0.6.0

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

@@ -44,100 +44,56 @@ const flexWrapStyles = css({
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::44cacef18982a4b0e43102900c42bdcf>>
+ * @codegen <<SignedSource::fb7587b114753ed19425e2b07b5deb0d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space", "rowSpace"]
+ * @codegenParams ["inlineSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-const spaceMap = {
+const inlineSpaceMap = Object.fromEntries(['gap', 'rowGap'].map(property => [property, {
   '0': css({
-    gap: "var(--ds-space-0, 0px)"
+    [property]: "var(--ds-space-0, 0px)"
   }),
   '025': css({
-    gap: "var(--ds-space-025, 2px)"
+    [property]: "var(--ds-space-025, 2px)"
   }),
   '050': css({
-    gap: "var(--ds-space-050, 4px)"
+    [property]: "var(--ds-space-050, 4px)"
   }),
   '075': css({
-    gap: "var(--ds-space-075, 6px)"
+    [property]: "var(--ds-space-075, 6px)"
   }),
   '100': css({
-    gap: "var(--ds-space-100, 8px)"
+    [property]: "var(--ds-space-100, 8px)"
   }),
   '150': css({
-    gap: "var(--ds-space-150, 12px)"
+    [property]: "var(--ds-space-150, 12px)"
   }),
   '200': css({
-    gap: "var(--ds-space-200, 16px)"
+    [property]: "var(--ds-space-200, 16px)"
   }),
   '250': css({
-    gap: "var(--ds-space-250, 20px)"
+    [property]: "var(--ds-space-250, 20px)"
   }),
   '300': css({
-    gap: "var(--ds-space-300, 24px)"
+    [property]: "var(--ds-space-300, 24px)"
   }),
   '400': css({
-    gap: "var(--ds-space-400, 32px)"
+    [property]: "var(--ds-space-400, 32px)"
   }),
   '500': css({
-    gap: "var(--ds-space-500, 40px)"
+    [property]: "var(--ds-space-500, 40px)"
   }),
   '600': css({
-    gap: "var(--ds-space-600, 48px)"
+    [property]: "var(--ds-space-600, 48px)"
   }),
   '800': css({
-    gap: "var(--ds-space-800, 64px)"
+    [property]: "var(--ds-space-800, 64px)"
   }),
   '1000': css({
-    gap: "var(--ds-space-1000, 80px)"
+    [property]: "var(--ds-space-1000, 80px)"
   })
-};
-const rowSpaceMap = {
-  '0': css({
-    rowGap: "var(--ds-space-0, 0px)"
-  }),
-  '025': css({
-    rowGap: "var(--ds-space-025, 2px)"
-  }),
-  '050': css({
-    rowGap: "var(--ds-space-050, 4px)"
-  }),
-  '075': css({
-    rowGap: "var(--ds-space-075, 6px)"
-  }),
-  '100': css({
-    rowGap: "var(--ds-space-100, 8px)"
-  }),
-  '150': css({
-    rowGap: "var(--ds-space-150, 12px)"
-  }),
-  '200': css({
-    rowGap: "var(--ds-space-200, 16px)"
-  }),
-  '250': css({
-    rowGap: "var(--ds-space-250, 20px)"
-  }),
-  '300': css({
-    rowGap: "var(--ds-space-300, 24px)"
-  }),
-  '400': css({
-    rowGap: "var(--ds-space-400, 32px)"
-  }),
-  '500': css({
-    rowGap: "var(--ds-space-500, 40px)"
-  }),
-  '600': css({
-    rowGap: "var(--ds-space-600, 48px)"
-  }),
-  '800': css({
-    rowGap: "var(--ds-space-800, 64px)"
-  }),
-  '1000': css({
-    rowGap: "var(--ds-space-1000, 80px)"
-  })
-};
+}]));
 /**
  * @codegenEnd
  */
@@ -197,7 +153,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }) : rawChildren;
   const justifyContent = spread || alignInline;
   return jsx(Component, {
-    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && rowSpaceMap[rowSpace]],
+    css: [baseStyles, space && inlineSpaceMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && inlineSpaceMap.rowGap[rowSpace]],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/es2019/components/internal/base-box.partial.js

@@ -2,46 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
-import invariant from 'tiny-invariant';
 import { LAYERS } from '../../constants';
-import { UNSAFE_buildAboveMediaQueryCSS } from '../../helpers/responsive';
-import { BOX_RESPONSIVE_PROPS } from './types';
-import { isResponsiveStyleProp, isStaticStyleProp } from './utils';
-const responsiveRules = BOX_RESPONSIVE_PROPS.reduce((mapping, cssProperty) => {
-  return Object.assign(mapping, {
-    [cssProperty]: {
-      static: css({
-        [cssProperty]: `var(--ds-box-static-${cssProperty})`
-      }),
-      ...UNSAFE_buildAboveMediaQueryCSS(breakpoint => ({
-        [cssProperty]: `var(--ds-box-responsive-${cssProperty}-${breakpoint})`
-      }))
-    }
-  });
-}, {});
-const getResponsiveVars = (propertyName, propertyValue, mapping) => {
-  if (isResponsiveStyleProp(propertyValue)) {
-    return Object.keys(propertyValue).reduce((vars, breakpoint) => ({
-      ...vars,
-      [`--ds-box-responsive-${propertyName}-${breakpoint}`]: mapping[propertyValue[breakpoint]]
-    }), {});
-  } else if (isStaticStyleProp(propertyValue)) {
-    return {
-      [`--ds-box-static-${propertyName}`]: mapping[propertyValue]
-    };
-  }
-};
-const getResponsiveStyles = (propertyName, propertyValue) => {
-  invariant(typeof responsiveRules[propertyName] !== 'undefined', `Responsive rules for "${propertyName}" have not been statically defined.`);
-  if (isResponsiveStyleProp(propertyValue)) {
-    return Object.keys(propertyValue).map(breakpoint => responsiveRules[propertyName][breakpoint]);
-  } else if (isStaticStyleProp(propertyValue)) {
-    return responsiveRules[propertyName].static;
-  }
-};
-
-// Without this type annotation on Box we don't get autocomplete for props due to forwardRef types
-
 /**
  * __Box__
  *
@@ -78,21 +39,20 @@ export const BaseBox = /*#__PURE__*/forwardRef(({
   paddingInlineEnd,
   height,
   width,
-  display = displayMap.block,
+  display = 'block',
   position = 'static',
   style,
   testId,
   ...htmlAttributes
 }, ref) => {
   const Component = as || 'div';
-  const inlineStyles = Object.assign({}, style, getResponsiveVars('borderWidth', borderWidth, borderWidthMap), getResponsiveVars('display', display, displayMap), getResponsiveVars('padding', padding, paddingMap), getResponsiveVars('paddingBlock', paddingBlock, paddingMap), getResponsiveVars('paddingBlockStart', paddingBlockStart, paddingMap), getResponsiveVars('paddingBlockEnd', paddingBlockEnd, paddingMap), getResponsiveVars('paddingInline', paddingInline, paddingMap), getResponsiveVars('paddingInlineStart', paddingInlineStart, paddingMap), getResponsiveVars('paddingInlineEnd', paddingInlineEnd, paddingMap));
   const node = jsx(Component, _extends({
-    style: inlineStyles,
+    style: style,
     ref: ref
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, htmlAttributes, {
     className: className,
-    css: [baseStyles, ...[getResponsiveStyles('borderWidth', borderWidth), getResponsiveStyles('display', display), getResponsiveStyles('padding', padding), getResponsiveStyles('paddingBlock', paddingBlock), getResponsiveStyles('paddingBlockStart', paddingBlockStart), getResponsiveStyles('paddingBlockEnd', paddingBlockEnd), getResponsiveStyles('paddingInline', paddingInline), getResponsiveStyles('paddingInlineStart', paddingInlineStart), getResponsiveStyles('paddingInlineEnd', paddingInlineEnd)], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], color && textColorMap[color], flex && flexMap[flex], flexGrow && flexGrowMap[flexGrow], flexShrink && flexShrinkMap[flexShrink], alignSelf && alignSelfMap[alignSelf], overflow && overflowMap[overflow], overflowInline && overflowInlineMap[overflowInline], overflowBlock && overflowBlockMap[overflowBlock], position && positionMap[position], borderStyle && borderStyleMap[borderStyle], borderRadius && borderRadiusMap[borderRadius], shadow && shadowMap[shadow], layer && layerMap[layer], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
+    css: [baseStyles, alignSelf && alignSelfMap[alignSelf], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderRadius && borderRadiusMap[borderRadius], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], color && textColorMap[color], display && displayMap[display], flex && flexMap[flex], flexGrow && flexGrowMap[flexGrow], flexShrink && flexShrinkMap[flexShrink], height && heightMap[height], layer && layerMap[layer], overflow && overflowMap[overflow], overflow && overflowMap[overflow], overflowBlock && overflowBlockMap[overflowBlock], overflowInline && overflowInlineMap[overflowInline], padding && paddingMap.padding[padding], paddingBlock && paddingMap.paddingBlock[paddingBlock], paddingBlockStart && paddingMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingMap.paddingInline[paddingInline], paddingInlineStart && paddingMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingMap.paddingInlineEnd[paddingInlineEnd], padding && paddingMap.padding[padding], position && positionMap[position], shadow && shadowMap[shadow], width && widthMap[width]],
     "data-testid": testId
   }), children);
   return node;
@@ -111,9 +71,15 @@ const borderStyleMap = {
   })
 };
 const borderWidthMap = {
-  'size.0': "var(--ds-width-0, 0)",
-  'size.050': "var(--ds-width-050, 1px)",
-  'size.100': "var(--ds-width-100, 2px)"
+  'size.0': css({
+    borderWidth: "var(--ds-width-0, 0)"
+  }),
+  'size.050': css({
+    borderWidth: "var(--ds-width-050, 1px)"
+  }),
+  'size.100': css({
+    borderWidth: "var(--ds-width-100, 2px)"
+  })
 };
 const borderRadiusMap = {
   'radius.100': css({
@@ -171,11 +137,21 @@ const alignSelfMap = {
   })
 };
 const displayMap = {
-  block: 'block',
-  inline: 'inline',
-  flex: 'flex',
-  'inline-flex': 'inline-flex',
-  'inline-block': 'inline-block'
+  block: css({
+    display: 'block'
+  }),
+  inline: css({
+    display: 'inline'
+  }),
+  flex: css({
+    display: 'flex'
+  }),
+  'inline-flex': css({
+    display: 'inline-flex'
+  }),
+  'inline-block': css({
+    display: 'inline-block'
+  })
 };
 const positionMap = {
   absolute: css({
@@ -390,28 +366,56 @@ const maxHeightMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::84fd352b0e6509d380a0dcf8ad023ca2>>
+ * @codegen <<SignedSource::6da0ceaa2c227230e3a93bc724ff8648>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding"]
  * @codegenDependency ../../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-const paddingMap = {
-  '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)"
-};
+const paddingMap = Object.fromEntries(['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd'].map(property => [property, {
+  'space.0': css({
+    [property]: "var(--ds-space-0, 0px)"
+  }),
+  'space.025': css({
+    [property]: "var(--ds-space-025, 2px)"
+  }),
+  'space.050': css({
+    [property]: "var(--ds-space-050, 4px)"
+  }),
+  'space.075': css({
+    [property]: "var(--ds-space-075, 6px)"
+  }),
+  'space.100': css({
+    [property]: "var(--ds-space-100, 8px)"
+  }),
+  'space.150': css({
+    [property]: "var(--ds-space-150, 12px)"
+  }),
+  'space.200': css({
+    [property]: "var(--ds-space-200, 16px)"
+  }),
+  'space.250': css({
+    [property]: "var(--ds-space-250, 20px)"
+  }),
+  'space.300': css({
+    [property]: "var(--ds-space-300, 24px)"
+  }),
+  'space.400': css({
+    [property]: "var(--ds-space-400, 32px)"
+  }),
+  'space.500': css({
+    [property]: "var(--ds-space-500, 40px)"
+  }),
+  'space.600': css({
+    [property]: "var(--ds-space-600, 48px)"
+  }),
+  'space.800': css({
+    [property]: "var(--ds-space-800, 64px)"
+  }),
+  'space.1000': css({
+    [property]: "var(--ds-space-1000, 80px)"
+  })
+}]));
 /**
  * @codegenEnd
  */

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

@@ -38,56 +38,56 @@ const flexGrowMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
+ * @codegen <<SignedSource::4eb2c996d6ce5791acad51e2b226635f>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space"]
+ * @codegenParams ["stackSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-const spaceMap = {
+const stackSpaceMap = Object.fromEntries(['gap'].map(property => [property, {
   '0': css({
-    gap: "var(--ds-space-0, 0px)"
+    [property]: "var(--ds-space-0, 0px)"
   }),
   '025': css({
-    gap: "var(--ds-space-025, 2px)"
+    [property]: "var(--ds-space-025, 2px)"
   }),
   '050': css({
-    gap: "var(--ds-space-050, 4px)"
+    [property]: "var(--ds-space-050, 4px)"
   }),
   '075': css({
-    gap: "var(--ds-space-075, 6px)"
+    [property]: "var(--ds-space-075, 6px)"
   }),
   '100': css({
-    gap: "var(--ds-space-100, 8px)"
+    [property]: "var(--ds-space-100, 8px)"
   }),
   '150': css({
-    gap: "var(--ds-space-150, 12px)"
+    [property]: "var(--ds-space-150, 12px)"
   }),
   '200': css({
-    gap: "var(--ds-space-200, 16px)"
+    [property]: "var(--ds-space-200, 16px)"
   }),
   '250': css({
-    gap: "var(--ds-space-250, 20px)"
+    [property]: "var(--ds-space-250, 20px)"
   }),
   '300': css({
-    gap: "var(--ds-space-300, 24px)"
+    [property]: "var(--ds-space-300, 24px)"
   }),
   '400': css({
-    gap: "var(--ds-space-400, 32px)"
+    [property]: "var(--ds-space-400, 32px)"
   }),
   '500': css({
-    gap: "var(--ds-space-500, 40px)"
+    [property]: "var(--ds-space-500, 40px)"
   }),
   '600': css({
-    gap: "var(--ds-space-600, 48px)"
+    [property]: "var(--ds-space-600, 48px)"
   }),
   '800': css({
-    gap: "var(--ds-space-800, 64px)"
+    [property]: "var(--ds-space-800, 64px)"
   }),
   '1000': css({
-    gap: "var(--ds-space-1000, 80px)"
+    [property]: "var(--ds-space-1000, 80px)"
   })
-};
+}]));
 /**
  * @codegenEnd
  */
@@ -125,7 +125,7 @@ const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const Component = as || 'div';
   const justifyContent = spread || alignBlock;
   return jsx(Component, {
-    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    css: [baseStyles, space && stackSpaceMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/es2019/internal/xcss.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
 import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, paddingMap, textColorMap } from './style-maps';
 const tokensMap = {
@@ -69,7 +70,7 @@ export const transformStyles = styleObj => {
   });
   return styleObj;
 };
-export const xcss = style => {
+const baseXcss = style => {
   const transformedStyles = transformStyles(style);
   return {
     symbol: uniqueSymbol,
@@ -94,4 +95,10 @@ export const parseXcss = args => {
     throw new Error('Styles generated from unsafe source, use the `xcss` export from `@atlaskit/primitives`.');
   }
   return styles;
-};
+};
+// unused private functions only so we can extract the return type from a generic function
+const boxWrapper = style => xcss(style);
+const inlineWrapper = style => xcss(style);
+export function xcss(style) {
+  return baseXcss(style);
+}

package/dist/es2019/version.json

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

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { Children, forwardRef, Fragment, memo } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -44,100 +45,30 @@ var flexWrapStyles = css({
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::44cacef18982a4b0e43102900c42bdcf>>
+ * @codegen <<SignedSource::fb7587b114753ed19425e2b07b5deb0d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space", "rowSpace"]
+ * @codegenParams ["inlineSpace"]
  * @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)"
-  }),
-  '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)"
-  }),
-  '1000': css({
-    gap: "var(--ds-space-1000, 80px)"
-  })
-};
-var rowSpaceMap = {
-  '0': css({
-    rowGap: "var(--ds-space-0, 0px)"
-  }),
-  '025': css({
-    rowGap: "var(--ds-space-025, 2px)"
-  }),
-  '050': css({
-    rowGap: "var(--ds-space-050, 4px)"
-  }),
-  '075': css({
-    rowGap: "var(--ds-space-075, 6px)"
-  }),
-  '100': css({
-    rowGap: "var(--ds-space-100, 8px)"
-  }),
-  '150': css({
-    rowGap: "var(--ds-space-150, 12px)"
-  }),
-  '200': css({
-    rowGap: "var(--ds-space-200, 16px)"
-  }),
-  '250': css({
-    rowGap: "var(--ds-space-250, 20px)"
-  }),
-  '300': css({
-    rowGap: "var(--ds-space-300, 24px)"
-  }),
-  '400': css({
-    rowGap: "var(--ds-space-400, 32px)"
-  }),
-  '500': css({
-    rowGap: "var(--ds-space-500, 40px)"
-  }),
-  '600': css({
-    rowGap: "var(--ds-space-600, 48px)"
-  }),
-  '800': css({
-    rowGap: "var(--ds-space-800, 64px)"
-  }),
-  '1000': css({
-    rowGap: "var(--ds-space-1000, 80px)"
-  })
-};
+var inlineSpaceMap = Object.fromEntries(['gap', 'rowGap'].map(function (property) {
+  return [property, {
+    '0': css(_defineProperty({}, property, "var(--ds-space-0, 0px)")),
+    '025': css(_defineProperty({}, property, "var(--ds-space-025, 2px)")),
+    '050': css(_defineProperty({}, property, "var(--ds-space-050, 4px)")),
+    '075': css(_defineProperty({}, property, "var(--ds-space-075, 6px)")),
+    '100': css(_defineProperty({}, property, "var(--ds-space-100, 8px)")),
+    '150': css(_defineProperty({}, property, "var(--ds-space-150, 12px)")),
+    '200': css(_defineProperty({}, property, "var(--ds-space-200, 16px)")),
+    '250': css(_defineProperty({}, property, "var(--ds-space-250, 20px)")),
+    '300': css(_defineProperty({}, property, "var(--ds-space-300, 24px)")),
+    '400': css(_defineProperty({}, property, "var(--ds-space-400, 32px)")),
+    '500': css(_defineProperty({}, property, "var(--ds-space-500, 40px)")),
+    '600': css(_defineProperty({}, property, "var(--ds-space-600, 48px)")),
+    '800': css(_defineProperty({}, property, "var(--ds-space-800, 64px)")),
+    '1000': css(_defineProperty({}, property, "var(--ds-space-1000, 80px)"))
+  }];
+}));
 /**
  * @codegenEnd
  */
@@ -198,7 +129,7 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }) : rawChildren;
   var justifyContent = spread || alignInline;
   return jsx(Component, {
-    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && rowSpaceMap[rowSpace]],
+    css: [baseStyles, space && inlineSpaceMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && inlineSpaceMap.rowGap[rowSpace]],
     "data-testid": testId,
     ref: ref
   }, children);