@shopify/ui-extensions 2025.10.5 → 2026.1.0-rc.1

package/src/surfaces/checkout/components/Sheet.d.ts

@@ -27,8 +27,8 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName = "s-sheet";
@@ -48,19 +48,19 @@ export interface SheetElementEvents {
     /**
      * Callback fired when the overlay is hidden **after** any animations to hide the overlay have finished.
      */
-    afterhide?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    afterhide?: CallbackEventListener<typeof tagName>;
     /**
      * Callback fired when the overlay is shown **after** any animations to show the overlay have finished.
      */
-    aftershow?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    aftershow?: CallbackEventListener<typeof tagName>;
     /**
      * Callback fired after the overlay is hidden.
      */
-    hide?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    hide?: CallbackEventListener<typeof tagName>;
     /**
      * Callback fired after the overlay is shown.
      */
-    show?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    show?: CallbackEventListener<typeof tagName>;
 }
 export interface SheetElementSlots {
     /**

package/src/surfaces/checkout/components/Switch.d.ts

@@ -21,8 +21,8 @@ export interface BaseElementProps<TClass = HTMLElement> {
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName = "s-switch";
@@ -37,7 +37,7 @@ export interface SwitchElementEvents {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
      */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    change?: CallbackEventListener<typeof tagName>;
 }
 export interface SwitchElement extends SwitchElementProps, Omit<HTMLElement, 'id' | 'onchange'> {
     onchange: SwitchEvents['onChange'];

package/src/surfaces/checkout/components/TextArea.d.ts

@@ -21,8 +21,8 @@ export interface BaseElementProps<TClass = HTMLElement> {
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName = "s-text-area";
@@ -41,25 +41,25 @@ export interface TextAreaElementEvents {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
      */
-    blur?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    blur?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
      */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    change?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the element receives focus.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
      */
-    focus?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    focus?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user makes any changes in the field.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
      */
-    input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    input?: CallbackEventListener<typeof tagName>;
 }
 export interface TextAreaElement extends TextAreaElementProps, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput'> {
     onblur: TextAreaEvents['onBlur'];

package/src/surfaces/checkout/components/TextField.d.ts

@@ -34,8 +34,8 @@ export type ReducedIconTypes = (typeof CHECKOUT_AVAILABLE_ICONS)[number];
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName$1 = "s-icon";
@@ -60,7 +60,7 @@ declare module 'preact' {
 }
 
 declare const tagName = "s-text-field";
-export interface TextFieldElementProps extends Pick<TextFieldProps$1, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'id' | 'icon' | 'label' | 'labelAccessibilityVisibility' | 'maxLength' | 'minLength' | 'name' | 'prefix' | 'readOnly' | 'required' | 'suffix' | 'value'> {
+export interface TextFieldElementProps extends Pick<TextFieldProps$1, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'icon' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'maxLength' | 'minLength' | 'name' | 'prefix' | 'readOnly' | 'required' | 'suffix' | 'value'> {
     icon?: IconProps['type'];
     /**
      * @deprecated Use `label` instead.
@@ -76,25 +76,25 @@ export interface TextFieldElementEvents {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
      */
-    blur?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    blur?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
      */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    change?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the element receives focus.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
      */
-    focus?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    focus?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user makes any changes in the field.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
      */
-    input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    input?: CallbackEventListener<typeof tagName>;
 }
 export interface TextFieldElementSlots {
     /**

package/src/surfaces/checkout/components/UrlField.d.ts

@@ -27,8 +27,8 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName = "s-url-field";
@@ -42,25 +42,25 @@ export interface UrlFieldElementEvents {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
      */
-    blur?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    blur?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
      */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    change?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the element receives focus.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
      */
-    focus?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    focus?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user makes any changes in the field.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
      */
-    input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    input?: CallbackEventListener<typeof tagName>;
 }
 export interface UrlFieldElementSlots {
     /**

package/src/surfaces/checkout/components/components.d.ts

@@ -3826,7 +3826,7 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$K]: ConsentPhoneFieldProps & BaseElementProps<ConsentPhoneFieldElement>;
+            [tagName$K]: ConsentPhoneFieldProps & BaseElementPropsWithChildren<ConsentPhoneFieldElement>;
         }
     }
 }
@@ -3984,7 +3984,7 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$E]: EmailFieldProps & BaseElementProps<EmailFieldElement>;
+            [tagName$E]: EmailFieldProps & BaseElementPropsWithChildren<EmailFieldElement>;
         }
     }
 }
@@ -4277,7 +4277,8 @@ declare module 'preact' {
 }
 
 declare const tagName$r = "s-number-field";
-interface NumberFieldElementProps extends Pick<NumberFieldProps$1, 'autocomplete' | 'controls' | 'defaultValue' | 'details' | 'disabled' | 'error' | 'icon' | 'id' | 'inputMode' | 'label' | 'labelAccessibilityVisibility' | 'max' | 'min' | 'name' | 'prefix' | 'readOnly' | 'required' | 'step' | 'suffix' | 'value'> {
+interface NumberFieldElementProps extends Pick<NumberFieldProps$1, 'autocomplete' | 'controls' | 'defaultValue' | 'disabled' | 'error' | 'icon' | 'inputMode' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'max' | 'min' | 'name' | 'prefix' | 'readOnly' | 'required' | 'step' | 'suffix' | 'value'> {
+    icon?: IconProps['type'];
     /**
      * @deprecated Use `label` instead.
      * @private
@@ -4830,7 +4831,7 @@ declare module 'preact' {
 }
 
 declare const tagName$5 = "s-text-field";
-interface TextFieldElementProps extends Pick<TextFieldProps$1, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'id' | 'icon' | 'label' | 'labelAccessibilityVisibility' | 'maxLength' | 'minLength' | 'name' | 'prefix' | 'readOnly' | 'required' | 'suffix' | 'value'> {
+interface TextFieldElementProps extends Pick<TextFieldProps$1, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'icon' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'maxLength' | 'minLength' | 'name' | 'prefix' | 'readOnly' | 'required' | 'suffix' | 'value'> {
     icon?: IconProps['type'];
     /**
      * @deprecated Use `label` instead.

package/src/surfaces/checkout/helper.docs.ts

@@ -48,15 +48,6 @@ export function getExamples(
 
   // Add new examples here that can be shared across multiples pages.
   return {
-    'ui-components/checkbox-links': {
-      description:
-        'To provide buyers with additional information or references, couple it with link components seamlessly within checkbox components. This can be done by including links as part of the checkbox label in the checkbox. This will provide an easy way to access relevant content that buyers may need.',
-      image: 'checkbox-links.png',
-      codeblock: {
-        title: 'Embedding links in checkbox components',
-        tabs: getExtensionCodeTabs('ui-components/checkbox-links'),
-      },
-    },
     'ui-components/clipboarditem-qrcode': {
       description:
         'When displaying a QR code, include an alternative way for the user to get the content',
@@ -66,45 +57,6 @@ export function getExamples(
         tabs: getExtensionCodeTabs('ui-components/clipboarditem-qrcode'),
       },
     },
-    'ui-components/clipboarditem-oncopy': {
-      description:
-        'Use the onCopy property to display an icon that swaps to a checkmark when the text is copied.',
-      image: 'clipboard-oncopy.png',
-      codeblock: {
-        title: 'Swapping an icon when the text is copied',
-        tabs: getExtensionCodeTabs('ui-components/clipboarditem-oncopy'),
-      },
-    },
-    'ui-components/disclosure-and-alignment': {
-      description:
-        'Use the Disclosure component to simplify the user experience and reveal interfaces only when the customer requests it. It also demonstrates how a combination of inline and block layout components can improve the readability of information. By employing these strategies, users can easily scan and comprehend the content, making for a better user experience overall.',
-      image: 'disclosure-and-alignment.gif',
-      codeblock: {
-        title:
-          'Strategies for simplifying layout and aligning content using Disclosure and Inline/Block Layout components.',
-        tabs: getExtensionCodeTabs('ui-components/disclosure-and-alignment'),
-      },
-    },
-    'ui-components/loading-skeletons': {
-      description:
-        'When adding content to a layout, incorporate a skeleton loader that renders the approximate size and position of the content during loading. This will provide a seamless transition from skeleton loaders to the content, and prevent any layout shift when the resulting content loads.',
-      image: 'loading-skeletons.gif',
-      codeblock: {
-        title:
-          'Using skeleton loaders to prevent layout shifts on content load.',
-        tabs: getExtensionCodeTabs('ui-components/loading-skeletons'),
-      },
-    },
-    'ui-components/togglebuttongroup-time-picking': {
-      image: 'togglebuttongroup-time-picking.png',
-      description: `The ToggleButtonGroup component is ideal for a small set of options.  It allows for easy scanning of available choices. Also the component’s big tap target makes it a good choice for enhanced mobile experience. However, in a grid layout, having more than 6 ToggleButtons can get overwhelming and take up too much vertical space. When there are more than 6 choices, consider using the [Select](/docs/api/checkout-ui-extensions/components/forms/select) component instead. `,
-      codeblock: {
-        title: 'Displaying a small set of time choices',
-        tabs: getExtensionCodeTabs(
-          'ui-components/togglebuttongroup-time-picking',
-        ),
-      },
-    },
     'ui-components/choicelist-survey': {
       description: `The base variant’s flexibility allows for the creation of Likert scales using the ChoiceList component. By utilizing layout components, you can easily structure rows and columns for this purpose.`,
       image: 'choicelist-survey.png',
@@ -131,7 +83,7 @@ export function getExamples(
     },
     'ui-components/sheet-consent': {
       description:
-        'The Sheet component can be used to display privacy consent preferences in the Checkout interface. Sheet can be defaulted to open for this use case.\n\n This component requires access to [Customer Privacy API](/docs/api/checkout-ui-extensions/unstable/apis/customer-privacy) to be rendered.',
+        'The Sheet component can be used to display privacy consent preferences in the Checkout interface. Sheet can be defaulted to open for this use case.\n\n This component requires access to [Customer Privacy API](/docs/api/checkout-ui-extensions/latest/apis/customer-privacy) to be rendered.',
       codeblock: {
         title: 'Using Sheet to display consent preferences',
         tabs: getExtensionCodeTabs('ui-components/sheet-consent'),
@@ -168,24 +120,6 @@ export function getExamples(
         ),
       },
     },
-    'ui-components/switch-custom-label': {
-      description:
-        'This example demonstrates pairing the switch with a custom label and layout while keeping it accessible to screen readers.',
-      image: 'switch-custom-label.png',
-      codeblock: {
-        title: 'Custom label',
-        tabs: getExtensionCodeTabs('ui-components/switch-custom-label'),
-      },
-    },
-    'ui-components/progress-determinate-state': {
-      description:
-        'In a determinate state, [TextBlock](../titles-and-text/textblock) or [Text](../titles-and-text/text) components can be used to communicate what the progress bar is tracking, and to set clear expectations about the current progress.',
-      image: 'progress-determinate.png',
-      codeblock: {
-        title: 'Determinate state',
-        tabs: getExtensionCodeTabs('ui-components/progress-determinate-state'),
-      },
-    },
     'ui-components/qrcode-image': {
       description:
         'The QRCode component can display an image in the center. Adding a logo can increase brand trust and set expectations for the action when scanning.',

package/src/surfaces/point-of-sale/components/ChoiceList/examples/event-handling.jsx

@@ -1,6 +1,6 @@
 <s-choice-list
-  onChange={(event) => console.log('onChange:', event.target.values)}
-  onInput={(event) => console.log('onInput:', event.target.values)}
+  onChange={(event) => console.log('onChange:', event.currentTarget.values)}
+  onInput={(event) => console.log('onInput:', event.currentTarget.values)}
 >
   <s-choice value="option1">Option 1</s-choice>
   <s-choice value="option2" disabled>Option 2 (disabled)</s-choice>

package/src/surfaces/point-of-sale/components/ChoiceList/examples/multiple-selection.jsx

@@ -1,7 +1,7 @@
 <s-choice-list 
   multiple
   values={['small', 'medium']}
-  onChange={(event) => console.log('Selected:', event.target.values)}
+  onChange={(event) => console.log('Selected:', event.currentTarget.values)}
 >
   <s-choice value="small">Small</s-choice>
   <s-choice value="medium">Medium</s-choice>

package/src/surfaces/point-of-sale/components/DateField/examples/event-handling.jsx

@@ -1,8 +1,8 @@
 <s-date-field 
   label="Order date"
   value="2024-10-26"
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
-  onFocus={(event) => console.log('Focused with:', event.target.value)}
-  onBlur={(event) => console.log('Blurred with:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
+  onFocus={(event) => console.log('Focused with:', event.currentTarget.value)}
+  onBlur={(event) => console.log('Blurred with:', event.currentTarget.value)}
 />

package/src/surfaces/point-of-sale/components/DatePicker/examples/command-system.jsx

@@ -5,6 +5,6 @@
   <s-date-picker
     id="date-picker"
     value="2024-10-26"
-    onChange={(event) => console.log('Date selected:', event.target.value)}
+    onChange={(event) => console.log('Date selected:', event.currentTarget.value)}
   />
 </>;

package/src/surfaces/point-of-sale/components/DatePicker/examples/event-handling.jsx

@@ -1,7 +1,7 @@
 <s-date-picker 
   value="2024-10-26"
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Focus')}
   onBlur={(event) => console.log('Blur')}
 />

package/src/surfaces/point-of-sale/components/DateSpinner/examples/command-system.jsx

@@ -5,6 +5,6 @@
   <s-date-spinner
     id="date-spinner"
     value="2024-10-26"
-    onChange={(event) => console.log('Date selected:', event.target.value)}
+    onChange={(event) => console.log('Date selected:', event.currentTarget.value)}
   />
 </>;

package/src/surfaces/point-of-sale/components/DateSpinner/examples/event-handling.jsx

@@ -1,7 +1,7 @@
 <s-date-spinner 
   value="2024-10-26"
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Focus')}
   onBlur={(event) => console.log('Blur')}
 />

package/src/surfaces/point-of-sale/components/EmailField/examples/event-handling.jsx

@@ -1,8 +1,8 @@
 <s-email-field
   label="Customer email"
   placeholder="customer@example.com"
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Focus')}
   onBlur={(event) => console.log('Blur')}
 />

package/src/surfaces/point-of-sale/components/NumberField/examples/controls-constraints.jsx

@@ -4,6 +4,6 @@
   min={1}
   max={100}
   controls
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
 />;

package/src/surfaces/point-of-sale/components/NumberField/examples/input-mode.jsx

@@ -3,13 +3,13 @@
     label="Price"
     placeholder="0.00"
     inputMode="decimal"
-    onInput={(event) => console.log('Value:', event.target.value)}
+    onInput={(event) => console.log('Value:', event.currentTarget.value)}
   />
 
   <s-number-field
     label="Stock count"
     placeholder="0"
     inputMode="numeric"
-    onInput={(event) => console.log('Value:', event.target.value)}
+    onInput={(event) => console.log('Value:', event.currentTarget.value)}
   />
 </s-stack>;

package/src/surfaces/point-of-sale/components/SearchField/examples/event-handling.jsx

@@ -1,8 +1,8 @@
 <s-search-field
   placeholder="Search products..."
   value=""
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Search focused')}
   onBlur={(event) => console.log('Search blurred')}
 />

package/src/surfaces/point-of-sale/components/TextArea/examples/event-handling.jsx

@@ -1,8 +1,8 @@
 <s-text-area
   label="Customer feedback"
   placeholder="Enter feedback..."
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Focused')}
   onBlur={(event) => console.log('Blurred')}
 />

package/src/surfaces/point-of-sale/components/TextArea/examples/rows-configuration.jsx

@@ -3,5 +3,5 @@
   placeholder="Add special instructions..."
   rows={5}
   maxLength={500}
-  onInput={(event) => console.log('Characters:', event.target.value.length)}
+  onInput={(event) => console.log('Characters:', event.currentTarget.value.length)}
 />

package/src/surfaces/point-of-sale/components/TextField/examples/common-props.jsx

@@ -7,5 +7,5 @@
   disabled={isProcessing}
   required
   maxLength={20}
-  onChange={(event) => setSku(event.target.value)}
+  onChange={(event) => setSku(event.currentTarget.value)}
 />

package/src/surfaces/point-of-sale/components/TextField/examples/event-handling.jsx

@@ -2,16 +2,16 @@
   label="Product SKU"
   placeholder="Enter SKU"
   onInput={(event) => {
-    console.log('Input:', event.target.value);
-    console.log('Current error:', event.target.error);
+    console.log('Input:', event.currentTarget.value);
+    console.log('Current error:', event.currentTarget.error);
   }}
   onFocus={(event) => {
-    console.log('Focused with value:', event.target.value);
+    console.log('Focused with value:', event.currentTarget.value);
   }}
   onBlur={(event) => {
-    console.log('Blurred with value:', event.target.value);
+    console.log('Blurred with value:', event.currentTarget.value);
   }}
   onChange={(event) => {
-    console.log('Changed to:', event.target.value);
+    console.log('Changed to:', event.currentTarget.value);
   }}
 />

package/src/surfaces/point-of-sale/components/TimeField/examples/event-handling.jsx

@@ -1,8 +1,8 @@
 <s-time-field
   label="Appointment time"
   value="14:30"
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Focused')}
   onBlur={(event) => console.log('Blurred')}
 />

package/src/surfaces/point-of-sale/components/TimePicker/examples/command-system.jsx

@@ -5,6 +5,6 @@
   <s-time-picker
     id="time-picker"
     value="14:30"
-    onChange={(event) => console.log('Time selected:', event.target.value)}
+    onChange={(event) => console.log('Time selected:', event.currentTarget.value)}
   />
 </>;

package/src/surfaces/point-of-sale/components/TimePicker/examples/event-handling.jsx

@@ -1,7 +1,7 @@
 <s-time-picker
   value="14:30"
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Focused')}
   onBlur={(event) => console.log('Blurred')}
 />

package/src/surfaces/point-of-sale/types/cart.ts

@@ -55,6 +55,33 @@ export interface LineItem {
    * The currently selected selling plan for this line item.
    */
   sellingPlan?: SellingPlan;
+  /**
+   * Bundle components for this line item. Only present for product bundles.
+   * Each component represents an individual item within the bundle with its own tax information.
+   */
+  components?: LineItemComponent[];
+}
+
+/**
+ * Represents a component of a product bundle line item.
+ * Bundle components contain the individual items that make up a bundle,
+ * each with their own pricing and tax information.
+ */
+export interface LineItemComponent {
+  /** The title/name of the component product */
+  title?: string;
+  /** The quantity of this component in the bundle */
+  quantity: number;
+  /** The price of this component */
+  price?: number;
+  /** Whether this component is taxable */
+  taxable: boolean;
+  /** Tax lines applied to this component */
+  taxLines: TaxLine[];
+  /** The variant ID of this component, if applicable */
+  variantId?: number;
+  /** The product ID of this component, if applicable */
+  productId?: number;
 }
 
 /**

package/src/surfaces/checkout/style/examples/style.example.tsx

@@ -1,22 +0,0 @@
-import {
-  reactExtension,
-  Style,
-  View,
-} from '@shopify/ui-extensions-react/checkout';
-
-export default reactExtension('purchase.checkout.block.render', () => (
-  <Extension />
-));
-
-function Extension() {
-  return (
-    <View
-      maxInlineSize={Style.default(200)
-        .when({viewportInlineSize: {min: 'small'}}, 300)
-        .when({viewportInlineSize: {min: 'medium'}}, 400)
-        .when({viewportInlineSize: {min: 'large'}}, 800)}
-    >
-      Responsive Content
-    </View>
-  );
-}