@pingux/astro 2.151.2-alpha.1 → 2.152.0-alpha.0

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

@@ -21,9 +21,8 @@ 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", "children", "isSquare"];
+var _excluded = ["alt", "defaultText", "color", "className", "size", "src", "sx", "children", "isSquare", "isLogo"];
 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; }
@@ -42,21 +41,19 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     sx = props.sx,
     children = props.children,
     isSquare = props.isSquare,
+    isLogo = props.isLogo,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  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)),
+  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), src ? false : size), (0, _defineProperty2["default"])(_useStatusClasses2, 'is-square', isSquare), (0, _defineProperty2["default"])(_useStatusClasses2, 'is-image', src), (0, _defineProperty2["default"])(_useStatusClasses2, 'is-logo', isLogo), _useStatusClasses2)),
     classNames = _useStatusClasses.classNames;
   if (src) {
-    return (0, _react2.jsx)(_themeUi.Avatar, (0, _extends2["default"])({
+    return (0, _react2.jsx)(_themeUi.Box, {
+      variant: "avatar",
+      className: classNames
+    }, (0, _react2.jsx)(_themeUi.Avatar, (0, _extends2["default"])({
       ref: ref,
       alt: alt,
-      src: src,
-      sx: _objectSpread({
-        size: size,
-        width: _sizes["default"].avatar[size],
-        height: _sizes["default"].avatar[size],
-        borderRadius: isSquare ? '0px' : '100%'
-      }, sx)
-    }, others));
+      src: src
+    }, others)));
   }
   return (0, _react2.jsx)(_themeUi.Box, (0, _extends2["default"])({
     variant: "avatar",

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

@@ -3,8 +3,9 @@ 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>;
+export declare const SizeVariation: StoryFn<AvatarProps>;
+export declare const ColorVariation: StoryFn<AvatarProps>;
+export declare const IconVariation: StoryFn<AvatarProps>;
+export declare const ImageVariation: StoryFn<AvatarProps>;
+export declare const SquareVariation: StoryFn<AvatarProps>;
+export declare const LogoVariation: StoryFn<AvatarProps>;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithSquareVariation = exports.WithSizeVariation = exports.WithImageVariation = exports.WithIconVariation = exports.WithColorVariation = exports.Default = void 0;
+exports["default"] = exports.SquareVariation = exports.SizeVariation = exports.LogoVariation = exports.ImageVariation = exports.IconVariation = exports.Default = exports.ColorVariation = 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"));
@@ -62,7 +62,7 @@ var Default = function Default(_ref) {
   return (0, _react2.jsx)(_index.Avatar, args);
 };
 exports.Default = Default;
-var WithSizeVariation = function WithSizeVariation() {
+var SizeVariation = function SizeVariation() {
   return (0, _react2.jsx)(_index.Box, {
     isRow: true,
     gap: "sm",
@@ -81,8 +81,8 @@ var WithSizeVariation = function WithSizeVariation() {
     color: "green"
   }));
 };
-exports.WithSizeVariation = WithSizeVariation;
-var WithColorVariation = function WithColorVariation() {
+exports.SizeVariation = SizeVariation;
+var ColorVariation = function ColorVariation() {
   return (0, _react2.jsx)(_index.Box, {
     isRow: true,
     gap: "sm",
@@ -109,8 +109,8 @@ var WithColorVariation = function WithColorVariation() {
     color: "indigo"
   }));
 };
-exports.WithColorVariation = WithColorVariation;
-var WithIconVariation = function WithIconVariation() {
+exports.ColorVariation = ColorVariation;
+var IconVariation = function IconVariation() {
   return (0, _react2.jsx)(_index.Avatar, {
     color: "green"
   }, (0, _react2.jsx)(_index.IconWrapper, {
@@ -122,16 +122,55 @@ var WithIconVariation = function WithIconVariation() {
     }
   }));
 };
-exports.WithIconVariation = WithIconVariation;
-var WithImageVariation = function WithImageVariation(_ref2) {
+exports.IconVariation = IconVariation;
+var ImageVariation = function ImageVariation(_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, {
+exports.ImageVariation = ImageVariation;
+var SquareVariation = function SquareVariation() {
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "sm",
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Avatar, {
     color: "green",
     isSquare: true
-  });
+  }), (0, _react2.jsx)(_index.Avatar, {
+    color: "green",
+    isSquare: true,
+    size: "xmd"
+  }), (0, _react2.jsx)(_index.Avatar, {
+    color: "green",
+    isSquare: true,
+    size: "lg"
+  }), (0, _react2.jsx)(_index.Avatar, {
+    color: "green",
+    isSquare: true,
+    size: "xl"
+  }));
+};
+exports.SquareVariation = SquareVariation;
+var LogoVariation = function LogoVariation(args) {
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "sm",
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Avatar, (0, _extends2["default"])({}, args, {
+    isSquare: true,
+    isLogo: true
+  })), (0, _react2.jsx)(_index.Avatar, (0, _extends2["default"])({}, args, {
+    isSquare: true,
+    size: "xmd",
+    isLogo: true
+  })), (0, _react2.jsx)(_index.Avatar, (0, _extends2["default"])({}, args, {
+    isSquare: true,
+    size: "lg",
+    isLogo: true
+  })), (0, _react2.jsx)(_index.Avatar, (0, _extends2["default"])({}, args, {
+    isSquare: true,
+    size: "xl",
+    isLogo: true
+  })));
 };
-exports.WithSquareVariation = WithSquareVariation;
+exports.LogoVariation = LogoVariation;

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

@@ -42,6 +42,10 @@ export declare const avatar: {
         backgroundColor: string;
         color: string;
     };
+    '&.is-logo': {
+        borderColor: string;
+        backgroundColor: string;
+    };
     display: string;
     borderRadius: string;
     textAlign: string;

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

@@ -49,6 +49,10 @@ var avatar = {
     backgroundColor: 'indigo',
     color: 'black'
   },
+  '&.is-logo': {
+    borderColor: 'border.attachment',
+    backgroundColor: 'white'
+  },
   display: 'flex',
   borderRadius: '50%',
   textAlign: 'center',

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

@@ -3,13 +3,15 @@ declare const _default: {
         color: string;
         '&.is-hovered': {
             textDecoration: string;
+            textDecorationColor: string;
             color: string;
         };
         '&.is-pressed': {
             color: string;
+            textDecorationColor: string;
             textDecoration: string;
         };
-        '&.is-visited': {
+        '&:visited': {
             color: string;
         };
     };

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

@@ -51,13 +51,15 @@ var app = {
   color: 'blue-400',
   '&.is-hovered': {
     textDecoration: 'underline',
+    textDecorationColor: 'blue-300',
     color: 'blue-300'
   },
   '&.is-pressed': {
     color: 'blue-300',
+    textDecorationColor: 'blue-300',
     textDecoration: 'underline'
   },
-  '&.is-visited': {
+  '&:visited': {
     color: 'purple-100'
   }
 };

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

@@ -70,6 +70,10 @@ declare const _default: {
             backgroundColor: string;
             color: string;
         };
+        '&.is-logo': {
+            borderColor: string;
+            backgroundColor: string;
+        };
         display: string;
         borderRadius: string;
         textAlign: string;

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

@@ -24,7 +24,7 @@ var astroBlacklistStory = {
   Callout: ['Customizations'],
   CodeView: ['Light'],
   StatusIcon: ['Default', 'In Rocker Button'],
-  Avatar: ['With Size Variation', 'With Color Variation', 'With Icon Variation', 'With Square Variation'],
+  Avatar: ['Size Variation', 'Color Variation', 'Icon Variation', 'Square Variation', 'Logo Variation'],
   Text: ['Onyx'],
   Loader: ['Circular', 'Custom Circular']
 };

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

@@ -2101,12 +2101,21 @@ declare const _default: {
         avatar: {
             sm: string;
             md: string;
+            xmd: string;
+            lg: string;
+            xl: string;
+        };
+        avatarLogo: {
+            sm: string;
+            md: string;
+            xmd: string;
             lg: string;
             xl: string;
         };
         avatarFontSize: {
             sm: string;
             md: string;
+            xmd: string;
             lg: string;
             xl: string;
         };
@@ -3144,6 +3153,26 @@ declare const _default: {
         xx: string;
     };
     links: {
+        app: {
+            lineHeight: string;
+            '&.is-hovered': {
+                color: string;
+                textDecorationColor: string;
+            };
+            '&.is-focused': {
+                borderRadius: string;
+                outline: string;
+                outlineColor: string;
+            };
+            '&.is-pressed': {
+                color: string;
+                textDecorationColor: string;
+            };
+            '&:visited': {
+                color: string;
+                textDecoration: string;
+            };
+        };
         nextGen: {
             color: string;
             fontSize: string;
@@ -3635,6 +3664,10 @@ declare const _default: {
                 width: string;
                 height: string;
             };
+            '&.size-xmd': {
+                width: string;
+                height: string;
+            };
             '&.size-lg': {
                 width: string;
                 height: string;
@@ -3649,6 +3682,9 @@ declare const _default: {
             '&.font-size-md': {
                 fontSize: string;
             };
+            '&.font-size-xmd': {
+                fontSize: string;
+            };
             '&.font-size-lg': {
                 fontSize: string;
             };
@@ -3658,6 +3694,85 @@ declare const _default: {
             '&.is-square': {
                 borderRadius: string;
             };
+            '&.is-square.size-lg': {
+                borderRadius: string;
+            };
+            '&.is-square.size-xl': {
+                borderRadius: string;
+            };
+            '&.is-logo': {
+                borderWidth: string;
+                borderStyle: string;
+                borderColor: string;
+                backgroundColor: string;
+                '&.size-sm': {
+                    img: {
+                        width: string;
+                        height: string;
+                        borderRadius: string;
+                    };
+                };
+                '&.size-md': {
+                    img: {
+                        width: string;
+                        height: string;
+                        borderRadius: string;
+                    };
+                };
+                '&.size-xmd': {
+                    img: {
+                        width: string;
+                        height: string;
+                        borderRadius: string;
+                    };
+                };
+                '&.size-lg': {
+                    img: {
+                        width: string;
+                        height: string;
+                        borderRadius: string;
+                    };
+                };
+                '&.size-xl': {
+                    img: {
+                        width: string;
+                        height: string;
+                        borderRadius: string;
+                    };
+                };
+            };
+            '&.is-image:not(.is-logo)': {
+                '&.size-sm': {
+                    img: {
+                        width: string;
+                        height: string;
+                    };
+                };
+                '&.size-md': {
+                    img: {
+                        width: string;
+                        height: string;
+                    };
+                };
+                '&.size-xmd': {
+                    img: {
+                        width: string;
+                        height: string;
+                    };
+                };
+                '&.size-lg': {
+                    img: {
+                        width: string;
+                        height: string;
+                    };
+                };
+                '&.size-xl': {
+                    img: {
+                        width: string;
+                        height: string;
+                    };
+                };
+            };
             display: string;
             borderRadius: string;
             textAlign: string;

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

@@ -2,12 +2,21 @@ declare const _default: {
     avatar: {
         sm: string;
         md: string;
+        xmd: string;
+        lg: string;
+        xl: string;
+    };
+    avatarLogo: {
+        sm: string;
+        md: string;
+        xmd: string;
         lg: string;
         xl: string;
     };
     avatarFontSize: {
         sm: string;
         md: string;
+        xmd: string;
         lg: string;
         xl: string;
     };

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

@@ -8,12 +8,21 @@ exports["default"] = void 0;
 var avatar = {
   sm: '24px',
   md: '32px',
+  xmd: '44px',
   lg: '72px',
   xl: '104px'
 };
+var avatarLogo = {
+  sm: '14px',
+  md: '20px',
+  xmd: '24px',
+  lg: '44px',
+  xl: '54px'
+};
 var avatarFontSize = {
   sm: '9.6px',
   md: '13.6px',
+  xmd: '18px',
   lg: '28.8px',
   xl: '41.6px'
 };
@@ -35,6 +44,7 @@ var icons = {
 };
 var _default = {
   avatar: avatar,
+  avatarLogo: avatarLogo,
   avatarFontSize: avatarFontSize,
   container: container,
   iconBadge: iconBadge,

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

@@ -50,6 +50,10 @@ export declare const avatar: {
         width: string;
         height: string;
     };
+    '&.size-xmd': {
+        width: string;
+        height: string;
+    };
     '&.size-lg': {
         width: string;
         height: string;
@@ -64,6 +68,9 @@ export declare const avatar: {
     '&.font-size-md': {
         fontSize: string;
     };
+    '&.font-size-xmd': {
+        fontSize: string;
+    };
     '&.font-size-lg': {
         fontSize: string;
     };
@@ -73,6 +80,85 @@ export declare const avatar: {
     '&.is-square': {
         borderRadius: string;
     };
+    '&.is-square.size-lg': {
+        borderRadius: string;
+    };
+    '&.is-square.size-xl': {
+        borderRadius: string;
+    };
+    '&.is-logo': {
+        borderWidth: string;
+        borderStyle: string;
+        borderColor: string;
+        backgroundColor: string;
+        '&.size-sm': {
+            img: {
+                width: string;
+                height: string;
+                borderRadius: string;
+            };
+        };
+        '&.size-md': {
+            img: {
+                width: string;
+                height: string;
+                borderRadius: string;
+            };
+        };
+        '&.size-xmd': {
+            img: {
+                width: string;
+                height: string;
+                borderRadius: string;
+            };
+        };
+        '&.size-lg': {
+            img: {
+                width: string;
+                height: string;
+                borderRadius: string;
+            };
+        };
+        '&.size-xl': {
+            img: {
+                width: string;
+                height: string;
+                borderRadius: string;
+            };
+        };
+    };
+    '&.is-image:not(.is-logo)': {
+        '&.size-sm': {
+            img: {
+                width: string;
+                height: string;
+            };
+        };
+        '&.size-md': {
+            img: {
+                width: string;
+                height: string;
+            };
+        };
+        '&.size-xmd': {
+            img: {
+                width: string;
+                height: string;
+            };
+        };
+        '&.size-lg': {
+            img: {
+                width: string;
+                height: string;
+            };
+        };
+        '&.size-xl': {
+            img: {
+                width: string;
+                height: string;
+            };
+        };
+    };
     display: string;
     borderRadius: string;
     textAlign: string;

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

@@ -59,6 +59,10 @@ var avatar = {
     width: _sizes["default"].avatar.md,
     height: _sizes["default"].avatar.md
   },
+  '&.size-xmd': {
+    width: _sizes["default"].avatar.xmd,
+    height: _sizes["default"].avatar.xmd
+  },
   '&.size-lg': {
     width: _sizes["default"].avatar.lg,
     height: _sizes["default"].avatar.lg
@@ -73,6 +77,9 @@ var avatar = {
   '&.font-size-md': {
     fontSize: _sizes["default"].avatarFontSize.md
   },
+  '&.font-size-xmd': {
+    fontSize: _sizes["default"].avatarFontSize.xmd
+  },
   '&.font-size-lg': {
     fontSize: _sizes["default"].avatarFontSize.lg
   },
@@ -82,6 +89,85 @@ var avatar = {
   '&.is-square': {
     borderRadius: '4px'
   },
+  '&.is-square.size-lg': {
+    borderRadius: '8px'
+  },
+  '&.is-square.size-xl': {
+    borderRadius: '16px'
+  },
+  '&.is-logo': {
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'gray-200',
+    backgroundColor: 'transparent',
+    '&.size-sm': {
+      img: {
+        width: _sizes["default"].avatarLogo.sm,
+        height: _sizes["default"].avatarLogo.sm,
+        borderRadius: '0px'
+      }
+    },
+    '&.size-md': {
+      img: {
+        width: _sizes["default"].avatarLogo.md,
+        height: _sizes["default"].avatarLogo.md,
+        borderRadius: '0px'
+      }
+    },
+    '&.size-xmd': {
+      img: {
+        width: _sizes["default"].avatarLogo.xmd,
+        height: _sizes["default"].avatarLogo.xmd,
+        borderRadius: '0px'
+      }
+    },
+    '&.size-lg': {
+      img: {
+        width: _sizes["default"].avatarLogo.lg,
+        height: _sizes["default"].avatarLogo.lg,
+        borderRadius: '0px'
+      }
+    },
+    '&.size-xl': {
+      img: {
+        width: _sizes["default"].avatarLogo.xl,
+        height: _sizes["default"].avatarLogo.xl,
+        borderRadius: '0px'
+      }
+    }
+  },
+  '&.is-image:not(.is-logo)': {
+    '&.size-sm': {
+      img: {
+        width: _sizes["default"].avatar.sm,
+        height: _sizes["default"].avatar.sm
+      }
+    },
+    '&.size-md': {
+      img: {
+        width: _sizes["default"].avatar.md,
+        height: _sizes["default"].avatar.md
+      }
+    },
+    '&.size-xmd': {
+      img: {
+        width: _sizes["default"].avatar.xmd,
+        height: _sizes["default"].avatar.xmd
+      }
+    },
+    '&.size-lg': {
+      img: {
+        width: _sizes["default"].avatar.lg,
+        height: _sizes["default"].avatar.lg
+      }
+    },
+    '&.size-xl': {
+      img: {
+        width: _sizes["default"].avatar.xl,
+        height: _sizes["default"].avatar.xl
+      }
+    }
+  },
   display: 'flex',
   borderRadius: '50%',
   textAlign: 'center',

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

@@ -1,4 +1,24 @@
 declare const _default: {
+    app: {
+        lineHeight: string;
+        '&.is-hovered': {
+            color: string;
+            textDecorationColor: string;
+        };
+        '&.is-focused': {
+            borderRadius: string;
+            outline: string;
+            outlineColor: string;
+        };
+        '&.is-pressed': {
+            color: string;
+            textDecorationColor: string;
+        };
+        '&:visited': {
+            color: string;
+            textDecoration: string;
+        };
+    };
     nextGen: {
         color: string;
         fontSize: string;

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

@@ -25,6 +25,24 @@ var navBarFocus = {
   outline: '2px solid',
   outlineColor: 'active'
 };
+var app = {
+  lineHeight: '160%',
+  '&.is-hovered': {
+    color: 'blue-600',
+    textDecorationColor: 'blue-600'
+  },
+  '&.is-focused': _objectSpread(_objectSpread({}, navBarFocus), {}, {
+    borderRadius: '2px'
+  }),
+  '&.is-pressed': {
+    color: 'blue-600',
+    textDecorationColor: 'blue-600'
+  },
+  '&:visited': {
+    color: 'purple-700',
+    textDecoration: 'underline'
+  }
+};
 var nextGen = {
   color: 'gray-800',
   fontSize: 'md',
@@ -93,6 +111,7 @@ var footerEALink = {
   '&.is-focused': _objectSpread({}, _button.defaultFocus)
 };
 var _default = {
+  app: app,
   nextGen: nextGen,
   onyx: onyx,
   sideNav: sideNav,

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

@@ -118,6 +118,10 @@ declare const _default: {
             width: string;
             height: string;
         };
+        '&.size-xmd': {
+            width: string;
+            height: string;
+        };
         '&.size-lg': {
             width: string;
             height: string;
@@ -132,6 +136,9 @@ declare const _default: {
         '&.font-size-md': {
             fontSize: string;
         };
+        '&.font-size-xmd': {
+            fontSize: string;
+        };
         '&.font-size-lg': {
             fontSize: string;
         };
@@ -141,6 +148,85 @@ declare const _default: {
         '&.is-square': {
             borderRadius: string;
         };
+        '&.is-square.size-lg': {
+            borderRadius: string;
+        };
+        '&.is-square.size-xl': {
+            borderRadius: string;
+        };
+        '&.is-logo': {
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
+            backgroundColor: string;
+            '&.size-sm': {
+                img: {
+                    width: string;
+                    height: string;
+                    borderRadius: string;
+                };
+            };
+            '&.size-md': {
+                img: {
+                    width: string;
+                    height: string;
+                    borderRadius: string;
+                };
+            };
+            '&.size-xmd': {
+                img: {
+                    width: string;
+                    height: string;
+                    borderRadius: string;
+                };
+            };
+            '&.size-lg': {
+                img: {
+                    width: string;
+                    height: string;
+                    borderRadius: string;
+                };
+            };
+            '&.size-xl': {
+                img: {
+                    width: string;
+                    height: string;
+                    borderRadius: string;
+                };
+            };
+        };
+        '&.is-image:not(.is-logo)': {
+            '&.size-sm': {
+                img: {
+                    width: string;
+                    height: string;
+                };
+            };
+            '&.size-md': {
+                img: {
+                    width: string;
+                    height: string;
+                };
+            };
+            '&.size-xmd': {
+                img: {
+                    width: string;
+                    height: string;
+                };
+            };
+            '&.size-lg': {
+                img: {
+                    width: string;
+                    height: string;
+                };
+            };
+            '&.size-xl': {
+                img: {
+                    width: string;
+                    height: string;
+                };
+            };
+        };
         display: string;
         borderRadius: string;
         textAlign: string;

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

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

package/lib/components/Avatar/Avatar.js

@@ -9,13 +9,12 @@ 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", "children", "isSquare"];
+var _excluded = ["alt", "defaultText", "color", "className", "size", "src", "sx", "children", "isSquare", "isLogo"];
 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;
@@ -31,21 +30,19 @@ var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
     sx = props.sx,
     children = props.children,
     isSquare = props.isSquare,
+    isLogo = props.isLogo,
     others = _objectWithoutProperties(props, _excluded);
-  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)),
+  var _useStatusClasses = useStatusClasses(className, (_useStatusClasses2 = {}, _defineProperty(_useStatusClasses2, "is-".concat(color), color), _defineProperty(_useStatusClasses2, "size-".concat(size), size), _defineProperty(_useStatusClasses2, "font-size-".concat(size), src ? false : size), _defineProperty(_useStatusClasses2, 'is-square', isSquare), _defineProperty(_useStatusClasses2, 'is-image', src), _defineProperty(_useStatusClasses2, 'is-logo', isLogo), _useStatusClasses2)),
     classNames = _useStatusClasses.classNames;
   if (src) {
-    return ___EmotionJSX(ThemeUIAvatar, _extends({
+    return ___EmotionJSX(Box, {
+      variant: "avatar",
+      className: classNames
+    }, ___EmotionJSX(ThemeUIAvatar, _extends({
       ref: ref,
       alt: alt,
-      src: src,
-      sx: _objectSpread({
-        size: size,
-        width: sizes.avatar[size],
-        height: sizes.avatar[size],
-        borderRadius: isSquare ? '0px' : '100%'
-      }, sx)
-    }, others));
+      src: src
+    }, others)));
   }
   return ___EmotionJSX(Box, _extends({
     variant: "avatar",

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

@@ -52,7 +52,7 @@ export var Default = function Default(_ref) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return ___EmotionJSX(Avatar, args);
 };
-export var WithSizeVariation = function WithSizeVariation() {
+export var SizeVariation = function SizeVariation() {
   return ___EmotionJSX(Box, {
     isRow: true,
     gap: "sm",
@@ -71,7 +71,7 @@ export var WithSizeVariation = function WithSizeVariation() {
     color: "green"
   }));
 };
-export var WithColorVariation = function WithColorVariation() {
+export var ColorVariation = function ColorVariation() {
   return ___EmotionJSX(Box, {
     isRow: true,
     gap: "sm",
@@ -98,7 +98,7 @@ export var WithColorVariation = function WithColorVariation() {
     color: "indigo"
   }));
 };
-export var WithIconVariation = function WithIconVariation() {
+export var IconVariation = function IconVariation() {
   return ___EmotionJSX(Avatar, {
     color: "green"
   }, ___EmotionJSX(IconWrapper, {
@@ -110,13 +110,51 @@ export var WithIconVariation = function WithIconVariation() {
     }
   }));
 };
-export var WithImageVariation = function WithImageVariation(_ref2) {
+export var ImageVariation = function ImageVariation(_ref2) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
   return ___EmotionJSX(Avatar, args);
 };
-export var WithSquareVariation = function WithSquareVariation() {
-  return ___EmotionJSX(Avatar, {
+export var SquareVariation = function SquareVariation() {
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "sm",
+    alignItems: "center"
+  }, ___EmotionJSX(Avatar, {
     color: "green",
     isSquare: true
-  });
+  }), ___EmotionJSX(Avatar, {
+    color: "green",
+    isSquare: true,
+    size: "xmd"
+  }), ___EmotionJSX(Avatar, {
+    color: "green",
+    isSquare: true,
+    size: "lg"
+  }), ___EmotionJSX(Avatar, {
+    color: "green",
+    isSquare: true,
+    size: "xl"
+  }));
+};
+export var LogoVariation = function LogoVariation(args) {
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "sm",
+    alignItems: "center"
+  }, ___EmotionJSX(Avatar, _extends({}, args, {
+    isSquare: true,
+    isLogo: true
+  })), ___EmotionJSX(Avatar, _extends({}, args, {
+    isSquare: true,
+    size: "xmd",
+    isLogo: true
+  })), ___EmotionJSX(Avatar, _extends({}, args, {
+    isSquare: true,
+    size: "lg",
+    isLogo: true
+  })), ___EmotionJSX(Avatar, _extends({}, args, {
+    isSquare: true,
+    size: "xl",
+    isLogo: true
+  })));
 };

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

@@ -42,6 +42,10 @@ export var avatar = {
     backgroundColor: 'indigo',
     color: 'black'
   },
+  '&.is-logo': {
+    borderColor: 'border.attachment',
+    backgroundColor: 'white'
+  },
   display: 'flex',
   borderRadius: '50%',
   textAlign: 'center',

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

@@ -44,13 +44,15 @@ var app = {
   color: 'blue-400',
   '&.is-hovered': {
     textDecoration: 'underline',
+    textDecorationColor: 'blue-300',
     color: 'blue-300'
   },
   '&.is-pressed': {
     color: 'blue-300',
+    textDecorationColor: 'blue-300',
     textDecoration: 'underline'
   },
-  '&.is-visited': {
+  '&:visited': {
     color: 'purple-100'
   }
 };

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

@@ -16,7 +16,7 @@ export var astroBlacklistStory = {
   Callout: ['Customizations'],
   CodeView: ['Light'],
   StatusIcon: ['Default', 'In Rocker Button'],
-  Avatar: ['With Size Variation', 'With Color Variation', 'With Icon Variation', 'With Square Variation'],
+  Avatar: ['Size Variation', 'Color Variation', 'Icon Variation', 'Square Variation', 'Logo Variation'],
   Text: ['Onyx'],
   Loader: ['Circular', 'Custom Circular']
 };

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

@@ -1,12 +1,21 @@
 var avatar = {
   sm: '24px',
   md: '32px',
+  xmd: '44px',
   lg: '72px',
   xl: '104px'
 };
+var avatarLogo = {
+  sm: '14px',
+  md: '20px',
+  xmd: '24px',
+  lg: '44px',
+  xl: '54px'
+};
 var avatarFontSize = {
   sm: '9.6px',
   md: '13.6px',
+  xmd: '18px',
   lg: '28.8px',
   xl: '41.6px'
 };
@@ -28,6 +37,7 @@ var icons = {
 };
 export default {
   avatar: avatar,
+  avatarLogo: avatarLogo,
   avatarFontSize: avatarFontSize,
   container: container,
   iconBadge: iconBadge,

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

@@ -51,6 +51,10 @@ export var avatar = {
     width: sizes.avatar.md,
     height: sizes.avatar.md
   },
+  '&.size-xmd': {
+    width: sizes.avatar.xmd,
+    height: sizes.avatar.xmd
+  },
   '&.size-lg': {
     width: sizes.avatar.lg,
     height: sizes.avatar.lg
@@ -65,6 +69,9 @@ export var avatar = {
   '&.font-size-md': {
     fontSize: sizes.avatarFontSize.md
   },
+  '&.font-size-xmd': {
+    fontSize: sizes.avatarFontSize.xmd
+  },
   '&.font-size-lg': {
     fontSize: sizes.avatarFontSize.lg
   },
@@ -74,6 +81,85 @@ export var avatar = {
   '&.is-square': {
     borderRadius: '4px'
   },
+  '&.is-square.size-lg': {
+    borderRadius: '8px'
+  },
+  '&.is-square.size-xl': {
+    borderRadius: '16px'
+  },
+  '&.is-logo': {
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'gray-200',
+    backgroundColor: 'transparent',
+    '&.size-sm': {
+      img: {
+        width: sizes.avatarLogo.sm,
+        height: sizes.avatarLogo.sm,
+        borderRadius: '0px'
+      }
+    },
+    '&.size-md': {
+      img: {
+        width: sizes.avatarLogo.md,
+        height: sizes.avatarLogo.md,
+        borderRadius: '0px'
+      }
+    },
+    '&.size-xmd': {
+      img: {
+        width: sizes.avatarLogo.xmd,
+        height: sizes.avatarLogo.xmd,
+        borderRadius: '0px'
+      }
+    },
+    '&.size-lg': {
+      img: {
+        width: sizes.avatarLogo.lg,
+        height: sizes.avatarLogo.lg,
+        borderRadius: '0px'
+      }
+    },
+    '&.size-xl': {
+      img: {
+        width: sizes.avatarLogo.xl,
+        height: sizes.avatarLogo.xl,
+        borderRadius: '0px'
+      }
+    }
+  },
+  '&.is-image:not(.is-logo)': {
+    '&.size-sm': {
+      img: {
+        width: sizes.avatar.sm,
+        height: sizes.avatar.sm
+      }
+    },
+    '&.size-md': {
+      img: {
+        width: sizes.avatar.md,
+        height: sizes.avatar.md
+      }
+    },
+    '&.size-xmd': {
+      img: {
+        width: sizes.avatar.xmd,
+        height: sizes.avatar.xmd
+      }
+    },
+    '&.size-lg': {
+      img: {
+        width: sizes.avatar.lg,
+        height: sizes.avatar.lg
+      }
+    },
+    '&.size-xl': {
+      img: {
+        width: sizes.avatar.xl,
+        height: sizes.avatar.xl
+      }
+    }
+  },
   display: 'flex',
   borderRadius: '50%',
   textAlign: 'center',

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

@@ -14,6 +14,24 @@ var navBarFocus = {
   outline: '2px solid',
   outlineColor: 'active'
 };
+var app = {
+  lineHeight: '160%',
+  '&.is-hovered': {
+    color: 'blue-600',
+    textDecorationColor: 'blue-600'
+  },
+  '&.is-focused': _objectSpread(_objectSpread({}, navBarFocus), {}, {
+    borderRadius: '2px'
+  }),
+  '&.is-pressed': {
+    color: 'blue-600',
+    textDecorationColor: 'blue-600'
+  },
+  '&:visited': {
+    color: 'purple-700',
+    textDecoration: 'underline'
+  }
+};
 var nextGen = {
   color: 'gray-800',
   fontSize: 'md',
@@ -82,6 +100,7 @@ var footerEALink = {
   '&.is-focused': _objectSpread({}, defaultFocus)
 };
 export default {
+  app: app,
   nextGen: nextGen,
   onyx: onyx,
   sideNav: sideNav,

package/package.json

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