@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.2

package/lib/components/AstroWrapper/PageWrapper.test.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PageWrapper, Box } from '../../index';
+import axeTest from '../../utils/testUtils/testAxe';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-box';
+var defaultProps = {
+  bg: 'active',
+  'data-testid': testId
+};
+
+var getComponent = function getComponent() {
+  return render(___EmotionJSX(Box, defaultProps), {
+    wrapper: PageWrapper
+  });
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent); // NOTE: This will fail if in the AstroWrapper test file...
+// Probably something to do with Jest / RTL
+
+test('should provide theme styling through PageWrapper', function () {
+  getComponent();
+  var box = screen.queryByTestId(testId);
+  expect(box).toBeInstanceOf(HTMLDivElement);
+  expect(box).toBeInTheDocument();
+  expect(box).toHaveStyle('background-color: active');
+});

package/lib/components/AstroWrapper/index.js

@@ -0,0 +1,2 @@
+export { default } from './AstroWrapper';
+export * from './AstroWrapper';

package/lib/components/Avatar/Avatar.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { Avatar as ThemeUIAvatar } from 'theme-ui';
+/**
+ * Basic avatar component.
+ * Built on top of [Avatar from Theme-UI](https://theme-ui.com/components/avatar/).
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
+  return ___EmotionJSX(ThemeUIAvatar, _extends({
+    ref: ref,
+    alt: "Avatar"
+  }, props));
+});
+Avatar.propTypes = {
+  /**  Source of avatar. */
+  src: PropTypes.string.isRequired
+};
+Avatar.displayName = 'Avatar';
+export default Avatar;

package/lib/components/Avatar/Avatar.stories.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import faker from 'faker';
+import Avatar from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Avatar',
+  component: Avatar,
+  argTypes: {
+    src: {
+      control: {
+        type: 'none'
+      },
+      defaultValue: faker.image.lorempicsum.imageUrl(150, 150, false, 0, '1')
+    }
+  }
+};
+export var Default = function Default(_ref) {
+  var args = _extends({}, _ref);
+
+  return ___EmotionJSX(Avatar, args);
+};

package/lib/components/Avatar/Avatar.test.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import faker from 'faker';
+import axeTest from '../../utils/testUtils/testAxe';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import Avatar from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var defaultProps = {
+  src: faker.image.lorempicsum.imageUrl(150, 150, false, 0, '1')
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(Avatar, _extends({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('an avatar is rendered', function () {
+  getComponent();
+  var img = screen.getByRole('img');
+  expect(img).toBeInstanceOf(HTMLImageElement);
+  expect(img).toBeInTheDocument();
+});

package/lib/components/Avatar/index.js

@@ -0,0 +1 @@
+export { default } from './Avatar';

package/lib/components/Box/Box.js

@@ -0,0 +1,110 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _Number$isNaN from "@babel/runtime-corejs3/core-js-stable/number/is-nan";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _styled from "@emotion/styled/base";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, 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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { forwardRef, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { layout, flexbox, typography } from 'styled-system';
+import { Box as ThemeUIBox } from 'theme-ui';
+import { propType as stylePropType } from '@styled-system/prop-types';
+import { toNumber } from 'lodash';
+import { useStatusClasses, usePropWarning } from '../../hooks';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var ExtendedBox = /*#__PURE__*/_styled(ThemeUIBox, process.env.NODE_ENV === "production" ? {
+  target: "e146bxl90"
+} : {
+  target: "e146bxl90",
+  label: "ExtendedBox"
+})(layout, flexbox, typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU29CIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiwgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBsYXlvdXQsIGZsZXhib3gsIHR5cG9ncmFwaHkgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IEJveCBhcyBUaGVtZVVJQm94IH0gZnJvbSAndGhlbWUtdWknO1xuaW1wb3J0IHsgcHJvcFR5cGUgYXMgc3R5bGVQcm9wVHlwZSB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdG9OdW1iZXIgfSBmcm9tICdsb2Rhc2gnO1xuaW1wb3J0IHsgdXNlU3RhdHVzQ2xhc3NlcywgdXNlUHJvcFdhcm5pbmcgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5cbmNvbnN0IEV4dGVuZGVkQm94ID0gc3R5bGVkKFRoZW1lVUlCb3gpKGxheW91dCwgZmxleGJveCwgdHlwb2dyYXBoeSk7XG4vKipcbiAqIEJhc2ljIGZsZXhib3gtYmFzZWQgbGF5b3V0IGNvbXBvbmVudCBmb3IgY3JlYXRpbmcgcm93cyBhbmQgY29sdW1ucyxcbiAqIHdoaWxlIGNvbnRyb2xsaW5nIHNpemVzIGFuZCBzcGFjaW5nLlxuICogQWNjZXB0cyBtb3N0IG9mIHRoZSBzdHlsaW5nIHByb3BzIGZyb20gW3N0eWxlZC1zeXN0ZW1dKGh0dHBzOi8vc3R5bGVkLXN5c3RlbS5jb20vdGFibGUpLlxuICogQnVpbHQgb24gdG9wIG9mIHRoZSBbQm94IGZyb20gVGhlbWUtVUldKGh0dHBzOi8vdGhlbWUtdWkuY29tL2NvbXBvbmVudHMvYm94LykuXG4gKi9cbmNvbnN0IEJveCA9IGZvcndhcmRSZWYoKHByb3BzLCByZWYpID0+IHtcbiAgY29uc3Qge1xuICAgIGZsZXhEaXJlY3Rpb24sIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICBnYXAsXG4gICAgaXNSb3csXG4gICAgaXNEaXNhYmxlZCxcbiAgICBjbGFzc05hbWUsXG4gICAgZm9udFNpemUsXG4gICAgc3gsIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICAuLi5vdGhlcnNcbiAgfSA9IHByb3BzO1xuICBjb25zdCBmZCA9IGZsZXhEaXJlY3Rpb24gfHwgaXNSb3cgPyAncm93JyA6ICdjb2x1bW4nO1xuICBjb25zdCBjdXN0b20gPSB7IC4uLnN4IH07XG5cbiAgY29uc3QgeyBjbGFzc05hbWVzIH0gPSB1c2VTdGF0dXNDbGFzc2VzKGNsYXNzTmFtZSwgeyBpc0Rpc2FibGVkIH0pO1xuICB1c2VQcm9wV2FybmluZyhwcm9wcywgJ2Rpc2FibGVkJywgJ2lzRGlzYWJsZWQnKTtcblxuICBpZiAoZ2FwKSB7XG4gICAgY3VzdG9tWycmID4gKiArICo6bm90KDpmaXJzdC1jaGlsZCkgLyogZW1vdGlvbi1kaXNhYmxlLXNlcnZlci1yZW5kZXJpbmctdW5zYWZlLXNlbGVjdG9yLXdhcm5pbmctcGxlYXNlLWRvLW5vdC11c2UtdGhpcy10aGUtd2FybmluZy1leGlzdHMtZm9yLWEtcmVhc29uICovJ10gPSB7XG4gICAgICBbZmQgPT09ICdyb3cnID8gJ21hcmdpbkxlZnQnIDogJ21hcmdpblRvcCddOiBnYXAsXG4gICAgfTtcbiAgfVxuXG4gIGNvbnN0IGN1c3RvbUZvbnRTaXplID0gdXNlTWVtbygoKSA9PiB7XG4gICAgY29uc3QgbnVtZXJpY2FsRm9udFNpemUgPSB0b051bWJlcihmb250U2l6ZSk7XG4gICAgaWYgKE51bWJlci5pc05hTihudW1lcmljYWxGb250U2l6ZSkpIHtcbiAgICAgIHJldHVybiBmb250U2l6ZTtcbiAgICB9XG4gICAgcmV0dXJuIG51bWVyaWNhbEZvbnRTaXplO1xuICB9LCBbZm9udFNpemVdKTtcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZEJveFxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBmbGV4RGlyZWN0aW9uPXtmZH1cbiAgICAgIHZhcmlhbnQ9XCJib3hlcy5iYXNlXCJcbiAgICAgIGZvbnRTaXplPXtjdXN0b21Gb250U2l6ZX1cbiAgICAgIHsuLi5vdGhlcnN9XG4gICAgICBzeD17Y3VzdG9tfVxuICAgIC8+XG4gICk7XG59KTtcblxuQm94LnByb3BUeXBlcyA9IHtcbiAgLyoqIFRoZSBiYWNrZ3JvdW5kIGNvbG9yIG9mIHRoZSBib3guICovXG4gIGJnOiBQcm9wVHlwZXMuc3RyaW5nLFxuICAvKiogV2hldGhlciB0aGUgYm94IGlzIGRpc2FibGVkLiAqL1xuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuYm9vbCwgUHJvcFR5cGVzLm9iamVjdF0pLFxuICAvKiogVGhlIGJhc2UgSFRNTCB0YWcgbmFtZSBvciBSZWFjdCBjb21wb25lbnQgdHlwZSB0byByZW5kZXIgKi9cbiAgYXM6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5lbGVtZW50VHlwZV0pLFxuICAvKiogV2hlbiB0cnVlLCBkaXNwbGF5IGFzIGEgcm93IHJhdGhlciB0aGFuIGEgY29sdW1uLiAqL1xuICBpc1JvdzogUHJvcFR5cGVzLmJvb2wsXG4gIC8qKiBHYXAgYmV0d2VlbiBpdGVtcywgd2hldGhlciBpbiBhIHJvdyBvciBjb2x1bW4uICovXG4gIGdhcDogc3R5bGVQcm9wVHlwZSxcbiAgZm9udFNpemU6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5udW1iZXJdKSxcbn07XG5cbkJveC5kZWZhdWx0UHJvcHMgPSB7XG4gIGFzOiAnZGl2JyxcbiAgaXNSb3c6IGZhbHNlLFxuICBpc0Rpc2FibGVkOiBmYWxzZSxcbn07XG5cbkJveC5kaXNwbGF5TmFtZSA9ICdCb3gnO1xuXG5leHBvcnQgZGVmYXVsdCBCb3g7XG4iXX0= */");
+/**
+ * Basic flexbox-based layout component for creating rows and columns,
+ * while controlling sizes and spacing.
+ * Accepts most of the styling props from [styled-system](https://styled-system.com/table).
+ * Built on top of the [Box from Theme-UI](https://theme-ui.com/components/box/).
+ */
+
+
+var Box = /*#__PURE__*/forwardRef(function (props, ref) {
+  var flexDirection = props.flexDirection,
+      gap = props.gap,
+      isRow = props.isRow,
+      isDisabled = props.isDisabled,
+      className = props.className,
+      fontSize = props.fontSize,
+      sx = props.sx,
+      others = _objectWithoutProperties(props, ["flexDirection", "gap", "isRow", "isDisabled", "className", "fontSize", "sx"]);
+
+  var fd = flexDirection || isRow ? 'row' : 'column';
+
+  var custom = _objectSpread({}, sx);
+
+  var _useStatusClasses = useStatusClasses(className, {
+    isDisabled: isDisabled
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  usePropWarning(props, 'disabled', 'isDisabled');
+
+  if (gap) {
+    custom['& > * + *:not(:first-child) /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */'] = _defineProperty({}, fd === 'row' ? 'marginLeft' : 'marginTop', gap);
+  }
+
+  var customFontSize = useMemo(function () {
+    var numericalFontSize = toNumber(fontSize);
+
+    if (_Number$isNaN(numericalFontSize)) {
+      return fontSize;
+    }
+
+    return numericalFontSize;
+  }, [fontSize]);
+  return ___EmotionJSX(ExtendedBox, _extends({
+    className: classNames,
+    ref: ref,
+    display: "flex",
+    flexDirection: fd,
+    variant: "boxes.base",
+    fontSize: customFontSize
+  }, others, {
+    sx: custom
+  }));
+});
+Box.propTypes = {
+  /** The background color of the box. */
+  bg: PropTypes.string,
+
+  /** Whether the box is disabled. */
+  isDisabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+
+  /** The base HTML tag name or React component type to render */
+  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+
+  /** When true, display as a row rather than a column. */
+  isRow: PropTypes.bool,
+
+  /** Gap between items, whether in a row or column. */
+  gap: stylePropType,
+  fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+Box.defaultProps = {
+  as: 'div',
+  isRow: false,
+  isDisabled: false
+};
+Box.displayName = 'Box';
+export default Box;

package/lib/components/Box/Box.stories.js

@@ -0,0 +1,249 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import Box from '.';
+import { SelectField, Item, TextField } from '../../index';
+import { flatColorList } from '../../styles/colors.js';
+import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Box',
+  component: Box,
+  argTypes: {
+    bg: {
+      control: {
+        type: 'select',
+        options: _mapInstanceProperty(flatColorList).call(flatColorList, function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 1),
+              colorName = _ref2[0];
+
+          return colorName;
+        })
+      },
+      defaultValue: 'active'
+    },
+    gap: {
+      control: {
+        type: 'text'
+      },
+      description: 'Gap between items, whether in a row or column. Numeric value paired with a unit. https://www.w3schools.com/cssref/css_units.asp',
+      defaultValue: '10px'
+    },
+    as: {
+      control: {
+        type: 'select',
+        options: htmlElements
+      },
+      defaultValue: 'div'
+    }
+  }
+};
+export var Default = function Default(_ref3) {
+  var args = _extends({}, _ref3);
+
+  return ___EmotionJSX(Box, _extends({
+    bg: "active",
+    width: "100%",
+    p: "xl"
+  }, args), ___EmotionJSX(Box, {
+    width: 30,
+    height: 15,
+    m: "sm",
+    bg: "success.bright"
+  }), ___EmotionJSX(Box, {
+    width: 100,
+    height: 50,
+    m: "sm",
+    bg: "critical.bright"
+  }), ___EmotionJSX(Box, {
+    width: 190,
+    height: 45,
+    m: "sm",
+    bg: "warning.bright"
+  }));
+};
+export var Disabled = function Disabled(_ref4) {
+  var args = _extends({}, _ref4);
+
+  return ___EmotionJSX(Box, _extends({
+    bg: "white",
+    isDisabled: true,
+    sx: {
+      border: '1px solid',
+      borderColor: 'neutral.80'
+    },
+    width: "100%",
+    p: "xl"
+  }, args), ___EmotionJSX(TextField, {
+    id: "custom-id",
+    name: "custom-name",
+    label: "Example Label"
+  }), ___EmotionJSX("br", null), ___EmotionJSX(SelectField, {
+    label: "What's your favorite color?",
+    labelMode: "float"
+  }, ___EmotionJSX(Item, {
+    key: "red"
+  }, "Red"), ___EmotionJSX(Item, {
+    key: "blue"
+  }, "Blue"), ___EmotionJSX(Item, {
+    key: "yellow"
+  }, "Yellow")));
+};
+Disabled.args = {
+  isDisabled: {
+    defaultValue: true
+  },
+  bg: {
+    control: {
+      type: 'select',
+      options: _mapInstanceProperty(flatColorList).call(flatColorList, function (_ref5) {
+        var _ref6 = _slicedToArray(_ref5, 1),
+            colorName = _ref6[0];
+
+        return colorName;
+      })
+    },
+    defaultValue: 'white'
+  }
+};
+export var BoxesWithGaps = function BoxesWithGaps() {
+  return ___EmotionJSX(Box, {
+    gap: "xs"
+  }, ___EmotionJSX(Box, {
+    bg: "accent.5",
+    isRow: true,
+    gap: "xl",
+    justifyContent: "center"
+  }, ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeLight.1"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeLight.2"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeLight.3"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeLight.4"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeLight.5"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeLight.6"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeLight.7"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeLight.8"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeLight.9"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeLight.10"
+  })), ___EmotionJSX(Box, {
+    bg: "accent.50",
+    isRow: true,
+    gap: "lg",
+    justifyContent: "center"
+  }, ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorative.1"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorative.2"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorative.3"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorative.4"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorative.5"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorative.6"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorative.7"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorative.8"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorative.9"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorative.10"
+  })), ___EmotionJSX(Box, {
+    bg: "accent.90",
+    isRow: true,
+    gap: "md",
+    justifyContent: "center"
+  }, ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeDark.1"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeDark.2"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeDark.3"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeDark.4"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeDark.5"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeDark.6"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeDark.7"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeDark.8"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeDark.9"
+  }), ___EmotionJSX(Box, {
+    width: 10,
+    height: 50,
+    bg: "decorativeDark.10"
+  })));
+};

package/lib/components/Box/Box.test.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import Box from '.';
+import axeTest from '../../utils/testUtils/testAxe'; // Emotion Cache added as test fails otherwise, root cause of this failure is unknown.
+// Failure occured with ThemeUI refactor.
+// https://github.com/emotion-js/emotion/issues/1105#issuecomment-557726922
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var emotionCache = createCache({
+  key: 'box-test'
+});
+emotionCache.compat = true;
+var testId = 'test-box';
+var defaultProps = {
+  'data-testid': testId
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(CacheProvider, {
+    value: emotionCache
+  }, ___EmotionJSX(Box, _extends({}, defaultProps, props))));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('default box', function () {
+  getComponent();
+  var box = screen.getByTestId(testId);
+  expect(box).toBeInstanceOf(HTMLDivElement);
+  expect(box).toBeInTheDocument();
+});
+test('box as a row', function () {
+  getComponent({
+    isRow: true
+  });
+  var box = screen.getByTestId(testId);
+  expect(box).toHaveStyleRule('flex-direction', 'row');
+});
+test('box with default gap', function () {
+  getComponent({
+    gap: '30px'
+  });
+  var box = screen.getByTestId(testId);
+  expect(box).toHaveStyle('margin-top: 0px', {
+    target: '> * + *'
+  });
+});
+test('box as row with gap', function () {
+  getComponent({
+    isRow: true,
+    gap: '30px'
+  });
+  var box = screen.getByTestId(testId);
+  expect(box).toHaveStyle('margin-left: 0px', {
+    target: '> * + *'
+  });
+});

package/lib/components/Box/index.js

@@ -0,0 +1 @@
+export { default } from './Box';

package/lib/components/Breadcrumbs/BreadcrumbItem.js

@@ -0,0 +1,105 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, 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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import { useBreadcrumbItem } from '@react-aria/breadcrumbs';
+import PropTypes from 'prop-types';
+import { mergeProps } from '@react-aria/utils';
+import { omit } from 'lodash/object';
+import { usePropWarning } from '../../hooks/';
+import { Button, IconButton, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var BreadcrumbItem = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _context;
+
+  var children = props.children,
+      elementType = props.elementType,
+      onAction = props.onAction,
+      actionKey = props.actionKey,
+      isCurrent = props.isCurrent,
+      others = _objectWithoutProperties(props, ["children", "elementType", "onAction", "actionKey", "isCurrent"]);
+
+  var itemRef = useRef();
+  usePropWarning(props, 'disabled', 'isDisabled');
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return itemRef.current;
+  });
+
+  var _useBreadcrumbItem = useBreadcrumbItem(_objectSpread({}, props), itemRef),
+      itemProps = _useBreadcrumbItem.itemProps;
+
+  var ElementType = useMemo(function () {
+    switch (elementType) {
+      case 'Button':
+        return Button;
+
+      case 'IconButton':
+        return IconButton;
+
+      case 'Text':
+        return Text;
+
+      default:
+        return elementType;
+    }
+  }, [elementType]);
+  var onPressHandler = useCallback(function () {
+    if (onAction) {
+      onAction(actionKey);
+    }
+  }, [onAction, actionKey]);
+  var elementProps = useMemo(function () {
+    var _ElementType$propType;
+
+    var elementTypeProps = _objectSpread({}, mergeProps(itemProps, others));
+
+    if ((_ElementType$propType = ElementType.propTypes) === null || _ElementType$propType === void 0 ? void 0 : _ElementType$propType.onPress) {
+      elementTypeProps.onPress = onPressHandler;
+    }
+
+    if (isCurrent) {
+      elementTypeProps.className = elementTypeProps.className ? "".concat(elementTypeProps.className, " isCurrent") : 'isCurrent';
+    }
+
+    return omit(elementTypeProps, 'onClick', 'onKeyDown', 'onKeyUp');
+  }, [elementType, itemProps, others, onPressHandler]);
+  return /*#__PURE__*/React.cloneElement(___EmotionJSX(ElementType, null), _objectSpread(_objectSpread({}, elementProps), {}, {
+    ref: ref
+  }), _concatInstanceProperty(_context = []).call(_context, children));
+});
+BreadcrumbItem.propTypes = {
+  actionKey: PropTypes.string,
+
+  /** Whether the breadcrumb item represents the current page. */
+  isCurrent: PropTypes.bool,
+
+  /** The HTML element used to render the breadcrumb link, e.g. 'a', or 'span'.
+   * Also can be passed 'Button', 'Icon', 'IconButton', 'Text' - will be used
+   * appropriate component from Astro library.
+   * */
+  elementType: PropTypes.elementType,
+
+  /** Whether the breadcrumb item is disabled. */
+  isDisabled: PropTypes.bool,
+  onAction: PropTypes.func
+};
+BreadcrumbItem.defaultProps = {
+  elementType: 'Button'
+};
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+export default BreadcrumbItem;