@pingux/astro 2.145.1-alpha.0 → 2.146.0-alpha.0

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

@@ -21,23 +21,29 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _themeUi = require("theme-ui");
 var _hooks = require("../../hooks");
+var _sizes = _interopRequireDefault(require("../../styles/themes/next-gen/sizes"));
 var _react2 = require("@emotion/react");
-var _excluded = ["alt", "defaultText", "color", "className", "size", "src", "sx"];
+var _excluded = ["alt", "defaultText", "color", "className", "size", "src", "sx", "children", "isSquare"];
 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) {
+  var _useStatusClasses2;
   var _props$alt = props.alt,
     alt = _props$alt === void 0 ? 'Avatar' : _props$alt,
-    defaultText = props.defaultText,
+    _props$defaultText = props.defaultText,
+    defaultText = _props$defaultText === void 0 ? 'AA' : _props$defaultText,
     color = props.color,
     className = props.className,
-    size = props.size,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'sm' : _props$size,
     src = props.src,
     sx = props.sx,
+    children = props.children,
+    isSquare = props.isSquare,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])({}, "is-".concat(color), true)),
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (_useStatusClasses2 = {}, (0, _defineProperty2["default"])(_useStatusClasses2, "is-".concat(color), color), (0, _defineProperty2["default"])(_useStatusClasses2, "size-".concat(size), size), (0, _defineProperty2["default"])(_useStatusClasses2, "font-size-".concat(size), size), (0, _defineProperty2["default"])(_useStatusClasses2, 'is-square', isSquare), _useStatusClasses2)),
     classNames = _useStatusClasses.classNames;
   if (src) {
     return (0, _react2.jsx)(_themeUi.Avatar, (0, _extends2["default"])({
@@ -45,7 +51,9 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       alt: alt,
       src: src,
       sx: _objectSpread({
-        size: size
+        size: size,
+        width: _sizes["default"].avatar[size],
+        height: _sizes["default"].avatar[size]
       }, sx)
     }, others));
   }
@@ -56,7 +64,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       size: size,
       fontSize: size
     }, sx)
-  }, others), defaultText);
+  }, others), children || defaultText);
 });
 Avatar.displayName = 'Avatar';
 var _default = Avatar;

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

@@ -3,3 +3,8 @@ import { AvatarProps } from '../../types/avatar';
 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<AvatarProps>;
+export declare const WithSizeVariation: StoryFn<AvatarProps>;
+export declare const WithColorVariation: StoryFn<AvatarProps>;
+export declare const WithIconVariation: StoryFn<AvatarProps>;
+export declare const WithImageVariation: StoryFn<AvatarProps>;
+export declare const WithSquareVariation: StoryFn<AvatarProps>;

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

@@ -5,10 +5,11 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.WithSquareVariation = exports.WithSizeVariation = exports.WithImageVariation = exports.WithIconVariation = exports.WithColorVariation = exports.Default = void 0;
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _CogOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CogOutlineIcon"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
@@ -60,4 +61,77 @@ var Default = function Default(_ref) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
   return (0, _react2.jsx)(_index.Avatar, args);
 };
-exports.Default = Default;
+exports.Default = Default;
+var WithSizeVariation = function WithSizeVariation() {
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "sm",
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Avatar, {
+    size: "sm",
+    color: "green"
+  }), (0, _react2.jsx)(_index.Avatar, {
+    size: "md",
+    color: "green"
+  }), (0, _react2.jsx)(_index.Avatar, {
+    size: "lg",
+    color: "green"
+  }), (0, _react2.jsx)(_index.Avatar, {
+    size: "xl",
+    color: "green"
+  }));
+};
+exports.WithSizeVariation = WithSizeVariation;
+var WithColorVariation = function WithColorVariation() {
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "sm",
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Avatar, {
+    color: "green"
+  }), (0, _react2.jsx)(_index.Avatar, {
+    color: "purple"
+  }), (0, _react2.jsx)(_index.Avatar, {
+    color: "pink"
+  }), (0, _react2.jsx)(_index.Avatar, {
+    color: "red"
+  }), (0, _react2.jsx)(_index.Avatar, {
+    color: "orange"
+  }), (0, _react2.jsx)(_index.Avatar, {
+    color: "yellow"
+  }), (0, _react2.jsx)(_index.Avatar, {
+    color: "teal"
+  }), (0, _react2.jsx)(_index.Avatar, {
+    color: "cyan"
+  }), (0, _react2.jsx)(_index.Avatar, {
+    color: "blue"
+  }), (0, _react2.jsx)(_index.Avatar, {
+    color: "indigo"
+  }));
+};
+exports.WithColorVariation = WithColorVariation;
+var WithIconVariation = function WithIconVariation() {
+  return (0, _react2.jsx)(_index.Avatar, {
+    color: "green"
+  }, (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _CogOutlineIcon["default"],
+    color: "green",
+    size: "xs",
+    title: {
+      name: 'Cog Outline Icon'
+    }
+  }));
+};
+exports.WithIconVariation = WithIconVariation;
+var WithImageVariation = function WithImageVariation(_ref2) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
+  return (0, _react2.jsx)(_index.Avatar, args);
+};
+exports.WithImageVariation = WithImageVariation;
+var WithSquareVariation = function WithSquareVariation() {
+  return (0, _react2.jsx)(_index.Avatar, {
+    color: "green",
+    isSquare: true
+  });
+};
+exports.WithSquareVariation = WithSquareVariation;

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

@@ -0,0 +1,21 @@
+"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 _withUiLibraryCss = _interopRequireDefault(require("../../../styles/themeOverrides/withUiLibraryCss"));
+var _AvatarNextGen = _interopRequireDefault(require("./AvatarNextGen"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only Avatar',
+  decorators: [_withUiLibraryCss["default"]]
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_AvatarNextGen["default"], null);
+};
+exports.Default = Default;

package/lib/cjs/components/Avatar/stories/AvatarNextGen.chromatic.stories.d.ts

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

package/lib/cjs/components/Avatar/stories/AvatarNextGen.chromatic.stories.js

@@ -0,0 +1,22 @@
+"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 _AvatarNextGen = _interopRequireDefault(require("./AvatarNextGen"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only Onyx Avatar'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    theme: _.NextGenTheme
+  }, (0, _react2.jsx)(_AvatarNextGen["default"], null));
+};
+exports.Default = Default;

package/lib/cjs/components/Avatar/stories/AvatarNextGen.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AvatarNextGen: () => React.JSX.Element;
+export default AvatarNextGen;

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

@@ -0,0 +1,16 @@
+"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"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../../../index");
+var _react2 = require("@emotion/react");
+var AvatarNextGen = function AvatarNextGen() {
+  return (0, _react2.jsx)(_index.Avatar, null);
+};
+var _default = AvatarNextGen;
+exports["default"] = _default;

package/lib/cjs/components/Avatar/stories/AvatarNextGenDark.chromatic.stories.d.ts

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

package/lib/cjs/components/Avatar/stories/AvatarNextGenDark.chromatic.stories.js

@@ -0,0 +1,22 @@
+"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 _AvatarNextGen = _interopRequireDefault(require("./AvatarNextGen"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only Onyx Dark Avatar'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    themeOverrides: [_.NextGenDarkTheme]
+  }, (0, _react2.jsx)(_AvatarNextGen["default"], null));
+};
+exports.Default = Default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/avatar.d.ts

@@ -34,6 +34,14 @@ export declare const avatar: {
         backgroundColor: string;
         color: string;
     };
+    '&.is-blue': {
+        backgroundColor: string;
+        color: string;
+    };
+    '&.is-indigo': {
+        backgroundColor: string;
+        color: string;
+    };
     display: string;
     borderRadius: string;
     textAlign: string;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/avatar.js

@@ -18,7 +18,7 @@ var avatar = {
     color: 'black'
   },
   '&.is-purple': {
-    backgroundColor: 'purple',
+    backgroundColor: 'purple-400',
     color: 'black'
   },
   '&.is-pink': {
@@ -41,6 +41,14 @@ var avatar = {
     backgroundColor: 'teal',
     color: 'black'
   },
+  '&.is-blue': {
+    backgroundColor: 'blue',
+    color: 'black'
+  },
+  '&.is-indigo': {
+    backgroundColor: 'indigo',
+    color: 'black'
+  },
   display: 'flex',
   borderRadius: '50%',
   textAlign: 'center',

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -62,6 +62,14 @@ declare const _default: {
             backgroundColor: string;
             color: string;
         };
+        '&.is-blue': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.is-indigo': {
+            backgroundColor: string;
+            color: string;
+        };
         display: string;
         borderRadius: string;
         textAlign: string;

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

@@ -16,6 +16,7 @@ export declare const astroBlacklistStory: {
     SearchField: string[];
     Callout: string[];
     StatusIcon: string[];
+    Avatar: string[];
     Text: string[];
     Loader: string[];
 };

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

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = exports.astroBlacklistStory = void 0;
-var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar'];
 var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],
@@ -24,6 +24,7 @@ var astroBlacklistStory = {
   SearchField: ['Onyx With Filter'],
   Callout: ['Customizations'],
   StatusIcon: ['Default', 'In Rocker Button'],
+  Avatar: ['With Size Variation', 'With Color Variation', 'With Icon Variation', 'With Square Variation'],
   Text: ['Onyx'],
   Loader: ['Circular', 'CustomCircular']
 };

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

@@ -2081,6 +2081,12 @@ declare const _default: {
             lg: string;
             xl: string;
         };
+        avatarFontSize: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
         container: {
             xs: string[];
             sm: string[];
@@ -3593,6 +3599,45 @@ declare const _default: {
                 backgroundColor: string;
                 color: string;
             };
+            '&.is-blue': {
+                backgroundColor: string;
+                color: string;
+            };
+            '&.is-indigo': {
+                backgroundColor: string;
+                color: string;
+            };
+            '&.size-sm': {
+                width: string;
+                height: string;
+            };
+            '&.size-md': {
+                width: string;
+                height: string;
+            };
+            '&.size-lg': {
+                width: string;
+                height: string;
+            };
+            '&.size-xl': {
+                width: string;
+                height: string;
+            };
+            '&.font-size-sm': {
+                fontSize: string;
+            };
+            '&.font-size-md': {
+                fontSize: string;
+            };
+            '&.font-size-lg': {
+                fontSize: string;
+            };
+            '&.font-size-xl': {
+                fontSize: string;
+            };
+            '&.is-square': {
+                borderRadius: string;
+            };
             display: string;
             borderRadius: string;
             textAlign: string;

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

@@ -5,6 +5,12 @@ declare const _default: {
         lg: string;
         xl: string;
     };
+    avatarFontSize: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
     container: {
         xs: string[];
         sm: string[];

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

@@ -7,10 +7,16 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var avatar = {
   sm: '24px',
-  md: '34px',
+  md: '32px',
   lg: '72px',
   xl: '104px'
 };
+var avatarFontSize = {
+  sm: '9.6px',
+  md: '13.6px',
+  lg: '28.8px',
+  xl: '41.6px'
+};
 var iconBadge = {
   md: '48px',
   xl: '104px'
@@ -29,6 +35,7 @@ var icons = {
 };
 var _default = {
   avatar: avatar,
+  avatarFontSize: avatarFontSize,
   container: container,
   iconBadge: iconBadge,
   icons: icons

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

@@ -34,6 +34,45 @@ export declare const avatar: {
         backgroundColor: string;
         color: string;
     };
+    '&.is-blue': {
+        backgroundColor: string;
+        color: string;
+    };
+    '&.is-indigo': {
+        backgroundColor: string;
+        color: string;
+    };
+    '&.size-sm': {
+        width: string;
+        height: string;
+    };
+    '&.size-md': {
+        width: string;
+        height: string;
+    };
+    '&.size-lg': {
+        width: string;
+        height: string;
+    };
+    '&.size-xl': {
+        width: string;
+        height: string;
+    };
+    '&.font-size-sm': {
+        fontSize: string;
+    };
+    '&.font-size-md': {
+        fontSize: string;
+    };
+    '&.font-size-lg': {
+        fontSize: string;
+    };
+    '&.font-size-xl': {
+        fontSize: string;
+    };
+    '&.is-square': {
+        borderRadius: string;
+    };
     display: string;
     borderRadius: string;
     textAlign: string;

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

@@ -1,10 +1,12 @@
 "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.avatar = void 0;
+var _sizes = _interopRequireDefault(require("../sizes"));
 var avatar = {
   backgroundColor: 'lightcyan',
   color: 'darkcyan',
@@ -41,6 +43,45 @@ var avatar = {
     backgroundColor: 'lightteal',
     color: 'darkteal'
   },
+  '&.is-blue': {
+    backgroundColor: 'lightblue',
+    color: 'darkblue'
+  },
+  '&.is-indigo': {
+    backgroundColor: 'lightindigo',
+    color: 'darkindigo'
+  },
+  '&.size-sm': {
+    width: _sizes["default"].avatar.sm,
+    height: _sizes["default"].avatar.sm
+  },
+  '&.size-md': {
+    width: _sizes["default"].avatar.md,
+    height: _sizes["default"].avatar.md
+  },
+  '&.size-lg': {
+    width: _sizes["default"].avatar.lg,
+    height: _sizes["default"].avatar.lg
+  },
+  '&.size-xl': {
+    width: _sizes["default"].avatar.xl,
+    height: _sizes["default"].avatar.xl
+  },
+  '&.font-size-sm': {
+    fontSize: _sizes["default"].avatarFontSize.sm
+  },
+  '&.font-size-md': {
+    fontSize: _sizes["default"].avatarFontSize.md
+  },
+  '&.font-size-lg': {
+    fontSize: _sizes["default"].avatarFontSize.lg
+  },
+  '&.font-size-xl': {
+    fontSize: _sizes["default"].avatarFontSize.xl
+  },
+  '&.is-square': {
+    borderRadius: '4px'
+  },
   display: 'flex',
   borderRadius: '50%',
   textAlign: 'center',

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

@@ -103,6 +103,45 @@ declare const _default: {
             backgroundColor: string;
             color: string;
         };
+        '&.is-blue': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.is-indigo': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.size-sm': {
+            width: string;
+            height: string;
+        };
+        '&.size-md': {
+            width: string;
+            height: string;
+        };
+        '&.size-lg': {
+            width: string;
+            height: string;
+        };
+        '&.size-xl': {
+            width: string;
+            height: string;
+        };
+        '&.font-size-sm': {
+            fontSize: string;
+        };
+        '&.font-size-md': {
+            fontSize: string;
+        };
+        '&.font-size-lg': {
+            fontSize: string;
+        };
+        '&.font-size-xl': {
+            fontSize: string;
+        };
+        '&.is-square': {
+            borderRadius: string;
+        };
         display: string;
         borderRadius: string;
         textAlign: string;

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

@@ -10,4 +10,5 @@ export interface AvatarProps extends ThemeUIAvatarProps {
     defaultText?: string;
     size?: string;
     color?: string;
+    isSquare?: boolean;
 }

package/lib/components/Avatar/Avatar.js

@@ -9,24 +9,30 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 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"];
+var _excluded = ["alt", "defaultText", "color", "className", "size", "src", "sx", "children", "isSquare"];
 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, Box } from 'theme-ui';
 import { useStatusClasses } from '../../hooks';
+import sizes from '../../styles/themes/next-gen/sizes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useStatusClasses2;
   var _props$alt = props.alt,
     alt = _props$alt === void 0 ? 'Avatar' : _props$alt,
-    defaultText = props.defaultText,
+    _props$defaultText = props.defaultText,
+    defaultText = _props$defaultText === void 0 ? 'AA' : _props$defaultText,
     color = props.color,
     className = props.className,
-    size = props.size,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'sm' : _props$size,
     src = props.src,
     sx = props.sx,
+    children = props.children,
+    isSquare = props.isSquare,
     others = _objectWithoutProperties(props, _excluded);
-  var _useStatusClasses = useStatusClasses(className, _defineProperty({}, "is-".concat(color), true)),
+  var _useStatusClasses = useStatusClasses(className, (_useStatusClasses2 = {}, _defineProperty(_useStatusClasses2, "is-".concat(color), color), _defineProperty(_useStatusClasses2, "size-".concat(size), size), _defineProperty(_useStatusClasses2, "font-size-".concat(size), size), _defineProperty(_useStatusClasses2, 'is-square', isSquare), _useStatusClasses2)),
     classNames = _useStatusClasses.classNames;
   if (src) {
     return ___EmotionJSX(ThemeUIAvatar, _extends({
@@ -34,7 +40,9 @@ var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
       alt: alt,
       src: src,
       sx: _objectSpread({
-        size: size
+        size: size,
+        width: sizes.avatar[size],
+        height: sizes.avatar[size]
       }, sx)
     }, others));
   }
@@ -45,7 +53,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
       size: size,
       fontSize: size
     }, sx)
-  }, others), defaultText);
+  }, others), children || defaultText);
 });
 Avatar.displayName = 'Avatar';
 export default Avatar;

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

@@ -1,9 +1,10 @@
 import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import CogOutlineIcon from '@pingux/mdi-react/CogOutlineIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Avatar } from '../../index';
+import { Avatar, Box, IconWrapper } from '../../index';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import AvatarReadme from './Avatar.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -50,4 +51,72 @@ export default {
 export var Default = function Default(_ref) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return ___EmotionJSX(Avatar, args);
+};
+export var WithSizeVariation = function WithSizeVariation() {
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "sm",
+    alignItems: "center"
+  }, ___EmotionJSX(Avatar, {
+    size: "sm",
+    color: "green"
+  }), ___EmotionJSX(Avatar, {
+    size: "md",
+    color: "green"
+  }), ___EmotionJSX(Avatar, {
+    size: "lg",
+    color: "green"
+  }), ___EmotionJSX(Avatar, {
+    size: "xl",
+    color: "green"
+  }));
+};
+export var WithColorVariation = function WithColorVariation() {
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "sm",
+    alignItems: "center"
+  }, ___EmotionJSX(Avatar, {
+    color: "green"
+  }), ___EmotionJSX(Avatar, {
+    color: "purple"
+  }), ___EmotionJSX(Avatar, {
+    color: "pink"
+  }), ___EmotionJSX(Avatar, {
+    color: "red"
+  }), ___EmotionJSX(Avatar, {
+    color: "orange"
+  }), ___EmotionJSX(Avatar, {
+    color: "yellow"
+  }), ___EmotionJSX(Avatar, {
+    color: "teal"
+  }), ___EmotionJSX(Avatar, {
+    color: "cyan"
+  }), ___EmotionJSX(Avatar, {
+    color: "blue"
+  }), ___EmotionJSX(Avatar, {
+    color: "indigo"
+  }));
+};
+export var WithIconVariation = function WithIconVariation() {
+  return ___EmotionJSX(Avatar, {
+    color: "green"
+  }, ___EmotionJSX(IconWrapper, {
+    icon: CogOutlineIcon,
+    color: "green",
+    size: "xs",
+    title: {
+      name: 'Cog Outline Icon'
+    }
+  }));
+};
+export var WithImageVariation = function WithImageVariation(_ref2) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+  return ___EmotionJSX(Avatar, args);
+};
+export var WithSquareVariation = function WithSquareVariation() {
+  return ___EmotionJSX(Avatar, {
+    color: "green",
+    isSquare: true
+  });
 };

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import WithUiLibraryCss from '../../../styles/themeOverrides/withUiLibraryCss';
+import AvatarNextGen from './AvatarNextGen';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Avatar',
+  decorators: [WithUiLibraryCss]
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AvatarNextGen, null);
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, NextGenTheme } from '../../..';
+import AvatarNextGen from './AvatarNextGen';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx Avatar'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: NextGenTheme
+  }, ___EmotionJSX(AvatarNextGen, null));
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Avatar } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var AvatarNextGen = function AvatarNextGen() {
+  return ___EmotionJSX(Avatar, null);
+};
+export default AvatarNextGen;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, NextGenDarkTheme } from '../../..';
+import AvatarNextGen from './AvatarNextGen';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx Dark Avatar'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    themeOverrides: [NextGenDarkTheme]
+  }, ___EmotionJSX(AvatarNextGen, null));
+};

package/lib/styles/themeOverrides/nextGenDarkMode/variants/avatar.js

@@ -11,7 +11,7 @@ export var avatar = {
     color: 'black'
   },
   '&.is-purple': {
-    backgroundColor: 'purple',
+    backgroundColor: 'purple-400',
     color: 'black'
   },
   '&.is-pink': {
@@ -34,6 +34,14 @@ export var avatar = {
     backgroundColor: 'teal',
     color: 'black'
   },
+  '&.is-blue': {
+    backgroundColor: 'blue',
+    color: 'black'
+  },
+  '&.is-indigo': {
+    backgroundColor: 'indigo',
+    color: 'black'
+  },
   display: 'flex',
   borderRadius: '50%',
   textAlign: 'center',

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

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],
@@ -16,6 +16,7 @@ export var astroBlacklistStory = {
   SearchField: ['Onyx With Filter'],
   Callout: ['Customizations'],
   StatusIcon: ['Default', 'In Rocker Button'],
+  Avatar: ['With Size Variation', 'With Color Variation', 'With Icon Variation', 'With Square Variation'],
   Text: ['Onyx'],
   Loader: ['Circular', 'CustomCircular']
 };

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

@@ -1,9 +1,15 @@
 var avatar = {
   sm: '24px',
-  md: '34px',
+  md: '32px',
   lg: '72px',
   xl: '104px'
 };
+var avatarFontSize = {
+  sm: '9.6px',
+  md: '13.6px',
+  lg: '28.8px',
+  xl: '41.6px'
+};
 var iconBadge = {
   md: '48px',
   xl: '104px'
@@ -22,6 +28,7 @@ var icons = {
 };
 export default {
   avatar: avatar,
+  avatarFontSize: avatarFontSize,
   container: container,
   iconBadge: iconBadge,
   icons: icons

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

@@ -1,3 +1,4 @@
+import sizes from '../sizes';
 export var avatar = {
   backgroundColor: 'lightcyan',
   color: 'darkcyan',
@@ -34,6 +35,45 @@ export var avatar = {
     backgroundColor: 'lightteal',
     color: 'darkteal'
   },
+  '&.is-blue': {
+    backgroundColor: 'lightblue',
+    color: 'darkblue'
+  },
+  '&.is-indigo': {
+    backgroundColor: 'lightindigo',
+    color: 'darkindigo'
+  },
+  '&.size-sm': {
+    width: sizes.avatar.sm,
+    height: sizes.avatar.sm
+  },
+  '&.size-md': {
+    width: sizes.avatar.md,
+    height: sizes.avatar.md
+  },
+  '&.size-lg': {
+    width: sizes.avatar.lg,
+    height: sizes.avatar.lg
+  },
+  '&.size-xl': {
+    width: sizes.avatar.xl,
+    height: sizes.avatar.xl
+  },
+  '&.font-size-sm': {
+    fontSize: sizes.avatarFontSize.sm
+  },
+  '&.font-size-md': {
+    fontSize: sizes.avatarFontSize.md
+  },
+  '&.font-size-lg': {
+    fontSize: sizes.avatarFontSize.lg
+  },
+  '&.font-size-xl': {
+    fontSize: sizes.avatarFontSize.xl
+  },
+  '&.is-square': {
+    borderRadius: '4px'
+  },
   display: 'flex',
   borderRadius: '50%',
   textAlign: 'center',

package/package.json

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