@shopify/ui-extensions 2023.4.0 → 2023.4.1

package/src/surfaces/admin/components/Icon/IconName.ts

@@ -0,0 +1,567 @@
+export type IconName =
+  | 'AbandonedCartFilledMajor'
+  | 'AbandonedCartMajor'
+  | 'AccessibilityMajor'
+  | 'ActivitiesMajor'
+  | 'AddCodeMajor'
+  | 'AddImageMajor'
+  | 'AddMajor'
+  | 'AddNoteMajor'
+  | 'AddProductMajor'
+  | 'AdjustMinor'
+  | 'AffiliateMajor'
+  | 'AlertMinor'
+  | 'AnalyticsBarHorizontalMinor'
+  | 'AnalyticsBarStackedMinor'
+  | 'AnalyticsCohortMinor'
+  | 'AnalyticsDonutMinor'
+  | 'AnalyticsFilledMinor'
+  | 'AnalyticsFunnelMinor'
+  | 'AnalyticsLineMinor'
+  | 'AnalyticsMajor'
+  | 'AnalyticsMinor'
+  | 'AnalyticsTableMinor'
+  | 'AnyClickModelMinor'
+  | 'AppExtensionMinor'
+  | 'AppsFilledMajor'
+  | 'AppsMajor'
+  | 'AppsMinor'
+  | 'ArchiveMajor'
+  | 'ArchiveMinor'
+  | 'ArrowDownMinor'
+  | 'ArrowLeftMinor'
+  | 'ArrowRightMinor'
+  | 'ArrowUpMinor'
+  | 'AttachmentFilledMajor'
+  | 'AttachmentMajor'
+  | 'AutomationFilledMajor'
+  | 'AutomationMajor'
+  | 'BackspaceMajor'
+  | 'BalanceFilledMajor'
+  | 'BalanceMajor'
+  | 'BankFilledMajor'
+  | 'BankMajor'
+  | 'BarcodeMajor'
+  | 'BehaviorFilledMajor'
+  | 'BehaviorMajor'
+  | 'BehaviorMinor'
+  | 'BillingStatementDollarFilledMajor'
+  | 'BillingStatementDollarMajor'
+  | 'BillingStatementEuroFilledMajor'
+  | 'BillingStatementEuroMajor'
+  | 'BillingStatementPoundFilledMajor'
+  | 'BillingStatementPoundMajor'
+  | 'BillingStatementRupeeFilledMajor'
+  | 'BillingStatementRupeeMajor'
+  | 'BillingStatementYenFilledMajor'
+  | 'BillingStatementYenMajor'
+  | 'BlockMinor'
+  | 'BlockquoteMajor'
+  | 'BlogMajor'
+  | 'BoldMajor'
+  | 'BoldMinor'
+  | 'BugMajor'
+  | 'ButtonCornerPillMajor'
+  | 'ButtonCornerRoundedMajor'
+  | 'ButtonCornerSquareMajor'
+  | 'ButtonMinor'
+  | 'BuyButtonButtonLayoutMajor'
+  | 'BuyButtonHorizontalLayoutMajor'
+  | 'BuyButtonMajor'
+  | 'BuyButtonVerticalLayoutMajor'
+  | 'CalendarMajor'
+  | 'CalendarMinor'
+  | 'CalendarTickMajor'
+  | 'CalendarTimeMinor'
+  | 'CameraMajor'
+  | 'CancelMajor'
+  | 'CancelMinor'
+  | 'CancelSmallMinor'
+  | 'CapitalFilledMajor'
+  | 'CapitalMajor'
+  | 'CapturePaymentMinor'
+  | 'CardReaderChipMajor'
+  | 'CardReaderMajor'
+  | 'CardReaderTapMajor'
+  | 'CaretDownMinor'
+  | 'CaretUpMinor'
+  | 'CartDownFilledMajor'
+  | 'CartDownMajor'
+  | 'CartFilledMajor'
+  | 'CartMajor'
+  | 'CartUpMajor'
+  | 'CashDollarFilledMajor'
+  | 'CashDollarMajor'
+  | 'CashDollarMinor'
+  | 'CashEuroMajor'
+  | 'CashPoundMajor'
+  | 'CashRupeeMajor'
+  | 'CashYenMajor'
+  | 'CategoriesMajor'
+  | 'ChannelsMajor'
+  | 'ChatMajor'
+  | 'ChecklistAlternateMajor'
+  | 'ChecklistMajor'
+  | 'CheckoutMajor'
+  | 'ChevronDownMinor'
+  | 'ChevronLeftMinor'
+  | 'ChevronRightMinor'
+  | 'ChevronUpMinor'
+  | 'CircleAlertMajor'
+  | 'CircleCancelMajor'
+  | 'CircleCancelMinor'
+  | 'CircleChevronDownMinor'
+  | 'CircleChevronLeftMinor'
+  | 'CircleChevronRightMinor'
+  | 'CircleChevronUpMinor'
+  | 'CircleDisableMinor'
+  | 'CircleDisabledMajor'
+  | 'CircleDotsMajor'
+  | 'CircleDownMajor'
+  | 'CircleInformationMajor'
+  | 'CircleLeftMajor'
+  | 'CircleMinusMajor'
+  | 'CircleMinusMinor'
+  | 'CircleMinusOutlineMinor'
+  | 'CirclePlusMajor'
+  | 'CirclePlusMinor'
+  | 'CirclePlusOutlineMinor'
+  | 'CircleRightMajor'
+  | 'CircleTickMajor'
+  | 'CircleTickMinor'
+  | 'CircleTickOutlineMinor'
+  | 'CircleUpMajor'
+  | 'ClipboardMinor'
+  | 'ClockMajor'
+  | 'ClockMinor'
+  | 'CodeMajor'
+  | 'CodeMinor'
+  | 'CollectionReferenceMinor'
+  | 'CollectionsFilledMajor'
+  | 'CollectionsMajor'
+  | 'ColorNoneMinor'
+  | 'ColorsMajor'
+  | 'Column1Major'
+  | 'ColumnWithTextMajor'
+  | 'Columns2Major'
+  | 'Columns3Major'
+  | 'Columns3Minor'
+  | 'ComposeMajor'
+  | 'ConfettiMajor'
+  | 'ConnectMinor'
+  | 'ContentFilledMinor'
+  | 'ContentMinor'
+  | 'ConversationMinor'
+  | 'CreditCardCancelMajor'
+  | 'CreditCardMajor'
+  | 'CreditCardPercentMajor'
+  | 'CreditCardSecureMajor'
+  | 'CurrencyConvertMinor'
+  | 'CustomerMinusMajor'
+  | 'CustomerPlusMajor'
+  | 'CustomersFilledMinor'
+  | 'CustomersMajor'
+  | 'CustomersMinor'
+  | 'DataDrivenModelMinor'
+  | 'DataVisualizationMajor'
+  | 'DecimalMinor'
+  | 'DeleteMajor'
+  | 'DeleteMinor'
+  | 'DesktopMajor'
+  | 'DetailedPopUpMajor'
+  | 'DiamondAlertMajor'
+  | 'DiamondAlertMinor'
+  | 'DigitalMediaReceiverMajor'
+  | 'DiscountAutomaticMajor'
+  | 'DiscountCodeMajor'
+  | 'DiscountsFilledMinor'
+  | 'DiscountsMajor'
+  | 'DiscountsMinor'
+  | 'DisputeMinor'
+  | 'DnsSettingsMajor'
+  | 'DockFloatingMajor'
+  | 'DockSideMajor'
+  | 'DomainNewMajor'
+  | 'DomainRedirectMinor'
+  | 'DomainsFilledMajor'
+  | 'DomainsMajor'
+  | 'DraftOrdersFilledMajor'
+  | 'DraftOrdersMajor'
+  | 'DragDropMajor'
+  | 'DragHandleMinor'
+  | 'DropdownMinor'
+  | 'DuplicateMinor'
+  | 'DynamicSourceMajor'
+  | 'DynamicSourceMinor'
+  | 'EditMajor'
+  | 'EditMinor'
+  | 'EmailMajor'
+  | 'EmailNewsletterMajor'
+  | 'EmbedMinor'
+  | 'EnableSelectionMinor'
+  | 'EnterMajor'
+  | 'EnvelopeMajor'
+  | 'ExchangeMajor'
+  | 'ExistingInventoryMajor'
+  | 'ExitMajor'
+  | 'ExploreImagesMajor'
+  | 'ExportMinor'
+  | 'ExtendMajor'
+  | 'ExtendMinor'
+  | 'ExternalMinor'
+  | 'ExternalSmallMinor'
+  | 'EyeDropperMinor'
+  | 'FaviconMajor'
+  | 'FavoriteMajor'
+  | 'FeaturedCollectionMajor'
+  | 'FeaturedContentMajor'
+  | 'FileFilledMinor'
+  | 'FileMinor'
+  | 'FilterMajor'
+  | 'FilterMinor'
+  | 'FinancesMajor'
+  | 'FinancesMinor'
+  | 'FirstClickModelMinor'
+  | 'FirstOrderMajor'
+  | 'FirstVisitMajor'
+  | 'FlagMajor'
+  | 'FlipCameraMajor'
+  | 'FolderDownMajor'
+  | 'FolderMajor'
+  | 'FolderMinusMajor'
+  | 'FolderPlusMajor'
+  | 'FolderUpMajor'
+  | 'FollowUpEmailMajor'
+  | 'FoodMajor'
+  | 'FooterMajor'
+  | 'FormsMajor'
+  | 'FraudProtectMajor'
+  | 'FraudProtectMinor'
+  | 'FraudProtectPendingMajor'
+  | 'FraudProtectPendingMinor'
+  | 'FraudProtectUnprotectedMajor'
+  | 'FraudProtectUnprotectedMinor'
+  | 'FulfillmentFulfilledMajor'
+  | 'FulfillmentOnHoldMajor'
+  | 'GamesConsoleMajor'
+  | 'GaugeMajor'
+  | 'GaugeMinor'
+  | 'GiftCardFilledMinor'
+  | 'GiftCardMajor'
+  | 'GiftCardMinor'
+  | 'GlobeMajor'
+  | 'GlobeMinor'
+  | 'GrammarMajor'
+  | 'HashtagMajor'
+  | 'HashtagMinor'
+  | 'HeaderMajor'
+  | 'HeartMajor'
+  | 'HideKeyboardMajor'
+  | 'HideMinor'
+  | 'HintMajor'
+  | 'HomeFilledMinor'
+  | 'HomeMajor'
+  | 'HomeMinor'
+  | 'HorizontalDotsMinor'
+  | 'IconNameSet'
+  | 'IconsFilledMajor'
+  | 'IconsMajor'
+  | 'IdentityCardFilledMajor'
+  | 'IdentityCardMajor'
+  | 'IllustrationMajor'
+  | 'ImageAltMajor'
+  | 'ImageAltMinor'
+  | 'ImageMajor'
+  | 'ImageWithTextMajor'
+  | 'ImageWithTextOverlayMajor'
+  | 'ImagesMajor'
+  | 'ImportMinor'
+  | 'ImportStoreMajor'
+  | 'InactiveLocationMajor'
+  | 'InactiveLocationMinor'
+  | 'IncomingMajor'
+  | 'IndentMajor'
+  | 'IndentMinor'
+  | 'InfoMinor'
+  | 'InsertDynamicSourceMajor'
+  | 'InsertDynamicSourceMinor'
+  | 'InstallMinor'
+  | 'InventoryFilledMajor'
+  | 'InventoryMajor'
+  | 'InviteMinor'
+  | 'IqMajor'
+  | 'ItalicMajor'
+  | 'ItalicMinor'
+  | 'JobsFilledMajor'
+  | 'JobsMajor'
+  | 'KeyMajor'
+  | 'KeyboardMajor'
+  | 'KeyboardMinor'
+  | 'LabelPrinterMajor'
+  | 'LandingPageMajor'
+  | 'LanguageFilledMinor'
+  | 'LanguageMinor'
+  | 'LastClickModelMinor'
+  | 'LastNonDirectClickModelMinor'
+  | 'LegalFilledMajor'
+  | 'LegalMajor'
+  | 'LinearModelMinor'
+  | 'LinkMinor'
+  | 'ListFilledMajor'
+  | 'ListMajor'
+  | 'ListMinor'
+  | 'LiveViewFilledMajor'
+  | 'LiveViewMajor'
+  | 'LocationFilledMajor'
+  | 'LocationMajor'
+  | 'LocationsMinor'
+  | 'LockFilledMajor'
+  | 'LockMajor'
+  | 'LockMinor'
+  | 'LogOutMinor'
+  | 'LogoBlockMajor'
+  | 'MagicMajor'
+  | 'MagicMinor'
+  | 'ManagedStoreMajor'
+  | 'MarkFulfilledMinor'
+  | 'MarkPaidMinor'
+  | 'MarketingFilledMinor'
+  | 'MarketingMajor'
+  | 'MarketingMinor'
+  | 'MarketsFilledMajor'
+  | 'MarketsMajor'
+  | 'MaximizeMajor'
+  | 'MaximizeMinor'
+  | 'MeasurementMinor'
+  | 'MentionMajor'
+  | 'MergeMinor'
+  | 'MetafieldsFilledMinor'
+  | 'MetafieldsMajor'
+  | 'MetafieldsMinor'
+  | 'MetaobjectMinor'
+  | 'MetaobjectReferenceMinor'
+  | 'MicrophoneMajor'
+  | 'MinimizeMajor'
+  | 'MinimizeMinor'
+  | 'MinusMajor'
+  | 'MinusMinor'
+  | 'MobileAcceptMajor'
+  | 'MobileBackArrowMajor'
+  | 'MobileCancelMajor'
+  | 'MobileChevronMajor'
+  | 'MobileHamburgerMajor'
+  | 'MobileHorizontalDotsMajor'
+  | 'MobileMajor'
+  | 'MobilePlusMajor'
+  | 'MobileVerticalDotsMajor'
+  | 'MonerisMajor'
+  | 'MoneyFilledMinor'
+  | 'MoneyMinor'
+  | 'NatureMajor'
+  | 'NavigationMajor'
+  | 'NoteMajor'
+  | 'NoteMinor'
+  | 'NotificationFilledMajor'
+  | 'NotificationMajor'
+  | 'OnlineStoreMajor'
+  | 'OnlineStoreMinor'
+  | 'OrderStatusMinor'
+  | 'OrderedListMajor'
+  | 'OrderedListMinor'
+  | 'OrdersFilledMinor'
+  | 'OrdersMajor'
+  | 'OrdersMinor'
+  | 'OrganizationMajor'
+  | 'OutdentMajor'
+  | 'OutdentMinor'
+  | 'OutgoingMajor'
+  | 'PackageFilledMajor'
+  | 'PackageMajor'
+  | 'PageDownMajor'
+  | 'PageMajor'
+  | 'PageMinusMajor'
+  | 'PagePlusMajor'
+  | 'PageReferenceMinor'
+  | 'PageUpMajor'
+  | 'PaginationEndMinor'
+  | 'PaginationStartMinor'
+  | 'PaintBrushMajor'
+  | 'PaperCheckMajor'
+  | 'PaperCheckMinor'
+  | 'PasskeyFilledMinor'
+  | 'PasskeyMajor'
+  | 'PasskeyMinor'
+  | 'PauseCircleMajor'
+  | 'PauseMajor'
+  | 'PauseMinor'
+  | 'PaymentsFilledMajor'
+  | 'PaymentsMajor'
+  | 'PersonalizedTextMajor'
+  | 'PhoneInMajor'
+  | 'PhoneMajor'
+  | 'PhoneOutMajor'
+  | 'PinMajor'
+  | 'PinMinor'
+  | 'PinUnfilledMajor'
+  | 'PinUnfilledMinor'
+  | 'PlanFilledMinor'
+  | 'PlanMajor'
+  | 'PlanMinor'
+  | 'PlayCircleMajor'
+  | 'PlayMajor'
+  | 'PlayMinor'
+  | 'PlusMinor'
+  | 'PointOfSaleMajor'
+  | 'PopularMajor'
+  | 'PositionBasedModelMinor'
+  | 'PriceLookupMinor'
+  | 'PrintMajor'
+  | 'PrintMinor'
+  | 'ProductCostMajor'
+  | 'ProductReferenceMinor'
+  | 'ProductReturnsMinor'
+  | 'ProductsFilledMinor'
+  | 'ProductsMajor'
+  | 'ProductsMinor'
+  | 'ProfileMajor'
+  | 'ProfileMinor'
+  | 'PromoteFilledMinor'
+  | 'PromoteMinor'
+  | 'QuestionMarkInverseMajor'
+  | 'QuestionMarkInverseMinor'
+  | 'QuestionMarkMajor'
+  | 'QuestionMarkMinor'
+  | 'QuickSaleMajor'
+  | 'ReadTimeMinor'
+  | 'ReceiptMajor'
+  | 'RecentSearchesMajor'
+  | 'RedoMajor'
+  | 'ReferralCodeMajor'
+  | 'ReferralMajor'
+  | 'RefreshMajor'
+  | 'RefreshMinor'
+  | 'RefundMajor'
+  | 'RefundMinor'
+  | 'RemoveProductMajor'
+  | 'RepeatOrderMajor'
+  | 'ReplaceMajor'
+  | 'ReplayMinor'
+  | 'ReportFilledMinor'
+  | 'ReportMinor'
+  | 'ReportsMajor'
+  | 'ResetMinor'
+  | 'ResourcesMajor'
+  | 'ReturnMinor'
+  | 'ReturnsMajor'
+  | 'RichTextMinor'
+  | 'RiskMajor'
+  | 'RiskMinor'
+  | 'Rows2Major'
+  | 'SandboxMajor'
+  | 'SaveMinor'
+  | 'SearchMajor'
+  | 'SearchMinor'
+  | 'SectionMajor'
+  | 'SecureMajor'
+  | 'SelectMinor'
+  | 'SendMajor'
+  | 'SettingsFilledMinor'
+  | 'SettingsMajor'
+  | 'SettingsMinor'
+  | 'ShareIosMinor'
+  | 'ShareMinor'
+  | 'ShipmentFilledMajor'
+  | 'ShipmentMajor'
+  | 'ShopcodesMajor'
+  | 'SidebarLeftMajor'
+  | 'SidebarRightMajor'
+  | 'SimplifyMajor'
+  | 'SimplifyMinor'
+  | 'SlideshowMajor'
+  | 'SmileyHappyMajor'
+  | 'SmileyJoyMajor'
+  | 'SmileyNeutralMajor'
+  | 'SmileySadMajor'
+  | 'SocialAdMajor'
+  | 'SocialPostMajor'
+  | 'SoftPackMajor'
+  | 'SortAscendingMajor'
+  | 'SortDescendingMajor'
+  | 'SortMinor'
+  | 'SoundMajor'
+  | 'StarFilledMinor'
+  | 'StarOutlineMinor'
+  | 'StatusActiveMajor'
+  | 'StopMajor'
+  | 'StoreDetailsFilledMinor'
+  | 'StoreDetailsMinor'
+  | 'StoreFilledMinor'
+  | 'StoreMajor'
+  | 'StoreMinor'
+  | 'StoreStatusMajor'
+  | 'TabletMajor'
+  | 'TapChipMajor'
+  | 'TaxFilledMajor'
+  | 'TaxMajor'
+  | 'TeamMajor'
+  | 'TemplateMajor'
+  | 'TemplateMinor'
+  | 'TextAlignmentCenterMajor'
+  | 'TextAlignmentLeftMajor'
+  | 'TextAlignmentRightMajor'
+  | 'TextBlockMajor'
+  | 'TextColorMajor'
+  | 'TextColorMinor'
+  | 'TextMajor'
+  | 'ThemeEditMajor'
+  | 'ThemeStoreMajor'
+  | 'ThemesMajor'
+  | 'ThumbsDownMajor'
+  | 'ThumbsDownMinor'
+  | 'ThumbsUpMajor'
+  | 'ThumbsUpMinor'
+  | 'TickMinor'
+  | 'TickSmallMinor'
+  | 'TimeDecayModelMinor'
+  | 'TimelineAttachmentMajor'
+  | 'TipsMajor'
+  | 'TitleMinor'
+  | 'ToggleMinor'
+  | 'ToolsMajor'
+  | 'TransactionFeeDollarMajor'
+  | 'TransactionFeeEuroMajor'
+  | 'TransactionFeePoundMajor'
+  | 'TransactionFeeRupeeMajor'
+  | 'TransactionFeeYenMajor'
+  | 'TransactionMajor'
+  | 'TransferFilledMajor'
+  | 'TransferInMajor'
+  | 'TransferMajor'
+  | 'TransferOutMajor'
+  | 'TransferWithinShopifyMajor'
+  | 'TransportMajor'
+  | 'TroubleshootMajor'
+  | 'TypeMajor'
+  | 'TypeMinor'
+  | 'UnderlineMajor'
+  | 'UnderlineMinor'
+  | 'UndoMajor'
+  | 'UnfulfilledMajor'
+  | 'UnknownDeviceMajor'
+  | 'UpdateInventoryMajor'
+  | 'UploadMajor'
+  | 'VariantMajor'
+  | 'ViewMajor'
+  | 'ViewMinor'
+  | 'ViewportNarrowMajor'
+  | 'ViewportShortMajor'
+  | 'ViewportTallMajor'
+  | 'ViewportWideMajor'
+  | 'VocabularyMajor'
+  | 'VolumeMinor'
+  | 'WandMajor'
+  | 'WandMinor'
+  | 'WearableMajor'
+  | 'WeightMinor'
+  | 'WholesaleMajor'
+  | 'WifiMajor';

package/src/surfaces/admin/components/Image/Image.doc.ts

@@ -2,6 +2,7 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'Image',
+  featureFlag: 'admin_extensibility',
   description: 'Use this when you want to display an image.',
   requires: '',
   thumbnail: 'image-thumbnail.png',
@@ -19,7 +20,7 @@ const data: ReferenceEntityTemplateSchema = {
   defaultExample: {
     image: 'image-default.png',
     codeblock: {
-      title: 'TODO: add example title',
+      title: 'Simple Image example',
       tabs: [
         {
           title: 'React',
@@ -35,7 +36,13 @@ const data: ReferenceEntityTemplateSchema = {
     },
   },
 
-  related: [],
+  related: [
+    {
+      type: 'component',
+      name: 'Icon',
+      url: '/docs/api/admin-extensions/components/media/icon',
+    },
+  ],
 };
 
 export default data;

package/src/surfaces/admin/components/Image/Image.ts

@@ -2,45 +2,48 @@ import {createRemoteComponent} from '@remote-ui/core';
 import type {AccessibilityRole} from '../shared';
 
 export type ImageProps = (ImageAccessibilityLabelProp | ImageAltProp) &
-  (ImageSourceProp | ImageSrcProp) & {
-    /**
-     * Sets the semantic meaning of the component’s content. When set,
-     * the role will be used by assistive technologies to help users
-     * navigate the page.
-     */
-    accessibilityRole?: Extract<AccessibilityRole, 'decorative'>;
+  (ImageSourceProp | ImageSrcProp) &
+  ImageBaseProps;
 
-    /**
-     * Defines a unique identifier which must be unique in the whole document.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
-     */
-    id?: string;
+interface ImageBaseProps {
+  /**
+   * Sets the semantic meaning of the component’s content. When set,
+   * the role will be used by assistive technologies to help users
+   * navigate the page.
+   */
+  accessibilityRole?: Extract<AccessibilityRole, 'decorative'>;
+
+  /**
+   * Defines a unique identifier which must be unique in the whole document.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id?: string;
 
-    /**
-     * Determines the loading behavior of the image:
-     * - `eager`: Immediately loads the image, irrespective of its position within the visible viewport.
-     * - `lazy`: Delays loading the image until it approaches a specified distance from the viewport.
-     *
-     * @defaultValue `eager`
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading
-     */
-    loading?: 'eager' | 'lazy';
+  /**
+   * Determines the loading behavior of the image:
+   * - `eager`: Immediately loads the image, irrespective of its position within the visible viewport.
+   * - `lazy`: Delays loading the image until it approaches a specified distance from the viewport.
+   *
+   * @defaultValue `eager`
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading
+   */
+  loading?: 'eager' | 'lazy';
 
-    /**
-     * Invoked when load completes successfully.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
-     */
-    onLoad?(): void;
+  /**
+   * Invoked when load completes successfully.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
+   */
+  onLoad?(): void;
 
-    /**
-     * Invoked on load error.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
-     */
-    onError?(): void;
-  };
+  /**
+   * Invoked on load error.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
+   */
+  onError?(): void;
+}
 
 interface ImageAccessibilityLabelProp {
   /**

package/src/surfaces/admin/components/Image/examples/basic-image.example.ts

@@ -2,8 +2,8 @@ import {extend, Image} from '@shopify/ui-extensions/admin';
 
 extend('Playground', (root) => {
   const image = root.createComponent(Image, {
-    source:
-      'https://shopify.dev/assets/api/ui-extensions/admin/components/image-example-code.png',
+    alt: 'Pickaxe',
+    source: 'https://shopify.dev/assets/icons/64/pickaxe-1.png',
   });
 
   root.appendChild(image);