@wordpress/fields 0.29.0 → 0.29.1-next.06ee73755.0

package/src/components/media-edit/style.scss

@@ -0,0 +1,232 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+@mixin preview-overlay {
+	border-radius: $radius-x-small;
+	backdrop-filter: blur(16px) saturate(180%);
+	background: rgba(255, 255, 255, 0.75);
+}
+
+@mixin compact-drop-zone-label {
+	// Align text and icons horizontally to avoid clipping when we show the compact placeholder.
+	.components-drop-zone .components-drop-zone__content-inner {
+		display: flex;
+		align-items: center;
+		gap: $grid-unit-10;
+
+		.components-drop-zone__content-icon {
+			margin: 0;
+		}
+	}
+}
+
+fieldset.fields__media-edit {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+
+	width: 100%;
+
+	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
+	container-type: inline-size;
+
+	.fields__media-edit-compact {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		gap: $grid-unit-10;
+		align-items: center;
+		@include compact-drop-zone-label;
+	}
+
+	// Apply to placeholders outside of expanded view (compact contexts)
+	.fields__media-edit-picker-button:has(.fields__media-edit-placeholder):not(.fields__media-edit-expanded *) {
+		@include compact-drop-zone-label;
+	}
+
+	.fields__media-edit-picker-button {
+		position: relative;
+		display: flex;
+		align-items: center;
+		gap: $grid-unit-15;
+		border: $border-width dashed $gray-600;
+		border-radius: $radius-x-small;
+		padding: calc(8px - #{$border-width});
+		cursor: pointer;
+		min-width: 0;
+
+		&:hover {
+			background-color: $gray-100;
+		}
+
+		&:focus-visible {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			outline: none;
+		}
+
+		&[aria-disabled="true"] {
+			opacity: 0.6;
+			cursor: default;
+		}
+
+		.fields__media-edit-picker-button-spinner {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			z-index: 1;
+		}
+	}
+
+	.fields__media-edit-filename,
+	.fields__media-edit-placeholder {
+		flex: 1;
+		width: 100%;
+		min-width: 0;
+	}
+
+	.fields__media-edit-placeholder {
+		text-align: center;
+	}
+
+	.fields__media-edit-thumbnail {
+		width: $grid-unit-30;
+		aspect-ratio: 1 / 1;
+		flex-shrink: 0;
+		border-radius: $radius-small;
+	}
+
+	.fields__media-edit-expanded {
+		// Always use grid layout
+		display: grid;
+		gap: $grid-unit-10;
+
+		&.is-empty {
+			@include compact-drop-zone-label;
+		}
+
+		.fields__media-edit-expanded-preview {
+			position: relative;
+			width: 100%;
+			aspect-ratio: 3/2;
+			border-radius: $radius-small;
+			padding: $grid-unit-05;
+			overflow: hidden;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.fields__media-edit-expanded-preview-stack {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.fields__media-edit-expanded-overlay {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			opacity: 0;
+			pointer-events: none;
+
+			@media not (prefers-reduced-motion) {
+				transition: opacity 50ms ease-out;
+			}
+
+			* {
+				pointer-events: auto;
+			}
+		}
+
+		.fields__media-edit-expanded-remove {
+			position: absolute;
+			top: $grid-unit-10;
+			right: $grid-unit-10;
+			@include preview-overlay;
+		}
+
+		.fields__media-edit-expanded-title {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			margin: $grid-unit-10;
+			padding: $grid-unit-05;
+			text-align: center;
+			@include preview-overlay;
+		}
+
+		.fields__media-edit-expanded-item {
+			position: relative;
+			min-width: 0;
+
+			&:hover,
+			&:focus-within {
+				.fields__media-edit-expanded-overlay {
+					opacity: 1;
+				}
+			}
+
+			&:not(.has-preview-image) {
+				.fields__media-edit-expanded-preview-stack {
+					padding: $grid-unit-10;
+				}
+			}
+		}
+
+		.fields__media-edit-thumbnail {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			object-position: 50% 50%;
+		}
+
+		.fields__media-edit-filename {
+			text-align: center;
+			flex: none;
+		}
+
+		.fields__media-edit-picker-button-spinner {
+			svg {
+				margin: 0;
+			}
+		}
+
+		&.is-single {
+			grid-template-columns: 1fr;
+
+			.fields__media-edit-expanded-preview {
+				aspect-ratio: 2/1;
+			}
+		}
+
+		&.is-multiple:not(.is-empty) {
+			grid-template-columns: repeat(3, 1fr);
+
+			/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
+			@container (max-width: 768px) {
+				grid-template-columns: repeat(2, 1fr);
+			}
+
+			/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
+			@container (max-width: 280px) {
+				grid-template-columns: 1fr;
+			}
+		}
+
+		&:not(.is-empty) {
+			.fields__media-edit-picker-button {
+				padding: 0;
+			}
+
+			.fields__media-edit-placeholder {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				aspect-ratio: 3/2;
+			}
+		}
+	}
+}

package/src/fields/featured-image/{index.ts → index.tsx}

@@ -7,16 +7,19 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import MediaEdit from '../../components/media-edit';
 import type { BasePostWithEmbeddedFeaturedMedia } from '../../types';
-import { FeaturedImageEdit } from './featured-image-edit';
 import { FeaturedImageView } from './featured-image-view';
 
 const featuredImageField: Field< BasePostWithEmbeddedFeaturedMedia > = {
 	id: 'featured_media',
 	type: 'media',
 	label: __( 'Featured Image' ),
-	Edit: FeaturedImageEdit,
+	Edit: MediaEdit,
 	render: FeaturedImageView,
+	setValue: ( { value } ) => ( {
+		featured_media: value ?? 0,
+	} ),
 	enableSorting: false,
 	filterBy: false,
 };

package/src/fields/featured-image/style.scss

@@ -1,95 +1,6 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
-.fields-controls__featured-image-placeholder {
-	border-radius: $radius-small;
-	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
-	display: inline-block;
-	padding: 0;
-	background:
-		$white
-		linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
-}
-
-.fields-controls__featured-image-title {
-	width: 100%;
-	color: $gray-900;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-
-.fields-controls__featured-image-image {
-	width: 100%;
-	height: 100%;
-	border-radius: $radius-small;
-	align-self: center;
-}
-
-.fields-controls__featured-image-container {
-	.fields-controls__featured-image-placeholder {
-		margin: 0;
-	}
-
-	span {
-		margin-right: auto;
-	}
-}
-
-fieldset.fields-controls__featured-image {
-	// Reset `fieldset` browser defaults.
-	border: 0;
-	padding: 0;
-	margin: 0;
-
-	.fields-controls__featured-image-container {
-		border: $border-width solid $gray-300;
-		border-radius: $radius-small;
-		padding: 8px 12px;
-		cursor: pointer;
-		&:hover {
-			background-color: $gray-100;
-		}
-	}
-
-	.fields-controls__featured-image-placeholder {
-		width: 24px;
-		height: 24px;
-	}
-
-	span {
-		align-self: center;
-		text-align: start;
-		white-space: nowrap;
-	}
-
-	.fields-controls__featured-image-upload-button {
-		padding: 0;
-		height: fit-content;
-		&:hover,
-		&:focus {
-			border: 0;
-			color: unset;
-		}
-	}
-
-	.fields-controls__featured-image-remove-button {
-		place-self: end;
-	}
-}
-
-.dataforms-layouts-panel__field-control {
-	.fields-controls__featured-image-image {
-		width: 16px;
-		height: 16px;
-	}
-
-	.fields-controls__featured-image-placeholder {
-		width: 16px;
-		height: 16px;
-	}
-}
-
 .dataviews-view-grid__media,
 .dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media,
 .dataviews-view-list__media-wrapper {
@@ -114,3 +25,10 @@ fieldset.fields-controls__featured-image {
 		height: 32px;
 	}
 }
+
+.dataforms-layouts-panel__field-control {
+	.fields-controls__featured-image-image {
+		width: 16px;
+		height: 16px;
+	}
+}

package/src/fields/parent/parent-edit.tsx

@@ -266,7 +266,6 @@ export function PageAttributesParent( {
 
 	return (
 		<ComboboxControl
-			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 			label={ __( 'Parent' ) }
 			help={ __( 'Choose a parent page.' ) }

package/src/fields/password/edit.tsx

@@ -38,7 +38,6 @@ function PasswordEdit( {
 			className="fields-controls__password"
 		>
 			<CheckboxControl
-				__nextHasNoMarginBottom
 				label={ __( 'Password protected' ) }
 				help={ __( 'Only visible to those who know the password' ) }
 				checked={ showPassword }
@@ -57,7 +56,6 @@ function PasswordEdit( {
 						placeholder={ __( 'Use a secure password' ) }
 						type="text"
 						__next40pxDefaultSize
-						__nextHasNoMarginBottom
 						maxLength={ 255 }
 					/>
 				</div>

package/src/fields/ping-status/index.tsx

@@ -25,7 +25,6 @@ function PingStatusEdit( {
 
 	return (
 		<CheckboxControl
-			__nextHasNoMarginBottom
 			label={ __( 'Enable pingbacks & trackbacks' ) }
 			checked={ pingStatus === 'open' }
 			onChange={ onTogglePingback }

package/src/index.ts

@@ -1,9 +1,11 @@
 export * from './fields';
 export * from './actions';
 export { default as CreateTemplatePartModal } from './components/create-template-part-modal';
+export { default as MediaEdit } from './components/media-edit';
 export type {
 	BasePostWithEmbeddedAuthor,
 	BasePost,
+	MediaEditProps,
 	PostType,
 	Pattern,
 } from './types';

package/src/style.scss

@@ -1,5 +1,6 @@
 @use "@wordpress/base-styles/default-custom-properties";
 @use "./components/create-template-part-modal/style.scss" as *;
+@use "./components/media-edit/style.scss" as *;
 @use "./fields/slug/style.scss" as *;
 @use "./fields/featured-image/style.scss" as *;
 @use "./fields/parent/style.scss" as *;

package/src/types.ts

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import type { DataFormControlProps } from '@wordpress/dataviews';
+
 type PostStatus =
 	| 'publish'
 	| 'draft'
@@ -133,3 +138,28 @@ export interface PostType {
 
 // Will be unnecessary after typescript 5.0 upgrade.
 export type CoreDataError = { message?: string; code?: string };
+
+export interface MediaEditProps< Item >
+	extends Pick<
+		DataFormControlProps< Item >,
+		'data' | 'field' | 'onChange' | 'hideLabelFromVision'
+	> {
+	/**
+	 * Array of allowed media types (e.g., ['image', 'video']).
+	 *
+	 * @default ['image']
+	 */
+	allowedTypes?: string[];
+	/**
+	 * Whether to allow multiple media selections.
+	 *
+	 * @default false
+	 */
+	multiple?: boolean;
+	/**
+	 * Whether to render in an expanded form.
+	 *
+	 * @default false
+	 */
+	isExpanded?: boolean;
+}

package/build/actions/reorder-page.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/actions/reorder-page.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { __ } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { useState } from '@wordpress/element';\nimport {\n\tButton,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalInputControl as InputControl,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type { CoreDataError, BasePost } from '../types';\n\ninterface RenderModalProps< Item > {\n\titems: Item[];\n\tcloseModal?: () => void;\n\tonActionPerformed?: ( items: Item[] ) => void;\n}\n\ninterface Action< Item > {\n\tid: string;\n\tlabel: string;\n\tisEligible?: ( item: Item ) => boolean;\n\tmodalFocusOnMount?: string;\n\tRenderModal: ( props: RenderModalProps< Item > ) => JSX.Element;\n}\n\nfunction isItemValid( item: BasePost ): boolean {\n\treturn (\n\t\ttypeof item.menu_order === 'number' &&\n\t\tNumber.isInteger( item.menu_order ) &&\n\t\titem.menu_order > 0\n\t);\n}\n\nfunction ReorderModal( {\n\titems,\n\tcloseModal,\n\tonActionPerformed,\n}: RenderModalProps< BasePost > ) {\n\tconst [ item, setItem ] = useState( items[ 0 ] );\n\tconst { editEntityRecord, saveEditedEntityRecord } =\n\t\tuseDispatch( coreStore );\n\tconst { createSuccessNotice, createErrorNotice } =\n\t\tuseDispatch( noticesStore );\n\n\tconst isValid = isItemValid( item );\n\n\tasync function onOrder( event: React.FormEvent ) {\n\t\tevent.preventDefault();\n\n\t\tif ( ! isValid ) {\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tawait editEntityRecord( 'postType', item.type, item.id, {\n\t\t\t\tmenu_order: item.menu_order,\n\t\t\t} );\n\t\t\tcloseModal?.();\n\t\t\t// Persist edited entity.\n\t\t\tawait saveEditedEntityRecord( 'postType', item.type, item.id, {\n\t\t\t\tthrowOnError: true,\n\t\t\t} );\n\t\t\tcreateSuccessNotice( __( 'Order updated.' ), {\n\t\t\t\ttype: 'snackbar',\n\t\t\t} );\n\t\t\tonActionPerformed?.( items );\n\t\t} catch ( error ) {\n\t\t\tconst typedError = error as CoreDataError;\n\t\t\tconst errorMessage =\n\t\t\t\ttypedError.message && typedError.code !== 'unknown_error'\n\t\t\t\t\t? typedError.message\n\t\t\t\t\t: __( 'An error occurred while updating the order' );\n\t\t\tcreateErrorNotice( errorMessage, {\n\t\t\t\ttype: 'snackbar',\n\t\t\t} );\n\t\t}\n\t}\n\n\treturn (\n\t\t<form onSubmit={ onOrder }>\n\t\t\t<VStack spacing=\"5\">\n\t\t\t\t<div>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Determines the order of pages. Pages with the same order value are sorted alphabetically. Negative order values are supported.'\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t\t<InputControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tlabel={ __( 'Order' ) }\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\tvalue={\n\t\t\t\t\t\ttypeof item.menu_order === 'number' &&\n\t\t\t\t\t\tNumber.isInteger( item.menu_order )\n\t\t\t\t\t\t\t? String( item.menu_order )\n\t\t\t\t\t\t\t: ''\n\t\t\t\t\t}\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tconst parsed = parseInt( value as string, 10 ); // absorbs '' and undefined\n\t\t\t\t\t\tsetItem( {\n\t\t\t\t\t\t\t...item,\n\t\t\t\t\t\t\tmenu_order: isNaN( parsed ) ? undefined : parsed,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t\t<HStack justify=\"right\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tcloseModal?.();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tdisabled={ ! isValid }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Save' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</HStack>\n\t\t\t</VStack>\n\t\t</form>\n\t);\n}\n\nconst reorderPage: Action< BasePost > = {\n\tid: 'order-pages',\n\tlabel: __( 'Order' ),\n\tisEligible( { status } ) {\n\t\treturn status !== 'trash';\n\t},\n\tmodalFocusOnMount: 'firstContentElement',\n\tRenderModal: ReorderModal,\n};\n\n/**\n * Reorder action for BasePost.\n */\nexport default reorderPage;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAA4B;AAC5B,uBAAmC;AACnC,kBAAmB;AACnB,qBAAsC;AACtC,qBAAyB;AACzB,wBAKO;AA6EH;AAxDJ,SAAS,YAAa,MAA0B;AAC/C,SACC,OAAO,KAAK,eAAe,YAC3B,OAAO,UAAW,KAAK,UAAW,KAClC,KAAK,aAAa;AAEpB;AAEA,SAAS,aAAc;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,CAAE,MAAM,OAAQ,QAAI,yBAAU,MAAO,CAAE,CAAE;AAC/C,QAAM,EAAE,kBAAkB,uBAAuB,QAChD,yBAAa,iBAAAA,KAAU;AACxB,QAAM,EAAE,qBAAqB,kBAAkB,QAC9C,yBAAa,eAAAC,KAAa;AAE3B,QAAM,UAAU,YAAa,IAAK;AAElC,iBAAe,QAAS,OAAyB;AAChD,UAAM,eAAe;AAErB,QAAK,CAAE,SAAU;AAChB;AAAA,IACD;AAEA,QAAI;AACH,YAAM,iBAAkB,YAAY,KAAK,MAAM,KAAK,IAAI;AAAA,QACvD,YAAY,KAAK;AAAA,MAClB,CAAE;AACF,mBAAa;AAEb,YAAM,uBAAwB,YAAY,KAAK,MAAM,KAAK,IAAI;AAAA,QAC7D,cAAc;AAAA,MACf,CAAE;AACF,8BAAqB,gBAAI,gBAAiB,GAAG;AAAA,QAC5C,MAAM;AAAA,MACP,CAAE;AACF,0BAAqB,KAAM;AAAA,IAC5B,SAAU,OAAQ;AACjB,YAAM,aAAa;AACnB,YAAM,eACL,WAAW,WAAW,WAAW,SAAS,kBACvC,WAAW,cACX,gBAAI,4CAA6C;AACrD,wBAAmB,cAAc;AAAA,QAChC,MAAM;AAAA,MACP,CAAE;AAAA,IACH;AAAA,EACD;AAEA,SACC,4CAAC,UAAK,UAAW,SAChB,uDAAC,kBAAAC,sBAAA,EAAO,SAAQ,KACf;AAAA,gDAAC,SACE;AAAA,MACD;AAAA,IACD,GACD;AAAA,IACA;AAAA,MAAC,kBAAAC;AAAA,MAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,WAAQ,gBAAI,OAAQ;AAAA,QACpB,MAAK;AAAA,QACL,OACC,OAAO,KAAK,eAAe,YAC3B,OAAO,UAAW,KAAK,UAAW,IAC/B,OAAQ,KAAK,UAAW,IACxB;AAAA,QAEJ,UAAW,CAAE,UAAW;AACvB,gBAAM,SAAS,SAAU,OAAiB,EAAG;AAC7C,kBAAS;AAAA,YACR,GAAG;AAAA,YACH,YAAY,MAAO,MAAO,IAAI,SAAY;AAAA,UAC3C,CAAE;AAAA,QACH;AAAA;AAAA,IACD;AAAA,IACA,6CAAC,kBAAAC,sBAAA,EAAO,SAAQ,SACf;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,SAAQ;AAAA,UACR,SAAU,MAAM;AACf,yBAAa;AAAA,UACd;AAAA,UAEE,8BAAI,QAAS;AAAA;AAAA,MAChB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,wBAAsB;AAAA,UACtB,UAAW,CAAE;AAAA,UAEX,8BAAI,MAAO;AAAA;AAAA,MACd;AAAA,OACD;AAAA,KACD,GACD;AAEF;AAEA,IAAM,cAAkC;AAAA,EACvC,IAAI;AAAA,EACJ,WAAO,gBAAI,OAAQ;AAAA,EACnB,WAAY,EAAE,OAAO,GAAI;AACxB,WAAO,WAAW;AAAA,EACnB;AAAA,EACA,mBAAmB;AAAA,EACnB,aAAa;AACd;AAKA,IAAO,uBAAQ;",
-  "names": ["coreStore", "noticesStore", "VStack", "InputControl", "HStack"]
-}

package/build/components/create-template-part-modal/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/create-template-part-modal/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\tBaseControl,\n\tTextControl,\n\tButton,\n\tModal,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport type { TemplatePartArea } from '@wordpress/core-data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tcheck,\n\tfooter as footerIcon,\n\theader as headerIcon,\n\tsidebar as sidebarIcon,\n\ttableColumnAfter as overlayIcon,\n\tsymbolFilled as symbolFilledIcon,\n} from '@wordpress/icons';\nimport { store as noticesStore } from '@wordpress/notices';\n// @ts-expect-error serialize is not typed\nimport { serialize } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetCleanTemplatePartSlug,\n\tgetUniqueTemplatePartTitle,\n\tuseExistingTemplateParts,\n} from './utils';\n\nfunction getAreaRadioId( value: string, instanceId: number ) {\n\treturn `fields-create-template-part-modal__area-option-${ value }-${ instanceId }`;\n}\nfunction getAreaRadioDescriptionId( value: string, instanceId: number ) {\n\treturn `fields-create-template-part-modal__area-option-description-${ value }-${ instanceId }`;\n}\n\ntype CreateTemplatePartModalContentsProps = {\n\tdefaultArea?: string;\n\tblocks: any[];\n\tconfirmLabel?: string;\n\tcloseModal: () => void;\n\tonCreate: ( templatePart: any ) => void;\n\tonError?: () => void;\n\tdefaultTitle?: string;\n};\n\n/**\n * A React component that renders a modal for creating a template part. The modal displays a title and the contents for creating the template part.\n * This component should not live in this package, it should be moved to a dedicated package responsible for managing template.\n * @param props            The component props.\n * @param props.modalTitle\n */\nexport default function CreateTemplatePartModal( {\n\tmodalTitle,\n\t...restProps\n}: {\n\tmodalTitle?: string;\n} & CreateTemplatePartModalContentsProps ) {\n\tconst defaultModalTitle = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).getPostType( 'wp_template_part' )?.labels\n\t\t\t\t?.add_new_item,\n\t\t[]\n\t);\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ modalTitle || defaultModalTitle }\n\t\t\tonRequestClose={ restProps.closeModal }\n\t\t\toverlayClassName=\"fields-create-template-part-modal\"\n\t\t\tfocusOnMount=\"firstContentElement\"\n\t\t\tsize=\"medium\"\n\t\t>\n\t\t\t<CreateTemplatePartModalContents { ...restProps } />\n\t\t</Modal>\n\t);\n}\n\n/**\n * Helper function to retrieve the corresponding icon by area name or icon name.\n *\n * @param {string} areaOrIconName The area name (e.g., 'header', 'overlay') or icon name (e.g., 'menu').\n *\n * @return {Object} The corresponding icon.\n */\nconst getTemplatePartIcon = ( areaOrIconName: string ) => {\n\t// Handle area names first\n\tif ( 'header' === areaOrIconName ) {\n\t\treturn headerIcon;\n\t} else if ( 'footer' === areaOrIconName ) {\n\t\treturn footerIcon;\n\t} else if ( 'sidebar' === areaOrIconName ) {\n\t\treturn sidebarIcon;\n\t} else if ( 'overlay' === areaOrIconName ) {\n\t\t// TODO: Replace with a proper overlay icon when available.\n\t\t// Using tableColumnAfter as a placeholder.\n\t\treturn overlayIcon;\n\t}\n\t// Handle icon names for backwards compatibility\n\tif ( 'menu' === areaOrIconName ) {\n\t\t// TODO: Replace with a proper overlay icon when available.\n\t\t// Using tableColumnAfter as a placeholder.\n\t\treturn overlayIcon;\n\t}\n\treturn symbolFilledIcon;\n};\n\n/**\n * A React component that renders the content of a model for creating a template part.\n * This component should not live in this package; it should be moved to a dedicated package responsible for managing template.\n *\n * @param {Object}   props                             - The component props.\n * @param {string}   [props.defaultArea=uncategorized] - The default area for the template part.\n * @param {Array}    [props.blocks=[]]                 - The blocks to be included in the template part.\n * @param {string}   [props.confirmLabel='Add']        - The label for the confirm button.\n * @param {Function} props.closeModal                  - Function to close the modal.\n * @param {Function} props.onCreate                    - Function to call when the template part is successfully created.\n * @param {Function} [props.onError]                   - Function to call when there is an error creating the template part.\n * @param {string}   [props.defaultTitle='']           - The default title for the template part.\n */\nexport function CreateTemplatePartModalContents( {\n\tdefaultArea = 'uncategorized',\n\tblocks = [],\n\tconfirmLabel = __( 'Add' ),\n\tcloseModal,\n\tonCreate,\n\tonError,\n\tdefaultTitle = '',\n}: CreateTemplatePartModalContentsProps ) {\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst { saveEntityRecord } = useDispatch( coreStore );\n\tconst existingTemplateParts = useExistingTemplateParts();\n\n\tconst [ title, setTitle ] = useState( defaultTitle );\n\tconst [ area, setArea ] = useState( defaultArea );\n\tconst [ isSubmitting, setIsSubmitting ] = useState( false );\n\tconst instanceId = useInstanceId( CreateTemplatePartModal );\n\n\tconst defaultTemplatePartAreas = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).getCurrentTheme()?.default_template_part_areas,\n\t\t[]\n\t);\n\n\tasync function createTemplatePart() {\n\t\tif ( ! title || isSubmitting ) {\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tsetIsSubmitting( true );\n\t\t\tconst uniqueTitle = getUniqueTemplatePartTitle(\n\t\t\t\ttitle,\n\t\t\t\texistingTemplateParts\n\t\t\t);\n\t\t\tconst cleanSlug = getCleanTemplatePartSlug( uniqueTitle );\n\n\t\t\tconst templatePart = await saveEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\t'wp_template_part',\n\t\t\t\t{\n\t\t\t\t\tslug: cleanSlug,\n\t\t\t\t\ttitle: uniqueTitle,\n\t\t\t\t\tcontent: serialize( blocks ),\n\t\t\t\t\tarea,\n\t\t\t\t},\n\t\t\t\t{ throwOnError: true }\n\t\t\t);\n\t\t\tawait onCreate( templatePart );\n\n\t\t\t// TODO: Add a success notice?\n\t\t} catch ( error ) {\n\t\t\tconst errorMessage =\n\t\t\t\terror instanceof Error &&\n\t\t\t\t'code' in error &&\n\t\t\t\terror.message &&\n\t\t\t\terror.code !== 'unknown_error'\n\t\t\t\t\t? error.message\n\t\t\t\t\t: __(\n\t\t\t\t\t\t\t'An error occurred while creating the template part.'\n\t\t\t\t\t  );\n\n\t\t\tcreateErrorNotice( errorMessage, { type: 'snackbar' } );\n\n\t\t\tonError?.();\n\t\t} finally {\n\t\t\tsetIsSubmitting( false );\n\t\t}\n\t}\n\treturn (\n\t\t<form\n\t\t\tonSubmit={ async ( event ) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tawait createTemplatePart();\n\t\t\t} }\n\t\t>\n\t\t\t<VStack spacing=\"4\">\n\t\t\t\t<TextControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\tvalue={ title }\n\t\t\t\t\tonChange={ setTitle }\n\t\t\t\t\trequired\n\t\t\t\t/>\n\t\t\t\t<fieldset className=\"fields-create-template-part-modal__area-fieldset\">\n\t\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t\t{ __( 'Area' ) }\n\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t<div className=\"fields-create-template-part-modal__area-radio-group\">\n\t\t\t\t\t\t{ ( defaultTemplatePartAreas ?? [] ).map(\n\t\t\t\t\t\t\t( item: TemplatePartArea ) => {\n\t\t\t\t\t\t\t\tconst icon = getTemplatePartIcon( item.icon );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tkey={ item.area }\n\t\t\t\t\t\t\t\t\t\tclassName=\"fields-create-template-part-modal__area-radio-wrapper\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\t\tid={ getAreaRadioId(\n\t\t\t\t\t\t\t\t\t\t\t\titem.area,\n\t\t\t\t\t\t\t\t\t\t\t\tinstanceId\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\tname={ `fields-create-template-part-modal__area-${ instanceId }` }\n\t\t\t\t\t\t\t\t\t\t\tvalue={ item.area }\n\t\t\t\t\t\t\t\t\t\t\tchecked={ area === item.area }\n\t\t\t\t\t\t\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\tsetArea( item.area );\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\taria-describedby={ getAreaRadioDescriptionId(\n\t\t\t\t\t\t\t\t\t\t\t\titem.area,\n\t\t\t\t\t\t\t\t\t\t\t\tinstanceId\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"fields-create-template-part-modal__area-radio-icon\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\t\t\t\thtmlFor={ getAreaRadioId(\n\t\t\t\t\t\t\t\t\t\t\t\titem.area,\n\t\t\t\t\t\t\t\t\t\t\t\tinstanceId\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"fields-create-template-part-modal__area-radio-label\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"fields-create-template-part-modal__area-radio-checkmark\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<p\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"fields-create-template-part-modal__area-radio-description\"\n\t\t\t\t\t\t\t\t\t\t\tid={ getAreaRadioDescriptionId(\n\t\t\t\t\t\t\t\t\t\t\t\titem.area,\n\t\t\t\t\t\t\t\t\t\t\t\tinstanceId\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ item.description }\n\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t\t<HStack justify=\"right\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tcloseModal();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\taria-disabled={ ! title || isSubmitting }\n\t\t\t\t\t\tisBusy={ isSubmitting }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t</Button>\n\t\t\t\t</HStack>\n\t\t\t</VStack>\n\t\t</form>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAQO;AACP,qBAA8B;AAE9B,uBAAmC;AACnC,kBAAuC;AACvC,qBAAyB;AACzB,kBAAmB;AACnB,mBAOO;AACP,qBAAsC;AAEtC,oBAA0B;AAK1B,mBAIO;AA6CJ;AA3CH,SAAS,eAAgB,OAAe,YAAqB;AAC5D,SAAO,kDAAmD,KAAM,IAAK,UAAW;AACjF;AACA,SAAS,0BAA2B,OAAe,YAAqB;AACvE,SAAO,8DAA+D,KAAM,IAAK,UAAW;AAC7F;AAkBe,SAAR,wBAA0C;AAAA,EAChD;AAAA,EACA,GAAG;AACJ,GAE2C;AAC1C,QAAM,wBAAoB;AAAA,IACzB,CAAE,WACD,OAAQ,iBAAAA,KAAU,EAAE,YAAa,kBAAmB,GAAG,QACpD;AAAA,IACJ,CAAC;AAAA,EACF;AACA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ,cAAc;AAAA,MACtB,gBAAiB,UAAU;AAAA,MAC3B,kBAAiB;AAAA,MACjB,cAAa;AAAA,MACb,MAAK;AAAA,MAEL,sDAAC,mCAAkC,GAAG,WAAY;AAAA;AAAA,EACnD;AAEF;AASA,IAAM,sBAAsB,CAAE,mBAA4B;AAEzD,MAAK,aAAa,gBAAiB;AAClC,WAAO,aAAAC;AAAA,EACR,WAAY,aAAa,gBAAiB;AACzC,WAAO,aAAAC;AAAA,EACR,WAAY,cAAc,gBAAiB;AAC1C,WAAO,aAAAC;AAAA,EACR,WAAY,cAAc,gBAAiB;AAG1C,WAAO,aAAAC;AAAA,EACR;AAEA,MAAK,WAAW,gBAAiB;AAGhC,WAAO,aAAAA;AAAA,EACR;AACA,SAAO,aAAAC;AACR;AAeO,SAAS,gCAAiC;AAAA,EAChD,cAAc;AAAA,EACd,SAAS,CAAC;AAAA,EACV,mBAAe,gBAAI,KAAM;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAChB,GAA0C;AACzC,QAAM,EAAE,kBAAkB,QAAI,yBAAa,eAAAC,KAAa;AACxD,QAAM,EAAE,iBAAiB,QAAI,yBAAa,iBAAAN,KAAU;AACpD,QAAM,4BAAwB,uCAAyB;AAEvD,QAAM,CAAE,OAAO,QAAS,QAAI,yBAAU,YAAa;AACnD,QAAM,CAAE,MAAM,OAAQ,QAAI,yBAAU,WAAY;AAChD,QAAM,CAAE,cAAc,eAAgB,QAAI,yBAAU,KAAM;AAC1D,QAAM,iBAAa,8BAAe,uBAAwB;AAE1D,QAAM,+BAA2B;AAAA,IAChC,CAAE,WACD,OAAQ,iBAAAA,KAAU,EAAE,gBAAgB,GAAG;AAAA,IACxC,CAAC;AAAA,EACF;AAEA,iBAAe,qBAAqB;AACnC,QAAK,CAAE,SAAS,cAAe;AAC9B;AAAA,IACD;AAEA,QAAI;AACH,sBAAiB,IAAK;AACtB,YAAM,kBAAc;AAAA,QACnB;AAAA,QACA;AAAA,MACD;AACA,YAAM,gBAAY,uCAA0B,WAAY;AAExD,YAAM,eAAe,MAAM;AAAA,QAC1B;AAAA,QACA;AAAA,QACA;AAAA,UACC,MAAM;AAAA,UACN,OAAO;AAAA,UACP,aAAS,yBAAW,MAAO;AAAA,UAC3B;AAAA,QACD;AAAA,QACA,EAAE,cAAc,KAAK;AAAA,MACtB;AACA,YAAM,SAAU,YAAa;AAAA,IAG9B,SAAU,OAAQ;AACjB,YAAM,eACL,iBAAiB,SACjB,UAAU,SACV,MAAM,WACN,MAAM,SAAS,kBACZ,MAAM,cACN;AAAA,QACA;AAAA,MACA;AAEJ,wBAAmB,cAAc,EAAE,MAAM,WAAW,CAAE;AAEtD,gBAAU;AAAA,IACX,UAAE;AACD,sBAAiB,KAAM;AAAA,IACxB;AAAA,EACD;AACA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,OAAQ,UAAW;AAC7B,cAAM,eAAe;AACrB,cAAM,mBAAmB;AAAA,MAC1B;AAAA,MAEA,uDAAC,kBAAAO,sBAAA,EAAO,SAAQ,KACf;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,uBAAqB;AAAA,YACrB,yBAAuB;AAAA,YACvB,WAAQ,gBAAI,MAAO;AAAA,YACnB,OAAQ;AAAA,YACR,UAAW;AAAA,YACX,UAAQ;AAAA;AAAA,QACT;AAAA,QACA,6CAAC,cAAS,WAAU,oDACnB;AAAA,sDAAC,8BAAY,aAAZ,EAAwB,IAAG,UACzB,8BAAI,MAAO,GACd;AAAA,UACA,4CAAC,SAAI,WAAU,uDACV,uCAA4B,CAAC,GAAI;AAAA,YACpC,CAAE,SAA4B;AAC7B,oBAAM,OAAO,oBAAqB,KAAK,IAAK;AAC5C,qBACC;AAAA,gBAAC;AAAA;AAAA,kBAEA,WAAU;AAAA,kBAEV;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACA,MAAK;AAAA,wBACL,IAAK;AAAA,0BACJ,KAAK;AAAA,0BACL;AAAA,wBACD;AAAA,wBACA,MAAO,2CAA4C,UAAW;AAAA,wBAC9D,OAAQ,KAAK;AAAA,wBACb,SAAU,SAAS,KAAK;AAAA,wBACxB,UAAW,MAAM;AAChB,kCAAS,KAAK,IAAK;AAAA,wBACpB;AAAA,wBACA,oBAAmB;AAAA,0BAClB,KAAK;AAAA,0BACL;AAAA,wBACD;AAAA;AAAA,oBACD;AAAA,oBACA;AAAA,sBAAC;AAAA;AAAA,wBACA;AAAA,wBACA,WAAU;AAAA;AAAA,oBACX;AAAA,oBACA;AAAA,sBAAC;AAAA;AAAA,wBACA,SAAU;AAAA,0BACT,KAAK;AAAA,0BACL;AAAA,wBACD;AAAA,wBACA,WAAU;AAAA,wBAER,eAAK;AAAA;AAAA,oBACR;AAAA,oBACA;AAAA,sBAAC;AAAA;AAAA,wBACA,MAAO;AAAA,wBACP,WAAU;AAAA;AAAA,oBACX;AAAA,oBACA;AAAA,sBAAC;AAAA;AAAA,wBACA,WAAU;AAAA,wBACV,IAAK;AAAA,0BACJ,KAAK;AAAA,0BACL;AAAA,wBACD;AAAA,wBAEE,eAAK;AAAA;AAAA,oBACR;AAAA;AAAA;AAAA,gBA7CM,KAAK;AAAA,cA8CZ;AAAA,YAEF;AAAA,UACD,GACD;AAAA,WACD;AAAA,QACA,6CAAC,kBAAAC,sBAAA,EAAO,SAAQ,SACf;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,SAAQ;AAAA,cACR,SAAU,MAAM;AACf,2BAAW;AAAA,cACZ;AAAA,cAEE,8BAAI,QAAS;AAAA;AAAA,UAChB;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,iBAAgB,CAAE,SAAS;AAAA,cAC3B,QAAS;AAAA,cAEP;AAAA;AAAA,UACH;AAAA,WACD;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
-  "names": ["coreStore", "headerIcon", "footerIcon", "sidebarIcon", "overlayIcon", "symbolFilledIcon", "noticesStore", "VStack", "HStack"]
-}

package/build/fields/featured-image/featured-image-edit.js

@@ -1,162 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/fields/src/fields/featured-image/featured-image-edit.tsx
-var featured_image_edit_exports = {};
-__export(featured_image_edit_exports, {
-  FeaturedImageEdit: () => FeaturedImageEdit
-});
-module.exports = __toCommonJS(featured_image_edit_exports);
-var import_components = require("@wordpress/components");
-var import_data = require("@wordpress/data");
-var import_element = require("@wordpress/element");
-var import_media_utils = require("@wordpress/media-utils");
-var import_icons = require("@wordpress/icons");
-var import_core_data = require("@wordpress/core-data");
-var import_i18n = require("@wordpress/i18n");
-var import_lock_unlock = require("../../lock-unlock");
-var import_jsx_runtime = require("react/jsx-runtime");
-var { MediaUploadModal } = (0, import_lock_unlock.unlock)(import_media_utils.privateApis);
-function ConditionalMediaUpload({ render, ...props }) {
-  const [isModalOpen, setIsModalOpen] = (0, import_element.useState)(false);
-  if (window.__experimentalDataViewsMediaModal) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      render && render({ open: () => setIsModalOpen(true) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        MediaUploadModal,
-        {
-          ...props,
-          isOpen: isModalOpen,
-          onClose: () => {
-            setIsModalOpen(false);
-            props.onClose?.();
-          },
-          onSelect: (media) => {
-            setIsModalOpen(false);
-            props.onSelect?.(media);
-          }
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_media_utils.MediaUpload, { ...props, render });
-}
-var FeaturedImageEdit = ({
-  data,
-  field,
-  onChange
-}) => {
-  const { id } = field;
-  const value = field.getValue({ item: data });
-  const media = (0, import_data.useSelect)(
-    (select) => {
-      const { getEntityRecord } = select(import_core_data.store);
-      return getEntityRecord("postType", "attachment", value);
-    },
-    [value]
-  );
-  const onChangeControl = (0, import_element.useCallback)(
-    (newValue) => onChange({
-      [id]: newValue
-    }),
-    [id, onChange]
-  );
-  const url = media?.source_url;
-  const title = media?.title?.rendered;
-  const ref = (0, import_element.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("fieldset", { className: "fields-controls__featured-image", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fields-controls__featured-image-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    ConditionalMediaUpload,
-    {
-      onSelect: (selectedMedia) => {
-        onChangeControl(selectedMedia.id);
-      },
-      allowedTypes: ["image"],
-      value,
-      title: (0, import_i18n.__)("Select Featured Image"),
-      render: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          ref,
-          role: "button",
-          tabIndex: -1,
-          onClick: open,
-          onKeyDown: (event) => {
-            if (event.key === "Enter" || event.key === " ") {
-              event.preventDefault();
-              open();
-            }
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            import_components.__experimentalGrid,
-            {
-              rowGap: 0,
-              columnGap: 8,
-              templateColumns: "24px 1fr 24px",
-              children: [
-                url && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "img",
-                    {
-                      className: "fields-controls__featured-image-image",
-                      alt: "",
-                      width: 24,
-                      height: 24,
-                      src: url
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fields-controls__featured-image-title", children: title })
-                ] }),
-                !url && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "span",
-                    {
-                      className: "fields-controls__featured-image-placeholder",
-                      style: {
-                        width: "24px",
-                        height: "24px"
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fields-controls__featured-image-title", children: (0, import_i18n.__)("Choose an image\u2026") })
-                ] }),
-                url && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_components.Button,
-                  {
-                    size: "small",
-                    className: "fields-controls__featured-image-remove-button",
-                    icon: import_icons.lineSolid,
-                    onClick: (event) => {
-                      event.stopPropagation();
-                      onChangeControl(0);
-                    }
-                  }
-                ) })
-              ]
-            }
-          )
-        }
-      )
-    }
-  ) }) });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  FeaturedImageEdit
-});
-//# sourceMappingURL=featured-image-edit.js.map