@pingux/astro 2.84.0 → 2.85.0-alpha.15

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/components/CheckboxField/CheckboxField.stories.js

@@ -101,8 +101,8 @@ var Controlled = function Controlled() {
     setSelected = _React$useState2[1];
   return (0, _react2.jsx)(_index.CheckboxField, {
     isSelected: isSelected,
-    onChange: function onChange(e) {
-      return setSelected;
+    onChange: function onChange(selected) {
+      return setSelected(selected);
     },
     label: "Click me"
   });
@@ -200,7 +200,9 @@ var ExpandableAndToggleableIndeterminate = function ExpandableAndToggleableIndet
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.SwitchField, {
     isSelected: isReadOnly,
     label: "Is Read Only",
-    onChange: setIsReadOnly,
+    onChange: function onChange() {
+      return setIsReadOnly(!isReadOnly);
+    },
     value: "my-switch"
   }), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Box, {
     isRow: true,

package/lib/cjs/components/SwitchField/SwitchField.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SwitchFieldProps } from '../../types';
+declare const SwitchField: React.ForwardRefExoticComponent<SwitchFieldProps & React.RefAttributes<HTMLInputElement>>;
+export default SwitchField;

package/lib/cjs/components/SwitchField/SwitchField.js

@@ -27,47 +27,25 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
-var _statusProp = require("../../utils/docUtils/statusProp");
-var _switchFieldAttributes = require("./switchFieldAttributes");
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _react2 = require("@emotion/react");
-var _excluded = ["label", "helperText", "isDefaultSelected", "isSelected", "onChange", "value", "name", "id", "isDisabled", "isReadOnly", "isRequired", "hasAutoFocus", "onFocus", "onBlur", "onFocusChange", "onKeyDown", "onKeyUp", "status", "controlProps"];
-/* eslint-disable no-unused-vars */
+var _excluded = ["label", "helperText", "isDefaultSelected", "isDisabled", "status", "controlProps"];
 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$keys2(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 displayName = 'SwitchField';
 var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _inputProps$checked;
   var label = props.label,
     helperText = props.helperText,
     isDefaultSelected = props.isDefaultSelected,
-    isSelected = props.isSelected,
-    onChange = props.onChange,
-    value = props.value,
-    name = props.name,
-    id = props.id,
-    _props$isDisabled = props.isDisabled,
-    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-    _props$isReadOnly = props.isReadOnly,
-    isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
-    _props$isRequired = props.isRequired,
-    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
-    _props$hasAutoFocus = props.hasAutoFocus,
-    hasAutoFocus = _props$hasAutoFocus === void 0 ? false : _props$hasAutoFocus,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    onFocusChange = props.onFocusChange,
-    onKeyDown = props.onKeyDown,
-    onKeyUp = props.onKeyUp,
+    isDisabled = props.isDisabled,
     status = props.status,
     controlProps = props.controlProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var switchRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return switchRef.current;
-  });
+  var switchRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var state = (0, _reactStately.useToggleState)(_objectSpread({
     defaultSelected: isDefaultSelected
   }, props));
@@ -79,11 +57,11 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useSwitch = (0, _reactAria.useSwitch)(_objectSpread(_objectSpread({
       children: label
     }, whitelistedProps), {}, {
-      'aria-label': 'switch-field'
+      'aria-label': others['aria-label'] || 'switch-field'
     }), state, switchRef),
     inputProps = _useSwitch.inputProps;
   var statusClasses = {
-    isSelected: inputProps.checked
+    isSelected: (_inputProps$checked = inputProps.checked) !== null && _inputProps$checked !== void 0 ? _inputProps$checked : false
   };
   var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread(_objectSpread({
       statusClasses: statusClasses
@@ -103,12 +81,14 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, fieldLabelProps), (0, _react2.jsx)(_.Box, fieldControlWrapperProps, (0, _react2.jsx)(_.Switch, (0, _extends2["default"])({
     ref: switchRef,
     inputProps: fieldControlInputProps
-  }, unhandledAriaProps, (0, _omit["default"])(others, 'data-pendo-id')))), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+  }, unhandledAriaProps, (0, _omit["default"])(others, 'data-pendo-id', 'aria-label')))), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status
   }, helperText));
 });
-SwitchField.propTypes = _switchFieldAttributes.switchFieldPropTypes;
-SwitchField.defaultProps = _objectSpread({}, _statusProp.statusDefaultProp);
+SwitchField.defaultProps = {
+  status: _statuses["default"].DEFAULT,
+  isDisabled: false
+};
 SwitchField.displayName = displayName;
 var _default = SwitchField;
 exports["default"] = _default;

package/lib/cjs/components/SwitchField/SwitchField.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryFn } from '@storybook/react';
+import { SwitchFieldProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<SwitchFieldProps>;
+export declare const Controlled: StoryFn<SwitchFieldProps>;
+export declare const DefaultSelected: StoryFn<SwitchFieldProps>;
+export declare const Disabled: StoryFn<SwitchFieldProps>;
+export declare const NoVisibleLabel: StoryFn<SwitchFieldProps>;
+export declare const Required: StoryFn<SwitchFieldProps>;
+export declare const WithTooltip: StoryFn<SwitchFieldProps>;

package/lib/cjs/components/SwitchField/SwitchField.stories.js

@@ -60,7 +60,9 @@ var Controlled = function Controlled() {
   return (0, _react2.jsx)(_index.SwitchField, {
     isSelected: isSelected,
     label: "Controlled",
-    onChange: setIsSelected,
+    onChange: function onChange() {
+      return setIsSelected(!isSelected);
+    },
     value: "my-switch"
   });
 };
@@ -97,7 +99,7 @@ var Required = function Required() {
 };
 exports.Required = Required;
 var WithTooltip = function WithTooltip() {
-  var tooltipTrigger = (0, _react.useRef)();
+  var tooltipTrigger = (0, _react.useRef)(null);
   return (0, _react2.jsx)(_index.TooltipTrigger, {
     crossOffset: 15,
     offset: 20,

package/lib/cjs/components/SwitchField/SwitchField.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/SwitchField/index.d.ts

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

package/lib/cjs/components/SwitchField/switchFieldAttributes.d.ts

@@ -0,0 +1,94 @@
+export declare const switchFieldArgTypes: {
+    className: {
+        type: {
+            summary: string;
+        };
+        description: string;
+    };
+    hasAutoFocus: any;
+    helperText: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    hintText: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    id: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    isDefaultSelected: any;
+    isDisabled: any;
+    isReadOnly: any;
+    isRequired: any;
+    isSelected: {
+        control: {
+            type: string;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    label: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    name: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    onBlur: any;
+    onChange: any;
+    onFocus: any;
+    onFocusChange: any;
+    onKeyDown: any;
+    onKeyUp: any;
+    value: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    status: {
+        control: {
+            type: string;
+            options: any;
+        };
+        description: string;
+    };
+};
+export declare const switchFieldArgs: {
+    label: string;
+    value: string;
+    status: any;
+};

package/lib/cjs/components/SwitchField/switchFieldAttributes.js

@@ -12,16 +12,11 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.switchFieldPropTypes = exports.switchFieldArgs = exports.switchFieldArgTypes = void 0;
+exports.switchFieldArgs = exports.switchFieldArgTypes = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _docArgTypes = require("../../utils/docUtils/docArgTypes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
 var _context;
 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -168,27 +163,4 @@ var switchFieldArgs = {
   value: 'my-switch',
   status: _statuses["default"].DEFAULT
 };
-exports.switchFieldArgs = switchFieldArgs;
-var switchFieldPropTypes = _objectSpread(_objectSpread(_objectSpread({
-  className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
-  hasAutoFocus: _propTypes["default"].bool,
-  helperText: _propTypes["default"].node,
-  hintText: _propTypes["default"].string,
-  id: _propTypes["default"].string,
-  isDefaultSelected: _propTypes["default"].bool,
-  isDisabled: _propTypes["default"].bool,
-  isReadOnly: _propTypes["default"].bool,
-  isRequired: _propTypes["default"].bool,
-  isSelected: _propTypes["default"].bool,
-  label: _propTypes["default"].node,
-  name: _propTypes["default"].string,
-  onBlur: _propTypes["default"].func,
-  onChange: _propTypes["default"].func,
-  onFocus: _propTypes["default"].func,
-  onFocusChange: _propTypes["default"].func,
-  onKeyDown: _propTypes["default"].func,
-  onKeyUp: _propTypes["default"].func,
-  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
-  value: _propTypes["default"].string
-}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes), _statusProp.statusPropTypes);
-exports.switchFieldPropTypes = switchFieldPropTypes;
+exports.switchFieldArgs = switchFieldArgs;

package/lib/cjs/components/TimeField/TimeField.stories.js

@@ -91,13 +91,13 @@ var Required = function Required(args) {
   return (0, _react2.jsx)(_index.TimeField, (0, _extends2["default"])({}, args, {
     "aria-label": "timefield-default",
     isRequired: true,
-    label: "Example label"
+    label: "Lorem Ipsum"
   }));
 };
 exports.Required = Required;
 var WithLabel = function WithLabel(args) {
   return (0, _react2.jsx)(_index.TimeField, (0, _extends2["default"])({}, args, {
-    label: "Loren Ipsum",
+    label: "Lorem Ipsum",
     "aria-label": "timefield-default"
   }));
 };

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;