@atlaskit/primitives 0.1.1 → 0.2.1

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

@@ -1,9 +1,11 @@
 "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");
 /** @jsx jsx */
@@ -44,56 +46,30 @@ var flexGrowMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["space"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-var spaceMap = {
-  '0': (0, _react2.css)({
-    gap: "var(--ds-space-0, 0px)"
-  }),
-  '025': (0, _react2.css)({
-    gap: "var(--ds-space-025, 2px)"
-  }),
-  '050': (0, _react2.css)({
-    gap: "var(--ds-space-050, 4px)"
-  }),
-  '075': (0, _react2.css)({
-    gap: "var(--ds-space-075, 6px)"
-  }),
-  '100': (0, _react2.css)({
-    gap: "var(--ds-space-100, 8px)"
-  }),
-  '1000': (0, _react2.css)({
-    gap: "var(--ds-space-1000, 80px)"
-  }),
-  '150': (0, _react2.css)({
-    gap: "var(--ds-space-150, 12px)"
-  }),
-  '200': (0, _react2.css)({
-    gap: "var(--ds-space-200, 16px)"
-  }),
-  '250': (0, _react2.css)({
-    gap: "var(--ds-space-250, 20px)"
-  }),
-  '300': (0, _react2.css)({
-    gap: "var(--ds-space-300, 24px)"
-  }),
-  '400': (0, _react2.css)({
-    gap: "var(--ds-space-400, 32px)"
-  }),
-  '500': (0, _react2.css)({
-    gap: "var(--ds-space-500, 40px)"
-  }),
-  '600': (0, _react2.css)({
-    gap: "var(--ds-space-600, 48px)"
-  }),
-  '800': (0, _react2.css)({
-    gap: "var(--ds-space-800, 64px)"
-  })
-};
+var spaceMap = Object.fromEntries(['gap'].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
  */
@@ -128,7 +104,7 @@ var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(f
     testId = _ref.testId;
   var justifyContent = spread || alignBlock;
   return (0, _react2.jsx)("div", {
-    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    css: [baseStyles, space && spaceMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/cjs/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Box", {
   enumerable: true,
   get: function get() {
-    return _box.Box;
+    return _box.default;
   }
 });
 Object.defineProperty(exports, "Inline", {
@@ -22,6 +22,6 @@ Object.defineProperty(exports, "Stack", {
     return _stack.default;
   }
 });
-var _stack = _interopRequireDefault(require("./components/stack.partial"));
-var _box = require("./components/box");
-var _inline = _interopRequireDefault(require("./components/inline.partial"));
+var _box = _interopRequireDefault(require("./components/box"));
+var _inline = _interopRequireDefault(require("./components/inline.partial"));
+var _stack = _interopRequireDefault(require("./components/stack.partial"));

package/dist/cjs/version.json

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

package/dist/es2019/components/box.js

@@ -1 +1,86 @@
-export { default as Box } from '@atlaskit/ds-explorations/box';
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import { BaseBox } from './internal/base-box.partial';
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/**
+ * __Box__
+ *
+ * A box {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+const Box = /*#__PURE__*/forwardRef(({
+  as,
+  children,
+  color,
+  backgroundColor,
+  shadow,
+  borderStyle,
+  borderWidth,
+  borderRadius,
+  borderColor,
+  layer,
+  flex,
+  flexGrow,
+  flexShrink,
+  alignSelf,
+  overflow,
+  overflowInline,
+  overflowBlock,
+  padding,
+  paddingBlock,
+  paddingBlockStart,
+  paddingBlockEnd,
+  paddingInline,
+  paddingInlineStart,
+  paddingInlineEnd,
+  height,
+  width,
+  display = 'block',
+  position = 'static',
+  customStyles,
+  testId,
+  ...htmlAttributes
+}, ref) => {
+  const {
+    style,
+    className,
+    ...safeHtmlAttributes
+  } = htmlAttributes;
+  return /*#__PURE__*/React.createElement(BaseBox, _extends({
+    as: as,
+    color: color,
+    backgroundColor: backgroundColor,
+    shadow: shadow,
+    borderStyle: borderStyle,
+    borderWidth: borderWidth,
+    borderRadius: borderRadius,
+    borderColor: borderColor,
+    layer: layer,
+    flex: flex,
+    flexGrow: flexGrow,
+    flexShrink: flexShrink,
+    alignSelf: alignSelf,
+    overflow: overflow,
+    overflowInline: overflowInline,
+    overflowBlock: overflowBlock,
+    padding: padding,
+    paddingBlock: paddingBlock,
+    paddingBlockStart: paddingBlockStart,
+    paddingBlockEnd: paddingBlockEnd,
+    paddingInline: paddingInline,
+    paddingInlineStart: paddingInlineStart,
+    paddingInlineEnd: paddingInlineEnd,
+    height: height,
+    width: width,
+    display: display,
+    position: position,
+    UNSAFE_style: customStyles,
+    testId: testId,
+    ref: ref
+  }, safeHtmlAttributes), children);
+});
+export default Box;

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

@@ -43,56 +43,56 @@ const flexWrapStyles = css({
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["space"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-const spaceMap = {
+const spaceMap = 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)"
-  }),
-  '1000': css({
-    gap: "var(--ds-space-1000, 80px)"
+    [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({
+    [property]: "var(--ds-space-1000, 80px)"
   })
-};
+}]));
 /**
  * @codegenEnd
  */
@@ -105,7 +105,7 @@ const baseStyles = css({
 const separatorStyles = css({
   color: "var(--ds-text-subtle, #42526E)",
   marginBlock: "var(--ds-space-0, 0px)",
-  marginInline: `-${"var(--ds-space-025, 2px)"}`,
+  marginInline: `calc(-1 * ${"var(--ds-space-025, 2px)"})`,
   pointerEvents: 'none',
   userSelect: 'none'
 });
@@ -149,7 +149,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }) : rawChildren;
   const justifyContent = spread || alignInline;
   return jsx("div", {
-    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
+    css: [baseStyles, space && spaceMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
     "data-testid": testId,
     ref: ref
   }, children);