@shopify/ui-extensions 2025.10.0-rc.46 → 2025.10.0-rc.48

package/src/surfaces/point-of-sale/components/Badge.d.ts

@@ -26,13 +26,22 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 
 declare const tagName = 's-badge';
 export interface BadgeJSXProps extends Pick<BadgeProps, 'id'> {
+  /**
+   * Sets the tone of the Badge, based on the intention of the information being conveyed.
+   *
+   * @default 'auto'
+   */
   tone?: Extract<
     BadgeProps['tone'],
     'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'caution'
   >;
+  /**
+   * The content of the Badge.
+   */
   children?: ComponentChildren;
 }
 declare global {
@@ -43,7 +52,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: BadgeJSXProps & BaseElementPropsWithChildren<BadgeJSXProps>;
+      [tagName]: IntrinsicElementProps<BadgeJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/Banner.d.ts

@@ -31,36 +31,44 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 
 declare const tagName = 's-banner';
 export interface BannerJSXProps extends Pick<BannerProps, 'heading' | 'id'> {
   /**
    * Determines whether the banner is hidden.
+   *
+   * @default false
    */
   hidden?: BannerProps['hidden'];
   /**
    * Sets the tone of the Banner, based on the intention of the information being conveyed.
+   *
+   * @default 'auto'
    */
   tone?: Extract<
     BannerProps['tone'],
-    'success' | 'info' | 'warning' | 'critical'
+    'auto' | 'success' | 'info' | 'warning' | 'critical'
   >;
   /**
    * The action taken when the Banner is pressed.
    */
   primaryAction?: ComponentChild;
+  /**
+   * The content of the Banner.
+   */
   children?: ComponentChildren;
 }
+export type ElementProps = Omit<BannerJSXProps, 'primaryAction'>;
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName]: BannerJSXProps;
+    [tagName]: ElementProps;
   }
 }
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: Omit<BannerJSXProps, 'primaryAction'> &
-        BaseElementPropsWithChildren<Omit<BannerJSXProps, 'primaryAction'>>;
+      [tagName]: IntrinsicElementProps<ElementProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/Box.d.ts

@@ -9,7 +9,9 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
 import type {
-  BoxProps,
+  SizeUnitsOrAuto,
+  SizeUnitsOrNone,
+  SizeUnits,
   SizeKeyword,
   MaybeAllValuesShorthandProperty,
   MaybeTwoValuesShorthandProperty,
@@ -33,19 +35,51 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 
 declare const tagName = 's-box';
 export type PaddingKeyword = SizeKeyword | 'none';
-export interface BoxJSXProps
-  extends Pick<
-    BoxProps,
-    | 'blockSize'
-    | 'minBlockSize'
-    | 'maxBlockSize'
-    | 'inlineSize'
-    | 'minInlineSize'
-    | 'maxInlineSize'
-  > {
+export interface BoxJSXProps {
+  /**
+   * A unique identifier for the element.
+   */
+  id?: string;
+  /**
+   * Adjust the block size.
+   *
+   * @default 'auto'
+   */
+  blockSize?: SizeUnitsOrAuto;
+  /**
+   * Adjust the inline size.
+   *
+   * @default 'auto'
+   */
+  inlineSize?: SizeUnitsOrAuto;
+  /**
+   * Adjust the maximum block size.
+   *
+   * @default 'none'
+   */
+  maxBlockSize?: SizeUnitsOrNone;
+  /**
+   * Adjust the maximum inline size.
+   *
+   * @default 'none'
+   */
+  maxInlineSize?: SizeUnitsOrNone;
+  /**
+   * Adjust the minimum block size.
+   *
+   * @default '0'
+   */
+  minBlockSize?: SizeUnits;
+  /**
+   * Adjust the minimum inline size.
+   *
+   * @default '0'
+   */
+  minInlineSize?: SizeUnits;
   /**
    * Adjust the padding of all edges.
    *
@@ -76,7 +110,7 @@ export interface BoxJSXProps
    *
    * @default '' - meaning no override
    */
-  paddingBlock?: MaybeTwoValuesShorthandProperty<PaddingKeyword | ''>;
+  paddingBlock?: MaybeTwoValuesShorthandProperty<PaddingKeyword> | '';
   /**
    * Adjust the block-start padding.
    *
@@ -102,7 +136,7 @@ export interface BoxJSXProps
    *
    * @default '' - meaning no override
    */
-  paddingInline?: MaybeTwoValuesShorthandProperty<PaddingKeyword | ''>;
+  paddingInline?: MaybeTwoValuesShorthandProperty<PaddingKeyword> | '';
   /**
    * Adjust the inline-start padding.
    *
@@ -119,6 +153,9 @@ export interface BoxJSXProps
    * @default '' - meaning no override
    */
   paddingInlineEnd?: PaddingKeyword | '';
+  /**
+   * The content of the Box.
+   */
   children?: ComponentChildren;
 }
 declare global {
@@ -129,7 +166,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: BoxJSXProps & BaseElementPropsWithChildren<BoxJSXProps>;
+      [tagName]: IntrinsicElementProps<BoxJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/Button.d.ts

@@ -26,6 +26,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -38,7 +39,10 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 
 declare const tagName = 's-button';
 export interface ButtonJSXProps
-  extends Pick<ButtonProps, 'disabled' | 'command' | 'commandFor' | 'loading'> {
+  extends Pick<
+    ButtonProps,
+    'id' | 'disabled' | 'command' | 'commandFor' | 'loading'
+  > {
   /**
    * Sets the action the `commandFor` should take when this clickable is activated.
    *
@@ -72,7 +76,13 @@ export interface ButtonJSXProps
    * @default 'auto' - the variant is automatically determined by the Button's context
    */
   variant?: Extract<ButtonProps['variant'], 'primary' | 'secondary'>;
+  /**
+   * Called when the button is activated.
+   */
   onClick?: (event: CallbackEvent<typeof tagName>) => void;
+  /**
+   * The content of the Button.
+   */
   children?: ComponentChildren;
 }
 declare global {
@@ -83,7 +93,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: ButtonJSXProps & BaseElementPropsWithChildren<ButtonJSXProps>;
+      [tagName]: IntrinsicElementProps<ButtonJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/Choice.d.ts

@@ -26,10 +26,11 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 
 declare const tagName = 's-choice';
 export interface ChoiceJSXProps
-  extends Pick<ChoiceProps, 'value' | 'disabled' | 'selected'> {
+  extends Pick<ChoiceProps, 'id' | 'value' | 'disabled' | 'selected'> {
   children?: ComponentChildren;
 }
 declare global {
@@ -40,7 +41,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: ChoiceJSXProps & BaseElementPropsWithChildren<ChoiceJSXProps>;
+      [tagName]: IntrinsicElementProps<ChoiceJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/ChoiceList.d.ts

@@ -26,6 +26,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -38,11 +39,18 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 
 declare const tagName = 's-choice-list';
 export interface ChoiceListJSXProps
-  extends Pick<ChoiceListProps, 'values' | 'multiple'> {
-  /** Function called when the user changes a choice. Fires simultaneously with onChange. */
+  extends Pick<ChoiceListProps, 'id' | 'values' | 'multiple'> {
+  /**
+   * Callback when the user changes a choice. Fires simultaneously with onChange.
+   */
   onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  /** Function called when the user changes a choice. Fires simultaneously with onInput. */
+  /**
+   * Callback when the user changes a choice. Fires simultaneously with onInput.
+   */
   onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * The content of the ChoiceList. Should be one or more Choice elements.
+   */
   children?: ComponentChildren;
 }
 declare global {
@@ -53,8 +61,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: ChoiceListJSXProps &
-        BaseElementPropsWithChildren<ChoiceListJSXProps>;
+      [tagName]: IntrinsicElementProps<ChoiceListJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/Clickable.d.ts

@@ -26,6 +26,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -37,9 +38,16 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 }
 
 declare const tagName = 's-clickable';
-export interface ClickableJSXProps extends Pick<ClickableProps, 'disabled'> {
-  children?: ComponentChildren;
+export interface ClickableJSXProps
+  extends Pick<ClickableProps, 'id' | 'disabled'> {
+  /**
+   * Callback when the element is activated.
+   */
   onClick?: (event: CallbackEvent<typeof tagName>) => void;
+  /**
+   * The content of the Clickable.
+   */
+  children?: ComponentChildren;
 }
 declare global {
   interface HTMLElementTagNameMap {
@@ -49,8 +57,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: ClickableJSXProps &
-        BaseElementPropsWithChildren<ClickableJSXProps>;
+      [tagName]: IntrinsicElementProps<ClickableJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/DateField.d.ts

@@ -26,6 +26,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -40,27 +41,35 @@ declare const tagName = 's-date-field';
 export interface DateFieldJSXProps
   extends Pick<
     DateFieldProps,
-    'label' | 'details' | 'value' | 'disabled' | 'error'
+    'id' | 'label' | 'details' | 'value' | 'disabled' | 'error'
   > {
-  /** Function called when the user makes any changes in the field. */
+  /**
+   * Callback when the user makes any changes in the field.
+   */
   onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  /** Function called after editing completes (typically on blur). */
+  /**
+   * Callback after editing completes (typically on blur).
+   */
   onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  /** Function called when the element loses focus. */
+  /**
+   * Callback when the element loses focus.
+   */
   onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  /** Function called when the element receives focus. */
+  /**
+   * Callback when the element receives focus.
+   */
   onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
 }
+export type ElementProps = Omit<DateFieldJSXProps, 'accessory'>;
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName]: DateFieldJSXProps;
+    [tagName]: ElementProps;
   }
 }
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: Omit<DateFieldJSXProps, 'accessory'> &
-        BaseElementPropsWithChildren<Omit<DateFieldJSXProps, 'accessory'>>;
+      [tagName]: IntrinsicElementProps<ElementProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/DatePicker.d.ts

@@ -26,6 +26,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -39,13 +40,21 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 declare const tagName = 's-date-picker';
 export interface DatePickerJSXProps
   extends Pick<DatePickerProps, 'id' | 'value'> {
-  /** Function called when the user selects a date from the picker. */
+  /**
+   * Callback when the user selects a date from the picker.
+   */
   onInput?: (event: CallbackEvent<typeof tagName>) => void | null;
-  /** Function called when the user selects a date from the picker that is different to the current value. */
+  /**
+   * Callback when the user selects a date from the picker that is different to the current value.
+   */
   onChange?: (event: CallbackEvent<typeof tagName>) => void | null;
-  /** Function called when the date picker is dismissed. */
+  /**
+   * Callback when the date picker is dismissed.
+   */
   onBlur?: (event: CallbackEvent<typeof tagName>) => void | null;
-  /** Function called when the date picker is revealed. */
+  /**
+   * Callback when the date picker is revealed.
+   */
   onFocus?: (event: CallbackEvent<typeof tagName>) => void | null;
 }
 declare global {
@@ -56,8 +65,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: DatePickerJSXProps &
-        BaseElementPropsWithChildren<DatePickerJSXProps>;
+      [tagName]: IntrinsicElementProps<DatePickerJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/DateSpinner.d.ts

@@ -26,6 +26,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -40,16 +41,20 @@ declare const tagName = 's-date-spinner';
 export interface DateSpinnerJSXProps
   extends Pick<DateSpinnerProps, 'id' | 'value'> {
   /**
-   * Function called when the user makes a selection.
+   * Callback when the user makes a selection.
    */
   onInput?: (event: CallbackEvent<typeof tagName>) => void | null;
   /**
-   * Function called when the value changes. Only called when a different value is selected.
+   * Callback when the value changes. Only called when a different value is selected.
    */
   onChange?: (event: CallbackEvent<typeof tagName>) => void | null;
-  /** Function called when the date picker is dismissed. */
+  /**
+   * Callback when the date spinner is dismissed.
+   */
   onBlur?: (event: CallbackEvent<typeof tagName>) => void | null;
-  /** Function called when the date picker is revealed. */
+  /**
+   * Callback when the date spinner is revealed.
+   */
   onFocus?: (event: CallbackEvent<typeof tagName>) => void | null;
 }
 declare global {
@@ -60,8 +65,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: DateSpinnerJSXProps &
-        BaseElementPropsWithChildren<DateSpinnerJSXProps>;
+      [tagName]: IntrinsicElementProps<DateSpinnerJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/Divider.d.ts

@@ -26,9 +26,11 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 
 declare const tagName = 's-divider';
-export interface DividerJSXProps extends Pick<DividerProps, 'direction'> {}
+export interface DividerJSXProps
+  extends Pick<DividerProps, 'id' | 'direction'> {}
 declare global {
   interface HTMLElementTagNameMap {
     [tagName]: DividerJSXProps;
@@ -37,8 +39,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: DividerJSXProps &
-        BaseElementPropsWithChildren<DividerJSXProps>;
+      [tagName]: IntrinsicElementProps<DividerJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/EmailField.d.ts

@@ -31,6 +31,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -45,6 +46,7 @@ declare const tagName = 's-email-field';
 export interface EmailFieldJSXProps
   extends Pick<
     EmailFieldProps,
+    | 'id'
     | 'label'
     | 'value'
     | 'placeholder'
@@ -54,29 +56,37 @@ export interface EmailFieldJSXProps
     | 'maxLength'
     | 'details'
   > {
-  /** Function called when the user makes any changes in the field. */
+  /**
+   * Callback when the user makes any changes in the field.
+   */
   onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  /** Function called after editing completes (typically on blur). */
+  /**
+   * Callback after editing completes (typically on blur).
+   */
   onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  /** Function called when the element loses focus. */
+  /**
+   * Callback when the element loses focus.
+   */
   onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  /** Function called when the element receives focus. */
+  /**
+   * Callback when the element receives focus.
+   */
   onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
   /**
    * Additional content to be displayed in the field. Commonly used to display clickable text.
    */
   accessory?: ComponentChild;
 }
+export type ElementProps = Omit<EmailFieldJSXProps, 'accessory'>;
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName]: EmailFieldJSXProps;
+    [tagName]: ElementProps;
   }
 }
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: Omit<EmailFieldJSXProps, 'accessory'> &
-        BaseElementPropsWithChildren<Omit<EmailFieldJSXProps, 'accessory'>>;
+      [tagName]: IntrinsicElementProps<ElementProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/Heading.d.ts

@@ -8,7 +8,7 @@
 /* eslint-disable import-x/namespace */
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
-import type {Key, Ref} from './components-shared.d.ts';
+import type {HeadingProps, Key, Ref} from './components-shared.d.ts';
 
 export type ComponentChildren = any;
 /**
@@ -26,9 +26,13 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 
 declare const tagName = 's-heading';
-export interface HeadingJSXProps {
+export interface HeadingJSXProps extends Pick<HeadingProps, 'id'> {
+  /**
+   * The content of the Heading.
+   */
   children?: ComponentChildren;
 }
 declare global {
@@ -39,8 +43,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: HeadingJSXProps &
-        BaseElementPropsWithChildren<HeadingJSXProps>;
+      [tagName]: IntrinsicElementProps<HeadingJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/Icon.d.ts

@@ -10,6 +10,7 @@
 /// <reference lib="DOM" />
 import type {IconProps, Key, Ref} from './components-shared.d.ts';
 
+export type ComponentChildren = any;
 /**
  * Used when an element does not have children.
  */
@@ -18,6 +19,14 @@ export interface BaseElementProps<TClass = HTMLElement> {
   ref?: Ref<TClass>;
   slot?: Lowercase<string>;
 }
+/**
+ * Used when an element has children.
+ */
+export interface BaseElementPropsWithChildren<TClass = HTMLElement>
+  extends BaseElementProps<TClass> {
+  children?: ComponentChildren;
+}
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 
 declare const tagName = 's-icon';
 export type SupportedIconNames = Extract<
@@ -149,9 +158,10 @@ export type SupportedIconNames = Extract<
   | 'x-circle'
 >;
 export interface IconJSXProps
-  extends Pick<IconProps, 'tone' | 'color' | 'size'> {
+  extends Pick<IconProps, 'id' | 'tone' | 'color' | 'size'> {
   /**
-   * The type of icon to display. Maps to PDS icon names.
+   * The type of icon to display.
+   *
    * @default ''
    */
   type?: SupportedIconNames;
@@ -164,7 +174,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: IconJSXProps & BaseElementProps<IconJSXProps>;
+      [tagName]: IntrinsicElementProps<IconJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/Image.d.ts

@@ -26,11 +26,10 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 
 declare const tagName = 's-image';
-export type PickedProps = Pick<ImageProps, 'src' | 'inlineSize' | 'objectFit'>;
-export interface ImageJSXProps extends PickedProps {
-  children?: ComponentChildren;
+export interface ImageJSXProps extends Pick<ImageProps, 'id' | 'objectFit'> {
   /**
    * The displayed inline width of the image.
    *
@@ -45,7 +44,15 @@ export interface ImageJSXProps extends PickedProps {
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width
    */
-  inlineSize?: PickedProps['inlineSize'];
+  inlineSize?: ImageProps['inlineSize'];
+  /**
+   * The image source, which should be a remote URL.
+   *
+   * When the image is loading or no `src` is provided, a placeholder will be rendered.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#src
+   */
+  src?: ImageProps['src'];
 }
 declare global {
   interface HTMLElementTagNameMap {
@@ -55,7 +62,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: ImageJSXProps & BaseElementPropsWithChildren<ImageJSXProps>;
+      [tagName]: IntrinsicElementProps<ImageJSXProps>;
     }
   }
 }