@shopify/ui-extensions 2025.10.0-rc.6 → 2025.10.0-rc.8

package/build/ts/surfaces/customer-account/targets/customer-account.page.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 {
@@ -78,21 +138,16 @@ export interface PageProps {
 }
 
 declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
-    }
-
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-unordered-list': UnorderedListProps & BaseProps;
+            [UnorderedListtagName]: UnorderedListProps & UnorderedListBaseElementPropsWithChildren<UnorderedListElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-unordered-list': UnorderedListElement;
+        [UnorderedListtagName]: UnorderedListElement;
     }
 }
 
@@ -102,22 +157,29 @@ export interface UnorderedListElement extends UnorderedListProps, Omit<HTMLEleme
 export interface UnorderedListProps extends UnorderedListProps$1 {
 }
 
-declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
-    }
+export interface UnorderedListBaseElementPropsWithChildren<TClass = HTMLElement> extends UnorderedListBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+export interface UnorderedListBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
 
+declare const UnorderedListtagName = "s-unordered-list";
+
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-time': TimeProps & BaseProps;
+            [TimetagName]: TimeProps & TimeBaseElementPropsWithChildren<TimeElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-time': TimeElement;
+        [TimetagName]: TimeElement;
     }
 }
 
@@ -127,50 +189,95 @@ export interface TimeElement extends TimeProps, Omit<HTMLElement, 'id'> {
 export interface TimeProps extends Pick<TimeProps$1, 'dateTime'> {
 }
 
-declare module 'preact' {
-    interface BaseProps {
-        slot?: Lowercase<string>;
-    }
+export interface TimeBaseElementPropsWithChildren<TClass = HTMLElement> extends TimeBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+export interface TimeBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
 
+declare const TimetagName = "s-time";
+
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-text-field': TextFieldProps & BaseProps;
+            [TextFieldtagName]: TextFieldProps & TextFieldBaseElementProps<TextFieldElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-text-field': TextFieldElement;
+        [TextFieldtagName]: TextFieldElement;
     }
 }
 
 declare module 'preact' {
-    interface BaseProps {
-        slot?: Lowercase<string>;
-    }
-
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-icon': TextFieldIconProps & BaseProps;
+            [TextFieldtagName$1]: TextFieldIconProps & TextFieldBaseElementProps<TextFieldIconElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-icon': TextFieldIconElement;
+        [TextFieldtagName$1]: TextFieldIconElement;
     }
 }
 
-export interface TextFieldElement extends Omit<TextFieldProps, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'>, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
-    onblur: TextFieldProps['onBlur'];
-    onchange: TextFieldProps['onChange'];
-    onfocus: TextFieldProps['onFocus'];
-    oninput: TextFieldProps['onInput'];
+export interface TextFieldProps extends TextFieldBaseProps, TextFieldSlots, TextFieldEvents {
 }
 
-export interface TextFieldProps extends Pick<TextFieldProps$1, 'accessory' | 'autocomplete' | 'defaultValue' | 'details' | 'disabled' | 'error' | 'id' | 'icon' | 'label' | 'labelAccessibilityVisibility' | 'maxLength' | 'minLength' | 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'placeholder' | 'prefix' | 'readOnly' | 'required' | 'suffix' | 'value'> {
+export interface TextFieldElement extends TextFieldBaseProps, TextFieldSlots, Omit<TextFieldEvents, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'>, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
+    onblur: TextFieldEvents['onBlur'];
+    onchange: TextFieldEvents['onChange'];
+    onfocus: TextFieldEvents['onFocus'];
+    oninput: TextFieldEvents['onInput'];
+}
+
+export interface TextFieldElementSlots {
+    /**
+     * Additional content to be displayed in the field.
+     * Commonly used to display an icon that activates a tooltip providing more information.
+     */
+    accessory?: HTMLElement;
+}
+
+export interface TextFieldSlots {
+    /**
+     * Additional content to be displayed in the field.
+     * Commonly used to display an icon that activates a tooltip providing more information.
+     */
+    accessory?: ReactNode;
+}
+
+export interface TextFieldElementEvents {
+    /**
+     * Callback when the element loses focus.
+     */
+    blur?: ((event: CallbackEvent<typeof TextFieldtagName>) => void) | null;
+    /**
+     * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
+     */
+    change?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+    /**
+     * Callback when the element receives focus.
+     */
+    focus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+    /**
+     * Callback when the user makes any changes in the field.
+     */
+    input?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+}
+
+export interface TextFieldEvents extends Pick<TextFieldProps$1, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'> {
+}
+
+export interface TextFieldBaseProps extends Pick<TextFieldProps$1, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'id' | 'icon' | 'label' | 'labelAccessibilityVisibility' | 'maxLength' | 'minLength' | 'name' | 'placeholder' | 'prefix' | 'readOnly' | 'required' | 'suffix' | 'value'> {
     icon?: TextFieldIconProps['type'];
 }
 
@@ -180,25 +287,86 @@ export interface TextFieldIconElement extends TextFieldIconProps, Omit<HTMLEleme
 export interface TextFieldIconProps extends Pick<IconProps$1, 'id' | 'size' | 'tone' | 'type'> {
     tone?: Extract<IconProps$1['tone'], 'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'custom'>;
     size?: Extract<IconProps$1['size'], 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100'>;
-    type?: '' | Extract<IconProps$1['type'], 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cart' | 'cash-dollar' | 'categories' | 'check-circle' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'filter' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'image' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'map' | 'menu-horizontal' | 'menu-vertical' | 'menu' | 'minus' | 'mobile' | 'note' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'reset' | 'return' | 'savings' | 'search' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'>;
+    type?: '' | ReducedIconTypes;
 }
 
+export interface TextFieldBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const TextFieldtagName = "s-text-field";
+declare const tagName$1 = "s-icon";
+
 declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [TextAreatagName]: TextAreaProps & TextAreaBaseElementProps<TextAreaElement>;
+        }
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [TextAreatagName]: TextAreaElement;
     }
+}
+
+export interface TextAreaProps extends TextAreaBaseProps, TextAreaEvents {
+}
+
+export interface TextAreaElement extends TextAreaBaseProps, Omit<TextAreaEvents, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'>, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput'> {
+    onblur: TextAreaEvents['onBlur'];
+    onchange: TextAreaEvents['onChange'];
+    onfocus: TextAreaEvents['onFocus'];
+    oninput: TextAreaEvents['onInput'];
+}
+
+export interface TextAreaElementEvents {
+    /**
+     * Callback when the element loses focus.
+     */
+    blur?: ((event: CallbackEvent<typeof TextAreatagName>) => void) | null;
+    /**
+     * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
+     */
+    change?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+    /**
+     * Callback when the element receives focus.
+     */
+    focus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+    /**
+     * Callback when the user makes any changes in the field.
+     */
+    input?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+}
 
+export interface TextAreaEvents extends Pick<TextAreaProps$1, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'> {
+}
+
+export interface TextAreaBaseProps extends Pick<TextAreaProps$1, 'id' | 'label' | 'name' | 'placeholder' | 'required' | 'value' | 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'readOnly' | 'rows' | 'maxLength' | 'minLength' | 'labelAccessibilityVisibility'> {
+}
+
+export interface TextAreaBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const TextAreatagName = "s-text-area";
+
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-text': TextProps & BaseProps;
+            [TexttagName]: TextProps & TextBaseElementPropsWithChildren<TextElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-text': TextElement;
+        [TexttagName]: TextElement;
     }
 }
 
@@ -211,29 +379,36 @@ export interface TextProps extends Pick<TextProps$1, 'accessibilityVisibility' |
     type?: Extract<TextProps$1['type'], 'address' | 'redundant' | 'mark' | 'emphasis' | 'offset' | 'small' | 'strong' | 'generic'>;
 }
 
-declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
-    }
+export interface TextBaseElementPropsWithChildren<TClass = HTMLElement> extends TextBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+export interface TextBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const TexttagName = "s-text";
 
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-stack': StackProps & BaseProps;
+            [StacktagName]: StackProps & StackBaseElementPropsWithChildren<StackElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-stack': StackElement;
+        [StacktagName]: StackElement;
     }
 }
 
 export interface StackElement extends StackProps, Omit<HTMLElement, 'id'> {
 }
 
-export interface StackProps extends Pick<StackProps$1, 'accessibilityLabel' | 'accessibilityRole' | 'alignContent' | 'alignItems' | 'background' | 'border' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'columnGap' | 'direction' | 'display' | 'gap' | 'id' | 'justifyContent' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'rowGap'> {
+export interface StackProps extends Pick<StackProps$1, 'accessibilityLabel' | 'accessibilityRole' | 'alignContent' | 'alignItems' | 'background' | 'blockSize' | 'border' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'columnGap' | 'direction' | 'display' | 'gap' | 'id' | 'inlineSize' | 'justifyContent' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'rowGap'> {
     accessibilityRole?: Extract<StackProps$1['accessibilityRole'], 'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'none'>;
     background?: Extract<StackProps$1['background'], 'transparent' | 'subdued' | 'base'>;
     border?: BorderShorthand;
@@ -244,17 +419,29 @@ export interface StackProps extends Pick<StackProps$1, 'accessibilityLabel' | 'a
     justifyContent?: Extract<StackProps$1['justifyContent'], 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'center' | 'start' | 'end'>;
 }
 
+export interface StackBaseElementPropsWithChildren<TClass = HTMLElement> extends StackBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+export interface StackBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const StacktagName = "s-stack";
+
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-spinner': SpinnerProps;
+            [SpinnertagName]: SpinnerProps & SpinnerBaseElementProps<SpinnerElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-spinner': SpinnerElement;
+        [SpinnertagName]: SpinnerElement;
     }
 }
 
@@ -265,22 +452,25 @@ export interface SpinnerProps extends SpinnerProps$1 {
     size?: Extract<SpinnerProps$1['size'], 'small-100' | 'small' | 'base' | 'large' | 'large-100'>;
 }
 
-declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
-    }
+export interface SpinnerBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
 
+declare const SpinnertagName = "s-spinner";
+
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-section': SectionProps & BaseProps;
+            [SectiontagName]: SectionProps & SectionBaseElementPropsWithChildren<SectionElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-section': SectionElement;
+        [SectiontagName]: SectionElement;
     }
 }
 
@@ -290,38 +480,72 @@ export interface SectionElement extends SectionProps, Omit<HTMLElement, 'id'> {
 export interface SectionProps extends Pick<SectionProps$1, 'accessibilityLabel' | 'heading' | 'id'> {
 }
 
+export interface SectionBaseElementPropsWithChildren<TClass = HTMLElement> extends SectionBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+export interface SectionBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const SectiontagName = "s-section";
+
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-qr-code': QRCodeProps;
+            [QRCodetagName]: QRCodeProps & QRCodeBaseElementProps<QRCodelement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-qr-code': QRCodelement;
+        [QRCodetagName]: QRCodelement;
     }
 }
 
-export interface QRCodelement extends Omit<QRCodeProps, 'onError'>, Omit<HTMLElement, 'id' | 'onerror'> {
-    onerror: QRCodeProps['onError'];
+export interface QRCodeProps extends QRCodeBaseProps, QRCodeEvents {
+}
+
+export interface QRCodelement extends QRCodeBaseProps, Omit<QRCodeEvents, 'onError'>, Omit<HTMLElement, 'id' | 'onerror'> {
+    onerror: QRCodeEvents['onError'];
+}
+
+export interface QRCodeElementEvents {
+    /**
+     * Invoked when the conversion of `content` to a QR code fails.
+     * If an error occurs, the QR code and its child elements will not be displayed.
+     */
+    error?: ((event: CallbackEvent<typeof QRCodetagName>) => void) | null;
+}
+
+export interface QRCodeEvents extends Pick<QRCodeProps$1, 'onError'> {
 }
 
-export interface QRCodeProps extends QRCodeProps$1 {
+export interface QRCodeBaseProps extends QRCodeProps$1 {
 }
 
+export interface QRCodeBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const QRCodetagName = "s-qr-code";
+
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-progress': ProgressProps;
+            [ProgresstagName]: ProgressProps & ProgressBaseElementProps<ProgressElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-progress': ProgressElement;
+        [ProgresstagName]: ProgressElement;
     }
 }
 
@@ -332,21 +556,98 @@ export interface ProgressProps extends Pick<ProgressProps$1, 'accessibilityLabel
     tone?: Extract<ProgressProps$1['tone'], 'auto' | 'critical'>;
 }
 
+export interface ProgressBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const ProgresstagName = "s-progress";
+
 declare module 'preact' {
-    interface BaseProps {
-        slot?: Lowercase<string>;
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [PhoneFieldtagName]: PhoneFieldProps & PhoneFieldBaseElementProps<PhoneFieldElement>;
+        }
     }
+}
 
+declare global {
+    interface HTMLElementTagNameMap {
+        [PhoneFieldtagName]: PhoneFieldElement;
+    }
+}
+
+export interface PhoneFieldProps extends PhoneFieldBaseProps, PhoneFieldSlots, PhoneFieldEvents {
+}
+
+export interface PhoneFieldElement extends PhoneFieldBaseProps, PhoneFieldSlots, Omit<PhoneFieldEvents, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'>, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
+    onblur: PhoneFieldEvents['onBlur'];
+    onchange: PhoneFieldEvents['onChange'];
+    onfocus: PhoneFieldEvents['onFocus'];
+    oninput: PhoneFieldEvents['onInput'];
+}
+
+export interface PhoneFieldElementSlots {
+    /**
+     * Additional content to be displayed in the field.
+     * Commonly used to display an icon that activates a tooltip providing more information.
+     */
+    accessory?: HTMLElement;
+}
+
+export interface PhoneFieldSlots extends Pick<PhoneFieldProps$1, 'accessory'> {
+    /**
+     * Additional content to be displayed in the field.
+     * Commonly used to display an icon that activates a tooltip providing more information.
+     */
+    accessory?: ReactNode;
+}
+
+export interface PhoneFieldElementEvents {
+    /**
+     * Callback when the element loses focus.
+     */
+    blur?: ((event: CallbackEvent<typeof PhoneFieldtagName>) => void) | null;
+    /**
+     * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
+     */
+    change?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+    /**
+     * Callback when the element receives focus.
+     */
+    focus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+    /**
+     * Callback when the user makes any changes in the field.
+     */
+    input?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+}
+
+export interface PhoneFieldEvents extends Pick<PhoneFieldProps$1, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'> {
+}
+
+export interface PhoneFieldBaseProps extends Pick<PhoneFieldProps$1, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'name' | 'placeholder' | 'readOnly' | 'required' | 'value' | 'type'> {
+}
+
+export interface PhoneFieldBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const PhoneFieldtagName = "s-phone-field";
+
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-payment-icon': PaymentIconProps & BaseProps;
+            [PaymentIcontagName]: PaymentIconProps & PaymentIconBaseElementProps<PaymentIconElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-payment-icon': PaymentIconElement;
+        [PaymentIcontagName]: PaymentIconElement;
     }
 }
 
@@ -356,22 +657,25 @@ export interface PaymentIconElement extends PaymentIconProps, Omit<HTMLElement,
 export interface PaymentIconProps extends PaymentIconProps$1 {
 }
 
-declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
-    }
+export interface PaymentIconBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
 
+declare const PaymentIcontagName = "s-payment-icon";
+
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-paragraph': ParagraphProps & BaseProps;
+            [ParagraphtagName]: ParagraphProps & ParagraphBaseElementPropsWithChildren<ParagraphElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-paragraph': ParagraphElement;
+        [ParagraphtagName]: ParagraphElement;
     }
 }
 
@@ -383,22 +687,29 @@ export interface ParagraphProps extends Pick<ParagraphProps$1, 'accessibilityVis
     tone?: Extract<ParagraphProps$1['tone'], 'auto' | 'info' | 'success' | 'warning' | 'critical' | 'neutral' | 'custom'>;
 }
 
-declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
-    }
+export interface ParagraphBaseElementPropsWithChildren<TClass = HTMLElement> extends ParagraphBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
 
+export interface ParagraphBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const ParagraphtagName = "s-paragraph";
+
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-ordered-list': OrderedListProps & BaseProps;
+            [OrderedListtagName]: OrderedListProps & OrderedListBaseElementPropsWithChildren<OrderedListElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-ordered-list': OrderedListElement;
+        [OrderedListtagName]: OrderedListElement;
     }
 }
 
@@ -408,74 +719,307 @@ export interface OrderedListElement extends OrderedListProps, Omit<HTMLElement,
 export interface OrderedListProps extends OrderedListProps$1 {
 }
 
+export interface OrderedListBaseElementPropsWithChildren<TClass = HTMLElement> extends OrderedListBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+export interface OrderedListBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const OrderedListtagName = "s-ordered-list";
+
 declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [ModaltagName]: ModalProps & ModalBaseElementPropsWithChildren<ModalElement>;
+        }
     }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [ModaltagName]: ModalElement;
+    }
+}
+
+export interface ModalProps extends ModalBaseProps, ModalSlots, ModalEvents {
+}
+
+export interface ModalElement extends ModalBaseProps, ModalSlots, Omit<ModalEvents, 'onHide' | 'onShow'>, Omit<HTMLElement, 'id'> {
+    onhide: ModalEvents['onHide'];
+    onshow: ModalEvents['onShow'];
+}
+
+export interface ModalElementEvents {
+    /**
+     * Callback fired after the overlay is hidden.
+     */
+    hide?: ((event: CallbackEvent<typeof ModaltagName>) => void) | null;
+    /**
+     * Callback fired after the overlay is shown.
+     */
+    show?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+}
+
+export interface ModalEvents extends Pick<ModalProps$1, 'onHide' | 'onShow' | 'onAfterHide' | 'onAfterShow'> {
+}
+
+export interface ModalElementSlots {
+    /**
+     * The primary action to perform, provided as a button type element.
+     */
+    'primary-action'?: HTMLElement;
+    /**
+     * The secondary actions to perform, provided as button type elements.
+     */
+    'secondary-actions'?: HTMLElement;
+}
+
+export interface ModalSlots extends Pick<ModalProps$1, 'primaryAction' | 'secondaryActions'> {
+    /**
+     * The primary action to perform, provided as a button type element.
+     */
+    primaryAction?: ReactNode;
+    /**
+     * The secondary actions to perform, provided as button type elements.
+     */
+    secondaryActions?: ReactNode;
+}
+
+export interface ModalBaseProps extends Pick<ModalProps$1, 'accessibilityLabel' | 'heading' | 'id' | 'padding' | 'size'> {
+    size?: Extract<ModalProps$1['size'], 'small-100' | 'small' | 'base' | 'large-100' | 'large' | 'max'>;
+}
+
+export interface ModalBaseElementPropsWithChildren<TClass = HTMLElement> extends ModalBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
 
+export interface ModalBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const ModaltagName = "s-modal";
+
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-list-item': ListItemProps & BaseProps;
+            [MapMarkertagName]: MapMarkerProps & MapMarkerBaseElementProps<MapMarkerElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-list-item': ListItem;
+        [MapMarkertagName]: MapMarkerElement;
     }
 }
 
-export interface ListItem extends ListItemProps, Omit<HTMLElement, 'id'> {
+export interface MapMarkerProps extends MapMarkerBaseProps, MapMarkerEvents {
 }
 
-export interface ListItemProps extends Pick<ListItemProps$1, 'id'> {
+export interface MapMarkerElement extends MapMarkerBaseProps, MapMarkerSlots, Omit<HTMLElement, 'id' | 'onclick'> {
+    onclick: MapMarkerEvents['onClick'];
 }
 
+export interface MapMarkerElementSlots {
+    /**
+     * The graphic to use as the marker.
+     *
+     * If unset, it will default to the provider’s default marker.
+     */
+    graphic?: HTMLElement;
+}
+
+export interface MapMarkerSlots {
+    /**
+     * The graphic to use as the marker.
+     *
+     * If unset, it will default to the provider’s default marker.
+     */
+    graphic?: ReactNode;
+}
+
+export interface MapMarkerElementEvents {
+    /**
+     * Callback when a marker is clicked.
+     *
+     * It does not trigger a click event on the map itself.
+     */
+    click?: ((event: CallbackEvent<typeof MapMarkertagName>) => void) | null;
+}
+
+export interface MapMarkerEvents extends Pick<MapMarkerProps$1, 'onClick'> {
+}
+
+export interface MapMarkerBaseProps extends Pick<MapMarkerProps$1, 'accessibilityLabel' | 'blockSize' | 'clusterable' | 'inlineSize' | 'latitude' | 'longitude'> {
+}
+
+export interface MapMarkerBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const MapMarkertagName = "s-map-marker";
+
 declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [MaptagName]: MapProps & MapBaseElementPropsWithChildren<MapElement>;
+        }
     }
+}
 
+declare global {
+    interface HTMLElementTagNameMap {
+        [MaptagName]: MapElement;
+    }
+}
+
+export interface MapProps extends MapBaseProps, MapEvents {
+}
+
+export interface MapElement extends MapBaseProps, Omit<MapEvents, 'onBoundsChange' | 'onClick' | 'onDblClick' | 'onViewChange'>, Omit<HTMLElement, 'id' | 'onclick' | 'ondblclick'> {
+    onboundschange: MapEvents['onBoundsChange'];
+    onclick: MapEvents['onClick'];
+    ondblclick: MapEvents['onDblClick'];
+    onviewchange: MapEvents['onViewChange'];
+}
+
+export interface MapElementEvents {
+    /**
+     * Callback when the viewport bounds have changed or the map is resized.
+     */
+    boundschange?: ((event: CallbackEvent<typeof MaptagName>) => void) | null;
+    /**
+     * Callback when the user clicks on the map.
+     */
+    click?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+    /**
+     * Callback when the user double-clicks on the map.
+     */
+    dblclick?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+    /**
+     * Callback when the map view changes.
+     */
+    viewchange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+}
+
+export interface MapEvents extends Pick<MapProps$1, 'onBoundsChange' | 'onClick' | 'onDblClick' | 'onViewChange'> {
+}
+
+export interface MapBaseProps extends Pick<MapProps$1, 'accessibilityLabel' | 'apiKey' | 'blockSize' | 'id' | 'inlineSize' | 'latitude' | 'longitude' | 'maxBlockSize' | 'maxInlineSize' | 'maxZoom' | 'minBlockSize' | 'minInlineSize' | 'minZoom' | 'zoom'> {
+}
+
+export interface MapBaseElementPropsWithChildren<TClass = HTMLElement> extends MapBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+export interface MapBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const MaptagName = "s-map";
+
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-link': LinkProps & BaseProps;
+            [ListItemtagName]: ListItemProps & ListItemBaseElementPropsWithChildren<ListItemElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-link': LinkElement;
+        [ListItemtagName]: ListItemElement;
     }
 }
 
-export interface LinkElement extends Omit<LinkProps, 'onClick'>, Omit<HTMLElement, 'id' | 'lang' | 'onclick'> {
-    onclick: LinkProps['onClick'];
+export interface ListItemElement extends ListItemProps, Omit<HTMLElement, 'id'> {
 }
 
-export interface LinkProps extends Pick<LinkProps$1, 'accessibilityLabel' | 'command' | 'commandFor' | 'href' | 'id' | 'lang' | 'onClick' | 'target' | 'tone'> {
-    target?: Extract<LinkProps$1['target'], 'auto' | '_self' | '_blank'>;
-    tone?: Extract<LinkProps$1['tone'], 'auto' | 'neutral'>;
+export interface ListItemProps extends Pick<ListItemProps$1, 'id'> {
+}
+
+export interface ListItemBaseElementPropsWithChildren<TClass = HTMLElement> extends ListItemBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
 }
 
+export interface ListItemBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const ListItemtagName = "s-list-item";
+
 declare module 'preact' {
-    interface BaseProps {
-        slot?: Lowercase<string>;
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [LinktagName]: LinkProps & LinkBaseElementPropsWithChildren<LinkElement>;
+        }
     }
+}
 
+declare global {
+    interface HTMLElementTagNameMap {
+        [LinktagName]: LinkElement;
+    }
+}
+
+export interface LinkProps extends LinkBaseProps, LinkEvents {
+}
+
+export interface LinkElement extends LinkBaseProps, Omit<LinkEvents, 'onClick'>, Omit<HTMLElement, 'id' | 'lang' | 'onclick'> {
+    onclick: LinkEvents['onClick'];
+}
+
+export interface LinkElementEvents {
+    /**
+     * Callback when the link is activated.
+     * This will be called before navigating to the location specified by `href`.
+     */
+    click?: ((event: CallbackEvent<typeof LinktagName>) => void) | null;
+}
+
+export interface LinkEvents extends Pick<LinkProps$1, 'onClick'> {
+}
+
+export interface LinkBaseProps extends Pick<LinkProps$1, 'accessibilityLabel' | 'command' | 'commandFor' | 'href' | 'id' | 'lang' | 'target' | 'tone'> {
+    target?: Extract<LinkProps$1['target'], 'auto' | '_blank'>;
+    tone?: Extract<LinkProps$1['tone'], 'auto' | 'neutral'>;
+}
+
+export interface LinkBaseElementPropsWithChildren<TClass = HTMLElement> extends LinkBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+export interface LinkBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const LinktagName = "s-link";
+
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-image': ImageProps & BaseProps;
+            [ImagetagName]: ImageProps & ImageBaseElementProps<ImageElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-image': ImageElement;
+        [ImagetagName]: ImageElement;
     }
 }
 
@@ -488,21 +1032,25 @@ export interface ImageProps extends Pick<ImageProps$1, 'accessibilityRole' | 'al
     borderRadius?: MaybeAllValuesShorthandProperty<Extract<ImageProps$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>;
 }
 
-declare module 'preact' {
-    interface BaseProps {
-        slot?: Lowercase<string>;
-    }
+export interface ImageBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
 
+declare const ImagetagName = "s-image";
+
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-icon': IconProps & BaseProps;
+            [IcontagName]: IconProps & IconBaseElementProps<IconElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-icon': IconElement;
+        [IcontagName]: IconElement;
     }
 }
 
@@ -512,25 +1060,28 @@ export interface IconElement extends IconProps, Omit<HTMLElement, 'id'> {
 export interface IconProps extends Pick<IconProps$1, 'id' | 'size' | 'tone' | 'type'> {
     tone?: Extract<IconProps$1['tone'], 'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'custom'>;
     size?: Extract<IconProps$1['size'], 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100'>;
-    type?: '' | Extract<IconProps$1['type'], 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cart' | 'cash-dollar' | 'categories' | 'check-circle' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'filter' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'image' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'map' | 'menu-horizontal' | 'menu-vertical' | 'menu' | 'minus' | 'mobile' | 'note' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'reset' | 'return' | 'savings' | 'search' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'>;
+    type?: '' | ReducedIconTypes;
 }
 
-declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
-    }
+export interface IconBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
 
+declare const IcontagName = "s-icon";
+
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-heading': HeadingProps & BaseProps;
+            [HeadingtagName]: HeadingProps & HeadingBaseElementPropsWithChildren<HeadingElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-heading': HeadingElement;
+        [HeadingtagName]: HeadingElement;
     }
 }
 
@@ -540,180 +1091,421 @@ export interface HeadingElement extends HeadingProps, Omit<HTMLElement, 'id'> {
 export interface HeadingProps extends Pick<HeadingProps$1, 'accessibilityRole' | 'id'> {
 }
 
+export interface HeadingBaseElementPropsWithChildren<TClass = HTMLElement> extends HeadingBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+export interface HeadingBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const HeadingtagName = "s-heading";
+
 declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [FormtagName]: FormProps & FormBaseElementPropsWithChildren<FormElement>;
+        }
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [FormtagName]: FormElement;
     }
+}
+
+export interface FormProps extends FormBaseProps, FormEvents {
+}
+
+export interface FormElement extends Omit<FormBaseProps, 'children'>, Omit<FormEvents, 'onSubmit'>, Omit<HTMLElement, 'id' | 'onsubmit'> {
+    onsubmit: FormEvents['onSubmit'];
+}
 
+export interface FormElementEvents {
+    /**
+     * A callback that is run when the form is submitted.
+     *
+     * Use `event.waitUntil` to signal how long it takes to save the data,
+     * and whether it was successful or not.
+     */
+    submit?: ((event: CallbackEvent<typeof FormtagName>) => void) | null;
+}
+
+export interface FormEvents extends Pick<FormProps$1, 'onSubmit'> {
+    onSubmit?: () => void;
+}
+
+export interface FormBaseProps extends Pick<FormProps$1, 'id' | 'disabled'> {
+}
+
+export interface FormBaseElementPropsWithChildren<TClass = HTMLElement> extends FormBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+export interface FormBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const FormtagName = "s-form";
+
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-form': FormProps & BaseProps;
+            [EmailFieldtagName]: EmailFieldProps & EmailFieldBaseElementProps<EmailFieldElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-form': FormElement;
+        [EmailFieldtagName]: EmailFieldElement;
     }
 }
 
-export interface FormElement extends Omit<FormProps, 'onSubmit' | 'children'>, Omit<HTMLElement, 'id' | 'onsubmit'> {
-    onsubmit: FormProps['onSubmit'];
+export interface EmailFieldProps extends EmailFieldBaseProps, EmailFieldEvents {
 }
 
-export interface FormProps extends Pick<FormProps$1, 'id' | 'disabled' | 'onSubmit'> {
-    onSubmit?: () => void;
+export interface EmailFieldElement extends EmailFieldBaseProps, Omit<EmailFieldEvents, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'>, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
+    onblur: EmailFieldEvents['onBlur'];
+    onchange: EmailFieldEvents['onChange'];
+    onfocus: EmailFieldEvents['onFocus'];
+    oninput: EmailFieldEvents['onInput'];
+}
+
+export interface EmailFieldElementEvents {
+    /**
+     * Callback when the element loses focus.
+     */
+    blur?: ((event: CallbackEvent<typeof EmailFieldtagName>) => void) | null;
+    /**
+     * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
+     */
+    change?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+    /**
+     * Callback when the element receives focus.
+     */
+    focus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+    /**
+     * Callback when the user makes any changes in the field.
+     */
+    input?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+}
+
+export interface EmailFieldEvents extends Pick<EmailFieldProps$1, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'> {
+}
+
+export interface EmailFieldBaseProps extends Pick<EmailFieldProps$1, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'maxLength' | 'minLength' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'name' | 'placeholder' | 'readOnly' | 'required' | 'value'> {
 }
 
+export interface EmailFieldBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const EmailFieldtagName = "s-email-field";
+
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-drop-zone': DropZoneProps;
+            [DropZonetagName]: DropZoneProps & DropZoneBaseElementProps<DropZoneElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-drop-zone': DropZoneElement;
+        [DropZonetagName]: DropZoneElement;
     }
 }
 
-export interface DropZoneElement extends Omit<DropZoneProps, 'onDropRejected' | 'onInput'>, Omit<HTMLElement, 'id' | 'oninput'> {
-    ondroprejected: DropZoneProps['onDropRejected'];
-    oninput: DropZoneProps['onInput'];
+export interface DropZoneProps extends DropZoneBaseProps, DropZoneEvents {
+}
+
+export interface DropZoneElement extends DropZoneBaseProps, Omit<DropZoneEvents, 'onDropRejected' | 'onInput'>, Omit<HTMLElement, 'id' | 'oninput'> {
+    ondroprejected: DropZoneEvents['onDropRejected'];
+    oninput: DropZoneEvents['onInput'];
+}
+
+export interface DropZoneElementEvents {
+    /**
+     * Callback when rejected files are dropped. Files are rejected based on the `accept` prop.
+     */
+    droprejected?: ((event: CallbackEvent<typeof DropZonetagName>) => void) | null;
+    /**
+     * Callback when the user makes any changes in the field.
+     */
+    input?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+}
+
+export interface DropZoneEvents extends Pick<DropZoneProps$1, 'onDropRejected' | 'onInput'> {
+}
+
+export interface DropZoneBaseProps extends Pick<DropZoneProps$1, 'accept' | 'accessibilityLabel' | 'disabled' | 'error' | 'id' | 'label' | 'multiple' | 'name' | 'required'> {
 }
 
-export interface DropZoneProps extends Pick<DropZoneProps$1, 'accept' | 'accessibilityLabel' | 'disabled' | 'error' | 'id' | 'label' | 'multiple' | 'name' | 'onDropRejected' | 'onInput' | 'required'> {
+export interface DropZoneBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
 }
 
+declare const DropZonetagName = "s-drop-zone";
+
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-clipboard-item': ClipboardItemProps;
+            [ClipboardItemtagName]: ClipboardItemProps & ClipboardItemBaseElementProps<ClipboardItemElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-clipboard-item': ClipboardItemElement;
+        [ClipboardItemtagName]: ClipboardItemElement;
     }
 }
 
-export interface ClipboardItemElement extends Omit<ClipboardItemProps, 'onCopy' | 'onCopyError'>, Omit<HTMLElement, 'id' | 'oncopy'> {
-    oncopy: ClipboardItemProps['onCopy'];
-    oncopyerror: ClipboardItemProps['onCopyError'];
+export interface ClipboardItemProps extends ClipboardItemBaseProps, ClipboardItemEvents {
+}
+
+export interface ClipboardItemElement extends ClipboardItemBaseProps, Omit<ClipboardItemEvents, 'onCopy' | 'onCopyError'>, Omit<HTMLElement, 'id' | 'oncopy'> {
+    oncopy: ClipboardItemEvents['onCopy'];
+    oncopyerror: ClipboardItemEvents['onCopyError'];
+}
+
+export interface ClipboardItemElementEvents {
+    /**
+     * Callback run when the copy to clipboard succeeds.
+     */
+    copy?: ((event: CallbackEvent<typeof ClipboardItemtagName>) => void) | null;
+    /**
+     * Callback run when the copy to clipboard fails.
+     */
+    copyerror?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+}
+
+export interface ClipboardItemEvents extends Pick<ClipboardItemProps$1, 'onCopy' | 'onCopyError'> {
+}
+
+export interface ClipboardItemBaseProps extends Pick<ClipboardItemProps$1, 'id' | 'text'> {
 }
 
-export interface ClipboardItemProps extends ClipboardItemProps$1 {
+export interface ClipboardItemBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
 }
 
+declare const ClipboardItemtagName = "s-clipboard-item";
+
 declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [CheckboxtagName]: CheckboxProps & CheckboxBaseElementProps<CheckboxElement>;
+        }
     }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [CheckboxtagName]: CheckboxElement;
+    }
+}
 
+export interface CheckboxProps extends CheckboxBaseProps, CheckboxEvents {
+}
+
+export interface CheckboxElement extends CheckboxBaseProps, Omit<CheckboxEvents, 'onChange'>, Omit<HTMLElement, 'id' | 'onchange'> {
+    onchange: CheckboxEvents['onChange'];
+}
+
+export interface CheckboxElementEvents {
+    /**
+     * A callback that is run whenever the control is changed.
+     */
+    change?: ((event: CallbackEvent<typeof CheckboxtagName>) => void) | null;
+}
+
+export interface CheckboxEvents extends Pick<CheckboxProps$1, 'onChange'> {
+}
+
+export interface CheckboxBaseProps extends Pick<CheckboxProps$1, 'accessibilityLabel' | 'checked' | 'command' | 'commandFor' | 'defaultChecked' | 'disabled' | 'error' | 'id' | 'label' | 'name' | 'required' | 'value'> {
+}
+
+export interface CheckboxBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const CheckboxtagName = "s-checkbox";
+
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-button': ButtonProps & BaseProps;
+            [ButtontagName]: ButtonProps & ButtonBaseElementPropsWithChildren<ButtonElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-button': ButtonElement;
+        [ButtontagName]: ButtonElement;
     }
 }
 
-export interface ButtonElement extends Omit<ButtonProps, 'onClick'>, Omit<HTMLElement, 'id' | 'onclick'> {
-    onclick: ButtonProps['onClick'];
+export interface ButtonProps extends ButtonBaseProps, ButtonEvents {
+}
+
+export interface ButtonElement extends ButtonBaseProps, Omit<ButtonEvents, 'onClick'>, Omit<HTMLElement, 'id' | 'onclick'> {
+    onclick: ButtonEvents['onClick'];
+}
+
+export interface ButtonElementEvents {
+    /**
+     * Callback when the button is activated.
+     * This will be called before the action indicated by `type`.
+     */
+    click?: ((event: CallbackEvent<typeof ButtontagName>) => void) | null;
 }
 
-export interface ButtonProps extends Pick<ButtonProps$1, 'accessibilityLabel' | 'command' | 'commandFor' | 'disabled' | 'href' | 'id' | 'inlineSize' | 'loading' | 'onClick' | 'target' | 'tone' | 'type' | 'variant'> {
-    target?: Extract<ButtonProps$1['target'], 'auto' | '_self' | '_blank'>;
+export interface ButtonEvents extends Pick<ButtonProps$1, 'onClick'> {
+}
+
+export interface ButtonBaseProps extends Pick<ButtonProps$1, 'accessibilityLabel' | 'command' | 'commandFor' | 'disabled' | 'href' | 'id' | 'inlineSize' | 'loading' | 'target' | 'tone' | 'type' | 'variant'> {
+    target?: Extract<ButtonProps$1['target'], 'auto' | '_blank'>;
     tone?: Extract<ButtonProps$1['tone'], 'auto' | 'neutral' | 'critical'>;
     type?: Extract<ButtonProps$1['type'], 'submit' | 'button'>;
     variant?: Extract<ButtonProps$1['variant'], 'auto' | 'primary' | 'secondary'>;
 }
 
-declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
-    }
+export interface ButtonBaseElementPropsWithChildren<TClass = HTMLElement> extends ButtonBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+export interface ButtonBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const ButtontagName = "s-button";
 
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-box': BoxProps & BaseProps;
+            [BoxtagName]: BoxProps & BoxBaseElementPropsWithChildren<BoxElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-box': BoxElement;
+        [BoxtagName]: BoxElement;
     }
 }
 
 export interface BoxElement extends BoxProps, Omit<HTMLElement, 'id'> {
 }
 
-export interface BoxProps extends Pick<BoxProps$1, 'accessibilityLabel' | 'accessibilityRole' | 'accessibilityVisibility' | 'background' | 'border' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'display' | 'id' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart'> {
+export interface BoxProps extends Pick<BoxProps$1, 'accessibilityLabel' | 'accessibilityRole' | 'accessibilityVisibility' | 'background' | 'blockSize' | 'border' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'display' | 'id' | 'inlineSize' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart'> {
     background?: Extract<BoxProps$1['background'], 'transparent' | 'subdued' | 'base'>;
     border?: BorderShorthand;
     borderWidth?: MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | '';
     borderRadius?: MaybeAllValuesShorthandProperty<Extract<BoxProps$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>;
 }
 
-declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
-    }
+export interface BoxBaseElementPropsWithChildren<TClass = HTMLElement> extends BoxBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
 
+export interface BoxBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const BoxtagName = "s-box";
+
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-banner': BannerProps & BaseProps;
+            [BannertagName]: BannerProps & BannerBaseElementPropsWithChildren<BannerElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-banner': BannerElement;
+        [BannertagName]: BannerElement;
     }
 }
 
-export interface BannerElement extends Omit<BannerProps, 'onAfterHide' | 'onDismiss'>, Omit<HTMLElement, 'id' | 'title' | 'hidden'> {
-    onafterhide: BannerProps['onAfterHide'];
-    ondismiss: BannerProps['onDismiss'];
+export interface BannerProps extends BannerBaseProps, BannerEvents {
+}
+
+export interface BannerElement extends BannerBaseProps, Omit<BannerEvents, 'onAfterHide' | 'onDismiss'>, Omit<HTMLElement, 'id' | 'title' | 'hidden'> {
+    onafterhide: BannerEvents['onAfterHide'];
+    ondismiss: BannerEvents['onDismiss'];
+}
+
+export interface BannerElementEvents {
+    /**
+     * Event handler when the banner has fully hidden.
+     *
+     * The `hidden` property will be `true` when this event fires.
+     *
+     * @implementation If implementations animate the hiding of the banner,
+     * this event must fire after the banner has fully hidden.
+     * We can add an `onHide` event in future if we want to provide a hook for the start of the animation.
+     */
+    afterhide?: ((event: CallbackEvent<typeof BannertagName>) => void) | null;
+    /**
+     * Event handler when the banner is dismissed by the user.
+     *
+     * This does not fire when setting `hidden` manually.
+     *
+     * The `hidden` property will be `false` when this event fires.
+     */
+    dismiss?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+}
+
+export interface BannerEvents extends Pick<BannerProps$1, 'onAfterHide' | 'onDismiss'> {
 }
 
-export interface BannerProps extends Pick<BannerProps$1, 'collapsible' | 'dismissible' | 'heading' | 'hidden' | 'id' | 'onAfterHide' | 'onDismiss' | 'tone'> {
+export interface BannerBaseProps extends Pick<BannerProps$1, 'collapsible' | 'dismissible' | 'heading' | 'hidden' | 'id' | 'tone'> {
     tone?: Extract<BannerProps$1['tone'], 'auto' | 'info' | 'success' | 'warning' | 'critical'>;
 }
 
-declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
-    }
+export interface BannerBaseElementPropsWithChildren<TClass = HTMLElement> extends BannerBaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+export interface BannerBaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
 
+declare const BannertagName = "s-banner";
+
+declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-abbreviation': AbbreviationProps & BaseProps;
+            [tagName]: AbbreviationProps & BaseElementPropsWithChildren<AbbreviationElement>;
         }
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        's-abbreviation': AbbreviationElement;
+        [tagName]: AbbreviationElement;
     }
 }
 
@@ -723,9 +1515,23 @@ export interface AbbreviationElement extends AbbreviationProps, Omit<HTMLElement
 export interface AbbreviationProps extends Pick<AbbreviationProps$1, 'title'> {
 }
 
+export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends BaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+export interface BaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+
+declare const tagName = "s-abbreviation";
+
+import { CallbackEvent } from "../../../../../src/surfaces/checkout/components/Banner";
 import { ReducedBorderSizeKeyword } from "../../../../../src/surfaces/checkout/components/Box";
-import { AbbreviationProps$1, BannerProps$1, BorderShorthand, BoxProps$1, ButtonProps$1, ClipboardItemProps$1, DropZoneProps$1, FormProps$1, HeadingProps$1, IconProps$1, ImageProps$1, LinkProps$1, ListItemProps$1, MaybeAllValuesShorthandProperty, OrderedListProps$1, ParagraphProps$1, PaymentIconProps$1, ProgressProps$1, QRCodeProps$1, SectionProps$1, SpinnerProps$1, StackProps$1, TextFieldProps$1, TextProps$1, TimeProps$1, UnorderedListProps$1 } from "../../../../../src/surfaces/checkout/components/components-shared";
-import { BaseElementPropsWithChildren } from "../../../../../src/surfaces/customer-account/components/shared";
+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.page.render'];
 export type Api = Target['api'];