@pingux/astro 2.194.0 → 2.194.1-alpha.0

package/lib/cjs/components/IconWrapper/IconWrapper.js

@@ -63,7 +63,9 @@ var IconWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     sx: _objectSpread({
       backgroundColor: "iconWrapper.wrapper.".concat(finalColor)
     }, sx),
-    className: classNames
+    className: classNames,
+    justifyContent: "center",
+    alignItems: "center"
   }, wrapperProps), (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
     icon: icon,
     size: sizeProps.size,

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.Sizes = exports.IsCircle = exports.Default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _DeleteIcon = _interopRequireDefault(require("@pingux/mdi-react/DeleteIcon"));
@@ -45,4 +45,85 @@ var _default = exports["default"] = {
 };
 var Default = exports.Default = function Default(args) {
   return (0, _react2.jsx)(_index.IconWrapper, args);
+};
+var Sizes = exports.Sizes = function Sizes() {
+  return (0, _react2.jsx)(_index.Box, {
+    gap: "md",
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "xs",
+    title: {
+      name: 'extra small'
+    }
+  }), (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "sm",
+    title: {
+      name: 'small'
+    }
+  }), (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "md",
+    title: {
+      name: 'medium'
+    }
+  }), (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "lg",
+    title: {
+      name: 'large'
+    }
+  }), (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "xl",
+    title: {
+      name: 'extra large'
+    }
+  }));
+};
+var IsCircle = exports.IsCircle = function IsCircle() {
+  return (0, _react2.jsx)(_index.Box, {
+    gap: "md",
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "xs",
+    isCircle: true,
+    title: {
+      name: 'extra small circle'
+    }
+  }), (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "sm",
+    isCircle: true,
+    title: {
+      name: 'small circle'
+    }
+  }), (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "md",
+    isCircle: true,
+    title: {
+      name: 'medium circle'
+    }
+  }), (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "lg",
+    isCircle: true,
+    title: {
+      name: 'large circle'
+    }
+  }));
 };

package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts

@@ -71,9 +71,11 @@ declare const useGetTheme: () => {
     };
     iconBadgeCircleColor: string;
     iconWrapperSizes: {
+        xs: number;
         sm: number;
         md: number;
         lg: number;
+        xl: number;
     };
     iFrameContentDivBackgroundColor: string;
     copyButtonSize: import("../..").IconSize;
@@ -195,9 +197,11 @@ declare const useGetTheme: () => {
     };
     iconBadgeCircleColor: string;
     iconWrapperSizes: {
-        sm: number;
-        md: number;
-        lg: number;
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
     };
     accordionItemDefaultLabelTag: string;
     rockerButtonGap: string;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts

@@ -89,9 +89,11 @@ export declare const nextGenDarkThemeValues: {
     };
     iconBadgeCircleColor: string;
     iconWrapperSizes: {
-        sm: number;
-        md: number;
-        lg: number;
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
     };
     accordionItemDefaultLabelTag: string;
     rockerButtonGap: string;

package/lib/cjs/styles/themes/astro/customProperties/index.d.ts

@@ -65,9 +65,11 @@ export declare const astroThemeValues: {
     };
     iconBadgeCircleColor: string;
     iconWrapperSizes: {
+        xs: number;
         sm: number;
         md: number;
         lg: number;
+        xl: number;
     };
     iFrameContentDivBackgroundColor: string;
     copyButtonSize: IconSize;

package/lib/cjs/styles/themes/astro/customProperties/tShirtSizes.d.ts

@@ -7,7 +7,9 @@ declare const _default: {
 };
 export default _default;
 export declare const iconWrapperSizes: {
+    xs: number;
     sm: number;
     md: number;
     lg: number;
+    xl: number;
 };

package/lib/cjs/styles/themes/astro/customProperties/tShirtSizes.js

@@ -13,7 +13,9 @@ var _default = exports["default"] = {
   md: '25px'
 };
 var iconWrapperSizes = exports.iconWrapperSizes = {
+  xs: 12,
   sm: 18,
   md: 24,
-  lg: 48
+  lg: 48,
+  xl: 96
 };

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

@@ -84,9 +84,11 @@ export declare const nextGenThemeValues: {
     };
     iconBadgeCircleColor: string;
     iconWrapperSizes: {
-        sm: number;
-        md: number;
-        lg: number;
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
     };
     defaultIconColor: string;
     accordionItemDefaultLabelTag: string;

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

@@ -17,7 +17,9 @@ declare const _default: {
 };
 export default _default;
 export declare const iconWrapperSizes: {
-    sm: number;
-    md: number;
-    lg: number;
+    xs: any;
+    sm: any;
+    md: any;
+    lg: any;
+    xl: any;
 };

package/lib/cjs/styles/themes/next-gen/customProperties/tShirtSizes.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.iconWrapperSizes = exports["default"] = void 0;
+var _sizes = _interopRequireDefault(require("../sizes"));
 var _default = exports["default"] = {
   'icon-50': '10px',
   xxs: '10px',
@@ -23,7 +25,9 @@ var _default = exports["default"] = {
   xsm: '16px'
 };
 var iconWrapperSizes = exports.iconWrapperSizes = {
-  sm: 18,
-  md: 24,
-  lg: 48
+  xs: _sizes["default"].avatarFontSize.xs,
+  sm: _sizes["default"].avatarFontSize.sm,
+  md: _sizes["default"].avatarFontSize.md,
+  lg: _sizes["default"].avatarFontSize.lg,
+  xl: _sizes["default"].avatarFontSize.xl
 };

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

@@ -3188,6 +3188,7 @@ declare const _default: {
     };
     sizes: {
         avatar: {
+            xs: string;
             sm: string;
             md: string;
             xmd: string;
@@ -3202,6 +3203,7 @@ declare const _default: {
             xl: string;
         };
         avatarFontSize: {
+            xs: any;
             sm: any;
             md: any;
             xmd: string;
@@ -5397,6 +5399,17 @@ declare const _default: {
             };
         };
         iconWrapper: {
+            xs: {
+                '&.is-circle': {
+                    borderRadius: string;
+                };
+                borderRadius: string;
+                minHeight: string;
+                minWidth: string;
+                height: string;
+                width: string;
+                fontSize: any;
+            };
             sm: {
                 '&.is-circle': {
                     borderRadius: string;
@@ -5406,7 +5419,7 @@ declare const _default: {
                 minWidth: string;
                 height: string;
                 width: string;
-                p: string;
+                fontSize: any;
             };
             md: {
                 '&.is-circle': {
@@ -5417,7 +5430,7 @@ declare const _default: {
                 minWidth: string;
                 height: string;
                 width: string;
-                p: string;
+                fontSize: any;
             };
             lg: {
                 '&.is-circle': {
@@ -5428,7 +5441,18 @@ declare const _default: {
                 minWidth: string;
                 height: string;
                 width: string;
-                p: string;
+                fontSize: any;
+            };
+            xl: {
+                '&.is-circle': {
+                    borderRadius: string;
+                };
+                borderRadius: string;
+                minHeight: string;
+                minWidth: string;
+                height: string;
+                width: string;
+                fontSize: any;
             };
         };
         listBox: {

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

@@ -1,5 +1,6 @@
 declare const _default: {
     avatar: {
+        xs: string;
         sm: string;
         md: string;
         xmd: string;
@@ -14,6 +15,7 @@ declare const _default: {
         xl: string;
     };
     avatarFontSize: {
+        xs: any;
         sm: any;
         md: any;
         xmd: string;

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

@@ -12,13 +12,6 @@ var sideNav = {
   halfWidth: "".concat(halfSidenavWidth, "px")
 };
 var fontSizes = _onyxTokens.astroTokens["default"]['font-size'];
-var avatar = {
-  sm: "".concat(_onyxTokens.astroTokens.size.avatar.sm, "px"),
-  md: '32px',
-  xmd: '44px',
-  lg: "".concat(_onyxTokens.astroTokens.size.avatar.lg, "px"),
-  xl: "".concat(_onyxTokens.astroTokens.size.avatar.xl, "px")
-};
 var avatarLogo = {
   sm: '14px',
   md: '20px',
@@ -26,7 +19,16 @@ var avatarLogo = {
   lg: '44px',
   xl: '54px'
 };
+var avatar = {
+  xs: "".concat(_onyxTokens.astroTokens.size.avatar.xs, "px"),
+  sm: "".concat(_onyxTokens.astroTokens.size.avatar.sm, "px"),
+  md: "".concat(_onyxTokens.astroTokens.size.avatar.md, "px"),
+  xmd: '44px',
+  lg: "".concat(_onyxTokens.astroTokens.size.avatar.lg, "px"),
+  xl: "".concat(_onyxTokens.astroTokens.size.avatar.xl, "px")
+};
 var avatarFontSize = {
+  xs: fontSizes.avatar.xs,
   sm: fontSizes.avatar.sm,
   md: fontSizes.avatar.md,
   xmd: '18px',

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

@@ -1,4 +1,15 @@
 declare const _default: {
+    xs: {
+        '&.is-circle': {
+            borderRadius: string;
+        };
+        borderRadius: string;
+        minHeight: string;
+        minWidth: string;
+        height: string;
+        width: string;
+        fontSize: any;
+    };
     sm: {
         '&.is-circle': {
             borderRadius: string;
@@ -8,7 +19,7 @@ declare const _default: {
         minWidth: string;
         height: string;
         width: string;
-        p: string;
+        fontSize: any;
     };
     md: {
         '&.is-circle': {
@@ -19,7 +30,7 @@ declare const _default: {
         minWidth: string;
         height: string;
         width: string;
-        p: string;
+        fontSize: any;
     };
     lg: {
         '&.is-circle': {
@@ -30,7 +41,18 @@ declare const _default: {
         minWidth: string;
         height: string;
         width: string;
-        p: string;
+        fontSize: any;
+    };
+    xl: {
+        '&.is-circle': {
+            borderRadius: string;
+        };
+        borderRadius: string;
+        minHeight: string;
+        minWidth: string;
+        height: string;
+        width: string;
+        fontSize: any;
     };
 };
 export default _default;

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

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _sizes = _interopRequireDefault(require("../sizes"));
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var circle = {
@@ -22,29 +23,45 @@ var circle = {
   }
 };
 var iconWrapper = {
+  xs: _objectSpread({
+    borderRadius: '.25rem',
+    minHeight: _sizes["default"].avatar.xs,
+    minWidth: _sizes["default"].avatar.xs,
+    height: _sizes["default"].avatar.xs,
+    width: _sizes["default"].avatar.xs,
+    fontSize: _sizes["default"].avatarFontSize.xs
+  }, circle),
   sm: _objectSpread({
-    borderRadius: '4px',
-    minHeight: '32px',
-    minWidth: '32px',
-    height: '32px',
-    width: '32px',
-    p: '7px'
+    borderRadius: '.25rem',
+    minHeight: _sizes["default"].avatar.sm,
+    minWidth: _sizes["default"].avatar.sm,
+    height: _sizes["default"].avatar.sm,
+    width: _sizes["default"].avatar.sm,
+    fontSize: _sizes["default"].avatarFontSize.sm
   }, circle),
   md: _objectSpread({
-    borderRadius: '4px',
-    minHeight: '48px',
-    minWidth: '48px',
-    height: '48px',
-    width: '48px',
-    p: '12px'
+    borderRadius: '.25rem',
+    minHeight: _sizes["default"].avatar.md,
+    minWidth: _sizes["default"].avatar.md,
+    height: _sizes["default"].avatar.md,
+    width: _sizes["default"].avatar.md,
+    fontSize: _sizes["default"].avatarFontSize.md
   }, circle),
   lg: _objectSpread({
-    borderRadius: '16px',
-    minHeight: '104px',
-    minWidth: '104px',
-    height: '104px',
-    width: '104px',
-    p: '28px'
+    borderRadius: '.25rem',
+    minHeight: _sizes["default"].avatar.lg,
+    minWidth: _sizes["default"].avatar.lg,
+    height: _sizes["default"].avatar.lg,
+    width: _sizes["default"].avatar.lg,
+    fontSize: _sizes["default"].avatarFontSize.lg
+  }, circle),
+  xl: _objectSpread({
+    borderRadius: '.25rem',
+    minHeight: _sizes["default"].avatar.xl,
+    minWidth: _sizes["default"].avatar.xl,
+    height: _sizes["default"].avatar.xl,
+    width: _sizes["default"].avatar.xl,
+    fontSize: _sizes["default"].avatarFontSize.xl
   }, circle)
 };
 var _default = exports["default"] = _objectSpread({}, iconWrapper);

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

@@ -756,6 +756,17 @@ declare const _default: {
         };
     };
     iconWrapper: {
+        xs: {
+            '&.is-circle': {
+                borderRadius: string;
+            };
+            borderRadius: string;
+            minHeight: string;
+            minWidth: string;
+            height: string;
+            width: string;
+            fontSize: any;
+        };
         sm: {
             '&.is-circle': {
                 borderRadius: string;
@@ -765,7 +776,7 @@ declare const _default: {
             minWidth: string;
             height: string;
             width: string;
-            p: string;
+            fontSize: any;
         };
         md: {
             '&.is-circle': {
@@ -776,7 +787,7 @@ declare const _default: {
             minWidth: string;
             height: string;
             width: string;
-            p: string;
+            fontSize: any;
         };
         lg: {
             '&.is-circle': {
@@ -787,7 +798,18 @@ declare const _default: {
             minWidth: string;
             height: string;
             width: string;
-            p: string;
+            fontSize: any;
+        };
+        xl: {
+            '&.is-circle': {
+                borderRadius: string;
+            };
+            borderRadius: string;
+            minHeight: string;
+            minWidth: string;
+            height: string;
+            width: string;
+            fontSize: any;
         };
     };
     listBox: {

package/lib/components/IconWrapper/IconWrapper.js

@@ -53,7 +53,9 @@ var IconWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: _objectSpread({
       backgroundColor: "iconWrapper.wrapper.".concat(finalColor)
     }, sx),
-    className: classNames
+    className: classNames,
+    justifyContent: "center",
+    alignItems: "center"
   }, wrapperProps), ___EmotionJSX(Icon, _extends({
     icon: icon,
     size: sizeProps.size,

package/lib/components/IconWrapper/IconWrapper.stories.js

@@ -12,7 +12,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _co
 import React from 'react';
 import DeleteIcon from '@pingux/mdi-react/DeleteIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { IconWrapper } from '../../index';
+import { Box, IconWrapper } from '../../index';
 import IconWrapperReadme from './IconWrapper.mdx';
 import { iconWrapperArgTypes } from './iconWrapperAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -38,4 +38,85 @@ export default {
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(IconWrapper, args);
+};
+export var Sizes = function Sizes() {
+  return ___EmotionJSX(Box, {
+    gap: "md",
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "xs",
+    title: {
+      name: 'extra small'
+    }
+  }), ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "sm",
+    title: {
+      name: 'small'
+    }
+  }), ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "md",
+    title: {
+      name: 'medium'
+    }
+  }), ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "lg",
+    title: {
+      name: 'large'
+    }
+  }), ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "xl",
+    title: {
+      name: 'extra large'
+    }
+  }));
+};
+export var IsCircle = function IsCircle() {
+  return ___EmotionJSX(Box, {
+    gap: "md",
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "xs",
+    isCircle: true,
+    title: {
+      name: 'extra small circle'
+    }
+  }), ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "sm",
+    isCircle: true,
+    title: {
+      name: 'small circle'
+    }
+  }), ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "md",
+    isCircle: true,
+    title: {
+      name: 'medium circle'
+    }
+  }), ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "lg",
+    isCircle: true,
+    title: {
+      name: 'large circle'
+    }
+  }));
 };

package/lib/styles/themes/astro/customProperties/tShirtSizes.js

@@ -6,7 +6,9 @@ export default {
   md: '25px'
 };
 export var iconWrapperSizes = {
+  xs: 12,
   sm: 18,
   md: 24,
-  lg: 48
+  lg: 48,
+  xl: 96
 };

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

@@ -1,3 +1,4 @@
+import sizes from '../sizes';
 export default {
   'icon-50': '10px',
   xxs: '10px',
@@ -16,7 +17,9 @@ export default {
   xsm: '16px'
 };
 export var iconWrapperSizes = {
-  sm: 18,
-  md: 24,
-  lg: 48
+  xs: sizes.avatarFontSize.xs,
+  sm: sizes.avatarFontSize.sm,
+  md: sizes.avatarFontSize.md,
+  lg: sizes.avatarFontSize.lg,
+  xl: sizes.avatarFontSize.xl
 };

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

@@ -5,13 +5,6 @@ var sideNav = {
   halfWidth: "".concat(halfSidenavWidth, "px")
 };
 var fontSizes = astroTokens["default"]['font-size'];
-var avatar = {
-  sm: "".concat(astroTokens.size.avatar.sm, "px"),
-  md: '32px',
-  xmd: '44px',
-  lg: "".concat(astroTokens.size.avatar.lg, "px"),
-  xl: "".concat(astroTokens.size.avatar.xl, "px")
-};
 var avatarLogo = {
   sm: '14px',
   md: '20px',
@@ -19,7 +12,16 @@ var avatarLogo = {
   lg: '44px',
   xl: '54px'
 };
+var avatar = {
+  xs: "".concat(astroTokens.size.avatar.xs, "px"),
+  sm: "".concat(astroTokens.size.avatar.sm, "px"),
+  md: "".concat(astroTokens.size.avatar.md, "px"),
+  xmd: '44px',
+  lg: "".concat(astroTokens.size.avatar.lg, "px"),
+  xl: "".concat(astroTokens.size.avatar.xl, "px")
+};
 var avatarFontSize = {
+  xs: fontSizes.avatar.xs,
   sm: fontSizes.avatar.sm,
   md: fontSizes.avatar.md,
   xmd: '18px',

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

@@ -9,35 +9,52 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import sizes from '../sizes';
 var circle = {
   '&.is-circle': {
     borderRadius: '50%'
   }
 };
 var iconWrapper = {
+  xs: _objectSpread({
+    borderRadius: '.25rem',
+    minHeight: sizes.avatar.xs,
+    minWidth: sizes.avatar.xs,
+    height: sizes.avatar.xs,
+    width: sizes.avatar.xs,
+    fontSize: sizes.avatarFontSize.xs
+  }, circle),
   sm: _objectSpread({
-    borderRadius: '4px',
-    minHeight: '32px',
-    minWidth: '32px',
-    height: '32px',
-    width: '32px',
-    p: '7px'
+    borderRadius: '.25rem',
+    minHeight: sizes.avatar.sm,
+    minWidth: sizes.avatar.sm,
+    height: sizes.avatar.sm,
+    width: sizes.avatar.sm,
+    fontSize: sizes.avatarFontSize.sm
   }, circle),
   md: _objectSpread({
-    borderRadius: '4px',
-    minHeight: '48px',
-    minWidth: '48px',
-    height: '48px',
-    width: '48px',
-    p: '12px'
+    borderRadius: '.25rem',
+    minHeight: sizes.avatar.md,
+    minWidth: sizes.avatar.md,
+    height: sizes.avatar.md,
+    width: sizes.avatar.md,
+    fontSize: sizes.avatarFontSize.md
   }, circle),
   lg: _objectSpread({
-    borderRadius: '16px',
-    minHeight: '104px',
-    minWidth: '104px',
-    height: '104px',
-    width: '104px',
-    p: '28px'
+    borderRadius: '.25rem',
+    minHeight: sizes.avatar.lg,
+    minWidth: sizes.avatar.lg,
+    height: sizes.avatar.lg,
+    width: sizes.avatar.lg,
+    fontSize: sizes.avatarFontSize.lg
+  }, circle),
+  xl: _objectSpread({
+    borderRadius: '.25rem',
+    minHeight: sizes.avatar.xl,
+    minWidth: sizes.avatar.xl,
+    height: sizes.avatar.xl,
+    width: sizes.avatar.xl,
+    fontSize: sizes.avatarFontSize.xl
   }, circle)
 };
 export default _objectSpread({}, iconWrapper);

package/package.json

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