@pingux/astro 2.84.0-alpha.9 → 2.85.0-alpha.14

package/lib/cjs/components/Avatar/Avatar.js

@@ -1,28 +1,63 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _themeUi = require("theme-ui");
+var _hooks = require("../../hooks");
 var _react2 = require("@emotion/react");
+var _excluded = ["alt", "defaultText", "color", "className", "size", "src", "sx"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return (0, _react2.jsx)(_themeUi.Avatar, (0, _extends2["default"])({
-    ref: ref
-  }, props));
+  var _props$alt = props.alt,
+    alt = _props$alt === void 0 ? 'Avatar' : _props$alt,
+    defaultText = props.defaultText,
+    color = props.color,
+    className = props.className,
+    size = props.size,
+    src = props.src,
+    sx = props.sx,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])({}, "is-".concat(color), true)),
+    classNames = _useStatusClasses.classNames;
+  if (src) {
+    return (0, _react2.jsx)(_themeUi.Avatar, (0, _extends2["default"])({
+      ref: ref,
+      alt: alt,
+      src: src,
+      sx: _objectSpread({
+        size: size
+      }, sx)
+    }, others));
+  }
+  return (0, _react2.jsx)(_themeUi.Box, (0, _extends2["default"])({
+    variant: "avatar",
+    className: classNames,
+    sx: _objectSpread({
+      size: size,
+      fontSize: size
+    }, sx)
+  }, others), defaultText);
 });
-Avatar.defaultProps = {
-  alt: 'Avatar'
-};
 Avatar.displayName = 'Avatar';
 var _default = Avatar;
 exports["default"] = _default;

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

@@ -8,8 +8,9 @@ var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
+var src = _faker.faker.image.lorempicsum.imageUrl(150, 150, false, undefined, '1');
 var defaultProps = {
-  src: _faker.faker.image.lorempicsum.imageUrl(150, 150, false, undefined, '1')
+  src: src
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -34,4 +35,12 @@ test('an avatar is rendered with custom alt', function () {
   });
   var img = _testWrapper.screen.getByRole('img');
   expect(img).toHaveAttribute('alt', 'Custom Alt');
+});
+test('an avatar is rendered with custom alt', function () {
+  getComponent({
+    src: undefined,
+    defaultText: 'KL'
+  });
+  var avatar = _testWrapper.screen.getByText('KL');
+  expect(avatar).toBeInTheDocument();
 });

package/lib/cjs/styles/themes/next-gen/codeView/codeView.d.ts

@@ -68,7 +68,7 @@ declare const _default: {
                 };
             };
             fontFamily: string;
-            lineHeight: number;
+            lineHeight: string;
         };
         '&.has-no-copy-button': {
             pre: {

package/lib/cjs/styles/themes/next-gen/codeView/codeView.js

@@ -92,8 +92,8 @@ var nextGenCodeViewWrapper = {
         wordBreak: 'break-all'
       }
     },
-    fontFamily: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace',
-    lineHeight: 1.75
+    fontFamily: 'codeView',
+    lineHeight: 'md'
   },
   '&.has-no-copy-button': {
     pre: {

package/lib/cjs/styles/themes/next-gen/convertedComponentList.js

@@ -5,6 +5,6 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'MultivaluesField', 'Text', 'Link', 'Card'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card'];
 var _default = nextGenConvertedComponents;
 exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -973,6 +973,12 @@ declare const _default: {
         };
     };
     fontSizes: {
+        avatar: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
         xs: string;
         sm: string;
         md: string;
@@ -1062,6 +1068,12 @@ declare const _default: {
         codeView: string;
     };
     sizes: {
+        avatar: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
         container: {
             xs: string[];
             sm: string[];
@@ -1578,38 +1590,47 @@ declare const _default: {
             };
         };
         avatar: {
-            xl: {
-                borderRadius: string;
-                textAlign: string;
-                justifyContent: string;
-                fontFamily: string;
-                size: string;
-                fontSize: string;
+            backgroundColor: string;
+            color: string;
+            cursor: string;
+            '&.is-orange': {
+                backgroundColor: string;
+                color: string;
             };
-            lg: {
-                fontSize: string;
-                borderRadius: string;
-                textAlign: string;
-                justifyContent: string;
-                fontFamily: string;
-                size: string;
+            '&.is-green': {
+                backgroundColor: string;
+                color: string;
             };
-            md: {
-                fontSize: string;
-                borderRadius: string;
-                textAlign: string;
-                justifyContent: string;
-                fontFamily: string;
-                size: string;
+            '&.is-purple': {
+                backgroundColor: string;
+                color: string;
             };
-            sm: {
-                fontSize: string;
-                borderRadius: string;
-                textAlign: string;
-                justifyContent: string;
-                fontFamily: string;
-                size: string;
+            '&.is-pink': {
+                backgroundColor: string;
+                color: string;
+            };
+            '&.is-red': {
+                backgroundColor: string;
+                color: string;
             };
+            '&.is-yellow': {
+                backgroundColor: string;
+                color: string;
+            };
+            '&.is-cyan': {
+                backgroundColor: string;
+                color: string;
+            };
+            '&.is-teal': {
+                backgroundColor: string;
+                color: string;
+            };
+            display: string;
+            borderRadius: string;
+            textAlign: string;
+            alignItems: string;
+            justifyContent: string;
+            fontFamily: string;
         };
         listViewItem: {
             rightOfData: {
@@ -1678,8 +1699,17 @@ declare const _default: {
                 borderRadius: string;
                 border: string;
                 borderColor: string;
-                '& > div': {
-                    borderRadius: string;
+                '& > div > div': {
+                    '& > div:first-of-type': {
+                        '& > div > div': {
+                            borderRadius: string;
+                        };
+                    };
+                    '& > div:last-of-type': {
+                        '& > div > div': {
+                            borderRadius: string;
+                        };
+                    };
                 };
             };
         };
@@ -1734,6 +1764,9 @@ declare const _default: {
             borderColor: string;
         };
     };
+    images: {
+        avatar: {};
+    };
     overrides: {
         codeView: {
             theme: {
@@ -1805,7 +1838,7 @@ declare const _default: {
                         };
                     };
                     fontFamily: string;
-                    lineHeight: number;
+                    lineHeight: string;
                 };
                 '&.has-no-copy-button': {
                     pre: {

package/lib/cjs/styles/themes/next-gen/next-gen.js

@@ -22,10 +22,12 @@ var _codeView = _interopRequireDefault(require("./codeView/codeView"));
 var _colors = _interopRequireDefault(require("./colors/colors"));
 var _button = _interopRequireDefault(require("./variants/button"));
 var _cards = _interopRequireDefault(require("./variants/cards"));
+var _images = _interopRequireDefault(require("./variants/images"));
 var _links = _interopRequireDefault(require("./variants/links"));
 var _text = require("./variants/text");
 var _variants = _interopRequireWildcard(require("./variants/variants"));
 var _forms = _interopRequireDefault(require("./forms"));
+var _sizes = _interopRequireDefault(require("./sizes"));
 var _spacing = _interopRequireDefault(require("./spacing"));
 var _text2 = require("./text");
 require("./open_sans.css");
@@ -53,22 +55,13 @@ var nextGenTheme = {
     heading: '"Open Sans", sans-serif',
     codeView: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace'
   },
-  sizes: {
-    container: {
-      xs: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
-      sm: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
-      md: ['100%', '100%', '720px', '960px', '1140px', '1540px'],
-      lg: ['100%', '100%', '100%', '960px', '1140px', '1540px'],
-      xl: ['100%', '100%', '100%', '100%', '1140px', '1540px'],
-      xx: ['100%', '100%', '100%', '100%', '100%', '1540px'],
-      fluid: ['100%', '100%', '100%', '100%', '100%', '100%']
-    }
-  },
+  sizes: _sizes["default"],
   badges: _variants.badges,
   space: _spacing["default"],
   links: _links["default"],
   cards: _cards["default"],
   variants: _variants["default"],
+  images: _images["default"],
   overrides: {
     codeView: _codeView["default"]
   }

package/lib/cjs/styles/themes/next-gen/sizes.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    avatar: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    container: {
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        xx: string[];
+        fluid: string[];
+    };
+};
+export default _default;

package/lib/cjs/styles/themes/next-gen/sizes.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var avatar = {
+  sm: '24px',
+  md: '34px',
+  lg: '72px',
+  xl: '104px'
+};
+var container = {
+  xs: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
+  sm: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
+  md: ['100%', '100%', '720px', '960px', '1140px', '1540px'],
+  lg: ['100%', '100%', '100%', '960px', '1140px', '1540px'],
+  xl: ['100%', '100%', '100%', '100%', '1140px', '1540px'],
+  xx: ['100%', '100%', '100%', '100%', '100%', '1540px'],
+  fluid: ['100%', '100%', '100%', '100%', '100%', '100%']
+};
+var _default = {
+  avatar: avatar,
+  container: container
+};
+exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/text.d.ts

@@ -1,4 +1,10 @@
 export declare const fontSizes: {
+    avatar: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
     xs: string;
     sm: string;
     md: string;

package/lib/cjs/styles/themes/next-gen/text.js

@@ -7,15 +7,23 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.fontWeights = exports.fontSizes = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _sizes = _interopRequireDefault(require("./sizes"));
 var _fontWeights;
+var fontSizeBase = 0.9375;
 var fontSizes = {
-  'xs': '0.75rem',
+  avatar: {
+    'sm': "calc(".concat(_sizes["default"].avatar.sm, " * .4)"),
+    'md': "calc(".concat(_sizes["default"].avatar.md, " * .4)"),
+    'lg': "calc(".concat(_sizes["default"].avatar.lg, " * .4)"),
+    'xl': "calc(".concat(_sizes["default"].avatar.xl, " * .4)")
+  },
+  'xs': "".concat(fontSizeBase * 0.8, "rem"),
   'sm': '0.875rem',
-  'md': '.9375rem',
-  'lg': '1.171875rem',
-  'xl': '1.40625rem',
-  'xx': '1.640625rem',
-  'xxx': '2.109375rem'
+  'md': "".concat(fontSizeBase * 1, "rem"),
+  'lg': "".concat(fontSizeBase * 1.25, "rem"),
+  'xl': "".concat(fontSizeBase * 1.5, "rem"),
+  'xx': "".concat(fontSizeBase * 1.75, "rem"),
+  'xxx': "".concat(fontSizeBase * 2.25, "rem")
 };
 exports.fontSizes = fontSizes;
 var fontWeights = (_fontWeights = {}, (0, _defineProperty2["default"])(_fontWeights, -1, 300), (0, _defineProperty2["default"])(_fontWeights, 0, 400), (0, _defineProperty2["default"])(_fontWeights, 1, 400), (0, _defineProperty2["default"])(_fontWeights, 2, 600), (0, _defineProperty2["default"])(_fontWeights, 3, 600), _fontWeights);

package/lib/cjs/styles/themes/next-gen/variants/cards.js

@@ -7,7 +7,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var interactive = {
   boxShadow: 'none',
-  borderRadius: '24px',
+  borderRadius: '1rem',
   border: '1px solid',
   borderColor: 'gray-300',
   transition: 'border-color .15s ease-in',

package/lib/cjs/styles/themes/next-gen/variants/images.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    avatar: {};
+};
+export default _default;

package/lib/cjs/styles/themes/next-gen/variants/images.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var avatar = {};
+var _default = {
+  avatar: avatar
+};
+exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/variants/links.js

@@ -23,14 +23,14 @@ var nextGen = {
   px: 'md',
   textDecoration: 'none',
   borderRadius: '4px',
-  lineHeight: '22.5px',
+  lineHeight: '1.5',
   minHeight: '22.5px',
   fontFamily: 'standard',
   '&.is-hovered': {
-    color: '#155cba'
+    color: 'blue-600'
   },
   '&.is-pressed': {
-    color: '#155cba'
+    color: 'blue-600'
   }
 };
 var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
@@ -49,7 +49,7 @@ var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
     transition: 'background-color .15s ease'
   },
   '&.is-selected': {
-    color: '#155cba',
+    color: 'blue-600',
     '&:before': {
       backgroundColor: 'active_light'
     }

package/lib/cjs/styles/themes/next-gen/variants/text.js

@@ -78,7 +78,7 @@ var text = _objectSpread({
     fontSize: 'sm',
     color: 'gray-500',
     fontFamily: 'standard',
-    lineHeight: '1.75rem'
+    lineHeight: 'md'
   }
 }, hTags);
 exports.text = text;

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -454,38 +454,47 @@ declare const _default: {
         };
     };
     avatar: {
-        xl: {
-            borderRadius: string;
-            textAlign: string;
-            justifyContent: string;
-            fontFamily: string;
-            size: string;
-            fontSize: string;
+        backgroundColor: string;
+        color: string;
+        cursor: string;
+        '&.is-orange': {
+            backgroundColor: string;
+            color: string;
         };
-        lg: {
-            fontSize: string;
-            borderRadius: string;
-            textAlign: string;
-            justifyContent: string;
-            fontFamily: string;
-            size: string;
+        '&.is-green': {
+            backgroundColor: string;
+            color: string;
         };
-        md: {
-            fontSize: string;
-            borderRadius: string;
-            textAlign: string;
-            justifyContent: string;
-            fontFamily: string;
-            size: string;
+        '&.is-purple': {
+            backgroundColor: string;
+            color: string;
         };
-        sm: {
-            fontSize: string;
-            borderRadius: string;
-            textAlign: string;
-            justifyContent: string;
-            fontFamily: string;
-            size: string;
+        '&.is-pink': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.is-red': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.is-yellow': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.is-cyan': {
+            backgroundColor: string;
+            color: string;
         };
+        '&.is-teal': {
+            backgroundColor: string;
+            color: string;
+        };
+        display: string;
+        borderRadius: string;
+        textAlign: string;
+        alignItems: string;
+        justifyContent: string;
+        fontFamily: string;
     };
     listViewItem: {
         rightOfData: {
@@ -554,8 +563,17 @@ declare const _default: {
             borderRadius: string;
             border: string;
             borderColor: string;
-            '& > div': {
-                borderRadius: string;
+            '& > div > div': {
+                '& > div:first-of-type': {
+                    '& > div > div': {
+                        borderRadius: string;
+                    };
+                };
+                '& > div:last-of-type': {
+                    '& > div > div': {
+                        borderRadius: string;
+                    };
+                };
             };
         };
     };

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -248,33 +248,49 @@ var separator = {
     bg: 'gray-300'
   }
 };
-var avatarBase = {
+var avatar = {
+  backgroundColor: 'lightcyan',
+  color: 'darkcyan',
+  cursor: 'pointer',
+  '&.is-orange': {
+    backgroundColor: 'lightorange',
+    color: 'darkorange'
+  },
+  '&.is-green': {
+    backgroundColor: 'lightgreen',
+    color: 'darkgreen'
+  },
+  '&.is-purple': {
+    backgroundColor: 'lightpurple',
+    color: 'darkpurple'
+  },
+  '&.is-pink': {
+    backgroundColor: 'lightpink',
+    color: 'darkpink'
+  },
+  '&.is-red': {
+    backgroundColor: 'lightred',
+    color: 'darkred'
+  },
+  '&.is-yellow': {
+    backgroundColor: 'lightyellow',
+    color: 'darkyellow'
+  },
+  '&.is-cyan': {
+    backgroundColor: 'lightcyan',
+    color: 'darkcyan'
+  },
+  '&.is-teal': {
+    backgroundColor: 'lightteal',
+    color: 'darkteal'
+  },
+  display: 'flex',
   borderRadius: '50%',
   textAlign: 'center',
+  alignItems: 'center',
   justifyContent: 'center',
   fontFamily: 'standard'
 };
-var avatar = {
-  xl: _objectSpread({
-    size: '104px',
-    fontSize: 'calc(104px * .4)'
-  }, avatarBase),
-  lg: _objectSpread(_objectSpread({
-    size: '72px'
-  }, avatarBase), {}, {
-    fontSize: 'calc(72px * .4)'
-  }),
-  md: _objectSpread(_objectSpread({
-    size: '34px'
-  }, avatarBase), {}, {
-    fontSize: 'calc(34px * .4)'
-  }),
-  sm: _objectSpread(_objectSpread({
-    size: '24px'
-  }, avatarBase), {}, {
-    fontSize: 'calc(24px * .4)'
-  })
-};
 var progressBarContainer = {
   backgroundColor: 'gray-200',
   borderRadius: '.5rem',
@@ -314,8 +330,8 @@ var listViewItem = {
     }
   },
   styledContainer: {
-    py: '1rem',
-    px: '1.5rem',
+    py: 'md',
+    px: 'lg',
     bg: 'transparent',
     '&.is-hovered': {
       bg: 'transparent',
@@ -437,8 +453,17 @@ var listView = {
     borderRadius: '16px',
     border: '1px solid',
     borderColor: '#e7eef4',
-    '& > div': {
-      borderRadius: '16px'
+    '& > div > div': {
+      '& > div:first-of-type': {
+        '& > div > div': {
+          borderRadius: '16px 16px 0 0'
+        }
+      },
+      '& > div:last-of-type': {
+        '& > div > div': {
+          borderRadius: ' 0 0 16px 16px'
+        }
+      }
     }
   }
 };

package/lib/cjs/types/avatar.d.ts

@@ -1,9 +1,13 @@
 import { AvatarProps as ThemeUIAvatarProps, ThemeUICSSObject } from 'theme-ui';
 export interface AvatarProps extends ThemeUIAvatarProps {
     /**  Source of avatar. */
-    src: string;
+    src?: string;
     /** Alternative text for avatar. */
     alt?: string;
     /** Inline styling prop */
     sx?: ThemeUICSSObject;
+    /** If no image src is supplied, this text will render inside of a styled div */
+    defaultText?: string;
+    size?: string;
+    color?: string;
 }

package/lib/components/Avatar/Avatar.js

@@ -1,14 +1,51 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["alt", "defaultText", "color", "className", "size", "src", "sx"];
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef } from 'react';
-import { Avatar as ThemeUIAvatar } from 'theme-ui';
+import { Avatar as ThemeUIAvatar, Box } from 'theme-ui';
+import { useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
-  return ___EmotionJSX(ThemeUIAvatar, _extends({
-    ref: ref
-  }, props));
+  var _props$alt = props.alt,
+    alt = _props$alt === void 0 ? 'Avatar' : _props$alt,
+    defaultText = props.defaultText,
+    color = props.color,
+    className = props.className,
+    size = props.size,
+    src = props.src,
+    sx = props.sx,
+    others = _objectWithoutProperties(props, _excluded);
+  var _useStatusClasses = useStatusClasses(className, _defineProperty({}, "is-".concat(color), true)),
+    classNames = _useStatusClasses.classNames;
+  if (src) {
+    return ___EmotionJSX(ThemeUIAvatar, _extends({
+      ref: ref,
+      alt: alt,
+      src: src,
+      sx: _objectSpread({
+        size: size
+      }, sx)
+    }, others));
+  }
+  return ___EmotionJSX(Box, _extends({
+    variant: "avatar",
+    className: classNames,
+    sx: _objectSpread({
+      size: size,
+      fontSize: size
+    }, sx)
+  }, others), defaultText);
 });
-Avatar.defaultProps = {
-  alt: 'Avatar'
-};
 Avatar.displayName = 'Avatar';
 export default Avatar;

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

@@ -5,8 +5,9 @@ import { render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Avatar from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var src = faker.image.lorempicsum.imageUrl(150, 150, false, undefined, '1');
 var defaultProps = {
-  src: faker.image.lorempicsum.imageUrl(150, 150, false, undefined, '1')
+  src: src
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -31,4 +32,12 @@ test('an avatar is rendered with custom alt', function () {
   });
   var img = screen.getByRole('img');
   expect(img).toHaveAttribute('alt', 'Custom Alt');
+});
+test('an avatar is rendered with custom alt', function () {
+  getComponent({
+    src: undefined,
+    defaultText: 'KL'
+  });
+  var avatar = screen.getByText('KL');
+  expect(avatar).toBeInTheDocument();
 });

package/lib/styles/themes/next-gen/codeView/codeView.js

@@ -85,8 +85,8 @@ var nextGenCodeViewWrapper = {
         wordBreak: 'break-all'
       }
     },
-    fontFamily: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace',
-    lineHeight: 1.75
+    fontFamily: 'codeView',
+    lineHeight: 'md'
   },
   '&.has-no-copy-button': {
     pre: {

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,2 +1,2 @@
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'MultivaluesField', 'Text', 'Link', 'Card'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card'];
 export default nextGenConvertedComponents;

package/lib/styles/themes/next-gen/next-gen.js

@@ -15,10 +15,12 @@ import codeView from './codeView/codeView';
 import colors from './colors/colors';
 import buttons from './variants/button';
 import cards from './variants/cards';
+import images from './variants/images';
 import links from './variants/links';
 import { text as newText } from './variants/text';
 import variants, { badges } from './variants/variants';
 import forms from './forms';
+import sizes from './sizes';
 import spacing from './spacing';
 import { fontSizes, fontWeights } from './text';
 import './open_sans.css';
@@ -42,22 +44,13 @@ var nextGenTheme = {
     heading: '"Open Sans", sans-serif',
     codeView: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace'
   },
-  sizes: {
-    container: {
-      xs: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
-      sm: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
-      md: ['100%', '100%', '720px', '960px', '1140px', '1540px'],
-      lg: ['100%', '100%', '100%', '960px', '1140px', '1540px'],
-      xl: ['100%', '100%', '100%', '100%', '1140px', '1540px'],
-      xx: ['100%', '100%', '100%', '100%', '100%', '1540px'],
-      fluid: ['100%', '100%', '100%', '100%', '100%', '100%']
-    }
-  },
+  sizes: sizes,
   badges: badges,
   space: spacing,
   links: links,
   cards: cards,
   variants: variants,
+  images: images,
   overrides: {
     codeView: codeView
   }

package/lib/styles/themes/next-gen/sizes.js

@@ -0,0 +1,19 @@
+var avatar = {
+  sm: '24px',
+  md: '34px',
+  lg: '72px',
+  xl: '104px'
+};
+var container = {
+  xs: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
+  sm: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
+  md: ['100%', '100%', '720px', '960px', '1140px', '1540px'],
+  lg: ['100%', '100%', '100%', '960px', '1140px', '1540px'],
+  xl: ['100%', '100%', '100%', '100%', '1140px', '1540px'],
+  xx: ['100%', '100%', '100%', '100%', '100%', '1540px'],
+  fluid: ['100%', '100%', '100%', '100%', '100%', '100%']
+};
+export default {
+  avatar: avatar,
+  container: container
+};

package/lib/styles/themes/next-gen/text.js

@@ -1,12 +1,20 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _fontWeights;
+import sizes from './sizes';
+var fontSizeBase = 0.9375;
 export var fontSizes = {
-  'xs': '0.75rem',
+  avatar: {
+    'sm': "calc(".concat(sizes.avatar.sm, " * .4)"),
+    'md': "calc(".concat(sizes.avatar.md, " * .4)"),
+    'lg': "calc(".concat(sizes.avatar.lg, " * .4)"),
+    'xl': "calc(".concat(sizes.avatar.xl, " * .4)")
+  },
+  'xs': "".concat(fontSizeBase * 0.8, "rem"),
   'sm': '0.875rem',
-  'md': '.9375rem',
-  'lg': '1.171875rem',
-  'xl': '1.40625rem',
-  'xx': '1.640625rem',
-  'xxx': '2.109375rem'
+  'md': "".concat(fontSizeBase * 1, "rem"),
+  'lg': "".concat(fontSizeBase * 1.25, "rem"),
+  'xl': "".concat(fontSizeBase * 1.5, "rem"),
+  'xx': "".concat(fontSizeBase * 1.75, "rem"),
+  'xxx': "".concat(fontSizeBase * 2.25, "rem")
 };
 export var fontWeights = (_fontWeights = {}, _defineProperty(_fontWeights, -1, 300), _defineProperty(_fontWeights, 0, 400), _defineProperty(_fontWeights, 1, 400), _defineProperty(_fontWeights, 2, 600), _defineProperty(_fontWeights, 3, 600), _fontWeights);

package/lib/styles/themes/next-gen/variants/cards.js

@@ -1,6 +1,6 @@
 var interactive = {
   boxShadow: 'none',
-  borderRadius: '24px',
+  borderRadius: '1rem',
   border: '1px solid',
   borderColor: 'gray-300',
   transition: 'border-color .15s ease-in',

package/lib/styles/themes/next-gen/variants/images.js

@@ -0,0 +1,4 @@
+var avatar = {};
+export default {
+  avatar: avatar
+};

package/lib/styles/themes/next-gen/variants/links.js

@@ -16,14 +16,14 @@ var nextGen = {
   px: 'md',
   textDecoration: 'none',
   borderRadius: '4px',
-  lineHeight: '22.5px',
+  lineHeight: '1.5',
   minHeight: '22.5px',
   fontFamily: 'standard',
   '&.is-hovered': {
-    color: '#155cba'
+    color: 'blue-600'
   },
   '&.is-pressed': {
-    color: '#155cba'
+    color: 'blue-600'
   }
 };
 var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
@@ -42,7 +42,7 @@ var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
     transition: 'background-color .15s ease'
   },
   '&.is-selected': {
-    color: '#155cba',
+    color: 'blue-600',
     '&:before': {
       backgroundColor: 'active_light'
     }

package/lib/styles/themes/next-gen/variants/text.js

@@ -71,6 +71,6 @@ export var text = _objectSpread({
     fontSize: 'sm',
     color: 'gray-500',
     fontFamily: 'standard',
-    lineHeight: '1.75rem'
+    lineHeight: 'md'
   }
 }, hTags);

package/lib/styles/themes/next-gen/variants/variants.js

@@ -239,33 +239,49 @@ var separator = {
     bg: 'gray-300'
   }
 };
-var avatarBase = {
+var avatar = {
+  backgroundColor: 'lightcyan',
+  color: 'darkcyan',
+  cursor: 'pointer',
+  '&.is-orange': {
+    backgroundColor: 'lightorange',
+    color: 'darkorange'
+  },
+  '&.is-green': {
+    backgroundColor: 'lightgreen',
+    color: 'darkgreen'
+  },
+  '&.is-purple': {
+    backgroundColor: 'lightpurple',
+    color: 'darkpurple'
+  },
+  '&.is-pink': {
+    backgroundColor: 'lightpink',
+    color: 'darkpink'
+  },
+  '&.is-red': {
+    backgroundColor: 'lightred',
+    color: 'darkred'
+  },
+  '&.is-yellow': {
+    backgroundColor: 'lightyellow',
+    color: 'darkyellow'
+  },
+  '&.is-cyan': {
+    backgroundColor: 'lightcyan',
+    color: 'darkcyan'
+  },
+  '&.is-teal': {
+    backgroundColor: 'lightteal',
+    color: 'darkteal'
+  },
+  display: 'flex',
   borderRadius: '50%',
   textAlign: 'center',
+  alignItems: 'center',
   justifyContent: 'center',
   fontFamily: 'standard'
 };
-var avatar = {
-  xl: _objectSpread({
-    size: '104px',
-    fontSize: 'calc(104px * .4)'
-  }, avatarBase),
-  lg: _objectSpread(_objectSpread({
-    size: '72px'
-  }, avatarBase), {}, {
-    fontSize: 'calc(72px * .4)'
-  }),
-  md: _objectSpread(_objectSpread({
-    size: '34px'
-  }, avatarBase), {}, {
-    fontSize: 'calc(34px * .4)'
-  }),
-  sm: _objectSpread(_objectSpread({
-    size: '24px'
-  }, avatarBase), {}, {
-    fontSize: 'calc(24px * .4)'
-  })
-};
 var progressBarContainer = {
   backgroundColor: 'gray-200',
   borderRadius: '.5rem',
@@ -305,8 +321,8 @@ var listViewItem = {
     }
   },
   styledContainer: {
-    py: '1rem',
-    px: '1.5rem',
+    py: 'md',
+    px: 'lg',
     bg: 'transparent',
     '&.is-hovered': {
       bg: 'transparent',
@@ -428,8 +444,17 @@ var listView = {
     borderRadius: '16px',
     border: '1px solid',
     borderColor: '#e7eef4',
-    '& > div': {
-      borderRadius: '16px'
+    '& > div > div': {
+      '& > div:first-of-type': {
+        '& > div > div': {
+          borderRadius: '16px 16px 0 0'
+        }
+      },
+      '& > div:last-of-type': {
+        '& > div > div': {
+          borderRadius: ' 0 0 16px 16px'
+        }
+      }
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.84.0-alpha.9",
+  "version": "2.85.0-alpha.14",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",

package/lib/cjs/recipes/NextGen/DefaultAvatar.stories.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: () => React.JSX.Element;

package/lib/cjs/recipes/NextGen/DefaultAvatar.stories.js

@@ -1,41 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ = require("../..");
-var _react2 = require("@emotion/react");
-var _default = {
-  title: 'Next Gen Recipes/Default Avatar'
-};
-exports["default"] = _default;
-var Default = function Default() {
-  return (0, _react2.jsx)(_.AstroProvider, {
-    themeOverrides: [_.NextGenTheme]
-  }, (0, _react2.jsx)(_.Box, {
-    isRow: true,
-    gap: "md",
-    alignItems: "center"
-  }, (0, _react2.jsx)(_.Box, {
-    variant: "avatar.sm",
-    backgroundColor: "green-100",
-    color: "green-800"
-  }, "AT"), (0, _react2.jsx)(_.Box, {
-    variant: "avatar.md",
-    backgroundColor: "blue-100",
-    color: "blue-800"
-  }, "LP"), (0, _react2.jsx)(_.Box, {
-    variant: "avatar.lg",
-    backgroundColor: "teal-100",
-    color: "teal-800"
-  }, "WP"), (0, _react2.jsx)(_.Box, {
-    variant: "avatar.xl",
-    backgroundColor: "red-100",
-    color: "red-800"
-  }, "JS")));
-};
-exports.Default = Default;

package/lib/recipes/NextGen/DefaultAvatar.stories.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import { AstroProvider, Box, NextGenTheme } from '../..';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Next Gen Recipes/Default Avatar'
-};
-export var Default = function Default() {
-  return ___EmotionJSX(AstroProvider, {
-    themeOverrides: [NextGenTheme]
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    gap: "md",
-    alignItems: "center"
-  }, ___EmotionJSX(Box, {
-    variant: "avatar.sm",
-    backgroundColor: "green-100",
-    color: "green-800"
-  }, "AT"), ___EmotionJSX(Box, {
-    variant: "avatar.md",
-    backgroundColor: "blue-100",
-    color: "blue-800"
-  }, "LP"), ___EmotionJSX(Box, {
-    variant: "avatar.lg",
-    backgroundColor: "teal-100",
-    color: "teal-800"
-  }, "WP"), ___EmotionJSX(Box, {
-    variant: "avatar.xl",
-    backgroundColor: "red-100",
-    color: "red-800"
-  }, "JS")));
-};