@papillonarts/components 0.44.0 → 0.45.0

package/build/Modern/Avatar/Avatar.d.ts

@@ -0,0 +1,28 @@
+import { ComponentPropsWithoutRef } from 'react';
+import type { ResponsiveValue } from '../hooks/useResponsiveValue';
+export declare const DEFAULT_AVATAR_SIZE = 20;
+export type AvatarProps = {
+    /** Sets the width and height of the avatar. */
+    size?: number | ResponsiveValue<number>;
+    /** Sets the shape of the avatar to a square if true. If false, the avatar will be circular. */
+    square?: boolean;
+    /** URL of the avatar image. */
+    src: string;
+    /** Provide alt text when the Avatar is used without the user's name next to it. */
+    alt?: string;
+    /** Additional class name. */
+    className?: string;
+} & ComponentPropsWithoutRef<'img'>;
+export declare const Avatar: import("react").ForwardRefExoticComponent<{
+    /** Sets the width and height of the avatar. */
+    size?: number | ResponsiveValue<number>;
+    /** Sets the shape of the avatar to a square if true. If false, the avatar will be circular. */
+    square?: boolean;
+    /** URL of the avatar image. */
+    src: string;
+    /** Provide alt text when the Avatar is used without the user's name next to it. */
+    alt?: string;
+    /** Additional class name. */
+    className?: string;
+} & Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+//# sourceMappingURL=Avatar.d.ts.map

package/build/Modern/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/Modern/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,wBAAwB,EAAc,MAAM,OAAO,CAAA;AAC3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAIlE,eAAO,MAAM,mBAAmB,KAAK,CAAA;AAErC,MAAM,MAAM,WAAW,GAAG;IACxB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IACvC,+FAA+F;IAC/F,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAA;IACX,mFAAmF;IACnF,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAEnC,eAAO,MAAM,MAAM;IAZjB,+CAA+C;WACxC,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC;IACvC,+FAA+F;aACtF,OAAO;IAChB,+BAA+B;SAC1B,MAAM;IACX,mFAAmF;UAC7E,MAAM;IACZ,6BAA6B;gBACjB,MAAM;4KAuClB,CAAA"}

package/build/Modern/Avatar/Avatar.docs.json

@@ -0,0 +1,51 @@
+{
+  "id": "avatar",
+  "name": "Avatar",
+  "status": "alpha",
+  "a11yReviewed": "2025-01-08",
+  "stories": [
+    {
+      "id": "components-avatar--default"
+    },
+    {
+      "id": "components-avatar-features--square"
+    },
+    {
+      "id": "components-avatar-features--size"
+    },
+    {
+      "id": "components-avatar-features--size-responsive"
+    }
+  ],
+  "importPath": "@primer/react",
+  "props": [
+    {
+      "name": "size",
+      "type": "number | ResponsiveValue<number>",
+      "defaultValue": "20",
+      "description": "Sets the width and height of the avatar."
+    },
+    {
+      "name": "square",
+      "type": "boolean",
+      "defaultValue": "false",
+      "description": "Sets the shape of the avatar to a square if true. If false, the avatar will be circular."
+    },
+    {
+      "name": "src",
+      "type": "string",
+      "description": "URL of the avatar image."
+    },
+    {
+      "name": "alt",
+      "type": "string",
+      "defaultValue": "\"\"",
+      "description": "Provide alt text when the Avatar is used without the user's name next to it."
+    },
+    {
+      "name": "ref",
+      "type": "React.RefObject<HTMLImageElement>"
+    }
+  ],
+  "subcomponents": []
+}

package/build/Modern/Avatar/Avatar.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_AVATAR_SIZE = exports.Avatar = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _clsx = require("clsx");
+var _react = require("react");
+var _useResponsiveValue = require("../hooks/useResponsiveValue");
+var _AvatarModule = _interopRequireDefault(require("./Avatar.module.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["alt", "size", "square", "className", "style"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(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 t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_AVATAR_SIZE = exports.DEFAULT_AVATAR_SIZE = 20;
+var Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)(function Avatar(_ref, ref) {
+  var _ref$alt = _ref.alt,
+    alt = _ref$alt === void 0 ? '' : _ref$alt,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? DEFAULT_AVATAR_SIZE : _ref$size,
+    _ref$square = _ref.square,
+    square = _ref$square === void 0 ? false : _ref$square,
+    className = _ref.className,
+    style = _ref.style,
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var isResponsive = (0, _useResponsiveValue.isResponsiveValue)(size);
+  var cssSizeVars = {};
+  if (isResponsive) {
+    for (var _i = 0, _Object$entries = Object.entries(size); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = (0, _slicedToArray2["default"])(_Object$entries[_i], 2),
+        key = _Object$entries$_i[0],
+        value = _Object$entries$_i[1];
+      cssSizeVars["--avatarSize-".concat(key)] = "".concat(value, "px");
+    }
+  } else {
+    cssSizeVars['--avatarSize-regular'] = "".concat(size, "px");
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", _objectSpread({
+    "data-component": "Avatar",
+    className: (0, _clsx.clsx)(className, _AvatarModule["default"].Avatar),
+    ref: ref,
+    alt: alt,
+    "data-responsive": isResponsive ? '' : undefined,
+    "data-square": square ? '' : undefined,
+    width: isResponsive ? undefined : size,
+    height: isResponsive ? undefined : size,
+    style: style ? _objectSpread(_objectSpread({}, cssSizeVars), style) : cssSizeVars
+  }, rest));
+});
+if (process.env.NODE_ENV !== 'production') {
+  Avatar.displayName = 'Avatar';
+}

package/build/Modern/Avatar/Avatar.module.scss

@@ -0,0 +1,36 @@
+/* stylelint-disable custom-property-pattern */
+
+:where(.Avatar) {
+  display: inline-block;
+  width: var(--avatarSize-regular);
+  height: var(--avatarSize-regular);
+  overflow: hidden; /* Ensure page layout in Firefox should images fail to load */
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 1;
+  vertical-align: middle;
+  border-radius: 50%;
+  /* stylelint-disable-next-line primer/box-shadow */
+  box-shadow: 0 0 0 1px var(--avatar-borderColor);
+
+  &:where([data-square]) {
+    /* stylelint-disable-next-line primer/borders */
+    border-radius: clamp(4px, calc(var(--avatarSize-regular) - 24px), var(--borderRadius-medium));
+  }
+
+  &:where([data-responsive]) {
+    @media screen and (--viewportRange-narrow) {
+      width: var(--avatarSize-narrow);
+      height: var(--avatarSize-narrow);
+    }
+
+    @media screen and (--viewportRange-regular) {
+      width: var(--avatarSize-regular);
+      height: var(--avatarSize-regular);
+    }
+
+    @media screen and (--viewportRange-wide) {
+      width: var(--avatarSize-wide);
+      height: var(--avatarSize-wide);
+    }
+  }
+}

package/build/Modern/Avatar/__tests__/Avatar.doc.md

@@ -0,0 +1,110 @@
+# Features
+
+```
+Avatar all props and variants
+```
+
+## Props
+
+```typescript
+export type AvatarProps = {
+  /** Sets the width and height of the avatar. */
+  size?: number | ResponsiveValue<number>
+  /** Sets the shape of the avatar to a square if true. If false, the avatar will be circular. */
+  square?: boolean
+  /** URL of the avatar image. */
+  src: string
+  /** Provide alt text when the Avatar is used without the user's name next to it. */
+  alt?: string
+  /** Additional class name. */
+  className?: string
+} & ComponentPropsWithoutRef<'img'>
+```
+
+## Variants
+
+```
+Default
+
+Square
+
+Size
+
+Size Responsive
+
+Should Accept Call With No Props
+
+Should Not Accept System Props
+```
+
+### Default
+
+> Avatar default variant
+
+```tsx
+<Avatar src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+```
+
+### Square
+
+> Avatar square variant
+
+```tsx
+<Avatar square alt="primer" src="https://avatars.githubusercontent.com/primer" />
+```
+
+### Size
+
+> Avatar with various sizes
+
+```tsx
+<div>
+  <Avatar size={4} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={8} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={12} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={16} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={20} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={24} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={28} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={32} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={40} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={48} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={56} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={64} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+</div>
+```
+
+### Size Responsive
+
+> Avatar with responsive sizes
+
+```tsx
+<div>
+  <Avatar size={{ narrow: 4, regular: 8, wide: 12 }} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={{ narrow: 8, regular: 12, wide: 16 }} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={{ narrow: 12, regular: 16, wide: 20 }} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={{ narrow: 16, regular: 20, wide: 24 }} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={{ narrow: 20, regular: 24, wide: 28 }} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={{ narrow: 24, regular: 28, wide: 32 }} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={{ narrow: 28, regular: 32, wide: 40 }} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={{ narrow: 32, regular: 40, wide: 48 }} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={{ narrow: 40, regular: 48, wide: 56 }} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+  <Avatar size={{ narrow: 48, regular: 56, wide: 64 }} alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+</div>
+```
+
+### Should Accept Call With No Props
+
+> Avatar Should Accept Call With No Props
+
+```tsx
+<Avatar src="https://avatars.githubusercontent.com/primer" />
+```
+
+### Should Not Accept System Props
+
+> Avatar Should Not Accept System Props
+
+```tsx
+<Avatar src="https://avatars.githubusercontent.com/primer" backgroundColor="thistle" />
+```

package/build/Modern/Avatar/index.d.ts

@@ -0,0 +1,3 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
+//# sourceMappingURL=index.d.ts.map

package/build/Modern/Avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modern/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA"}

package/build/Modern/Avatar/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function get() {
+    return _Avatar.Avatar;
+  }
+});
+var _Avatar = require("./Avatar");

package/build/Modern/AvatarStack/AvatarStack.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactNode } from 'react';
+import type { ResponsiveValue } from '../hooks/useResponsiveValue';
+export interface AvatarStackProps {
+    alignRight?: boolean;
+    disableExpand?: boolean;
+    variant?: 'cascade' | 'stack';
+    shape?: 'circle' | 'square';
+    size?: number | ResponsiveValue<number>;
+    className?: string;
+    children: ReactNode;
+    style?: CSSProperties;
+}
+export declare const AvatarStack: ({ children, variant, shape, alignRight, disableExpand, size, className, style, }: AvatarStackProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AvatarStack.d.ts.map

package/build/Modern/AvatarStack/AvatarStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarStack.d.ts","sourceRoot":"","sources":["../../../src/Modern/AvatarStack/AvatarStack.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,aAAa,EAGb,SAAS,EAOV,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAiBlE,MAAM,WAAW,gBAAgB;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB;AA8BD,eAAO,MAAM,WAAW,GAAI,kFASzB,gBAAgB,4CAkHlB,CAAA"}

package/build/Modern/AvatarStack/AvatarStack.docs.json

@@ -0,0 +1,81 @@
+{
+  "id": "avatar_stack",
+  "name": "AvatarStack",
+  "status": "alpha",
+  "a11yReviewed": "2025-01-08",
+  "stories": [
+    {
+      "id": "components-modern-avatarstack--default"
+    },
+    {
+      "id": "components-modern-avatarstack--align-right"
+    },
+    {
+      "id": "components-modern-avatarstack--disable-expand"
+    },
+    {
+      "id": "components-modern-avatarstack--custom-size"
+    },
+    {
+      "id": "components-modern-avatarstack--custom-size-responsive"
+    },
+    {
+      "id": "components-modern-avatarstack--square-shape"
+    },
+    {
+      "id": "components-modern-avatarstack--stack-variant"
+    }
+  ],
+  "importPath": "@papillonarts/components",
+  "props": [
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "description": "A set of Avatar components to stack",
+      "defaultValue": ""
+    },
+    {
+      "name": "alignRight",
+      "type": "boolean",
+      "defaultValue": "false",
+      "description": "Align the avatars to the right"
+    },
+    {
+      "name": "disableExpand",
+      "type": "boolean",
+      "defaultValue": "false",
+      "description": "Do not spread the avatars on hover"
+    },
+    {
+      "name": "variant",
+      "type": "'cascade' | 'stack'",
+      "defaultValue": "'cascade'",
+      "description": "The variant of the avatar stack layout"
+    },
+    {
+      "name": "shape",
+      "type": "'circle' | 'square'",
+      "defaultValue": "'circle'",
+      "description": "The shape of the avatars"
+    },
+    {
+      "name": "size",
+      "type": "number | { narrow?: number; regular?: number; wide?: number; }",
+      "defaultValue": "20",
+      "description": "The size of the avatar children in pixels."
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "description": "Class name for custom styling.",
+      "defaultValue": ""
+    },
+    {
+      "name": "style",
+      "type": "CSSProperties",
+      "description": "Inline styles for the component.",
+      "defaultValue": ""
+    }
+  ],
+  "subcomponents": []
+}

package/build/Modern/AvatarStack/AvatarStack.js

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarStack = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _clsx = require("clsx");
+var _react = require("react");
+var _Avatar = require("../Avatar/Avatar");
+var _useResponsiveValue = require("../hooks/useResponsiveValue");
+var _hasInteractiveNodes = require("../utils/hasInteractiveNodes");
+var _AvatarStackModule = _interopRequireDefault(require("./AvatarStack.module.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(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 t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var transformChildren = function transformChildren(children, shape) {
+  return _react.Children.map(children, function (child) {
+    if (! /*#__PURE__*/(0, _react.isValidElement)(child)) return child;
+    return /*#__PURE__*/(0, _react.cloneElement)(child, _objectSpread(_objectSpread({}, child.props), {}, {
+      square: (shape === 'square' ? true : undefined) || child.props.square,
+      className: (0, _clsx.clsx)(child.props.className, 'pc-AvatarItem', _AvatarStackModule["default"].AvatarItem)
+    }));
+  });
+};
+var AvatarStackBody = function AvatarStackBody(_ref) {
+  var disableExpand = _ref.disableExpand,
+    hasInteractiveChildren = _ref.hasInteractiveChildren,
+    stackContainer = _ref.stackContainer,
+    children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    "data-disable-expand": disableExpand ? '' : undefined,
+    className: (0, _clsx.clsx)({
+      'pc-AvatarStack--disableExpand': disableExpand
+    }, 'pc-AvatarStackBody', _AvatarStackModule["default"].AvatarStackBody),
+    tabIndex: !hasInteractiveChildren && !disableExpand ? 0 : undefined,
+    ref: stackContainer,
+    children: children
+  });
+};
+var AvatarStack = exports.AvatarStack = function AvatarStack(_ref2) {
+  var children = _ref2.children,
+    _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'cascade' : _ref2$variant,
+    _ref2$shape = _ref2.shape,
+    shape = _ref2$shape === void 0 ? 'circle' : _ref2$shape,
+    alignRight = _ref2.alignRight,
+    disableExpand = _ref2.disableExpand,
+    size = _ref2.size,
+    className = _ref2.className,
+    style = _ref2.style;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    hasInteractiveChildren = _useState2[0],
+    setHasInteractiveChildren = _useState2[1];
+  var stackContainer = (0, _react.useRef)(null);
+  var count = _react.Children.count(children);
+  var getAvatarChildSizes = function getAvatarChildSizes() {
+    var avatarSizeMap = {
+      narrow: [],
+      regular: [],
+      wide: []
+    };
+    return _react.Children.toArray(children).reduce(function (acc, child) {
+      // if child is not an Avatar, return the default avatar sizes from the accumulator
+      if (! /*#__PURE__*/(0, _react.isValidElement)(child)) return acc;
+      for (var _i = 0, _Object$keys = Object.keys(avatarSizeMap); _i < _Object$keys.length; _i++) {
+        var responsiveKey = _Object$keys[_i];
+        // if the child has responsive `size` prop values, push the value to the appropriate viewport property in the avatarSizeMap
+        if ((0, _useResponsiveValue.isResponsiveValue)(child.props.size)) {
+          avatarSizeMap[responsiveKey].push(child.props.size[responsiveKey] || _Avatar.DEFAULT_AVATAR_SIZE);
+        }
+        // otherwise, the size is a number (or undefined), so push the value to all viewport properties in the avatarSizeMap
+        else {
+          avatarSizeMap[responsiveKey].push(child.props.size || _Avatar.DEFAULT_AVATAR_SIZE);
+        }
+
+        // set the smallest size in each viewport property as the value for that viewport property in the accumulator
+        acc[responsiveKey] = Math.min.apply(Math, (0, _toConsumableArray2["default"])(avatarSizeMap[responsiveKey]));
+      }
+      return acc;
+    }, {
+      narrow: _Avatar.DEFAULT_AVATAR_SIZE,
+      regular: _Avatar.DEFAULT_AVATAR_SIZE,
+      wide: _Avatar.DEFAULT_AVATAR_SIZE
+    });
+  };
+  var childSizes = getAvatarChildSizes();
+  (0, _react.useEffect)(function () {
+    if (stackContainer.current) {
+      var interactiveChildren = function interactiveChildren() {
+        setHasInteractiveChildren((0, _hasInteractiveNodes.hasInteractiveNodes)(stackContainer.current));
+      };
+      var observer = new MutationObserver(interactiveChildren);
+      observer.observe(stackContainer.current, {
+        childList: true
+      });
+
+      // Call on initial render, then call it again only if there's a mutation
+      interactiveChildren();
+      return function () {
+        observer.disconnect();
+      };
+    }
+  }, []);
+  var getResponsiveAvatarSizeStyles = function getResponsiveAvatarSizeStyles() {
+    // if there is no size set on the AvatarStack, use the `size` props of the Avatar children to set the `--avatar-stack-size` CSS variable
+    if (!size) {
+      return {
+        '--stackSize-narrow': "".concat(childSizes.narrow, "px"),
+        '--stackSize-regular': "".concat(childSizes.regular, "px"),
+        '--stackSize-wide': "".concat(childSizes.wide, "px")
+      };
+    }
+
+    // if the `size` prop is set and responsive, set the `--avatar-stack-size` CSS variable for each viewport
+    if ((0, _useResponsiveValue.isResponsiveValue)(size)) {
+      return {
+        '--stackSize-narrow': "".concat(size.narrow || _Avatar.DEFAULT_AVATAR_SIZE, "px"),
+        '--stackSize-regular': "".concat(size.regular || _Avatar.DEFAULT_AVATAR_SIZE, "px"),
+        '--stackSize-wide': "".concat(size.wide || _Avatar.DEFAULT_AVATAR_SIZE, "px")
+      };
+    }
+
+    // if the `size` prop is set and not responsive, it is a number, so we can just set the `--avatar-stack-size` CSS variable to that number
+    return {
+      '--avatar-stack-size': "".concat(size, "px")
+    };
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    "data-variant": variant,
+    "data-shape": shape,
+    "data-avatar-count": count > 3 ? '3+' : count,
+    "data-align-right": alignRight ? '' : undefined,
+    "data-responsive": !size || (0, _useResponsiveValue.isResponsiveValue)(size) ? '' : undefined,
+    className: (0, _clsx.clsx)({
+      'pc-AvatarStack--variant': variant,
+      'pc-AvatarStack--shape': shape,
+      'pc-AvatarStack--two': count === 2,
+      'pc-AvatarStack--three': count === 3,
+      'pc-AvatarStack--three-plus': count > 3,
+      'pc-AvatarStack--right': alignRight
+    }, className, _AvatarStackModule["default"].AvatarStack),
+    style: _objectSpread(_objectSpread({}, getResponsiveAvatarSizeStyles()), style),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarStackBody, {
+      disableExpand: disableExpand,
+      hasInteractiveChildren: hasInteractiveChildren,
+      stackContainer: stackContainer,
+      children: [' ', transformChildren(children, shape)]
+    })
+  });
+};