@primer/react 37.29.0-rc.af59a9de1 → 38.0.0-rc.195178541

package/lib/internal/components/UnderlineTabbedInterface.js

@@ -3,6 +3,7 @@
 var reactCompilerRuntime = require('react-compiler-runtime');
 var React = require('react');
 var reactIs = require('react-is');
+var defaultSxProp = require('../../utils/defaultSxProp.js');
 var UnderlineTabbedInterface_module = require('./UnderlineTabbedInterface.module.css.js');
 var clsx = require('clsx');
 var BoxWithFallback = require('./BoxWithFallback.js');
@@ -11,50 +12,57 @@ var CounterLabel = require('../../CounterLabel/CounterLabel.js');
 
 const GAP = 8;
 const UnderlineWrapper = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
-  const $ = reactCompilerRuntime.c(11);
+  const $ = reactCompilerRuntime.c(13);
   let children;
   let className;
   let rest;
+  let t1;
   if ($[0] !== t0) {
     ({
       children,
       className,
+      sx: t1,
       ...rest
     } = t0);
     $[0] = t0;
     $[1] = children;
     $[2] = className;
     $[3] = rest;
+    $[4] = t1;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
+    t1 = $[4];
   }
-  let t1;
-  if ($[4] !== className) {
-    t1 = clsx.clsx(UnderlineTabbedInterface_module.UnderlineWrapper, className);
-    $[4] = className;
-    $[5] = t1;
+  const sxProp = t1 === undefined ? defaultSxProp.defaultSxProp : t1;
+  let t2;
+  if ($[5] !== className) {
+    t2 = clsx.clsx(UnderlineTabbedInterface_module.UnderlineWrapper, className);
+    $[5] = className;
+    $[6] = t2;
   } else {
-    t1 = $[5];
+    t2 = $[6];
   }
-  let t2;
-  if ($[6] !== children || $[7] !== forwardedRef || $[8] !== rest || $[9] !== t1) {
-    t2 = /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
-      className: t1,
+  let t3;
+  if ($[7] !== children || $[8] !== forwardedRef || $[9] !== rest || $[10] !== sxProp || $[11] !== t2) {
+    t3 = /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
+      className: t2,
       ref: forwardedRef,
+      sx: sxProp,
       ...rest,
       children: children
     });
-    $[6] = children;
-    $[7] = forwardedRef;
-    $[8] = rest;
-    $[9] = t1;
-    $[10] = t2;
+    $[7] = children;
+    $[8] = forwardedRef;
+    $[9] = rest;
+    $[10] = sxProp;
+    $[11] = t2;
+    $[12] = t3;
   } else {
-    t2 = $[10];
+    t3 = $[12];
   }
-  return t2;
+  return t3;
 });
 const UnderlineItemList = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
   const $ = reactCompilerRuntime.c(7);
@@ -102,8 +110,41 @@ const LoadingCounter = () => {
   }
   return t0;
 };
+
+// We can uncomment these when/if we add overflow behavior
+// to the UnderlinePanels component
+//
+// export const StyledMoreButton = styled(Button)`
+//   margin: 0;
+//   border: 0;
+//   background: transparent;
+//   font-weight: normal;
+//   box-shadow: none;
+//   padding-block: var(--control-small-paddingBlock);
+//   padding-inline: var(--control-small-paddingInline-condensed);
+
+//   > span[data-component='trailingVisual'] {
+//     margin-left: 0;
+//   }
+// `
+
+// export const StyledOverflowDivider = styled.span`
+//   display: inline-block;
+//   border-left: 1px solid var(--borderColor-muted);
+//   width: 1px;
+//   margin-right: var(--control-xsmall-gap);
+//   /* The height of the divider - reference from Figma */
+//   height: 24px;
+// `
+
+// export const StyledMoreMenuListItem = styled.li`
+//   display: flex;
+//   align-items: center;
+//   height: 45px;
+// `
+
 const UnderlineItem = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
-  const $ = reactCompilerRuntime.c(27);
+  const $ = reactCompilerRuntime.c(29);
   let Icon;
   let children;
   let className;
@@ -112,6 +153,7 @@ const UnderlineItem = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
   let loadingCounters;
   let rest;
   let t1;
+  let t2;
   if ($[0] !== t0) {
     ({
       as: t1,
@@ -120,6 +162,7 @@ const UnderlineItem = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
       icon: Icon,
       iconsVisible,
       loadingCounters,
+      sx: t2,
       className,
       ...rest
     } = t0);
@@ -132,6 +175,7 @@ const UnderlineItem = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
     $[6] = loadingCounters;
     $[7] = rest;
     $[8] = t1;
+    $[9] = t2;
   } else {
     Icon = $[1];
     children = $[2];
@@ -141,43 +185,45 @@ const UnderlineItem = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
     loadingCounters = $[6];
     rest = $[7];
     t1 = $[8];
+    t2 = $[9];
   }
   const as = t1 === undefined ? "a" : t1;
-  let t2;
-  if ($[9] !== className) {
-    t2 = clsx.clsx(UnderlineTabbedInterface_module.UnderlineItem, className);
-    $[9] = className;
-    $[10] = t2;
+  const sxProp = t2 === undefined ? defaultSxProp.defaultSxProp : t2;
+  let t3;
+  if ($[10] !== className) {
+    t3 = clsx.clsx(UnderlineTabbedInterface_module.UnderlineItem, className);
+    $[10] = className;
+    $[11] = t3;
   } else {
-    t2 = $[10];
+    t3 = $[11];
   }
-  let t3;
-  if ($[11] !== Icon || $[12] !== iconsVisible) {
-    t3 = iconsVisible && Icon && /*#__PURE__*/jsxRuntime.jsx("span", {
+  let t4;
+  if ($[12] !== Icon || $[13] !== iconsVisible) {
+    t4 = iconsVisible && Icon && /*#__PURE__*/jsxRuntime.jsx("span", {
       "data-component": "icon",
       children: reactIs.isElement(Icon) ? Icon : /*#__PURE__*/jsxRuntime.jsx(Icon, {})
     });
-    $[11] = Icon;
-    $[12] = iconsVisible;
-    $[13] = t3;
+    $[12] = Icon;
+    $[13] = iconsVisible;
+    $[14] = t4;
   } else {
-    t3 = $[13];
+    t4 = $[14];
   }
-  let t4;
-  if ($[14] !== children) {
-    t4 = children && /*#__PURE__*/jsxRuntime.jsx("span", {
+  let t5;
+  if ($[15] !== children) {
+    t5 = children && /*#__PURE__*/jsxRuntime.jsx("span", {
       "data-component": "text",
       "data-content": children,
       children: children
     });
-    $[14] = children;
-    $[15] = t4;
+    $[15] = children;
+    $[16] = t5;
   } else {
-    t4 = $[15];
+    t5 = $[16];
   }
-  let t5;
-  if ($[16] !== counter || $[17] !== loadingCounters) {
-    t5 = counter !== undefined ? loadingCounters ? /*#__PURE__*/jsxRuntime.jsx("span", {
+  let t6;
+  if ($[17] !== counter || $[18] !== loadingCounters) {
+    t6 = counter !== undefined ? loadingCounters ? /*#__PURE__*/jsxRuntime.jsx("span", {
       "data-component": "counter",
       children: /*#__PURE__*/jsxRuntime.jsx(LoadingCounter, {})
     }) : /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -186,33 +232,35 @@ const UnderlineItem = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
         children: counter
       })
     }) : null;
-    $[16] = counter;
-    $[17] = loadingCounters;
-    $[18] = t5;
+    $[17] = counter;
+    $[18] = loadingCounters;
+    $[19] = t6;
   } else {
-    t5 = $[18];
+    t6 = $[19];
   }
-  let t6;
-  if ($[19] !== as || $[20] !== forwardedRef || $[21] !== rest || $[22] !== t2 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5) {
-    t6 = /*#__PURE__*/jsxRuntime.jsxs(BoxWithFallback.BoxWithFallback, {
+  let t7;
+  if ($[20] !== as || $[21] !== forwardedRef || $[22] !== rest || $[23] !== sxProp || $[24] !== t3 || $[25] !== t4 || $[26] !== t5 || $[27] !== t6) {
+    t7 = /*#__PURE__*/jsxRuntime.jsxs(BoxWithFallback.BoxWithFallback, {
       ref: forwardedRef,
       as: as,
-      className: t2,
+      sx: sxProp,
+      className: t3,
       ...rest,
-      children: [t3, t4, t5]
+      children: [t4, t5, t6]
     });
-    $[19] = as;
-    $[20] = forwardedRef;
-    $[21] = rest;
-    $[22] = t2;
-    $[23] = t3;
-    $[24] = t4;
-    $[25] = t5;
-    $[26] = t6;
+    $[20] = as;
+    $[21] = forwardedRef;
+    $[22] = rest;
+    $[23] = sxProp;
+    $[24] = t3;
+    $[25] = t4;
+    $[26] = t5;
+    $[27] = t6;
+    $[28] = t7;
   } else {
-    t6 = $[26];
+    t7 = $[28];
   }
-  return t6;
+  return t7;
 });
 
 exports.GAP = GAP;

package/lib/internal/utils/toggleStyledComponent.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+type CSSModulesProps = {
+    as?: string | React.ComponentType<any>;
+    sx?: React.CSSProperties;
+};
+/**
+ * Utility to toggle rendering a styled component or a "plain" component based
+ * on the provided `as` prop. When the provided feature flag is enabled, the
+ * props will be passed through to an element or component created with the `as`
+ * prop. When it is disabled, the provided styled component is used instead.
+ *
+ * @param flag - the feature flag that will control whether or not the provided
+ * styled component is used
+ * @param defaultAs - the default component to use when `as` is not provided
+ * @param Component - the styled component that will be used if the feature flag
+ * is disabled
+ */
+export declare function toggleStyledComponent<T, P extends CSSModulesProps>(flag: string, defaultAs: string | React.ComponentType<any>, Component: React.ComponentType<P>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+export {};
+//# sourceMappingURL=toggleStyledComponent.d.ts.map

package/lib/internal/utils/toggleStyledComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggleStyledComponent.d.ts","sourceRoot":"","sources":["../../../src/internal/utils/toggleStyledComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,KAAK,eAAe,GAAG;IAErB,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;IACtC,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CACzB,CAAA;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,CAAC,SAAS,eAAe,EAChE,IAAI,EAAE,MAAM,EAEZ,SAAS,EAAE,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EAC5C,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,sFAiBlC"}

package/lib-esm/ActionList/Description.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ItemContext } from './shared.js';
 import classes from './ActionList.module.css.js';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { clsx } from 'clsx';
 import { jsx } from 'react/jsx-runtime';
@@ -8,7 +9,7 @@ import Truncate from '../Truncate/Truncate.js';
 
 const Description = ({
   variant = 'inline',
-  sx,
+  sx = defaultSxProp,
   className,
   truncate,
   ...props

package/lib-esm/ActionList/Divider.js

@@ -1,5 +1,6 @@
 import { clsx } from 'clsx';
 import classes from './ActionList.module.css.js';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -7,7 +8,7 @@ import { jsx } from 'react/jsx-runtime';
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
 const Divider = ({
-  sx,
+  sx = defaultSxProp,
   className
 }) => {
   return /*#__PURE__*/jsx(BoxWithFallback, {

package/lib-esm/ActionList/Group.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useId } from '../hooks/useId.js';
 import { ListContext } from './shared.js';
 import { useSlots } from '../hooks/useSlots.js';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { invariant } from '../utils/invariant.js';
 import { clsx } from 'clsx';
 import classes from './ActionList.module.css.js';
@@ -13,6 +14,7 @@ const Heading = ({
   as: Component = 'h3',
   className,
   children,
+  sx = defaultSxProp,
   id,
   ...rest
 }) => {
@@ -22,6 +24,7 @@ const Heading = ({
     jsx(BoxWithFallback, {
       as: Component,
       className: className,
+      sx: sx,
       id: id,
       ...rest,
       children: children
@@ -52,6 +55,7 @@ const Group = ({
   role,
   className,
   'aria-label': ariaLabel,
+  sx = defaultSxProp,
   ...props
 }) => {
   var _slots$groupHeading;
@@ -78,6 +82,7 @@ const Group = ({
     as: "li",
     className: clsx(className, groupClasses.Group),
     role: listRole ? 'none' : undefined,
+    sx: sx,
     ...props,
     children: /*#__PURE__*/jsxs(GroupContext.Provider, {
       value: {
@@ -121,7 +126,7 @@ const GroupHeading = ({
   auxiliaryText,
   children,
   className,
-  sx,
+  sx = defaultSxProp,
   headingWrapElement = 'div',
   ...props
 }) => {

package/lib-esm/ActionList/Item.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useId } from '../hooks/useId.js';
 import { useSlots } from '../hooks/useSlots.js';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { ActionListContainerContext } from './ActionListContainerContext.js';
 import { Description } from './Description.js';
 import { GroupContext } from './Group.js';
@@ -54,7 +55,7 @@ const Item = /*#__PURE__*/React.forwardRef(({
   selected = undefined,
   active = false,
   onSelect: onSelectUser,
-  sx: sxProp,
+  sx: sxProp = defaultSxProp,
   id,
   role,
   loading,

package/lib-esm/ActionList/LinkItem.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Item } from './Item.js';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { jsx } from 'react/jsx-runtime';
 import Link from '../Link/Link.js';
 
 const LinkItem = /*#__PURE__*/React.forwardRef(({
-  sx,
+  sx = defaultSxProp,
   active,
   inactiveText,
   variant,

package/lib-esm/ActionList/List.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ActionListContainerContext } from './ActionListContainerContext.js';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { useSlots } from '../hooks/useSlots.js';
 import { Heading } from './Heading.js';
 import { useId } from '../hooks/useId.js';
@@ -17,6 +18,7 @@ const List = /*#__PURE__*/React.forwardRef(({
   selectionVariant,
   showDividers = false,
   role,
+  sx: sxProp = defaultSxProp,
   disableFocusZone = false,
   className,
   ...props
@@ -56,6 +58,7 @@ const List = /*#__PURE__*/React.forwardRef(({
     },
     children: [slots.heading, /*#__PURE__*/jsx(BoxWithFallback, {
       as: "ul",
+      sx: sxProp,
       className: clsx(classes.ActionList, className),
       role: listRole,
       "aria-labelledby": ariaLabelledBy,

package/lib-esm/ActionList/Visuals.js

@@ -3,34 +3,40 @@ import { AlertIcon } from '@primer/octicons-react';
 import { ItemContext } from './shared.js';
 import { clsx } from 'clsx';
 import classes from './ActionList.module.css.js';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx } from 'react/jsx-runtime';
 import { Tooltip } from '../TooltipV2/Tooltip.js';
 import StyledSpinner from '../Spinner/Spinner.js';
 
 const VisualContainer = ({
+  sx = defaultSxProp,
   className,
   ...props
 }) => {
   return /*#__PURE__*/jsx(BoxWithFallback, {
     as: "span",
     className: clsx(className, classes.VisualWrap),
+    sx: sx,
     ...props
   });
 };
 VisualContainer.displayName = "VisualContainer";
 const LeadingVisual = ({
+  sx = defaultSxProp,
   className,
   ...props
 }) => {
   return /*#__PURE__*/jsx(VisualContainer, {
     className: clsx(className, classes.LeadingVisual),
+    sx: sx,
     ...props,
     children: props.children
   });
 };
 LeadingVisual.displayName = "LeadingVisual";
 const TrailingVisual = ({
+  sx = defaultSxProp,
   className,
   ...props
 }) => {
@@ -39,6 +45,7 @@ const TrailingVisual = ({
   } = React.useContext(ItemContext);
   return /*#__PURE__*/jsx(VisualContainer, {
     className: clsx(className, classes.TrailingVisual),
+    sx: sx,
     id: trailingVisualId,
     ...props,
     children: props.children

package/lib-esm/Avatar/Avatar.js

@@ -2,6 +2,7 @@ import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import React from 'react';
 import { isResponsiveValue } from '../hooks/useResponsiveValue.js';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import classes from './Avatar.module.css.js';
 import { jsx } from 'react/jsx-runtime';
@@ -12,16 +13,16 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(t0, ref) {
   let className;
   let rest;
   let style;
-  let sxProp;
   let t1;
   let t2;
   let t3;
+  let t4;
   if ($[0] !== t0) {
     ({
       alt: t1,
       size: t2,
       square: t3,
-      sx: sxProp,
+      sx: t4,
       className,
       style,
       ...rest
@@ -30,31 +31,32 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(t0, ref) {
     $[1] = className;
     $[2] = rest;
     $[3] = style;
-    $[4] = sxProp;
-    $[5] = t1;
-    $[6] = t2;
-    $[7] = t3;
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
   } else {
     className = $[1];
     rest = $[2];
     style = $[3];
-    sxProp = $[4];
-    t1 = $[5];
-    t2 = $[6];
-    t3 = $[7];
+    t1 = $[4];
+    t2 = $[5];
+    t3 = $[6];
+    t4 = $[7];
   }
   const alt = t1 === undefined ? "" : t1;
   const size = t2 === undefined ? DEFAULT_AVATAR_SIZE : t2;
   const square = t3 === undefined ? false : t3;
-  let t4;
+  const sxProp = t4 === undefined ? defaultSxProp : t4;
+  let t5;
   if ($[8] !== size) {
-    t4 = isResponsiveValue(size);
+    t5 = isResponsiveValue(size);
     $[8] = size;
-    $[9] = t4;
+    $[9] = t5;
   } else {
-    t4 = $[9];
+    t5 = $[9];
   }
-  const isResponsive = t4;
+  const isResponsive = t5;
   let cssSizeVars;
   if ($[10] !== isResponsive || $[11] !== size) {
     cssSizeVars = {};
@@ -71,43 +73,43 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(t0, ref) {
   } else {
     cssSizeVars = $[12];
   }
-  let t5;
+  let t6;
   if ($[13] !== className) {
-    t5 = clsx(className, classes.Avatar);
+    t6 = clsx(className, classes.Avatar);
     $[13] = className;
-    $[14] = t5;
+    $[14] = t6;
   } else {
-    t5 = $[14];
+    t6 = $[14];
   }
-  const t6 = isResponsive ? "" : undefined;
-  const t7 = square ? "" : undefined;
-  const t8 = isResponsive ? undefined : size;
+  const t7 = isResponsive ? "" : undefined;
+  const t8 = square ? "" : undefined;
   const t9 = isResponsive ? undefined : size;
-  let t10;
+  const t10 = isResponsive ? undefined : size;
+  let t11;
   if ($[15] !== cssSizeVars || $[16] !== style) {
-    t10 = style ? {
+    t11 = style ? {
       ...cssSizeVars,
       ...style
     } : cssSizeVars;
     $[15] = cssSizeVars;
     $[16] = style;
-    $[17] = t10;
+    $[17] = t11;
   } else {
-    t10 = $[17];
+    t11 = $[17];
   }
-  let t11;
-  if ($[18] !== alt || $[19] !== ref || $[20] !== rest || $[21] !== sxProp || $[22] !== t10 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9) {
-    t11 = /*#__PURE__*/jsx(BoxWithFallback, {
+  let t12;
+  if ($[18] !== alt || $[19] !== ref || $[20] !== rest || $[21] !== sxProp || $[22] !== t10 || $[23] !== t11 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9) {
+    t12 = /*#__PURE__*/jsx(BoxWithFallback, {
       as: "img",
       "data-component": "Avatar",
-      className: t5,
+      className: t6,
       ref: ref,
       alt: alt,
-      "data-responsive": t6,
-      "data-square": t7,
-      width: t8,
-      height: t9,
-      style: t10,
+      "data-responsive": t7,
+      "data-square": t8,
+      width: t9,
+      height: t10,
+      style: t11,
       sx: sxProp,
       ...rest
     });
@@ -116,16 +118,16 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(t0, ref) {
     $[20] = rest;
     $[21] = sxProp;
     $[22] = t10;
-    $[23] = t5;
+    $[23] = t11;
     $[24] = t6;
     $[25] = t7;
     $[26] = t8;
     $[27] = t9;
-    $[28] = t11;
+    $[28] = t12;
   } else {
-    t11 = $[28];
+    t12 = $[28];
   }
-  return t11;
+  return t12;
 });
 if (process.env.NODE_ENV !== "production") {
   Avatar.displayName = 'Avatar';

package/lib-esm/AvatarPair/AvatarPair.js

@@ -1,9 +1,9 @@
 import { c } from 'react-compiler-runtime';
 import React from 'react';
+import { SkeletonAvatar } from '../experimental/Skeleton/SkeletonAvatar.js';
 import classes from './AvatarPair.module.css.js';
 import { clsx } from 'clsx';
 import { jsx } from 'react/jsx-runtime';
-import { SkeletonAvatar } from '../SkeletonAvatar/SkeletonAvatar.js';
 import Avatar from '../Avatar/Avatar.js';
 
 const AvatarPair = t0 => {

package/lib-esm/AvatarStack/AvatarStack.d.ts

@@ -9,6 +9,6 @@ export type AvatarStackProps = {
     children: React.ReactNode;
     style?: React.CSSProperties;
 } & SxProp;
-declare const AvatarStack: ({ children, alignRight, disableExpand, size, className, style, sx: sxProp }: AvatarStackProps) => React.JSX.Element;
+declare const AvatarStack: ({ children, alignRight, disableExpand, size, className, style, sx: sxProp, }: AvatarStackProps) => React.JSX.Element;
 export default AvatarStack;
 //# sourceMappingURL=AvatarStack.d.ts.map

package/lib-esm/AvatarStack/AvatarStack.js

@@ -2,6 +2,7 @@ import { clsx } from 'clsx';
 import React, { useState, useRef, useEffect } from 'react';
 import { DEFAULT_AVATAR_SIZE } from '../Avatar/Avatar.js';
 import { isResponsiveValue } from '../hooks/useResponsiveValue.js';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import classes from './AvatarStack.module.css.js';
 import { hasInteractiveNodes } from '../internal/utils/hasInteractiveNodes.js';
 import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
@@ -40,7 +41,7 @@ const AvatarStack = ({
   size,
   className,
   style,
-  sx: sxProp
+  sx: sxProp = defaultSxProp
 }) => {
   const [hasInteractiveChildren, setHasInteractiveChildren] = useState(false);
   const stackContainer = useRef(null);