@atlaskit/primitives 0.6.0 → 0.7.1

package/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ignorePatterns: ['./scripts/codegen-file-templates/*'],
+};

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/primitives
 
+## 0.7.1
+
+### Patch Changes
+
+- [`a02eed2974e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a02eed2974e) - Move codegen into @atlassian scope to publish it to private registry
+
+## 0.7.0
+
+### Minor Changes
+
+- [`7e17a8b8934`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7e17a8b8934) - Box:
+
+  - Add xcss prop to enable token powered styling.
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/cjs/components/box.js

@@ -10,9 +10,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _xcss = require("../internal/xcss");
-var _baseBox = require("./internal/base-box.partial");
-var _excluded = ["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", "position", "style", "testId", "xcss"],
+var _baseBox = require("./internal/base-box");
+var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "xcss"],
   _excluded2 = ["className"];
+/** @jsx jsx */
 /**
  * __Box__
  *
@@ -26,21 +27,7 @@ var _excluded = ["as", "children", "color", "backgroundColor", "shadow", "border
 var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var as = _ref.as,
     children = _ref.children,
-    color = _ref.color,
     backgroundColor = _ref.backgroundColor,
-    shadow = _ref.shadow,
-    borderStyle = _ref.borderStyle,
-    borderWidth = _ref.borderWidth,
-    borderRadius = _ref.borderRadius,
-    borderColor = _ref.borderColor,
-    layer = _ref.layer,
-    flex = _ref.flex,
-    flexGrow = _ref.flexGrow,
-    flexShrink = _ref.flexShrink,
-    alignSelf = _ref.alignSelf,
-    overflow = _ref.overflow,
-    overflowInline = _ref.overflowInline,
-    overflowBlock = _ref.overflowBlock,
     padding = _ref.padding,
     paddingBlock = _ref.paddingBlock,
     paddingBlockStart = _ref.paddingBlockStart,
@@ -48,12 +35,6 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     paddingInline = _ref.paddingInline,
     paddingInlineStart = _ref.paddingInlineStart,
     paddingInlineEnd = _ref.paddingInlineEnd,
-    height = _ref.height,
-    width = _ref.width,
-    _ref$display = _ref.display,
-    display = _ref$display === void 0 ? 'block' : _ref$display,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'static' : _ref$position,
     style = _ref.style,
     testId = _ref.testId,
     xcss = _ref.xcss,
@@ -63,21 +44,7 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = xcss && (0, _xcss.parseXcss)(xcss);
   return (0, _react2.jsx)(_baseBox.BaseBox, (0, _extends2.default)({
     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,
@@ -85,10 +52,6 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     paddingInline: paddingInline,
     paddingInlineStart: paddingInlineStart,
     paddingInlineEnd: paddingInlineEnd,
-    height: height,
-    width: width,
-    display: display,
-    position: position,
     style: style,
     testId: testId,
     ref: ref

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+/* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 
 var alignItemsMap = {

package/dist/cjs/components/internal/base-box.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BaseBox = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _styleMaps = require("../../internal/style-maps.partial");
+var _excluded = ["as", "className", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId"];
+/* eslint-disable @repo/internal/styles/no-exported-styles */
+/** @jsx jsx */
+// Without this type annotation on Box we don't get autocomplete for props due to forwardRef types
+
+/**
+ * __Box__
+ *
+ * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
+ *
+ * @internal
+ */
+var BaseBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var as = _ref.as,
+    className = _ref.className,
+    children = _ref.children,
+    backgroundColor = _ref.backgroundColor,
+    padding = _ref.padding,
+    paddingBlock = _ref.paddingBlock,
+    paddingBlockStart = _ref.paddingBlockStart,
+    paddingBlockEnd = _ref.paddingBlockEnd,
+    paddingInline = _ref.paddingInline,
+    paddingInlineStart = _ref.paddingInlineStart,
+    paddingInlineEnd = _ref.paddingInlineEnd,
+    style = _ref.style,
+    testId = _ref.testId,
+    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var Component = as || 'div';
+  var node = (0, _react2.jsx)(Component, (0, _extends2.default)({
+    style: style,
+    ref: ref
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, htmlAttributes, {
+    className: className,
+    css: [baseStyles, backgroundColor && _styleMaps.backgroundColorStylesMap[backgroundColor], padding && _styleMaps.paddingStylesMap.padding[padding], paddingBlock && _styleMaps.paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && _styleMaps.paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && _styleMaps.paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && _styleMaps.paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && _styleMaps.paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd], padding && _styleMaps.paddingStylesMap.padding[padding]],
+    "data-testid": testId
+  }), children);
+  return node;
+});
+exports.BaseBox = BaseBox;
+BaseBox.displayName = 'BaseBox';
+var _default = BaseBox;
+exports.default = _default;
+var baseStyles = (0, _react2.css)({
+  boxSizing: 'border-box',
+  appearance: 'none',
+  border: 'none'
+});

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+/* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 
 var justifyContentMap = {

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

@@ -0,0 +1,370 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::1e44ed8fcd11d2f3864437fa047845a9>>
+ * @codegenId dimensions
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["dimensions"]
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::89d19ca3937408eb7de5d72f4476a0f9>>
+ */
+var dimensionMap = {
+  '100%': '100%',
+  'size.100': '16px',
+  'size.200': '24px',
+  'size.300': '32px',
+  'size.400': '40px',
+  'size.500': '48px',
+  'size.600': '96px',
+  'size.1000': '192px'
+};
+exports.dimensionMap = dimensionMap;
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::c9769f86fc43a4afcc45953fc5f06926>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["padding"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+var 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)"
+};
+exports.paddingMap = paddingMap;
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::4da498214befc7e312ff00d4f9f5379f>>
+ * @codegenId colors
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["border", "background", "shadow", "text"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
+ */
+var borderColorMap = {
+  'color.border': "var(--ds-border, #091e4221)",
+  'accent.red': "var(--ds-border-accent-red, #FF5630)",
+  'accent.orange': "var(--ds-border-accent-orange, #D94008)",
+  'accent.yellow': "var(--ds-border-accent-yellow, #FFAB00)",
+  'accent.green': "var(--ds-border-accent-green, #36B37E)",
+  'accent.teal': "var(--ds-border-accent-teal, #00B8D9)",
+  'accent.blue': "var(--ds-border-accent-blue, #0065FF)",
+  'accent.purple': "var(--ds-border-accent-purple, #6554C0)",
+  'accent.magenta': "var(--ds-border-accent-magenta, #CD519D)",
+  'accent.gray': "var(--ds-border-accent-gray, #5E6C84)",
+  disabled: "var(--ds-border-disabled, #FAFBFC)",
+  focused: "var(--ds-border-focused, #4C9AFF)",
+  input: "var(--ds-border-input, #FAFBFC)",
+  inverse: "var(--ds-border-inverse, #FFFFFF)",
+  selected: "var(--ds-border-selected, #0052CC)",
+  brand: "var(--ds-border-brand, #0052CC)",
+  danger: "var(--ds-border-danger, #FF5630)",
+  warning: "var(--ds-border-warning, #FFC400)",
+  success: "var(--ds-border-success, #00875A)",
+  discovery: "var(--ds-border-discovery, #998DD9)",
+  information: "var(--ds-border-information, #0065FF)",
+  bold: "var(--ds-border-bold, #344563)"
+};
+exports.borderColorMap = borderColorMap;
+var backgroundColorMap = {
+  'accent.red.subtlest': "var(--ds-background-accent-red-subtlest, #FF8F73)",
+  'accent.red.subtler': "var(--ds-background-accent-red-subtler, #FF7452)",
+  'accent.red.subtle': "var(--ds-background-accent-red-subtle, #DE350B)",
+  'accent.red.bolder': "var(--ds-background-accent-red-bolder, #DE350B)",
+  'accent.orange.subtlest': "var(--ds-background-accent-orange-subtlest, #F18D13)",
+  'accent.orange.subtler': "var(--ds-background-accent-orange-subtler, #B65C02)",
+  'accent.orange.subtle': "var(--ds-background-accent-orange-subtle, #5F3811)",
+  'accent.orange.bolder': "var(--ds-background-accent-orange-bolder, #43290F)",
+  'accent.yellow.subtlest': "var(--ds-background-accent-yellow-subtlest, #FFE380)",
+  'accent.yellow.subtler': "var(--ds-background-accent-yellow-subtler, #FFC400)",
+  'accent.yellow.subtle': "var(--ds-background-accent-yellow-subtle, #FF991F)",
+  'accent.yellow.bolder': "var(--ds-background-accent-yellow-bolder, #FF991F)",
+  'accent.green.subtlest': "var(--ds-background-accent-green-subtlest, #79F2C0)",
+  'accent.green.subtler': "var(--ds-background-accent-green-subtler, #57D9A3)",
+  'accent.green.subtle': "var(--ds-background-accent-green-subtle, #00875A)",
+  'accent.green.bolder': "var(--ds-background-accent-green-bolder, #00875A)",
+  'accent.teal.subtlest': "var(--ds-background-accent-teal-subtlest, #79E2F2)",
+  'accent.teal.subtler': "var(--ds-background-accent-teal-subtler, #00C7E6)",
+  'accent.teal.subtle': "var(--ds-background-accent-teal-subtle, #00A3BF)",
+  'accent.teal.bolder': "var(--ds-background-accent-teal-bolder, #00A3BF)",
+  'accent.blue.subtlest': "var(--ds-background-accent-blue-subtlest, #4C9AFF)",
+  'accent.blue.subtler': "var(--ds-background-accent-blue-subtler, #2684FF)",
+  'accent.blue.subtle': "var(--ds-background-accent-blue-subtle, #0052CC)",
+  'accent.blue.bolder': "var(--ds-background-accent-blue-bolder, #0052CC)",
+  'accent.purple.subtlest': "var(--ds-background-accent-purple-subtlest, #998DD9)",
+  'accent.purple.subtler': "var(--ds-background-accent-purple-subtler, #8777D9)",
+  'accent.purple.subtle': "var(--ds-background-accent-purple-subtle, #5243AA)",
+  'accent.purple.bolder': "var(--ds-background-accent-purple-bolder, #5243AA)",
+  'accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest, #E774BB)",
+  'accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler, #E774BB)",
+  'accent.magenta.subtle': "var(--ds-background-accent-magenta-subtle, #E774BB)",
+  'accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder, #E774BB)",
+  'accent.gray.subtlest': "var(--ds-background-accent-gray-subtlest, #6B778C)",
+  'accent.gray.subtler': "var(--ds-background-accent-gray-subtler, #5E6C84)",
+  'accent.gray.subtle': "var(--ds-background-accent-gray-subtle, #42526E)",
+  'accent.gray.bolder': "var(--ds-background-accent-gray-bolder, #505F79)",
+  disabled: "var(--ds-background-disabled, #091e4289)",
+  input: "var(--ds-background-input, #FAFBFC)",
+  'input.hovered': "var(--ds-background-input-hovered, #EBECF0)",
+  'input.pressed': "var(--ds-background-input-pressed, #FFFFFF)",
+  'inverse.subtle': "var(--ds-background-inverse-subtle, #00000029)",
+  'inverse.subtle.hovered': "var(--ds-background-inverse-subtle-hovered, #0000003D)",
+  'inverse.subtle.pressed': "var(--ds-background-inverse-subtle-pressed, #00000052)",
+  neutral: "var(--ds-background-neutral, #DFE1E6)",
+  'neutral.hovered': "var(--ds-background-neutral-hovered, #091e4214)",
+  'neutral.pressed': "var(--ds-background-neutral-pressed, #B3D4FF)",
+  'neutral.subtle': "var(--ds-background-neutral-subtle, transparent)",
+  'neutral.subtle.hovered': "var(--ds-background-neutral-subtle-hovered, #091e4214)",
+  'neutral.subtle.pressed': "var(--ds-background-neutral-subtle-pressed, #B3D4FF)",
+  'neutral.bold': "var(--ds-background-neutral-bold, #42526E)",
+  'neutral.bold.hovered': "var(--ds-background-neutral-bold-hovered, #505F79)",
+  'neutral.bold.pressed': "var(--ds-background-neutral-bold-pressed, #344563)",
+  selected: "var(--ds-background-selected, #DEEBFF)",
+  'selected.hovered': "var(--ds-background-selected-hovered, #B3D4FF)",
+  'selected.pressed': "var(--ds-background-selected-pressed, #4C9AFF)",
+  'selected.bold': "var(--ds-background-selected-bold, #0052CC)",
+  'selected.bold.hovered': "var(--ds-background-selected-bold-hovered, #2684FF)",
+  'selected.bold.pressed': "var(--ds-background-selected-bold-pressed, #0052CC)",
+  'brand.bold': "var(--ds-background-brand-bold, #0052CC)",
+  'brand.bold.hovered': "var(--ds-background-brand-bold-hovered, #0065FF)",
+  'brand.bold.pressed': "var(--ds-background-brand-bold-pressed, #0747A6)",
+  danger: "var(--ds-background-danger, #FFEBE6)",
+  'danger.hovered': "var(--ds-background-danger-hovered, #FFBDAD)",
+  'danger.pressed': "var(--ds-background-danger-pressed, #FF8F73)",
+  'danger.bold': "var(--ds-background-danger-bold, #DE350B)",
+  'danger.bold.hovered': "var(--ds-background-danger-bold-hovered, #FF5630)",
+  'danger.bold.pressed': "var(--ds-background-danger-bold-pressed, #BF2600)",
+  warning: "var(--ds-background-warning, #FFFAE6)",
+  'warning.hovered': "var(--ds-background-warning-hovered, #FFF0B3)",
+  'warning.pressed': "var(--ds-background-warning-pressed, #FFE380)",
+  'warning.bold': "var(--ds-background-warning-bold, #FFAB00)",
+  'warning.bold.hovered': "var(--ds-background-warning-bold-hovered, #FFC400)",
+  'warning.bold.pressed': "var(--ds-background-warning-bold-pressed, #FF991F)",
+  success: "var(--ds-background-success, #E3FCEF)",
+  'success.hovered': "var(--ds-background-success-hovered, #ABF5D1)",
+  'success.pressed': "var(--ds-background-success-pressed, #79F2C0)",
+  'success.bold': "var(--ds-background-success-bold, #00875A)",
+  'success.bold.hovered': "var(--ds-background-success-bold-hovered, #57D9A3)",
+  'success.bold.pressed': "var(--ds-background-success-bold-pressed, #00875A)",
+  discovery: "var(--ds-background-discovery, #EAE6FF)",
+  'discovery.hovered': "var(--ds-background-discovery-hovered, #C0B6F2)",
+  'discovery.pressed': "var(--ds-background-discovery-pressed, #998DD9)",
+  'discovery.bold': "var(--ds-background-discovery-bold, #5243AA)",
+  'discovery.bold.hovered': "var(--ds-background-discovery-bold-hovered, #8777D9)",
+  'discovery.bold.pressed': "var(--ds-background-discovery-bold-pressed, #5243AA)",
+  information: "var(--ds-background-information, #DEEBFF)",
+  'information.hovered': "var(--ds-background-information-hovered, #B3D4FF)",
+  'information.pressed': "var(--ds-background-information-pressed, #4C9AFF)",
+  'information.bold': "var(--ds-background-information-bold, #0052CC)",
+  'information.bold.hovered': "var(--ds-background-information-bold-hovered, #2684FF)",
+  'information.bold.pressed': "var(--ds-background-information-bold-pressed, #0052CC)",
+  'color.blanket': "var(--ds-blanket, #091e4289)",
+  'color.blanket.selected': "var(--ds-blanket-selected, #388BFF14)",
+  'color.blanket.danger': "var(--ds-blanket-danger, #EF5C4814)",
+  'elevation.surface': "var(--ds-surface, #FFFFFF)",
+  'elevation.surface.hovered': "var(--ds-surface-hovered, #FAFBFC)",
+  'elevation.surface.pressed': "var(--ds-surface-pressed, #F4F5F7)",
+  'elevation.surface.overlay': "var(--ds-surface-overlay, #FFFFFF)",
+  'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered, #FAFBFC)",
+  'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed, #F4F5F7)",
+  'elevation.surface.raised': "var(--ds-surface-raised, #FFFFFF)",
+  'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered, #FAFBFC)",
+  'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed, #F4F5F7)",
+  'elevation.surface.sunken': "var(--ds-surface-sunken, #F4F5F7)"
+};
+exports.backgroundColorMap = backgroundColorMap;
+var shadowMap = {
+  overflow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)",
+  'overflow.perimeter': "var(--ds-shadow-overflow-perimeter, #091e421f)",
+  'overflow.spread': "var(--ds-shadow-overflow-spread, #091e4229)",
+  overlay: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)",
+  raised: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
+};
+exports.shadowMap = shadowMap;
+var textColorMap = {
+  'color.text': "var(--ds-text, #172B4D)",
+  'accent.red': "var(--ds-text-accent-red, #DE350B)",
+  'accent.red.bolder': "var(--ds-text-accent-red-bolder, #BF2600)",
+  'accent.orange': "var(--ds-text-accent-orange, #F18D13)",
+  'accent.orange.bolder': "var(--ds-text-accent-orange-bolder, #B65C02)",
+  'accent.yellow': "var(--ds-text-accent-yellow, #FF991F)",
+  'accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder, #FF8B00)",
+  'accent.green': "var(--ds-text-accent-green, #00875A)",
+  'accent.green.bolder': "var(--ds-text-accent-green-bolder, #006644)",
+  'accent.teal': "var(--ds-text-accent-teal, #00A3BF)",
+  'accent.teal.bolder': "var(--ds-text-accent-teal-bolder, #008DA6)",
+  'accent.blue': "var(--ds-text-accent-blue, #0052CC)",
+  'accent.blue.bolder': "var(--ds-text-accent-blue-bolder, #0747A6)",
+  'accent.purple': "var(--ds-text-accent-purple, #5243AA)",
+  'accent.purple.bolder': "var(--ds-text-accent-purple-bolder, #403294)",
+  'accent.magenta': "var(--ds-text-accent-magenta, #E774BB)",
+  'accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder, #DA62AC)",
+  'accent.gray': "var(--ds-text-accent-gray, #505F79)",
+  'accent.gray.bolder': "var(--ds-text-accent-gray-bolder, #172B4D)",
+  disabled: "var(--ds-text-disabled, #A5ADBA)",
+  inverse: "var(--ds-text-inverse, #FFFFFF)",
+  selected: "var(--ds-text-selected, #0052CC)",
+  brand: "var(--ds-text-brand, #0065FF)",
+  danger: "var(--ds-text-danger, #DE350B)",
+  warning: "var(--ds-text-warning, #974F0C)",
+  'warning.inverse': "var(--ds-text-warning-inverse, #172B4D)",
+  success: "var(--ds-text-success, #006644)",
+  discovery: "var(--ds-text-discovery, #403294)",
+  information: "var(--ds-text-information, #0052CC)",
+  subtlest: "var(--ds-text-subtlest, #7A869A)",
+  subtle: "var(--ds-text-subtle, #42526E)"
+};
+exports.textColorMap = textColorMap;
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::dd62140c127dcca8e478ad22341d4626>>
+ * @codegenId misc
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["align-self", "border-style", "display", "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-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
+ * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::bf6626972898bf22d2eeee2130693d47>>
+ * @codegenDependency ../../scripts/codegen-file-templates/flex.tsx <<SignedSource::ffa0189d14f1f00a16ec1e9f43a17ce9>>
+ * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
+ * @codegenDependency ../../scripts/codegen-file-templates/overflow.tsx <<SignedSource::ccb841f2f51525aed895c06e00f15089>>
+ * @codegenDependency ../../scripts/codegen-file-templates/position.tsx <<SignedSource::8709494ef16c48046c1784a9aaec6d80>>
+ */
+var alignSelfMap = {
+  center: 'center',
+  start: 'start',
+  stretch: 'stretch',
+  end: 'end',
+  baseline: 'baseline'
+};
+exports.alignSelfMap = alignSelfMap;
+var borderStyleMap = {
+  none: 'none',
+  solid: 'solid'
+};
+exports.borderStyleMap = borderStyleMap;
+var flexGrowMap = {
+  '0': 0,
+  '1': 1
+};
+exports.flexGrowMap = flexGrowMap;
+var flexShrinkMap = {
+  '0': 0,
+  '1': 1
+};
+exports.flexShrinkMap = flexShrinkMap;
+var flexMap = {
+  '1': 1
+};
+exports.flexMap = flexMap;
+var layerMap = {
+  card: 100,
+  navigation: 200,
+  dialog: 300,
+  layer: 400,
+  blanket: 500,
+  modal: 510,
+  flag: 600,
+  spotlight: 700,
+  tooltip: 800
+};
+exports.layerMap = layerMap;
+var overflowMap = {
+  auto: 'auto',
+  hidden: 'hidden'
+};
+exports.overflowMap = overflowMap;
+var overflowInlineMap = {
+  auto: 'auto',
+  hidden: 'hidden'
+};
+exports.overflowInlineMap = overflowInlineMap;
+var overflowBlockMap = {
+  auto: 'auto',
+  hidden: 'hidden'
+};
+exports.overflowBlockMap = overflowBlockMap;
+var positionMap = {
+  absolute: 'absolute',
+  fixed: 'fixed',
+  relative: 'relative',
+  static: 'static'
+};
+exports.positionMap = positionMap;
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e3e1d54f37a0f8c524ccc5c8e22ad5bf>>
+ * @codegenId border
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["width", "radius"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::a4f70bd83edd3dd448c6eccda60abdf7>>
+ */
+var borderWidthMap = {
+  'width.0': "var(--ds-width-0, 0)",
+  'width.050': "var(--ds-width-050, 0.0625rem)",
+  'width.100': "var(--ds-width-100, 0.125rem)"
+};
+exports.borderWidthMap = borderWidthMap;
+var borderRadiusMap = {
+  'radius.050': "var(--ds-radius-050, 0.125rem)",
+  'radius.100': "var(--ds-radius-100, 0.25rem)",
+  'radius.200': "var(--ds-radius-200, 0.5rem)",
+  'radius.300': "var(--ds-radius-300, 0.75rem)",
+  'radius.400': "var(--ds-radius-400, 1rem)",
+  'radius.round': "var(--ds-radius-round, 50%)"
+};
+
+/**
+ * @codegenEnd
+ */
+exports.borderRadiusMap = borderRadiusMap;
+var spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd'];
+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]));
+    return emotionSpacingMap;
+  }, {});
+};
+var paddingStylesMap = spacingProperties.reduce(function (styleMap, spacingProperty) {
+  styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, paddingMap);
+  return styleMap;
+}, {});
+exports.paddingStylesMap = paddingStylesMap;
+var backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
+exports.backgroundColorStylesMap = backgroundColorStylesMap;

package/dist/cjs/internal/xcss.js

@@ -9,7 +9,8 @@ exports.xcss = xcss;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("@emotion/react");
-var _styleMaps = require("./style-maps");
+var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
+var _styleMaps = require("./style-maps.partial");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 var tokensMap = {
@@ -30,9 +31,13 @@ var tokensMap = {
   paddingInline: _styleMaps.paddingMap,
   paddingInlineEnd: _styleMaps.paddingMap,
   paddingInlineStart: _styleMaps.paddingMap,
+  boxShadow: _styleMaps.shadowMap,
   width: _styleMaps.dimensionMap
 };
 var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
+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.
@@ -50,11 +55,10 @@ var transformStyles = function transformStyles(styleObj) {
 
   // Modifies styleObj in place. Be careful.
   Object.entries(styleObj).forEach(function (_ref) {
-    var _process, _process$env;
     var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
       key = _ref2[0],
       value = _ref2[1];
-    if (((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) === 'development') {
+    if (isSafeEnvToThrow()) {
       // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
       if (/(\.|\s|&+|\*\>|#|\[.*\])/.test(key)) {
         throw new Error("Styles not supported for key '".concat(key, "'."));
@@ -78,7 +82,11 @@ var transformStyles = function transformStyles(styleObj) {
     }
     var tokenValue = tokensMap[key][value];
     if (!tokenValue) {
-      throw new Error('Invalid Token');
+      var message = "Invalid token alias: ".concat(value);
+      (0, _warnOnce.default)(message);
+      if (isSafeEnvToThrow()) {
+        throw new Error(message);
+      }
     }
     styleObj[key] = tokenValue;
   });
@@ -95,12 +103,14 @@ var baseXcss = function baseXcss(style) {
 
 /**
  * @internal used in primitives
- * @returns
+ * @returns a collection of styles that can be applied to the respective primitive
  */
+
 var parseXcss = function parseXcss(args) {
   if (Array.isArray(args)) {
-    // @ts-expect-error FIXME
-    return args.map(parseXcss);
+    return args.map(function (x) {
+      return x && parseXcss(x);
+    }).filter(Boolean);
   }
   var symbol = args.symbol,
     styles = args.styles;

package/dist/cjs/version.json

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