@wordpress/components 32.3.1-next.v.202602241322.0 → 32.4.0

package/src/dropdown/types.ts

@@ -1,11 +1,5 @@
-/**
- * External dependencies
- */
+import type { useFocusOnMount } from '@wordpress/compose';
 import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
-
-/**
- * Internal dependencies
- */
 import type Popover from '../popover';
 import type { PopoverProps } from '../popover/types';
 
@@ -42,16 +36,17 @@ export type DropdownProps = {
 	 */
 	expandOnMobile?: boolean;
 	/**
-	 * By default, the first tabbable element in the popover will receive focus
-	 * when it mounts. This is the same as setting this prop to "firstElement".
-	 * Specifying a true value will focus the container instead.
-	 * Specifying a false value disables the focus handling entirely
-	 * (this should only be done when an appropriately accessible
-	 * substitute behavior exists).
+	 * Determines focus behavior when the dialog mounts.
+	 *
+	 * - `"firstElement"` focuses the first tabbable element within.
+	 * - `"firstInputElement"` focuses the first value control within.
+	 * - `true` focuses the element itself.
+	 * - `false` does nothing and _should not be used unless an accessible
+	 *    substitute behavior is implemented_.
 	 *
 	 * @default 'firstElement'
 	 */
-	focusOnMount?: 'firstElement' | boolean;
+	focusOnMount?: useFocusOnMount.Mode;
 	/**
 	 * Set this to customize the text that is shown in the dropdown's header
 	 * when it is fullscreen on mobile.

package/src/form-token-field/style.scss

@@ -25,6 +25,7 @@
 		flex: 1;
 		font-family: inherit;
 		font-size: 16px;
+		line-height: 1; // Override forms.css styles
 		width: 100%;
 		max-width: 100%;
 		margin-left: 4px;

package/src/guide/style.scss

@@ -6,9 +6,11 @@
 
 .components-guide {
 	$image-height: 300px;
+	// TODO: Replace with a --wpds-dimension-surface-width-* token.
 	$image-width: 320px;
 
 	@include break-small() {
+		// TODO: Replace with a --wpds-dimension-surface-width-* token.
 		width: 600px;
 	}
 
@@ -86,6 +88,7 @@
 
 .components-modal__frame.components-guide {
 	border: none;
+	// TODO: Replace with a --wpds-dimension-surface-width-* token.
 	min-width: 312px;
 	max-height: 575px;
 

package/src/menu/radio-item.tsx

@@ -8,6 +8,7 @@ import * as Ariakit from '@ariakit/react';
  */
 import { forwardRef, useContext } from '@wordpress/element';
 import { Icon } from '@wordpress/icons';
+import { SVG, Circle } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -16,7 +17,6 @@ import type { WordPressComponentProps } from '../context';
 import { Context } from './context';
 import type { RadioItemProps } from './types';
 import * as Styled from './styles';
-import { SVG, Circle } from '@wordpress/primitives';
 
 const radioCheck = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

package/src/modal/style.scss

@@ -65,7 +65,7 @@
 		border-radius: $radius-large;
 		margin: auto;
 		width: auto;
-		min-width: $modal-min-width;
+		min-width: var(--wpds-dimension-surface-width-sm);
 		max-width: calc(100% - #{$grid-unit-20 * 2});
 		max-height: calc(100% - #{$header-height * 2});
 
@@ -88,17 +88,14 @@
 			width: 100%;
 		}
 
-		// The following widths were selected to align with existing baselines
-		// found elsewhere in the editor.
-		// See https://github.com/WordPress/gutenberg/pull/54471#issuecomment-1723818809
 		&.has-size-small {
-			max-width: $modal-width-small;
+			max-width: var(--wpds-dimension-surface-width-md);
 		}
 		&.has-size-medium {
-			max-width: $modal-width-medium;
+			max-width: var(--wpds-dimension-surface-width-lg);
 		}
 		&.has-size-large {
-			max-width: $modal-width-large;
+			max-width: var(--wpds-dimension-surface-width-2xl);
 		}
 
 	}

package/src/modal/types.ts

@@ -51,14 +51,18 @@ export type ModalProps = {
 	 */
 	contentLabel?: string;
 	/**
-	 * If this property is true, it will focus the first tabbable element
-	 * rendered in the modal.
+	 * Determines focus behavior when the modal opens.
+	 *
+	 * - `"firstElement"` focuses the first tabbable element within.
+	 * - `"firstInputElement"` focuses the first value control within.
+	 * - `"firstContentElement"` focuses the first tabbable element within the modal’s content element.
+	 * - `true` focuses the element itself.
+	 * - `false` does nothing and _should not be used unless an accessible
+	 *    substitute behavior is implemented_.
 	 *
 	 * @default true
 	 */
-	focusOnMount?:
-		| Parameters< typeof useFocusOnMount >[ 0 ]
-		| 'firstContentElement';
+	focusOnMount?: useFocusOnMount.Mode | 'firstContentElement';
 	/**
 	 * Elements that are injected into the modal header to the left of the close button (if rendered).
 	 * Hidden if `__experimentalHideHeader` is `true`.

package/src/navigation/stories/index.story.tsx

@@ -26,7 +26,7 @@ import './style.css';
  * This component is deprecated. Consider using `Navigator` instead.
  */
 const meta: Meta< typeof Navigation > = {
-	title: 'Components (Deprecated)/Navigation',
+	title: 'Components/Deprecated/Navigation',
 	id: 'components-navigation',
 	component: Navigation,
 	subcomponents: {

package/src/notice/test/__snapshots__/index.tsx.snap

@@ -9,7 +9,7 @@ exports[`Notice should match snapshot 1`] = `
       class="components-visually-hidden css-1ragr82-PolymorphicDiv emotion-0"
       data-wp-c16t="true"
       data-wp-component="VisuallyHidden"
-      style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+      style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal; word-break: normal;"
     >
       Notice
     </div>

package/src/popover/types.ts

@@ -1,8 +1,6 @@
-/**
- * External dependencies
- */
-import type { ReactNode, MutableRefObject, SyntheticEvent } from 'react';
 import type { Placement } from '@floating-ui/react-dom';
+import type { useFocusOnMount } from '@wordpress/compose';
+import type { MutableRefObject, ReactNode, SyntheticEvent } from 'react';
 
 type PositionYAxis = 'top' | 'middle' | 'bottom';
 type PositionXAxis = 'left' | 'center' | 'right';
@@ -75,15 +73,17 @@ export type PopoverProps = {
 	 */
 	constrainTabbing?: boolean;
 	/**
-	 * By default, the _first tabbable element_ in the popover will receive focus
-	 * when it mounts. This is the same as setting this prop to `"firstElement"`.
-	 * Specifying a `false` value disables the focus handling entirely (this
-	 * should only be done when an appropriately accessible substitute behavior
-	 * exists).
+	 * Determines focus behavior when the popover mounts.
+	 *
+	 * - `"firstElement"` focuses the first tabbable element within.
+	 * - `"firstInputElement"` focuses the first value control within.
+	 * - `true` focuses the element itself.
+	 * - `false` does nothing and _should not be used unless an accessible
+	 *    substitute behavior is implemented_.
 	 *
 	 * @default 'firstElement'
 	 */
-	focusOnMount?: 'firstElement' | boolean;
+	focusOnMount?: useFocusOnMount.Mode;
 	/**
 	 * A callback invoked when the focus leaves the opened popover. This should
 	 * only be provided in advanced use-cases when a popover should close under

package/src/private-apis.ts

@@ -14,8 +14,6 @@ import { Tabs } from './tabs';
 import { kebabCase, normalizeTextString } from './utils/strings';
 import { withIgnoreIMEEvents } from './utils/with-ignore-ime-events';
 import { lock } from './lock-unlock';
-import Avatar from './avatar';
-import AvatarGroup from './avatar-group';
 import Badge from './badge';
 
 import { DateCalendar, DateRangeCalendar, TZDate } from './calendar';
@@ -36,8 +34,6 @@ import { ValidatedFormTokenField } from './validated-form-controls/components/fo
 export const privateApis = {};
 lock( privateApis, {
 	__experimentalPopoverLegacyPositionToPlacement,
-	Avatar,
-	AvatarGroup,
 	ComponentsContext,
 	Tabs,
 	Theme,

package/src/radio-group/stories/index.story.tsx

@@ -16,7 +16,7 @@ import { RadioGroup } from '..';
 import { Radio } from '../radio';
 
 const meta: Meta< typeof RadioGroup > = {
-	title: 'Components (Deprecated)/RadioGroup',
+	title: 'Components/Deprecated/RadioGroup',
 	id: 'components-radiogroup',
 	component: RadioGroup,
 	subcomponents: { Radio },

package/src/select-control/styles/select-control-styles.ts

@@ -162,6 +162,7 @@ export const Select = styled.select< SelectProps >`
 		cursor: inherit;
 		display: block;
 		font-family: inherit;
+		line-height: 1.3; // Override forms.css styles, large enough value to prevent descender clipping without affecting height
 		margin: 0;
 		width: 100%;
 		max-width: none;

package/src/snackbar/style.scss

@@ -14,6 +14,7 @@
 	color: $white;
 	padding: $grid-unit-15 ($grid-unit-05 * 5);
 	width: 100%;
+	// TODO: Replace with a --wpds-dimension-surface-width-* token.
 	max-width: 600px;
 	box-sizing: border-box;
 	cursor: pointer;

package/src/style.scss

@@ -1,8 +1,6 @@
 @use "@wordpress/base-styles/mixins" as *;
 @use "./animate/style.scss" as *;
 @use "./autocomplete/style.scss" as *;
-@use "./avatar/styles.scss" as *;
-@use "./avatar-group/styles.scss" as *;
 @use "./badge/styles.scss" as *;
 @use "./button-group/style.scss" as *;
 @use "./button/style.scss" as *;

package/src/tools-panel/types.ts

@@ -20,7 +20,10 @@ export type ToolsPanelProps = {
 	/**
 	 * The dropdown menu props to configure the panel's `DropdownMenu`.
 	 */
-	dropdownMenuProps?: React.ComponentProps< typeof DropdownMenu >;
+	dropdownMenuProps?: Omit<
+		React.ComponentProps< typeof DropdownMenu >,
+		'label'
+	>;
 	/**
 	 * Flags that the items in this ToolsPanel will be contained within an inner
 	 * wrapper element allowing the panel to lay them out accordingly.

package/src/tooltip/README.md

@@ -51,7 +51,7 @@ Option to hide the tooltip when the anchor is clicked.
 Used to specify the tooltip's placement with respect to its anchor.
 
 -   Required: No
--   Default: `'bottom'`
+-   Default: `'top'`
 
 #### `position`: `string`
 
@@ -60,7 +60,7 @@ _Note: use the `placement` prop instead when possible._
 Legacy way to specify the popover's position with respect to its anchor. Specify y- and x-axis as a space-separated string. Supports `'top'`, `'middle'`, `'bottom'` y axis, and `'left'`, `'center'`, `'right'` x axis.
 
 -   Required: No
--   Default: `'bottom'`
+-   Default: `'top'`
 
 #### `shortcut`: `string` | `object`
 

package/src/tooltip/index.tsx

@@ -58,7 +58,7 @@ function UnforwardedTooltip(
 	// Compute tooltip's placement:
 	// - give priority to `placement` prop, if defined
 	// - otherwise, compute it from the legacy `position` prop (if defined)
-	// - finally, fallback to the default placement: 'bottom'
+	// - finally, fallback to the default placement: 'top'
 	let computedPlacement;
 	if ( placement !== undefined ) {
 		computedPlacement = placement;
@@ -69,7 +69,7 @@ function UnforwardedTooltip(
 			alternative: '`placement` prop',
 		} );
 	}
-	computedPlacement = computedPlacement || 'bottom';
+	computedPlacement = computedPlacement || 'top';
 
 	const tooltipStore = Ariakit.useTooltipStore( {
 		placement: computedPlacement,

package/src/tooltip/types.ts

@@ -35,7 +35,7 @@ export type TooltipProps = {
 	/**
 	 * Where the tooltip should be positioned relative to its parent.
 	 *
-	 * @default bottom
+	 * @default top
 	 */
 	placement?: Placement;
 	/**
@@ -47,7 +47,7 @@ export type TooltipProps = {
 	 * `"bottom"` y axis, and `"left"`, `"center"`, `"right"` x axis.
 	 *
 	 * @deprecated
-	 * @default bottom
+	 * @default top
 	 */
 	position?: PopoverProps[ 'position' ];
 	/**

package/src/visually-hidden/styles.ts

@@ -15,4 +15,5 @@ export const visuallyHidden: CSSProperties = {
 	position: 'absolute',
 	width: '1px',
 	wordWrap: 'normal',
+	wordBreak: 'normal',
 };

package/src/visually-hidden/test/__snapshots__/index.tsx.snap

@@ -5,7 +5,7 @@ exports[`VisuallyHidden should render correctly 1`] = `
   class="components-visually-hidden css-1ragr82-PolymorphicDiv emotion-0"
   data-wp-c16t="true"
   data-wp-component="VisuallyHidden"
-  style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+  style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal; word-break: normal;"
 >
   This is hidden
 </div>

package/build/avatar/component.cjs

@@ -1,99 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/components/src/avatar/component.tsx
-var component_exports = {};
-__export(component_exports, {
-  default: () => component_default
-});
-module.exports = __toCommonJS(component_exports);
-var import_clsx = __toESM(require("clsx"));
-var import_icon = __toESM(require("../icon/index.cjs"));
-var import_tooltip = __toESM(require("../tooltip/index.cjs"));
-var import_jsx_runtime = require("react/jsx-runtime");
-function Avatar({
-  className,
-  src,
-  name,
-  label,
-  badge = false,
-  size = "default",
-  borderColor,
-  status,
-  statusIndicator,
-  style,
-  ...props
-}) {
-  const showBadge = badge && !!name;
-  const initials = name ? name.split(/\s+/).slice(0, 2).map((word) => word[0]).join("").toUpperCase() : void 0;
-  const customProperties = {
-    ...style,
-    ...src ? {
-      "--components-avatar-url": `url(${src})`
-    } : {},
-    ...borderColor ? {
-      "--components-avatar-outline-color": borderColor
-    } : {}
-  };
-  const avatar = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-    className: (0, import_clsx.default)("components-avatar", className, {
-      "has-avatar-border-color": !!borderColor,
-      "has-src": !!src,
-      "has-badge": showBadge,
-      "is-small": size === "small",
-      "has-status": !!status,
-      [`is-${status}`]: !!status
-    }),
-    style: customProperties,
-    role: "img",
-    "aria-label": name,
-    ...props,
-    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-      className: "components-avatar__image",
-      children: [!src && initials, !!status && !!statusIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-        className: "components-avatar__status-indicator",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.default, {
-          icon: statusIndicator
-        })
-      })]
-    }), showBadge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-      className: "components-avatar__name",
-      children: label || name
-    })]
-  });
-  if (name && (!showBadge || label)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.default, {
-      text: name,
-      children: avatar
-    });
-  }
-  return avatar;
-}
-var component_default = Avatar;
-//# sourceMappingURL=component.cjs.map

package/build/avatar/component.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/avatar/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\nimport Tooltip from '../tooltip';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction Avatar({\n  className,\n  src,\n  name,\n  label,\n  badge = false,\n  size = 'default',\n  borderColor,\n  status,\n  statusIndicator,\n  style,\n  ...props\n}) {\n  const showBadge = badge && !!name;\n  const initials = name ? name.split(/\\s+/).slice(0, 2).map(word => word[0]).join('').toUpperCase() : undefined;\n  const customProperties = {\n    ...style,\n    ...(src ? {\n      '--components-avatar-url': `url(${src})`\n    } : {}),\n    ...(borderColor ? {\n      '--components-avatar-outline-color': borderColor\n    } : {})\n  };\n  const avatar = /*#__PURE__*/_jsxs(\"div\", {\n    className: clsx('components-avatar', className, {\n      'has-avatar-border-color': !!borderColor,\n      'has-src': !!src,\n      'has-badge': showBadge,\n      'is-small': size === 'small',\n      'has-status': !!status,\n      [`is-${status}`]: !!status\n    }),\n    style: customProperties,\n    role: \"img\",\n    \"aria-label\": name,\n    ...props,\n    children: [/*#__PURE__*/_jsxs(\"span\", {\n      className: \"components-avatar__image\",\n      children: [!src && initials, !!status && !!statusIndicator && /*#__PURE__*/_jsx(\"span\", {\n        className: \"components-avatar__status-indicator\",\n        children: /*#__PURE__*/_jsx(Icon, {\n          icon: statusIndicator\n        })\n      })]\n    }), showBadge && /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-avatar__name\",\n      children: label || name\n    })]\n  });\n  if (name && (!showBadge || label)) {\n    return /*#__PURE__*/_jsx(Tooltip, {\n      text: name,\n      children: avatar\n    });\n  }\n  return avatar;\n}\nexport default Avatar;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAAiB;AACjB,qBAAoB;AACpB,yBAA2C;AAC3C,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,YAAY,SAAS,CAAC,CAAC;AAC7B,QAAM,WAAW,OAAO,KAAK,MAAM,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE,IAAI,UAAQ,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,IAAI;AACpG,QAAM,mBAAmB;AAAA,IACvB,GAAG;AAAA,IACH,GAAI,MAAM;AAAA,MACR,2BAA2B,OAAO,GAAG;AAAA,IACvC,IAAI,CAAC;AAAA,IACL,GAAI,cAAc;AAAA,MAChB,qCAAqC;AAAA,IACvC,IAAI,CAAC;AAAA,EACP;AACA,QAAM,SAAsB,uCAAAA,MAAM,OAAO;AAAA,IACvC,eAAW,YAAAC,SAAK,qBAAqB,WAAW;AAAA,MAC9C,2BAA2B,CAAC,CAAC;AAAA,MAC7B,WAAW,CAAC,CAAC;AAAA,MACb,aAAa;AAAA,MACb,YAAY,SAAS;AAAA,MACrB,cAAc,CAAC,CAAC;AAAA,MAChB,CAAC,MAAM,MAAM,EAAE,GAAG,CAAC,CAAC;AAAA,IACtB,CAAC;AAAA,IACD,OAAO;AAAA,IACP,MAAM;AAAA,IACN,cAAc;AAAA,IACd,GAAG;AAAA,IACH,UAAU,CAAc,uCAAAD,MAAM,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,UAAU,CAAC,CAAC,OAAO,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC,mBAAgC,uCAAAE,KAAK,QAAQ;AAAA,QACtF,WAAW;AAAA,QACX,UAAuB,uCAAAA,KAAK,YAAAC,SAAM;AAAA,UAChC,MAAM;AAAA,QACR,CAAC;AAAA,MACH,CAAC,CAAC;AAAA,IACJ,CAAC,GAAG,aAA0B,uCAAAD,KAAK,QAAQ;AAAA,MACzC,WAAW;AAAA,MACX,UAAU,SAAS;AAAA,IACrB,CAAC,CAAC;AAAA,EACJ,CAAC;AACD,MAAI,SAAS,CAAC,aAAa,QAAQ;AACjC,WAAoB,uCAAAA,KAAK,eAAAE,SAAS;AAAA,MAChC,MAAM;AAAA,MACN,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AACA,SAAO;AACT;AACA,IAAO,oBAAQ;",
-  "names": ["_jsxs", "clsx", "_jsx", "Icon", "Tooltip"]
-}

package/build/avatar/index.cjs

@@ -1,37 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/components/src/avatar/index.ts
-var avatar_exports = {};
-__export(avatar_exports, {
-  default: () => import_component.default
-});
-module.exports = __toCommonJS(avatar_exports);
-var import_component = __toESM(require("./component.cjs"));
-//# sourceMappingURL=index.cjs.map

package/build/avatar/index.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/avatar/index.ts"],
-  "sourcesContent": ["export { default } from './component';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAwB;",
-  "names": []
-}

package/build/avatar/types.cjs

@@ -1,19 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/components/src/avatar/types.ts
-var types_exports = {};
-module.exports = __toCommonJS(types_exports);
-//# sourceMappingURL=types.cjs.map

package/build/avatar/types.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/avatar/types.ts"],
-  "sourcesContent": ["export {};"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
-  "names": []
-}

package/build/avatar-group/component.cjs

@@ -1,60 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/components/src/avatar-group/component.tsx
-var component_exports = {};
-__export(component_exports, {
-  default: () => component_default
-});
-module.exports = __toCommonJS(component_exports);
-var import_clsx = __toESM(require("clsx"));
-var import_element = require("@wordpress/element");
-var import_jsx_runtime = require("react/jsx-runtime");
-function AvatarGroup({
-  className,
-  max = 3,
-  children,
-  ...props
-}) {
-  const childArray = import_element.Children.toArray(children);
-  const visible = childArray.slice(0, max);
-  const overflowCount = childArray.length - max;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-    role: "group",
-    className: (0, import_clsx.default)("components-avatar-group", className),
-    ...props,
-    children: [visible, overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-      className: "components-avatar-group__overflow",
-      "aria-label": `${overflowCount} more`,
-      children: `+${overflowCount}`
-    })]
-  });
-}
-var component_default = AvatarGroup;
-//# sourceMappingURL=component.cjs.map

package/build/avatar-group/component.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/avatar-group/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Children } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction AvatarGroup({\n  className,\n  max = 3,\n  children,\n  ...props\n}) {\n  const childArray = Children.toArray(children);\n  const visible = childArray.slice(0, max);\n  const overflowCount = childArray.length - max;\n  return /*#__PURE__*/_jsxs(\"div\", {\n    role: \"group\",\n    className: clsx('components-avatar-group', className),\n    ...props,\n    children: [visible, overflowCount > 0 && /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-avatar-group__overflow\",\n      \"aria-label\": `${overflowCount} more`,\n      children: `+${overflowCount}`\n    })]\n  });\n}\nexport default AvatarGroup;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAAyB;AAKzB,yBAA2C;AAC3C,SAAS,YAAY;AAAA,EACnB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,aAAa,wBAAS,QAAQ,QAAQ;AAC5C,QAAM,UAAU,WAAW,MAAM,GAAG,GAAG;AACvC,QAAM,gBAAgB,WAAW,SAAS;AAC1C,SAAoB,uCAAAA,MAAM,OAAO;AAAA,IAC/B,MAAM;AAAA,IACN,eAAW,YAAAC,SAAK,2BAA2B,SAAS;AAAA,IACpD,GAAG;AAAA,IACH,UAAU,CAAC,SAAS,gBAAgB,KAAkB,uCAAAC,KAAK,QAAQ;AAAA,MACjE,WAAW;AAAA,MACX,cAAc,GAAG,aAAa;AAAA,MAC9B,UAAU,IAAI,aAAa;AAAA,IAC7B,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,oBAAQ;",
-  "names": ["_jsxs", "clsx", "_jsx"]
-}

package/build/avatar-group/index.cjs

@@ -1,37 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/components/src/avatar-group/index.ts
-var avatar_group_exports = {};
-__export(avatar_group_exports, {
-  default: () => import_component.default
-});
-module.exports = __toCommonJS(avatar_group_exports);
-var import_component = __toESM(require("./component.cjs"));
-//# sourceMappingURL=index.cjs.map

package/build/avatar-group/index.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/avatar-group/index.ts"],
-  "sourcesContent": ["export { default } from './component';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAwB;",
-  "names": []
-}