@shopify/ui-extensions 2025.10.0-rc.7 → 2025.10.0-rc.9

package/build/ts/surfaces/admin/targets/admin.settings.order-routing-rule.render.d.ts

@@ -100,6 +100,58 @@ export interface UnorderedListProps extends UnorderedListProps$1 {
 declare const UnorderedListtagName = 's-unordered-list';
 declare const UnorderedListBaseClass: typeof globalThis.HTMLElement;
 
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [ThumbnailtagName]: ThumbnailJSXProps & ThumbnailPreactBaseElementProps<Thumbnail>;
+        }
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [ThumbnailtagName]: Thumbnail;
+    }
+}
+
+export interface ThumbnailJSXProps extends Partial<ThumbnailProps>, Pick<ThumbnailProps$1, 'id'> {
+    onLoad?: ((event: CallbackEvent<typeof ThumbnailtagName>) => void) | null;
+    onError?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+}
+
+export interface ThumbnailClickOptions {
+    /**
+     * The event you want to influence the synthetic click.
+     */
+    sourceEvent?: ThumbnailActivationEventEsque;
+}
+
+export interface ThumbnailActivationEventEsque {
+    shiftKey: boolean;
+    metaKey: boolean;
+    ctrlKey: boolean;
+    button: number;
+}
+
+export interface ThumbnailPreactBaseElementProps<TClass extends HTMLElement> {
+    /** Assigns a unique key to this element. */
+    key?: preact.Key;
+    /** Assigns a ref (generally from `useRef()`) to this element. */
+    ref?: preact.Ref<TClass>;
+    /** Assigns this element to a parent's slot. */
+    slot?: Lowercase<string>;
+}
+
+export interface ThumbnailProps extends Required<Pick<ThumbnailProps$1, 'src' | 'alt'>> {
+    size: Extract<
+        ThumbnailProps$1['size'],
+        'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100'
+        >;
+}
+
+declare const ThumbnailtagName = 's-thumbnail';
+declare const ThumbnailBaseClass: typeof globalThis.HTMLElement;
+
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
@@ -3328,25 +3380,25 @@ declare const BannerBaseClass: typeof globalThis.HTMLElement;
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName]: BadgeJSXProps & PreactBaseElementPropsWithChildren<Badge>;
+            [BadgetagName]: BadgeJSXProps & BadgePreactBaseElementPropsWithChildren<Badge>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName]: Badge;
+        [BadgetagName]: Badge;
     }
 }
 
 export interface BadgeJSXProps extends Partial<BadgeProps>, Pick<BadgeProps$1, 'id'> {
 }
 
-export interface PreactBaseElementPropsWithChildren<TClass extends HTMLElement> extends PreactBaseElementProps<TClass> {
+export interface BadgePreactBaseElementPropsWithChildren<TClass extends HTMLElement> extends BadgePreactBaseElementProps<TClass> {
     children?: preact.ComponentChildren;
 }
 
-export interface PreactBaseElementProps<TClass extends HTMLElement> {
+export interface BadgePreactBaseElementProps<TClass extends HTMLElement> {
     /** Assigns a unique key to this element. */
     key?: preact.Key;
     /** Assigns a ref (generally from `useRef()`) to this element. */
@@ -3355,14 +3407,14 @@ export interface PreactBaseElementProps<TClass extends HTMLElement> {
     slot?: Lowercase<string>;
 }
 
-export interface ClickOptions {
+export interface BadgeClickOptions {
     /**
      * The event you want to influence the synthetic click.
      */
-    sourceEvent?: ActivationEventEsque;
+    sourceEvent?: BadgeActivationEventEsque;
 }
 
-export interface ActivationEventEsque {
+export interface BadgeActivationEventEsque {
     shiftKey: boolean;
     metaKey: boolean;
     ctrlKey: boolean;
@@ -3392,7 +3444,63 @@ export interface IconProps extends Pick<IconProps$1, 'type' | 'tone' | 'color' |
     size: Extract<IconProps$1['size'], 'small' | 'base'>;
 }
 
-declare const tagName = 's-badge';
+declare const BadgetagName = 's-badge';
+declare const BadgeBaseClass: typeof globalThis.HTMLElement;
+
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: AvatarJSXProps & PreactBaseElementPropsWithChildren<Avatar>;
+        }
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: Avatar;
+    }
+}
+
+export interface AvatarJSXProps extends Partial<AvatarProps>, Pick<AvatarProps$1, 'id'> {
+    onLoad?: () => void;
+    onError?: () => void;
+}
+
+export interface PreactBaseElementPropsWithChildren<TClass extends HTMLElement> extends PreactBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+export interface PreactBaseElementProps<TClass extends HTMLElement> {
+    /** Assigns a unique key to this element. */
+    key?: preact.Key;
+    /** Assigns a ref (generally from `useRef()`) to this element. */
+    ref?: preact.Ref<TClass>;
+    /** Assigns this element to a parent's slot. */
+    slot?: Lowercase<string>;
+}
+
+export interface ClickOptions {
+    /**
+     * The event you want to influence the synthetic click.
+     */
+    sourceEvent?: ActivationEventEsque;
+}
+
+export interface ActivationEventEsque {
+    shiftKey: boolean;
+    metaKey: boolean;
+    ctrlKey: boolean;
+    button: number;
+}
+
+export interface AvatarProps extends Required<Pick<AvatarProps$1, 'initials' | 'src' | 'alt'>> {
+    size: Extract<
+        AvatarProps$1['size'],
+        'small-200' | 'small' | 'base' | 'large' | 'large-200'
+        >;
+}
+
+declare const tagName = 's-avatar';
 /**
  * Base class for creating custom elements with Preact.
  * While this class could be used in both Node and the browser, the constructor will only be used in the browser.
@@ -3400,8 +3508,9 @@ declare const tagName = 's-badge';
  */
 declare const BaseClass: typeof globalThis.HTMLElement;
 
-import { Badge, RenderImpl } from "../../../../../src/surfaces/admin/components/Badge";
-import { Banner, CallbackEvent, RequiredBannerProps } from "../../../../../src/surfaces/admin/components/Banner";
+import { Avatar, CallbackEvent, RenderImpl } from "../../../../../src/surfaces/admin/components/Avatar";
+import { Badge } from "../../../../../src/surfaces/admin/components/Badge";
+import { Banner, RequiredBannerProps } from "../../../../../src/surfaces/admin/components/Banner";
 import { Box, BoxBorderRadii, BoxBorderStyles, RequiredBoxProps, ResponsiveBoxProps } from "../../../../../src/surfaces/admin/components/Box";
 import { Button, ButtonBaseProps } from "../../../../../src/surfaces/admin/components/Button";
 import { Checkbox, PreactInputProps } from "../../../../../src/surfaces/admin/components/Checkbox";
@@ -3426,7 +3535,7 @@ import { PasswordField, PasswordFieldProps } from "../../../../../src/surfaces/a
 import { QueryContainer } from "../../../../../src/surfaces/admin/components/QueryContainer";
 import { RequiredSectionProps, Section } from "../../../../../src/surfaces/admin/components/Section";
 import { Select } from "../../../../../src/surfaces/admin/components/Select";
-import { BadgeProps$1, BannerProps$1, BoxProps$1, ButtonProps$1, CheckboxProps$1, ChoiceListProps$1, ChoiceProps$1, ClickableProps$1, ComponentChild, DatePickerProps$1, DividerProps$1, EmailFieldProps$1, GridItemProps$1, GridProps$1, HeadingProps$1, IconProps$1, IconType, ImageProps$1, InteractionProps, LinkProps$1, ListItemProps$1, MaybeAllValuesShorthandProperty, MoneyFieldProps$1, NumberFieldProps$1, OptionGroupProps$1, OptionProps$1, OrderedListProps$1, ParagraphProps$1, PasswordFieldProps$1, QueryContainerProps$1, SectionProps$1, SelectProps$1, SpinnerProps$1, StackProps$1, TableBodyProps$1, TableCellProps$1, TableHeaderProps$1, TableHeaderRowProps$1, TableProps$1, TableRowProps$1, TextAreaProps$1, TextFieldProps$1, TextProps$1, URLFieldProps$1, UnorderedListProps$1 } from "../../../../../src/surfaces/admin/components/shared";
+import { AvatarProps$1, BadgeProps$1, BannerProps$1, BoxProps$1, ButtonProps$1, CheckboxProps$1, ChoiceListProps$1, ChoiceProps$1, ClickableProps$1, ComponentChild, DatePickerProps$1, DividerProps$1, EmailFieldProps$1, GridItemProps$1, GridProps$1, HeadingProps$1, IconProps$1, IconType, ImageProps$1, InteractionProps, LinkProps$1, ListItemProps$1, MaybeAllValuesShorthandProperty, MoneyFieldProps$1, NumberFieldProps$1, OptionGroupProps$1, OptionProps$1, OrderedListProps$1, ParagraphProps$1, PasswordFieldProps$1, QueryContainerProps$1, SectionProps$1, SelectProps$1, SpinnerProps$1, StackProps$1, TableBodyProps$1, TableCellProps$1, TableHeaderProps$1, TableHeaderRowProps$1, TableProps$1, TableRowProps$1, TextAreaProps$1, TextFieldProps$1, TextProps$1, ThumbnailProps$1, URLFieldProps$1, UnorderedListProps$1 } from "../../../../../src/surfaces/admin/components/shared";
 import { Spinner } from "../../../../../src/surfaces/admin/components/Spinner";
 import { AlignedStackProps, ResponsiveStackProps, Stack } from "../../../../../src/surfaces/admin/components/Stack";
 import { Table } from "../../../../../src/surfaces/admin/components/Table";
@@ -3437,6 +3546,7 @@ import { TableHeaderRow } from "../../../../../src/surfaces/admin/components/Tab
 import { TableRow } from "../../../../../src/surfaces/admin/components/TableRow";
 import { TextArea, TextAreaProps } from "../../../../../src/surfaces/admin/components/TextArea";
 import { TextField, TextFieldProps } from "../../../../../src/surfaces/admin/components/TextField";
+import { Thumbnail } from "../../../../../src/surfaces/admin/components/Thumbnail";
 import { UnorderedList } from "../../../../../src/surfaces/admin/components/UnorderedList";
 import { URLField, URLFieldProps } from "../../../../../src/surfaces/admin/components/URLField";
 import type { ExtensionTargets } from '../extension-targets';

package/build/ts/surfaces/admin/targets/admin.settings.validation.render.d.ts

@@ -100,6 +100,58 @@ export interface UnorderedListProps extends UnorderedListProps$1 {
 declare const UnorderedListtagName = 's-unordered-list';
 declare const UnorderedListBaseClass: typeof globalThis.HTMLElement;
 
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [ThumbnailtagName]: ThumbnailJSXProps & ThumbnailPreactBaseElementProps<Thumbnail>;
+        }
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [ThumbnailtagName]: Thumbnail;
+    }
+}
+
+export interface ThumbnailJSXProps extends Partial<ThumbnailProps>, Pick<ThumbnailProps$1, 'id'> {
+    onLoad?: ((event: CallbackEvent<typeof ThumbnailtagName>) => void) | null;
+    onError?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+}
+
+export interface ThumbnailClickOptions {
+    /**
+     * The event you want to influence the synthetic click.
+     */
+    sourceEvent?: ThumbnailActivationEventEsque;
+}
+
+export interface ThumbnailActivationEventEsque {
+    shiftKey: boolean;
+    metaKey: boolean;
+    ctrlKey: boolean;
+    button: number;
+}
+
+export interface ThumbnailPreactBaseElementProps<TClass extends HTMLElement> {
+    /** Assigns a unique key to this element. */
+    key?: preact.Key;
+    /** Assigns a ref (generally from `useRef()`) to this element. */
+    ref?: preact.Ref<TClass>;
+    /** Assigns this element to a parent's slot. */
+    slot?: Lowercase<string>;
+}
+
+export interface ThumbnailProps extends Required<Pick<ThumbnailProps$1, 'src' | 'alt'>> {
+    size: Extract<
+        ThumbnailProps$1['size'],
+        'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100'
+        >;
+}
+
+declare const ThumbnailtagName = 's-thumbnail';
+declare const ThumbnailBaseClass: typeof globalThis.HTMLElement;
+
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
@@ -3328,25 +3380,25 @@ declare const BannerBaseClass: typeof globalThis.HTMLElement;
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName]: BadgeJSXProps & PreactBaseElementPropsWithChildren<Badge>;
+            [BadgetagName]: BadgeJSXProps & BadgePreactBaseElementPropsWithChildren<Badge>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName]: Badge;
+        [BadgetagName]: Badge;
     }
 }
 
 export interface BadgeJSXProps extends Partial<BadgeProps>, Pick<BadgeProps$1, 'id'> {
 }
 
-export interface PreactBaseElementPropsWithChildren<TClass extends HTMLElement> extends PreactBaseElementProps<TClass> {
+export interface BadgePreactBaseElementPropsWithChildren<TClass extends HTMLElement> extends BadgePreactBaseElementProps<TClass> {
     children?: preact.ComponentChildren;
 }
 
-export interface PreactBaseElementProps<TClass extends HTMLElement> {
+export interface BadgePreactBaseElementProps<TClass extends HTMLElement> {
     /** Assigns a unique key to this element. */
     key?: preact.Key;
     /** Assigns a ref (generally from `useRef()`) to this element. */
@@ -3355,14 +3407,14 @@ export interface PreactBaseElementProps<TClass extends HTMLElement> {
     slot?: Lowercase<string>;
 }
 
-export interface ClickOptions {
+export interface BadgeClickOptions {
     /**
      * The event you want to influence the synthetic click.
      */
-    sourceEvent?: ActivationEventEsque;
+    sourceEvent?: BadgeActivationEventEsque;
 }
 
-export interface ActivationEventEsque {
+export interface BadgeActivationEventEsque {
     shiftKey: boolean;
     metaKey: boolean;
     ctrlKey: boolean;
@@ -3392,7 +3444,63 @@ export interface IconProps extends Pick<IconProps$1, 'type' | 'tone' | 'color' |
     size: Extract<IconProps$1['size'], 'small' | 'base'>;
 }
 
-declare const tagName = 's-badge';
+declare const BadgetagName = 's-badge';
+declare const BadgeBaseClass: typeof globalThis.HTMLElement;
+
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: AvatarJSXProps & PreactBaseElementPropsWithChildren<Avatar>;
+        }
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: Avatar;
+    }
+}
+
+export interface AvatarJSXProps extends Partial<AvatarProps>, Pick<AvatarProps$1, 'id'> {
+    onLoad?: () => void;
+    onError?: () => void;
+}
+
+export interface PreactBaseElementPropsWithChildren<TClass extends HTMLElement> extends PreactBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+export interface PreactBaseElementProps<TClass extends HTMLElement> {
+    /** Assigns a unique key to this element. */
+    key?: preact.Key;
+    /** Assigns a ref (generally from `useRef()`) to this element. */
+    ref?: preact.Ref<TClass>;
+    /** Assigns this element to a parent's slot. */
+    slot?: Lowercase<string>;
+}
+
+export interface ClickOptions {
+    /**
+     * The event you want to influence the synthetic click.
+     */
+    sourceEvent?: ActivationEventEsque;
+}
+
+export interface ActivationEventEsque {
+    shiftKey: boolean;
+    metaKey: boolean;
+    ctrlKey: boolean;
+    button: number;
+}
+
+export interface AvatarProps extends Required<Pick<AvatarProps$1, 'initials' | 'src' | 'alt'>> {
+    size: Extract<
+        AvatarProps$1['size'],
+        'small-200' | 'small' | 'base' | 'large' | 'large-200'
+        >;
+}
+
+declare const tagName = 's-avatar';
 /**
  * Base class for creating custom elements with Preact.
  * While this class could be used in both Node and the browser, the constructor will only be used in the browser.
@@ -3400,8 +3508,9 @@ declare const tagName = 's-badge';
  */
 declare const BaseClass: typeof globalThis.HTMLElement;
 
-import { Badge, RenderImpl } from "../../../../../src/surfaces/admin/components/Badge";
-import { Banner, CallbackEvent, RequiredBannerProps } from "../../../../../src/surfaces/admin/components/Banner";
+import { Avatar, CallbackEvent, RenderImpl } from "../../../../../src/surfaces/admin/components/Avatar";
+import { Badge } from "../../../../../src/surfaces/admin/components/Badge";
+import { Banner, RequiredBannerProps } from "../../../../../src/surfaces/admin/components/Banner";
 import { Box, BoxBorderRadii, BoxBorderStyles, RequiredBoxProps, ResponsiveBoxProps } from "../../../../../src/surfaces/admin/components/Box";
 import { Button, ButtonBaseProps } from "../../../../../src/surfaces/admin/components/Button";
 import { Checkbox, PreactInputProps } from "../../../../../src/surfaces/admin/components/Checkbox";
@@ -3426,7 +3535,7 @@ import { PasswordField, PasswordFieldProps } from "../../../../../src/surfaces/a
 import { QueryContainer } from "../../../../../src/surfaces/admin/components/QueryContainer";
 import { RequiredSectionProps, Section } from "../../../../../src/surfaces/admin/components/Section";
 import { Select } from "../../../../../src/surfaces/admin/components/Select";
-import { BadgeProps$1, BannerProps$1, BoxProps$1, ButtonProps$1, CheckboxProps$1, ChoiceListProps$1, ChoiceProps$1, ClickableProps$1, ComponentChild, DatePickerProps$1, DividerProps$1, EmailFieldProps$1, GridItemProps$1, GridProps$1, HeadingProps$1, IconProps$1, IconType, ImageProps$1, InteractionProps, LinkProps$1, ListItemProps$1, MaybeAllValuesShorthandProperty, MoneyFieldProps$1, NumberFieldProps$1, OptionGroupProps$1, OptionProps$1, OrderedListProps$1, ParagraphProps$1, PasswordFieldProps$1, QueryContainerProps$1, SectionProps$1, SelectProps$1, SpinnerProps$1, StackProps$1, TableBodyProps$1, TableCellProps$1, TableHeaderProps$1, TableHeaderRowProps$1, TableProps$1, TableRowProps$1, TextAreaProps$1, TextFieldProps$1, TextProps$1, URLFieldProps$1, UnorderedListProps$1 } from "../../../../../src/surfaces/admin/components/shared";
+import { AvatarProps$1, BadgeProps$1, BannerProps$1, BoxProps$1, ButtonProps$1, CheckboxProps$1, ChoiceListProps$1, ChoiceProps$1, ClickableProps$1, ComponentChild, DatePickerProps$1, DividerProps$1, EmailFieldProps$1, GridItemProps$1, GridProps$1, HeadingProps$1, IconProps$1, IconType, ImageProps$1, InteractionProps, LinkProps$1, ListItemProps$1, MaybeAllValuesShorthandProperty, MoneyFieldProps$1, NumberFieldProps$1, OptionGroupProps$1, OptionProps$1, OrderedListProps$1, ParagraphProps$1, PasswordFieldProps$1, QueryContainerProps$1, SectionProps$1, SelectProps$1, SpinnerProps$1, StackProps$1, TableBodyProps$1, TableCellProps$1, TableHeaderProps$1, TableHeaderRowProps$1, TableProps$1, TableRowProps$1, TextAreaProps$1, TextFieldProps$1, TextProps$1, ThumbnailProps$1, URLFieldProps$1, UnorderedListProps$1 } from "../../../../../src/surfaces/admin/components/shared";
 import { Spinner } from "../../../../../src/surfaces/admin/components/Spinner";
 import { AlignedStackProps, ResponsiveStackProps, Stack } from "../../../../../src/surfaces/admin/components/Stack";
 import { Table } from "../../../../../src/surfaces/admin/components/Table";
@@ -3437,6 +3546,7 @@ import { TableHeaderRow } from "../../../../../src/surfaces/admin/components/Tab
 import { TableRow } from "../../../../../src/surfaces/admin/components/TableRow";
 import { TextArea, TextAreaProps } from "../../../../../src/surfaces/admin/components/TextArea";
 import { TextField, TextFieldProps } from "../../../../../src/surfaces/admin/components/TextField";
+import { Thumbnail } from "../../../../../src/surfaces/admin/components/Thumbnail";
 import { UnorderedList } from "../../../../../src/surfaces/admin/components/UnorderedList";
 import { URLField, URLFieldProps } from "../../../../../src/surfaces/admin/components/URLField";
 import type { ExtensionTargets } from '../extension-targets';

package/build/ts/surfaces/customer-account/components/Avatar/Avatar.doc.d.ts

@@ -0,0 +1,4 @@
+import type { ReferenceEntityTemplateSchema } from '@shopify/generate-docs';
+declare const data: ReferenceEntityTemplateSchema;
+export default data;
+//# sourceMappingURL=Avatar.doc.d.ts.map

package/build/ts/surfaces/customer-account/components/Avatar/Avatar.doc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.doc.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/customer-account/components/Avatar/Avatar.doc.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,6BAA6B,EAAC,MAAM,wBAAwB,CAAC;AAE1E,QAAA,MAAM,IAAI,EAAE,6BAyDX,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/build/ts/surfaces/customer-account/components/Avatar.d.ts

@@ -0,0 +1,66 @@
+import {BaseElementPropsWithChildren, Size} from './shared';
+
+interface GlobalProps {
+  /**
+   * A unique identifier for the element.
+   */
+  id?: string;
+}
+
+export interface AvatarProps extends GlobalProps {
+  /**
+   * Initials to display in the avatar.
+   */
+  initials?: string;
+
+  /**
+   * The URL or path to the image.
+   *
+   * Initials will be rendered as a fallback if `src` is not provided, fails to load or does not load quickly.
+   */
+  src?: string;
+
+  /**
+   * Invoked when load of provided image completes successfully.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
+   */
+  onLoad?(): void;
+
+  /**
+   * Invoked on load error of provided image.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
+   */
+  onError?(): void;
+
+  /**
+   * Size of the avatar.
+   *
+   * @default 'base'
+   */
+  size?: Extract<Size, 'base' | 'large' | 'extraLarge' | 'fill'>;
+
+  /**
+   * An alternative text description that describe the image for the reader
+   * to understand what it is about or identify the user the avatar belongs to.
+   */
+  alt?: string;
+}
+
+export interface AvatarElement extends AvatarProps, Omit<HTMLElement, 'id'> {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    ['s-avatar']: AvatarElement;
+  }
+}
+
+declare module 'preact' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      ['s-avatar']: BaseElementPropsWithChildren<AvatarElement> & AvatarProps;
+    }
+  }
+}

package/build/ts/surfaces/customer-account/components/StandardComponents.d.ts

@@ -1,4 +1,4 @@
 import { AnyComponent } from '../../checkout';
-export type StandardComponents = AnyComponent | 'Page' | 'CustomerAccountAction' | 'ImageGroup';
+export type StandardComponents = AnyComponent | 'Page' | 'Avatar' | 'CustomerAccountAction' | 'ImageGroup';
 export default StandardComponents;
 //# sourceMappingURL=StandardComponents.d.ts.map

package/build/ts/surfaces/customer-account/components/StandardComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StandardComponents.d.ts","sourceRoot":"","sources":["../../../../../src/surfaces/customer-account/components/StandardComponents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAC1B,YAAY,GACZ,MAAM,GACN,uBAAuB,GACvB,YAAY,CAAC;AAEjB,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"StandardComponents.d.ts","sourceRoot":"","sources":["../../../../../src/surfaces/customer-account/components/StandardComponents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAC1B,YAAY,GACZ,MAAM,GACN,QAAQ,GACR,uBAAuB,GACvB,YAAY,CAAC;AAEjB,eAAe,kBAAkB,CAAC"}

package/build/ts/surfaces/customer-account/targets/customer-account.footer.render-after.d.ts

@@ -49,6 +49,66 @@ export interface CustomerAccountActionProps {
     heading: string;
 }
 
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            ['s-avatar']: BaseElementPropsWithChildren<AvatarElement> & AvatarProps;
+        }
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        ['s-avatar']: AvatarElement;
+    }
+}
+
+export interface AvatarElement extends AvatarProps, Omit<HTMLElement, 'id'> {
+}
+
+export interface AvatarProps extends GlobalProps {
+    /**
+     * Initials to display in the avatar.
+     */
+    initials?: string;
+    /**
+     * The URL or path to the image.
+     *
+     * Initials will be rendered as a fallback if `src` is not provided, fails to load or does not load quickly.
+     */
+    src?: string;
+    /**
+     * Size of the avatar.
+     *
+     * @default 'base'
+     */
+    size?: Extract<Size, 'base' | 'large' | 'extraLarge' | 'fill'>;
+    /**
+     * An alternative text description that describe the image for the reader
+     * to understand what it is about or identify the user the avatar belongs to.
+     */
+    alt?: string;
+    /**
+     * Invoked when load of provided image completes successfully.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
+     */
+    onLoad?(): void;
+    /**
+     * Invoked on load error of provided image.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
+     */
+    onError?(): void;
+}
+
+interface GlobalProps {
+    /**
+     * A unique identifier for the element.
+     */
+    id?: string;
+}
+
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
@@ -1471,6 +1531,7 @@ import { CallbackEvent } from "../../../../../src/surfaces/checkout/components/B
 import { ReducedBorderSizeKeyword } from "../../../../../src/surfaces/checkout/components/Box";
 import { AbbreviationProps$1, BannerProps$1, BorderShorthand, BoxProps$1, ButtonProps$1, CheckboxProps$1, ClipboardItemProps$1, DropZoneProps$1, EmailFieldProps$1, FormProps$1, HeadingProps$1, IconProps$1, ImageProps$1, LinkProps$1, ListItemProps$1, MapMarkerProps$1, MapProps$1, MaybeAllValuesShorthandProperty, ModalProps$1, OrderedListProps$1, ParagraphProps$1, PaymentIconProps$1, PhoneFieldProps$1, ProgressProps$1, QRCodeProps$1, SectionProps$1, SpinnerProps$1, StackProps$1, TextAreaProps$1, TextFieldProps$1, TextProps$1, TimeProps$1, UnorderedListProps$1 } from "../../../../../src/surfaces/checkout/components/components-shared";
 import { ReducedIconTypes } from "../../../../../src/surfaces/checkout/components/Icon";
+import { Size } from "../../../../../src/surfaces/customer-account/components/shared";
 import type { ExtensionTargets } from '../extension-targets';
 type Target = ExtensionTargets['customer-account.footer.render-after'];
 export type Api = Target['api'];

package/build/ts/surfaces/customer-account/targets/customer-account.order-index.block.render.d.ts

@@ -49,6 +49,66 @@ export interface CustomerAccountActionProps {
     heading: string;
 }
 
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            ['s-avatar']: BaseElementPropsWithChildren<AvatarElement> & AvatarProps;
+        }
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        ['s-avatar']: AvatarElement;
+    }
+}
+
+export interface AvatarElement extends AvatarProps, Omit<HTMLElement, 'id'> {
+}
+
+export interface AvatarProps extends GlobalProps {
+    /**
+     * Initials to display in the avatar.
+     */
+    initials?: string;
+    /**
+     * The URL or path to the image.
+     *
+     * Initials will be rendered as a fallback if `src` is not provided, fails to load or does not load quickly.
+     */
+    src?: string;
+    /**
+     * Size of the avatar.
+     *
+     * @default 'base'
+     */
+    size?: Extract<Size, 'base' | 'large' | 'extraLarge' | 'fill'>;
+    /**
+     * An alternative text description that describe the image for the reader
+     * to understand what it is about or identify the user the avatar belongs to.
+     */
+    alt?: string;
+    /**
+     * Invoked when load of provided image completes successfully.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
+     */
+    onLoad?(): void;
+    /**
+     * Invoked on load error of provided image.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
+     */
+    onError?(): void;
+}
+
+interface GlobalProps {
+    /**
+     * A unique identifier for the element.
+     */
+    id?: string;
+}
+
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
@@ -1471,6 +1531,7 @@ import { CallbackEvent } from "../../../../../src/surfaces/checkout/components/B
 import { ReducedBorderSizeKeyword } from "../../../../../src/surfaces/checkout/components/Box";
 import { AbbreviationProps$1, BannerProps$1, BorderShorthand, BoxProps$1, ButtonProps$1, CheckboxProps$1, ClipboardItemProps$1, DropZoneProps$1, EmailFieldProps$1, FormProps$1, HeadingProps$1, IconProps$1, ImageProps$1, LinkProps$1, ListItemProps$1, MapMarkerProps$1, MapProps$1, MaybeAllValuesShorthandProperty, ModalProps$1, OrderedListProps$1, ParagraphProps$1, PaymentIconProps$1, PhoneFieldProps$1, ProgressProps$1, QRCodeProps$1, SectionProps$1, SpinnerProps$1, StackProps$1, TextAreaProps$1, TextFieldProps$1, TextProps$1, TimeProps$1, UnorderedListProps$1 } from "../../../../../src/surfaces/checkout/components/components-shared";
 import { ReducedIconTypes } from "../../../../../src/surfaces/checkout/components/Icon";
+import { Size } from "../../../../../src/surfaces/customer-account/components/shared";
 import type { ExtensionTargets } from '../extension-targets';
 type Target = ExtensionTargets['customer-account.order-index.block.render'];
 export type Api = Target['api'];