@wordpress/ui 0.4.0 → 0.4.1-next.76cff8c98.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stack/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../src/stack/stack.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C;;;GAGG;AACH,eAAO,MAAM,KAAK,uGAoBf,CAAC"}
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../src/stack/stack.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C;;;GAGG;AACH,eAAO,MAAM,KAAK,uGAmBf,CAAC"}

package/build-types/stack/stories/index.story.d.ts

@@ -1,14 +1,4 @@
-/**
- * External dependencies
- */
-import type { Meta, StoryObj } from '@storybook/react';
-/**
- * WordPress dependencies
- */
-import '@wordpress/theme/design-tokens.css';
-/**
- * Internal dependencies
- */
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Stack } from '../index';
 declare const meta: Meta<typeof Stack>;
 export default meta;

package/build-types/stack/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/stack/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,oCAAoC,CAAC;AAE5C;;GAEG;AACH,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,KAAK,CAI7B,CAAC;AACF,eAAe,IAAI,CAAC;AAYpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,KAAK,CAAE,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KA4DrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAsBpB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/stack/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,KAAK,CAI7B,CAAC;AACF,eAAe,IAAI,CAAC;AAYpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,KAAK,CAAE,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KA4DrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAsBpB,CAAC"}

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

@@ -1,8 +1,5 @@
-/**
- * Internal dependencies
- */
+import { type GapSize } from '@wordpress/theme';
 import { type ComponentProps } from '../utils/types';
-export type SizeToken = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface StackProps extends ComponentProps<'div'> {
     /**
      * The direction of the stack.
@@ -13,7 +10,7 @@ export interface StackProps extends ComponentProps<'div'> {
      *
      * @default undefined
      */
-    gap?: SizeToken;
+    gap?: GapSize;
     /**
      * The alignment of the stack items along the cross axis.
      *

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/stack/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjE,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAE,KAAK,CAAE;IAC1D;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAClB,KAAK,CAAC,aAAa,CAAE,eAAe,CAAE,EACtC,aAAa,GAAG,gBAAgB,CAChC,CAAC;IAEF;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAE,YAAY,CAAE,CAAC;IAE5C;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAE,gBAAgB,CAAE,CAAC;IAElD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAE,KAAK,CAAC,aAAa,CAAE,UAAU,CAAE,EAAE,cAAc,CAAE,CAAC;IAEpE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/stack/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAE,KAAK,CAAE;IAC1D;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAClB,KAAK,CAAC,aAAa,CAAE,eAAe,CAAE,EACtC,aAAa,GAAG,gBAAgB,CAChC,CAAC;IAEF;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IAEd;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAE,YAAY,CAAE,CAAC;IAE5C;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAE,gBAAgB,CAAE,CAAC;IAElD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAE,KAAK,CAAC,aAAa,CAAE,UAAU,CAAE,EAAE,cAAc,CAAE,CAAC;IAEpE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../src/test/index.test.ts"],"names":[],"mappings":""}

package/build-types/visually-hidden/index.d.ts

@@ -0,0 +1,2 @@
+export { VisuallyHidden } from './visually-hidden';
+//# sourceMappingURL=index.d.ts.map

package/build-types/visually-hidden/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/build-types/visually-hidden/stories/index.story.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { VisuallyHidden } from '../';
+declare const meta: Meta<typeof VisuallyHidden>;
+export default meta;
+type Story = StoryObj<typeof VisuallyHidden>;
+export declare const Default: Story;
+//# sourceMappingURL=index.story.d.ts.map

package/build-types/visually-hidden/stories/index.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,cAAc,CAGtC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,cAAc,CAAE,CAAC;AAE/C,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}

package/build-types/visually-hidden/test/visually-hidden.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=visually-hidden.test.d.ts.map

package/build-types/visually-hidden/test/visually-hidden.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visually-hidden.test.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/test/visually-hidden.test.tsx"],"names":[],"mappings":""}

package/build-types/visually-hidden/types.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from '../utils/types';
+export interface VisuallyHiddenProps extends ComponentProps<'div'> {
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/build-types/visually-hidden/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAE,KAAK,CAAE;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}

package/build-types/visually-hidden/visually-hidden.d.ts

@@ -0,0 +1,7 @@
+import type { VisuallyHiddenProps } from './types';
+/**
+ * Visually hides content while keeping it accessible to screen readers.
+ * Useful when providing context that's only meaningful to assistive technology.
+ */
+export declare const VisuallyHidden: import("react").ForwardRefExoticComponent<VisuallyHiddenProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=visually-hidden.d.ts.map

package/build-types/visually-hidden/visually-hidden.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visually-hidden.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/visually-hidden.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGnD;;;GAGG;AACH,eAAO,MAAM,cAAc,gHAa1B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/ui",
-	"version": "0.4.0",
+	"version": "0.4.1-next.76cff8c98.0",
 	"description": "Themeable React UI components for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -22,13 +22,20 @@
 		"node": ">=20.10.0",
 		"npm": ">=10.2.3"
 	},
-	"main": "build/index.js",
-	"module": "build-module/index.js",
+	"files": [
+		"src",
+		"build",
+		"build-module",
+		"build-types",
+		"*.md"
+	],
+	"main": "build/index.cjs",
+	"module": "build-module/index.mjs",
 	"exports": {
 		".": {
 			"types": "./build-types/index.d.ts",
-			"import": "./build-module/index.js",
-			"default": "./build/index.js"
+			"import": "./build-module/index.mjs",
+			"default": "./build/index.cjs"
 		},
 		"./package.json": "./package.json"
 	},
@@ -36,12 +43,13 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@wordpress/element": "^6.37.0",
-		"@wordpress/private-apis": "^1.37.0",
+		"@base-ui/react": "^1.0.0",
+		"@wordpress/element": "^6.36.1-next.76cff8c98.0",
+		"@wordpress/i18n": "^6.9.1-next.76cff8c98.0",
 		"clsx": "^2.1.1"
 	},
 	"devDependencies": {
-		"@wordpress/theme": "^0.4.0"
+		"@wordpress/theme": "^0.4.1-next.76cff8c98.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -50,5 +58,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2cf13ec6cf86153c9b3cf369bf5c59046f5cd950"
+	"gitHead": "368727f14b858e75179e140967c2d9ec965c8790"
 }

package/src/badge/badge.tsx

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Box } from '../box';
+import { type BoxProps } from '../box/types';
+import { type BadgeProps } from './types';
+
+/**
+ * Default render function that renders a span element with the given props.
+ */
+const DEFAULT_RENDER = ( props: React.ComponentPropsWithoutRef< 'span' > ) => (
+	<span { ...props } />
+);
+
+/**
+ * Maps intent values to Box backgroundColor and color props.
+ * Uses strong emphasis styles (as emphasis prop has been removed).
+ */
+const getIntentStyles = (
+	intent: BadgeProps[ 'intent' ]
+): Partial< BoxProps > => {
+	switch ( intent ) {
+		case 'high':
+			return {
+				backgroundColor: 'error',
+				color: 'error',
+			};
+		case 'medium':
+			return {
+				backgroundColor: 'warning',
+				color: 'warning',
+			};
+		case 'low':
+			return {
+				backgroundColor: 'caution',
+				color: 'caution',
+			};
+		case 'stable':
+			return {
+				backgroundColor: 'success',
+				color: 'success',
+			};
+		case 'informational':
+			return {
+				backgroundColor: 'info',
+				color: 'info',
+			};
+		case 'draft':
+			return {
+				backgroundColor: 'neutral-weak',
+				color: 'neutral',
+			};
+		case 'none':
+		default:
+			return {
+				backgroundColor: 'neutral',
+				color: 'neutral-weak',
+			};
+	}
+};
+
+/**
+ * A badge component for displaying labels with semantic intent.
+ * Built on the Box primitive for consistent theming and accessibility.
+ */
+export const Badge = forwardRef< HTMLDivElement, BadgeProps >( function Badge(
+	{ children, intent = 'none', render = DEFAULT_RENDER, ...props },
+	ref
+) {
+	const intentStyles = getIntentStyles( intent );
+
+	return (
+		<Box
+			{ ...intentStyles }
+			padding={ { inline: 'xs', block: '2xs' } }
+			borderRadius="lg"
+			render={ render }
+			style={ {
+				fontFamily: 'var(--wpds-font-family-body)',
+				fontSize: 'var(--wpds-font-size-sm)',
+				fontWeight: 'var(--wpds-font-weight-regular)',
+				lineHeight: 'var(--wpds-font-line-height-xs)',
+				...props.style,
+			} }
+			ref={ ref }
+		>
+			{ children }
+		</Box>
+	);
+} );

package/src/badge/index.ts

@@ -0,0 +1 @@
+export { Badge } from './badge';

package/src/badge/stories/choosing-intent.mdx

@@ -0,0 +1,112 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { Badge } from '../index';
+import '@wordpress/theme/design-tokens.css';
+
+<Meta title="Design System/Components/Badge/Choosing intent" />
+
+# Choosing intent
+
+<div style={ { padding: '2rem', display: 'flex', justifyContent: 'center', gap: '0.5rem', flexWrap: 'wrap', border: '1px solid #e0e0e0', borderRadius: '0.5rem' } }>
+	<Badge intent="high">high</Badge>
+	<Badge intent="medium">medium</Badge>
+	<Badge intent="low">low</Badge>
+	<Badge intent="stable">stable</Badge>
+	<Badge intent="informational">informational</Badge>
+	<Badge intent="draft">draft</Badge>
+	<Badge intent="none">none</Badge>
+</div>
+
+It can be difficult to determine which badge intent to use because the component's properties are not tied to any specific product view. Those properties should be balanced against the requirements of the view in which the badge appears, all while keeping an eye on high-level consistency (global statuses that appear across multiple views).
+
+Here is a decision tree to help identify which badge to use.
+
+## 1. Ask first: should this draw the eye?
+
+If the user scans this screen, should their attention be drawn to this badge?
+
+-   If **no** → use `none` (or even just plain text; no badge), even if the state is positive or "stable".
+-   If **yes** → pick an intent based on how important the action or awareness is.
+
+## 2. High / Medium / Low = action priority
+
+Use when there's something for the user to act on.
+
+### `high` – Critical / top priority
+
+* Needs attention as soon as possible
+* _E.g. "Payment declined", "Security issue"_
+
+<Badge intent="high">Payment declined</Badge> <Badge intent="high">Security issue</Badge>
+
+### `medium` – Important / blocks progress
+
+* Blocks a key task, should be handled soon
+* _E.g. "Approval required", "Review needed"_
+
+<Badge intent="medium">Approval required</Badge> <Badge intent="medium">Review needed</Badge>
+
+### `low` – Worth noticing / non‑urgent
+
+* Good to be aware of; action may be optional or later
+* _E.g. "Pending", "Queued", "Minor issues", "Optional setup"_
+
+<Badge intent="low">Pending</Badge> <Badge intent="low">Queued</Badge>
+
+## 3. Informational / draft = special non-final states
+
+### `informational` – Notable, no action / fix needed
+
+* Context only; no clear action
+* _E.g. "Scheduled", "Beta", "Internal only"_
+
+<Badge intent="informational">Scheduled</Badge> <Badge intent="informational">Beta</Badge>
+
+### `draft` – Not final / work in progress
+
+* _E.g. "Draft", "Unpublished", "Work in progress"_
+
+<Badge intent="draft">Draft</Badge> <Badge intent="draft">Unpublished</Badge>
+
+## 4. Stable / none = normal states
+
+### `stable` – Positive / "healthy" state
+
+* Use when confirming success or "all good" is important in that view
+* _E.g. "Healthy", "Active", "Live"_
+
+<Badge intent="stable">Healthy</Badge> <Badge intent="stable">Active</Badge>
+
+### `none` – Default for normal / background states
+
+* Especially in dense lists where too much color creates visual noise
+* _E.g. "Inactive", "Expired"_
+
+<Badge intent="none">Inactive</Badge> <Badge intent="none">Expired</Badge>
+
+## Examples
+
+### Comment status:
+
+-   "Approved" → `none`: <Badge intent="none">Approved</Badge>
+-   "Approval required" → `medium`: <Badge intent="medium">Approval required</Badge>
+
+### Page status:
+
+-   "Published" → `none`: <Badge intent="none">Published</Badge>
+-   "Pending" → `low`: <Badge intent="low">Pending</Badge>
+-   "Draft" → `draft`: <Badge intent="draft">Draft</Badge>
+-   "Scheduled" → `informational`: <Badge intent="informational">Scheduled</Badge>
+-   "Private" → `informational`: <Badge intent="informational">Private</Badge>
+
+### Plugin status:
+
+-   "Active" → `stable`: <Badge intent="stable">Active</Badge>
+-   "Inactive" → `none`: <Badge intent="none">Inactive</Badge>
+
+## 5. When in doubt…
+
+Use the least attention‑grabbing intent that still:
+
+-   Makes it clear what needs attention,
+-   Marks what isn't final, or
+-   Confirms a key success state in that context.

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

@@ -0,0 +1,133 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Badge } from '../index';
+
+const meta: Meta< typeof Badge > = {
+	title: 'Design System/Components/Badge',
+	component: Badge,
+	tags: [ 'status-experimental' ],
+};
+export default meta;
+
+type Story = StoryObj< typeof Badge >;
+
+export const Default: Story = {
+	args: {
+		children: 'Badge',
+	},
+};
+
+export const High: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'high',
+	},
+};
+
+export const Medium: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'medium',
+	},
+};
+
+export const Low: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'low',
+	},
+};
+
+export const Stable: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'stable',
+	},
+};
+
+export const Informational: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'informational',
+	},
+};
+
+export const Draft: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'draft',
+	},
+};
+
+export const None: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'none',
+	},
+};
+
+export const AllIntents: Story = {
+	...Default,
+	render: ( args ) => (
+		<div
+			style={ {
+				display: 'grid',
+				gridTemplateColumns: 'max-content min-content',
+				gap: '1rem',
+				color: 'var(--wpds-color-fg-content-neutral)',
+				backgroundColor: 'var(--wpds-color-bg-surface-neutral-strong)',
+			} }
+		>
+			{ (
+				[
+					'high',
+					'medium',
+					'low',
+					'stable',
+					'informational',
+					'draft',
+					'none',
+				] as const
+			 ).map( ( intent ) => (
+				<Fragment key={ intent }>
+					<div
+						style={ {
+							paddingInlineEnd: '1rem',
+							display: 'flex',
+							alignItems: 'center',
+						} }
+					>
+						{ intent }
+					</div>
+					<div
+						style={ {
+							padding: '0.5rem 1rem',
+							display: 'flex',
+							alignItems: 'center',
+						} }
+					>
+						<Badge { ...args } intent={ intent } />
+					</div>
+				</Fragment>
+			) ) }
+		</div>
+	),
+};

package/src/badge/types.ts

@@ -0,0 +1,25 @@
+/**
+ * Internal dependencies
+ */
+import { type ComponentProps } from '../utils/types';
+
+export interface BadgeProps extends ComponentProps< 'span' > {
+	/**
+	 * The text to display in the badge.
+	 */
+	children: string;
+
+	/**
+	 * The semantic intent of the badge, communicating its meaning through color.
+	 *
+	 * @default "none"
+	 */
+	intent?:
+		| 'high'
+		| 'medium'
+		| 'low'
+		| 'stable'
+		| 'informational'
+		| 'draft'
+		| 'none';
+}

package/src/box/box.tsx

@@ -1,18 +1,9 @@
-/**
- * WordPress dependencies
- */
+import { useRender, mergeProps } from '@base-ui/react';
 import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { type BoxProps } from './types';
-import { renderElement } from '../utils/element';
 
 /**
  * Default render function that renders a div element with the given props.
- *
- * @param props The props to apply to the HTML element.
  */
 const DEFAULT_RENDER = ( props: React.ComponentPropsWithoutRef< 'div' > ) => (
 	<div { ...props } />
@@ -20,30 +11,25 @@ const DEFAULT_RENDER = ( props: React.ComponentPropsWithoutRef< 'div' > ) => (
 
 /**
  * Capitalizes the first character of a string.
- *
- * @param str The string to capitalize.
- * @return The capitalized string.
  */
 const capitalize = ( str: string ): string =>
 	str.charAt( 0 ).toUpperCase() + str.slice( 1 );
 
 /**
- * Converts a size value to a CSS design token property reference (with
- * fallback) or a calculated value based on the base unit.
+ * Converts a size token name to a CSS design token property reference (with
+ * fallback).
  *
  * @param property The CSS property name.
  * @param target   The design system token target.
- * @param value    The size value, either a number (multiplier of base unit) or a string (token name).
+ * @param value    The size token name.
  * @return A CSS value string with variable references.
  */
 const getSpacingValue = (
 	property: string,
 	target: string,
-	value: number | string
+	value: string
 ): string =>
-	typeof value === 'number'
-		? `calc(var(--wpds-dimension-base) * ${ value })`
-		: `var(--wpds-dimension-${ property }-${ target }-${ value }, var(--wpds-dimension-${ property }-surface-${ value }))`;
+	`var(--wpds-dimension-${ property }-${ target }-${ value }, var(--wpds-dimension-${ property }-surface-${ value }))`;
 
 /**
  * Generates CSS styles for properties with optionally directional values,
@@ -92,7 +78,7 @@ export const Box = forwardRef< HTMLDivElement, BoxProps >( function Box(
 	},
 	ref
 ) {
-	const style: React.CSSProperties = { ...props.style };
+	const style: React.CSSProperties = {};
 
 	if ( backgroundColor ) {
 		style.backgroundColor = `var(--wpds-color-bg-${ target }-${ backgroundColor }, var(--wpds-color-bg-surface-${ backgroundColor }))`;
@@ -122,9 +108,11 @@ export const Box = forwardRef< HTMLDivElement, BoxProps >( function Box(
 		style.borderColor = `var(--wpds-color-stroke-${ target }-${ borderColor }, var(--wpds-color-stroke-surface-${ borderColor }))`;
 	}
 
-	return renderElement< 'div' >( {
+	const element = useRender( {
 		render,
 		ref,
-		props: { ...props, style },
+		props: mergeProps< 'div' >( props, { style } ),
 	} );
+
+	return element;
 } );

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

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
-import { type Meta, type StoryObj } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import '@wordpress/theme/design-tokens.css';
-
-/**
- * Internal dependencies
- */
+import { type Meta, type StoryObj } from '@storybook/react-webpack5';
+import { type PaddingSize } from '@wordpress/theme';
 import { Box } from '../box';
 
 const meta: Meta< typeof Box > = {
@@ -35,7 +24,7 @@ export const Default: Story = {
 	argTypes: {
 		padding: {
 			control: 'select',
-			options: [ '2xs', 'xs', 'sm', 'md', 'lg', 1, 2, 3, 4 ],
+			options: [ '2xs', 'xs', 'sm', 'md', 'lg' ] satisfies PaddingSize[],
 		},
 	},
 };