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

package/build/avatar-group/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-group/types.ts
-var types_exports = {};
-module.exports = __toCommonJS(types_exports);
-//# sourceMappingURL=types.cjs.map

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

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

package/build-module/avatar/component.mjs

@@ -1,68 +0,0 @@
-// packages/components/src/avatar/component.tsx
-import clsx from "clsx";
-import Icon from "../icon/index.mjs";
-import Tooltip from "../tooltip/index.mjs";
-import { jsx as _jsx, jsxs as _jsxs } from "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__ */ _jsxs("div", {
-    className: clsx("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__ */ _jsxs("span", {
-      className: "components-avatar__image",
-      children: [!src && initials, !!status && !!statusIndicator && /* @__PURE__ */ _jsx("span", {
-        className: "components-avatar__status-indicator",
-        children: /* @__PURE__ */ _jsx(Icon, {
-          icon: statusIndicator
-        })
-      })]
-    }), showBadge && /* @__PURE__ */ _jsx("span", {
-      className: "components-avatar__name",
-      children: label || name
-    })]
-  });
-  if (name && (!showBadge || label)) {
-    return /* @__PURE__ */ _jsx(Tooltip, {
-      text: name,
-      children: avatar
-    });
-  }
-  return avatar;
-}
-var component_default = Avatar;
-export {
-  component_default as default
-};
-//# sourceMappingURL=component.mjs.map

package/build-module/avatar/component.mjs.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": ";AAGA,OAAO,UAAU;AAKjB,OAAO,UAAU;AACjB,OAAO,aAAa;AACpB,SAAS,OAAO,MAAM,QAAQ,aAAa;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,sBAAM,OAAO;AAAA,IACvC,WAAW,KAAK,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,sBAAM,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,UAAU,CAAC,CAAC,OAAO,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC,mBAAgC,qBAAK,QAAQ;AAAA,QACtF,WAAW;AAAA,QACX,UAAuB,qBAAK,MAAM;AAAA,UAChC,MAAM;AAAA,QACR,CAAC;AAAA,MACH,CAAC,CAAC;AAAA,IACJ,CAAC,GAAG,aAA0B,qBAAK,QAAQ;AAAA,MACzC,WAAW;AAAA,MACX,UAAU,SAAS;AAAA,IACrB,CAAC,CAAC;AAAA,EACJ,CAAC;AACD,MAAI,SAAS,CAAC,aAAa,QAAQ;AACjC,WAAoB,qBAAK,SAAS;AAAA,MAChC,MAAM;AAAA,MACN,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AACA,SAAO;AACT;AACA,IAAO,oBAAQ;",
-  "names": []
-}

package/build-module/avatar/index.mjs

@@ -1,6 +0,0 @@
-// packages/components/src/avatar/index.ts
-import { default as default2 } from "./component.mjs";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.mjs.map

package/build-module/avatar/index.mjs.map

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

package/build-module/avatar/types.mjs

@@ -1 +0,0 @@
-//# sourceMappingURL=types.mjs.map

package/build-module/avatar/types.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/build-module/avatar-group/component.mjs

@@ -1,29 +0,0 @@
-// packages/components/src/avatar-group/component.tsx
-import clsx from "clsx";
-import { Children } from "@wordpress/element";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function AvatarGroup({
-  className,
-  max = 3,
-  children,
-  ...props
-}) {
-  const childArray = Children.toArray(children);
-  const visible = childArray.slice(0, max);
-  const overflowCount = childArray.length - max;
-  return /* @__PURE__ */ _jsxs("div", {
-    role: "group",
-    className: clsx("components-avatar-group", className),
-    ...props,
-    children: [visible, overflowCount > 0 && /* @__PURE__ */ _jsx("span", {
-      className: "components-avatar-group__overflow",
-      "aria-label": `${overflowCount} more`,
-      children: `+${overflowCount}`
-    })]
-  });
-}
-var component_default = AvatarGroup;
-export {
-  component_default as default
-};
-//# sourceMappingURL=component.mjs.map

package/build-module/avatar-group/component.mjs.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": ";AAGA,OAAO,UAAU;AAKjB,SAAS,gBAAgB;AAKzB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,YAAY;AAAA,EACnB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,aAAa,SAAS,QAAQ,QAAQ;AAC5C,QAAM,UAAU,WAAW,MAAM,GAAG,GAAG;AACvC,QAAM,gBAAgB,WAAW,SAAS;AAC1C,SAAoB,sBAAM,OAAO;AAAA,IAC/B,MAAM;AAAA,IACN,WAAW,KAAK,2BAA2B,SAAS;AAAA,IACpD,GAAG;AAAA,IACH,UAAU,CAAC,SAAS,gBAAgB,KAAkB,qBAAK,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": []
-}

package/build-module/avatar-group/index.mjs

@@ -1,6 +0,0 @@
-// packages/components/src/avatar-group/index.ts
-import { default as default2 } from "./component.mjs";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.mjs.map

package/build-module/avatar-group/index.mjs.map

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

package/build-module/avatar-group/types.mjs

@@ -1 +0,0 @@
-//# sourceMappingURL=types.mjs.map

package/build-module/avatar-group/types.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/build-types/avatar/component.d.ts

@@ -1,5 +0,0 @@
-import type { AvatarProps } from './types';
-import type { WordPressComponentProps } from '../context';
-declare function Avatar({ className, src, name, label, badge, size, borderColor, status, statusIndicator, style, ...props }: WordPressComponentProps<AvatarProps, 'div', false>): import("react").JSX.Element;
-export default Avatar;
-//# sourceMappingURL=component.d.ts.map

package/build-types/avatar/component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/avatar/component.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,iBAAS,MAAM,CAAE,EAChB,SAAS,EACT,GAAG,EACH,IAAI,EACJ,KAAK,EACL,KAAa,EACb,IAAgB,EAChB,WAAW,EACX,MAAM,EACN,eAAe,EACf,KAAK,EACL,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,WAAW,EAAE,KAAK,EAAE,KAAK,CAAE,+BAsDtD;AAED,eAAe,MAAM,CAAC"}

package/build-types/avatar/index.d.ts

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

package/build-types/avatar/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/build-types/avatar/types.d.ts

@@ -1,59 +0,0 @@
-import type { IconType } from '../icon';
-export type AvatarProps = {
-    /**
-     * URL of the avatar image.
-     *
-     * When not provided, initials derived from `name` are shown.
-     */
-    src?: string;
-    /**
-     * Name of the user. Used as an accessible label and to generate
-     * initials when no image is provided.
-     */
-    name?: string;
-    /**
-     * Visible text shown in the hover badge. When not provided, `name`
-     * is used instead. Use this to provide contextual labels like "You"
-     * without affecting the accessible name or initials.
-     */
-    label?: string;
-    /**
-     * Whether to show the hover-expand badge that reveals the user's
-     * name (or `label`) on hover. Requires `name` to be set.
-     *
-     * @default false
-     */
-    badge?: boolean;
-    /**
-     * Size of the avatar.
-     *
-     * - `'default'`: 32px
-     * - `'small'`: 24px
-     *
-     * @default 'default'
-     */
-    size?: 'default' | 'small';
-    /**
-     * CSS color value for an accent border ring around the avatar.
-     *
-     * When not provided, no border is rendered and the hover badge
-     * and avatar status uses the admin theme color as its background.
-     */
-    borderColor?: string;
-    /**
-     * A status string applied to the avatar. When set, the image is
-     * dimmed to indicate a non-default state. A corresponding
-     * `is-{status}` class is added for custom styling.
-     */
-    status?: string;
-    /**
-     * An icon or custom component rendered as a centered overlay on the
-     * avatar image. Only visible when `status` is set.
-     *
-     * Accepts any value supported by the `Icon` component: an icon from
-     * `@wordpress/icons`, a Dashicon name string, a component, or a
-     * JSX element.
-     */
-    statusIndicator?: IconType | null;
-};
-//# sourceMappingURL=types.d.ts.map

package/build-types/avatar/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/avatar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,MAAM,WAAW,GAAG;IACzB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAClC,CAAC"}

package/build-types/avatar-group/component.d.ts

@@ -1,8 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { AvatarGroupProps } from './types';
-import type { WordPressComponentProps } from '../context';
-declare function AvatarGroup({ className, max, children, ...props }: WordPressComponentProps<AvatarGroupProps, 'div', false>): import("react").JSX.Element;
-export default AvatarGroup;
-//# sourceMappingURL=component.d.ts.map

package/build-types/avatar-group/component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/avatar-group/component.tsx"],"names":[],"mappings":"AAUA;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,iBAAS,WAAW,CAAE,EACrB,SAAS,EACT,GAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,CAAE,+BAsB3D;AAED,eAAe,WAAW,CAAC"}

package/build-types/avatar-group/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './component';
-export type { AvatarGroupProps } from './types';
-//# sourceMappingURL=index.d.ts.map

package/build-types/avatar-group/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/avatar-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

package/build-types/avatar-group/types.d.ts

@@ -1,14 +0,0 @@
-export type AvatarGroupProps = {
-    /**
-     * Maximum number of avatars to display before showing an
-     * overflow indicator.
-     *
-     * @default 3
-     */
-    max?: number;
-    /**
-     * Avatar elements to display in the group.
-     */
-    children: React.ReactNode;
-};
-//# sourceMappingURL=types.d.ts.map

package/build-types/avatar-group/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/avatar-group/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC9B;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC"}

package/src/avatar/component.tsx

@@ -1,82 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import Icon from '../icon';
-import Tooltip from '../tooltip';
-import type { AvatarProps } from './types';
-import type { WordPressComponentProps } from '../context';
-
-function Avatar( {
-	className,
-	src,
-	name,
-	label,
-	badge = false,
-	size = 'default',
-	borderColor,
-	status,
-	statusIndicator,
-	style,
-	...props
-}: WordPressComponentProps< AvatarProps, 'div', false > ) {
-	const showBadge = badge && !! name;
-	const initials = name
-		? name
-				.split( /\s+/ )
-				.slice( 0, 2 )
-				.map( ( word ) => word[ 0 ] )
-				.join( '' )
-				.toUpperCase()
-		: undefined;
-	const customProperties = {
-		...style,
-		...( src ? { '--components-avatar-url': `url(${ src })` } : {} ),
-		...( borderColor
-			? { '--components-avatar-outline-color': borderColor }
-			: {} ),
-	} as React.CSSProperties;
-
-	const avatar = (
-		<div
-			className={ clsx( '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 }
-		>
-			<span className="components-avatar__image">
-				{ ! src && initials }
-				{ !! status && !! statusIndicator && (
-					<span className="components-avatar__status-indicator">
-						<Icon icon={ statusIndicator } />
-					</span>
-				) }
-			</span>
-			{ showBadge && (
-				<span className="components-avatar__name">
-					{ label || name }
-				</span>
-			) }
-		</div>
-	);
-
-	if ( name && ( ! showBadge || label ) ) {
-		return <Tooltip text={ name }>{ avatar }</Tooltip>;
-	}
-
-	return avatar;
-}
-
-export default Avatar;

package/src/avatar/index.ts

@@ -1,2 +0,0 @@
-export { default } from './component';
-export type { AvatarProps } from './types';

package/src/avatar/styles.scss

@@ -1,152 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-@use "../utils/theme-variables" as *;
-
-.components-avatar {
-	display: inline-flex;
-	align-items: center;
-	border-radius: $radius-full;
-	overflow: clip;
-	flex-shrink: 0;
-	background-color: $components-color-accent;
-	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $white, $elevation-x-small;
-}
-
-.components-avatar__image {
-	box-sizing: border-box;
-	position: relative;
-	width: $button-size-compact;
-	height: $button-size-compact;
-	border-radius: $radius-full;
-	border: 0;
-	background-color: $components-color-accent;
-	overflow: clip;
-	flex-shrink: 0;
-	font-size: 0;
-	color: $white;
-
-	.is-small > & {
-		width: $button-size-small;
-		height: $button-size-small;
-	}
-
-	.has-src > & {
-		background-image: var(--components-avatar-url);
-		background-size: cover;
-		background-position: center;
-	}
-
-	.has-avatar-border-color > & {
-		border: var(--wp-admin-border-width-focus) solid var(--components-avatar-outline-color);
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
-		background-clip: padding-box;
-	}
-}
-
-// Initials fallback: show name characters when no image.
-.components-avatar:not(.has-src) > .components-avatar__image {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: $font-size-x-small;
-	font-weight: $font-weight-medium;
-	border: 0;
-	box-shadow: none;
-	background-clip: border-box;
-}
-
-.components-avatar:not(.has-src).has-avatar-border-color > .components-avatar__image {
-	background-color: var(--components-avatar-outline-color);
-}
-
-.components-avatar__name {
-	font-size: $font-size-medium;
-	line-height: $font-line-height-small;
-	color: $white;
-	min-width: 0;
-	padding-bottom: calc($grid-unit-05 / 2);
-	overflow: hidden;
-	opacity: 0;
-	white-space: nowrap;
-	transition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);
-}
-
-// Badge mode: use grid so the name column animates from 0 to natural width.
-// Spacing is on the container (column-gap + padding-inline-end) so it
-// transitions alongside grid-template-columns instead of causing a bump.
-.components-avatar.has-badge {
-	display: inline-grid;
-	grid-template-columns: min-content 0fr;
-	column-gap: 0;
-	padding-inline-end: 0;
-	transition:
-		grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1),
-		column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1),
-		padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);
-
-	&:hover {
-		grid-template-columns: min-content 1fr;
-		column-gap: $grid-unit-05;
-		padding-inline-end: $grid-unit-10;
-		transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
-	}
-
-	&:hover .components-avatar__name {
-		opacity: 1;
-		transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
-	}
-}
-
-.components-avatar.has-badge.has-avatar-border-color {
-	background-color: var(--components-avatar-outline-color);
-}
-
-// Status: dim and desaturate content so the background color shows through.
-// Images: move to ::before with luminosity blend over the solid bg color.
-// Initials: reduce text opacity.
-.components-avatar.has-status.has-src > .components-avatar__image {
-	background-image: none;
-
-	&::before {
-		content: "";
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		background-image: var(--components-avatar-url);
-		background-size: cover;
-		background-position: center;
-		mix-blend-mode: luminosity;
-		opacity: 0.3;
-	}
-}
-
-.components-avatar.has-status:not(.has-src) > .components-avatar__image {
-	color: rgba($white, 0.3);
-}
-
-.components-avatar.has-status.has-avatar-border-color > .components-avatar__image {
-	background-color: var(--components-avatar-outline-color);
-}
-
-.components-avatar__status-indicator {
-	position: absolute;
-	inset: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	z-index: 1;
-	color: $white;
-	fill: $white;
-
-	svg {
-		width: 75%;
-		height: 75%;
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.components-avatar.has-badge,
-	.components-avatar__name {
-		transition: none;
-	}
-}

package/src/avatar/types.ts

@@ -1,59 +0,0 @@
-import type { IconType } from '../icon';
-
-export type AvatarProps = {
-	/**
-	 * URL of the avatar image.
-	 *
-	 * When not provided, initials derived from `name` are shown.
-	 */
-	src?: string;
-	/**
-	 * Name of the user. Used as an accessible label and to generate
-	 * initials when no image is provided.
-	 */
-	name?: string;
-	/**
-	 * Visible text shown in the hover badge. When not provided, `name`
-	 * is used instead. Use this to provide contextual labels like "You"
-	 * without affecting the accessible name or initials.
-	 */
-	label?: string;
-	/**
-	 * Whether to show the hover-expand badge that reveals the user's
-	 * name (or `label`) on hover. Requires `name` to be set.
-	 *
-	 * @default false
-	 */
-	badge?: boolean;
-	/**
-	 * Size of the avatar.
-	 *
-	 * - `'default'`: 32px
-	 * - `'small'`: 24px
-	 *
-	 * @default 'default'
-	 */
-	size?: 'default' | 'small';
-	/**
-	 * CSS color value for an accent border ring around the avatar.
-	 *
-	 * When not provided, no border is rendered and the hover badge
-	 * and avatar status uses the admin theme color as its background.
-	 */
-	borderColor?: string;
-	/**
-	 * A status string applied to the avatar. When set, the image is
-	 * dimmed to indicate a non-default state. A corresponding
-	 * `is-{status}` class is added for custom styling.
-	 */
-	status?: string;
-	/**
-	 * An icon or custom component rendered as a centered overlay on the
-	 * avatar image. Only visible when `status` is set.
-	 *
-	 * Accepts any value supported by the `Icon` component: an icon from
-	 * `@wordpress/icons`, a Dashicon name string, a component, or a
-	 * JSX element.
-	 */
-	statusIndicator?: IconType | null;
-};