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

package/src/surfaces/admin/components/shared.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.1.1 **/
+/** VERSION: 1.20.0 **/
 
 /* eslint-disable @typescript-eslint/ban-types */
 
@@ -8,13 +8,168 @@
  * TODO: Update `any` type here after this is resolved
  * https://github.com/Shopify/ui-api-design/issues/139
  */
-export type ComponentChildren = any;
+export type ComponentChildren = preact.ComponentChildren;
+export type StringChildren = string;
 export interface GlobalProps {
   /**
    * A unique identifier for the element.
    */
   id?: string;
 }
+export interface ActionProps {
+  /**
+   * The text to use as the Action modal’s title. If not provided, the name of the extension will be used.
+   */
+  heading?: string;
+}
+export interface ActionSlots {
+  /**
+   * The primary action to perform, provided as a button or link type element.
+   */
+  primaryAction?: ComponentChildren;
+  /**
+   * The secondary actions to perform, provided as button or link type elements.
+   */
+  secondaryActions?: ComponentChildren;
+}
+interface AdminActionProps$1 extends GlobalProps, ActionProps, ActionSlots {
+  /**
+   * Whether the action is in a loading state, such as initial page load or action opening.
+   * When true, the action could be in an inert state, which prevents user interaction.
+   *
+   * @default false
+   */
+  loading?: boolean;
+}
+interface AdminBlockProps$1 extends GlobalProps {
+  /**
+   * The text to use as the Block title in the block header. If not provided, the name of the
+   * extension will be used.
+   */
+  heading?: string;
+  /**
+   * The summary to display when the app block is collapsed.
+   * Summary longer than 30 characters will be truncated.
+   */
+  collapsedSummary?: string;
+}
+interface AdminPrintActionProps$1 extends GlobalProps {
+  /**
+   * Sets the src URL of the preview and the document to print.
+   * If not provided, the preview will show an empty state and the print button will be disabled.
+   * HTML, PDFs and images are supported.
+   */
+  src?: string;
+}
+export interface BaseOverlayProps {
+  /**
+   * Callback fired after the overlay is shown.
+   */
+  onShow?: (event: Event) => void;
+  /**
+   * Callback fired when the overlay is shown **after** any animations to show the overlay have finished.
+   */
+  onAfterShow?: (event: Event) => void;
+  /**
+   * Callback fired after the overlay is hidden.
+   */
+  onHide?: (event: Event) => void;
+  /**
+   * Callback fired when the overlay is hidden **after** any animations to hide the overlay have finished.
+   */
+  onAfterHide?: (event: Event) => void;
+}
+/**
+ * Shared interfaces for web component methods.
+ *
+ * Methods are required (not optional) because:
+ * - Components implementing this interface must provide all methods
+ * - Unlike props/attributes, methods are not rendered in HTML but are JavaScript APIs
+ * - Consumers expect these methods to be consistently available on all instances
+ */
+export interface BaseOverlayMethods {
+  /**
+   * Method to show an overlay.
+   *
+   * @implementation This is a method to be called on the element and not a callback and should hence be camelCase
+   */
+  showOverlay: () => void;
+  /**
+   * Method to hide an overlay.
+   *
+   * @implementation This is a method to be called on the element and not a callback and should hence be camelCase
+   */
+  hideOverlay: () => void;
+  /**
+   * Method to toggle the visiblity of an overlay.
+   *
+   * @implementation This is a method to be called on the element and not a callback and should hence be camelCase
+   */
+  toggleOverlay: () => void;
+}
+export interface FocusEventProps {
+  /**
+   * Callback when the element loses focus.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
+   */
+  onBlur?: (event: FocusEvent) => void;
+  /**
+   * Callback when the element receives focus.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
+   */
+  onFocus?: (event: FocusEvent) => void;
+}
+export interface ToggleEventProps {
+  /**
+   * Callback fired when the element state changes **after** any animations have finished.
+   *
+   * - If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the
+   *   `newState` property will be set to `open`.
+   * - If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the
+   *   `newState` will be `closed`.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState
+   */
+  onAfterToggle?: (event: ToggleEvent$1) => void;
+  /**
+   * Callback straight after the element state changes.
+   *
+   * - If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the
+   *   `newState` property will be set to `open`.
+   * - If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the
+   *   `newState` will be `closed`.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState
+   */
+  onToggle?: (event: ToggleEvent$1) => void;
+}
+export type ToggleState = 'open' | 'closed';
+interface ToggleEvent$1 extends Event {
+  readonly newState: ToggleState;
+  readonly oldState: ToggleState;
+}
+export interface ExtendableEvent extends Event {
+  /**
+   * Provide a promise that signals the length, and eventual success or failure of actions relating to the event.
+   *
+   * This may be called many times, which adds promises to the event.
+   *
+   * However, this may only be called synchronously during the dispatch of the event.
+   * As in, you cannot call it after a `setTimeout` or microtask.
+   */
+  waitUntil?: (promise: Promise<void>) => void;
+}
+interface AggregateError$1<T extends Error> extends Error {
+  errors: T[];
+}
+export interface AggregateErrorEvent<T extends Error> extends ErrorEvent {
+  error: AggregateError$1<T>;
+}
 export type SizeKeyword =
   | 'small-500'
   | 'small-400'
@@ -30,6 +185,41 @@ export type SizeKeyword =
   | 'large-400'
   | 'large-500';
 export type ColorKeyword = 'subdued' | 'base' | 'strong';
+interface AvatarProps$1 extends GlobalProps {
+  /**
+   * Initials to display in the avatar.
+   */
+  initials?: string;
+  /**
+   * The URL or path to the image.
+   *
+   * Initials will be rendered as a fallback if `src` is not provided, fails to load or does not load quickly
+   */
+  src?: string;
+  /**
+   * Invoked when load of provided image completes successfully.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
+   */
+  onLoad?: (event: Event) => void;
+  /**
+   * Invoked on load error of provided image.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
+   */
+  onError?: (event: Event) => void;
+  /**
+   * Size of the avatar.
+   *
+   * @default 'base'
+   */
+  size?: SizeKeyword;
+  /**
+   * An alternative text that describes the avatar for the reader
+   * to understand what it is about or identify the user the avatar belongs to.
+   */
+  alt?: string;
+}
 export type BackgroundColorKeyword = 'transparent' | ColorKeyword;
 export interface BackgroundProps {
   /**
@@ -57,6 +247,7 @@ export type ToneKeyword =
   | 'caution'
   | 'warning'
   | 'critical'
+  | 'accent'
   | 'custom';
 declare const privateIconArray: readonly [
   'adjust',
@@ -66,23 +257,23 @@ declare const privateIconArray: readonly [
   'alert-circle',
   'alert-diamond',
   'alert-location',
-  'alert-octagon-filled',
   'alert-octagon',
+  'alert-octagon-filled',
   'alert-triangle',
   'alert-triangle-filled',
   'app-extension',
   'apps',
   'archive',
+  'arrow-down',
   'arrow-down-circle',
   'arrow-down-right',
-  'arrow-down',
-  'arrow-left-circle',
   'arrow-left',
-  'arrow-right-circle',
+  'arrow-left-circle',
   'arrow-right',
+  'arrow-right-circle',
+  'arrow-up',
   'arrow-up-circle',
   'arrow-up-right',
-  'arrow-up',
   'arrows-in-horizontal',
   'arrows-out-horizontal',
   'attachment',
@@ -91,36 +282,39 @@ declare const privateIconArray: readonly [
   'bag',
   'bank',
   'barcode',
+  'battery-low',
   'bill',
   'blank',
   'blog',
-  'bolt-filled',
   'bolt',
-  'book-open',
+  'bolt-filled',
   'book',
+  'book-open',
   'bug',
   'bullet',
   'business-entity',
-  'button-press',
   'button',
+  'button-press',
   'calculator',
+  'calendar',
   'calendar-check',
   'calendar-compare',
   'calendar-list',
   'calendar-time',
-  'calendar',
-  'camera-flip',
   'camera',
+  'camera-flip',
   'caret-down',
-  'caret-up',
   'caret-left',
   'caret-right',
+  'caret-up',
+  'cart',
   'cart-abandoned',
   'cart-discount',
   'cart-down',
+  'cart-filled',
   'cart-sale',
+  'cart-send',
   'cart-up',
-  'cart',
   'cash-dollar',
   'cash-euro',
   'cash-pound',
@@ -132,8 +326,8 @@ declare const privateIconArray: readonly [
   'chart-cohort',
   'chart-donut',
   'chart-funnel',
-  'chart-histogram-first-last',
   'chart-histogram-first',
+  'chart-histogram-first-last',
   'chart-histogram-flat',
   'chart-histogram-full',
   'chart-histogram-growth',
@@ -144,36 +338,37 @@ declare const privateIconArray: readonly [
   'chart-popular',
   'chart-stacked',
   'chart-vertical',
+  'chat',
   'chat-new',
   'chat-referral',
-  'chat',
-  'check-circle-filled',
-  'check-circle',
   'check',
+  'check-circle',
+  'check-circle-filled',
   'checkbox',
-  'chevron-down-circle',
   'chevron-down',
-  'chevron-left-circle',
+  'chevron-down-circle',
   'chevron-left',
-  'chevron-right-circle',
+  'chevron-left-circle',
   'chevron-right',
-  'chevron-up-circle',
+  'chevron-right-circle',
   'chevron-up',
-  'circle-dashed',
+  'chevron-up-circle',
   'circle',
+  'circle-dashed',
+  'clipboard',
   'clipboard-check',
   'clipboard-checklist',
-  'clipboard',
-  'clock-revert',
   'clock',
-  'code-add',
+  'clock-list',
+  'clock-revert',
   'code',
+  'code-add',
+  'collection',
   'collection-featured',
   'collection-list',
   'collection-reference',
-  'collection',
-  'color-none',
   'color',
+  'color-none',
   'compass',
   'complete',
   'compose',
@@ -184,76 +379,81 @@ declare const privateIconArray: readonly [
   'corner-pill',
   'corner-round',
   'corner-square',
+  'credit-card',
   'credit-card-cancel',
   'credit-card-percent',
+  'credit-card-reader',
   'credit-card-reader-chip',
   'credit-card-reader-tap',
-  'credit-card-reader',
   'credit-card-secure',
   'credit-card-tap-chip',
-  'credit-card',
   'crop',
   'currency-convert',
+  'cursor',
   'cursor-banner',
   'cursor-option',
-  'cursor',
   'data-presentation',
   'data-table',
+  'database',
   'database-add',
   'database-connect',
-  'database',
   'delete',
   'delivered',
   'delivery',
   'desktop',
   'disabled',
+  'disabled-filled',
+  'discount',
   'discount-add',
+  'discount-automatic',
   'discount-code',
-  'discount',
+  'discount-remove',
   'dns-settings',
   'dock-floating',
   'dock-side',
+  'domain',
   'domain-landing-page',
   'domain-new',
   'domain-redirect',
-  'domain',
   'download',
   'drag-drop',
   'drag-handle',
+  'drawer',
   'duplicate',
   'edit',
+  'email',
   'email-follow-up',
   'email-newsletter',
-  'email',
   'empty',
   'enabled',
   'enter',
-  'envelope-soft-pack',
   'envelope',
+  'envelope-soft-pack',
   'eraser',
   'exchange',
   'exit',
   'export',
   'external',
   'eye-check-mark',
-  'eye-dropper-list',
   'eye-dropper',
+  'eye-dropper-list',
   'eye-first',
   'eyeglasses',
   'fav',
   'favicon',
-  'file-list',
   'file',
+  'file-list',
   'filter',
+  'filter-active',
   'flag',
   'flip-horizontal',
   'flip-vertical',
   'flower',
+  'folder',
   'folder-add',
   'folder-down',
   'folder-remove',
   'folder-up',
-  'folder',
   'food',
   'foreground',
   'forklift',
@@ -261,33 +461,35 @@ declare const privateIconArray: readonly [
   'games',
   'gauge',
   'geolocation',
-  'gift-card',
   'gift',
+  'gift-card',
   'git-branch',
   'git-commit',
   'git-repository',
+  'globe',
   'globe-asia',
   'globe-europe',
   'globe-lines',
   'globe-list',
-  'globe',
+  'graduation-hat',
   'grid',
+  'hashtag',
   'hashtag-decimal',
   'hashtag-list',
-  'hashtag',
   'heart',
-  'hide-filled',
   'hide',
+  'hide-filled',
   'home',
+  'home-filled',
   'icons',
   'identity-card',
+  'image',
   'image-add',
   'image-alt',
   'image-explore',
   'image-magic',
   'image-none',
   'image-with-text-overlay',
-  'image',
   'images',
   'import',
   'in-progress',
@@ -296,20 +498,25 @@ declare const privateIconArray: readonly [
   'incomplete',
   'info',
   'info-filled',
-  'inventory-updated',
+  'inheritance',
   'inventory',
+  'inventory-edit',
+  'inventory-list',
+  'inventory-transfer',
+  'inventory-updated',
   'iq',
   'key',
+  'keyboard',
   'keyboard-filled',
   'keyboard-hide',
-  'keyboard',
+  'keypad',
   'label-printer',
-  'language-translate',
   'language',
+  'language-translate',
   'layout-block',
+  'layout-buy-button',
   'layout-buy-button-horizontal',
   'layout-buy-button-vertical',
-  'layout-buy-button',
   'layout-column-1',
   'layout-columns-2',
   'layout-columns-3',
@@ -322,64 +529,74 @@ declare const privateIconArray: readonly [
   'layout-sidebar-left',
   'layout-sidebar-right',
   'lightbulb',
-  'link-list',
   'link',
+  'link-list',
   'list-bulleted',
+  'list-bulleted-filled',
   'list-numbered',
   'live',
-  'location-none',
+  'live-critical',
+  'live-none',
   'location',
+  'location-none',
   'lock',
   'map',
+  'markets',
   'markets-euro',
   'markets-rupee',
   'markets-yen',
-  'markets',
   'maximize',
-  'measurement-size-list',
   'measurement-size',
-  'measurement-volume-list',
+  'measurement-size-list',
   'measurement-volume',
-  'measurement-weight-list',
+  'measurement-volume-list',
   'measurement-weight',
+  'measurement-weight-list',
   'media-receiver',
   'megaphone',
   'mention',
+  'menu',
+  'menu-filled',
   'menu-horizontal',
   'menu-vertical',
-  'menu',
   'merge',
   'metafields',
+  'metaobject',
   'metaobject-list',
   'metaobject-reference',
-  'metaobject',
   'microphone',
   'minimize',
-  'minus-circle',
   'minus',
+  'minus-circle',
   'mobile',
-  'money-none',
   'money',
+  'money-none',
+  'money-split',
   'moon',
   'nature',
-  'note-add',
   'note',
+  'note-add',
   'notification',
+  'number-one',
+  'order',
   'order-batches',
   'order-draft',
+  'order-filled',
   'order-first',
   'order-fulfilled',
   'order-repeat',
   'order-unfulfilled',
-  'order',
   'orders-status',
   'organization',
   'outdent',
   'outgoing',
+  'package',
+  'package-cancel',
   'package-fulfilled',
   'package-on-hold',
+  'package-reassign',
   'package-returned',
-  'package',
+  'page',
   'page-add',
   'page-attachment',
   'page-clock',
@@ -390,7 +607,6 @@ declare const privateIconArray: readonly [
   'page-remove',
   'page-report',
   'page-up',
-  'page',
   'pagination-end',
   'pagination-start',
   'paint-brush-flat',
@@ -400,49 +616,56 @@ declare const privateIconArray: readonly [
   'passkey',
   'paste',
   'pause-circle',
-  'payment-capture',
   'payment',
+  'payment-capture',
+  'payout',
   'payout-dollar',
   'payout-euro',
   'payout-pound',
   'payout-rupee',
   'payout-yen',
-  'payout',
+  'person',
   'person-add',
   'person-exit',
+  'person-filled',
   'person-list',
   'person-lock',
   'person-remove',
   'person-segment',
-  'person',
   'personalized-text',
+  'phablet',
+  'phone',
   'phone-in',
   'phone-out',
-  'phone',
   'pin',
   'pin-remove',
   'plan',
-  'play-circle',
   'play',
+  'play-circle',
+  'plus',
   'plus-circle',
   'plus-circle-down',
+  'plus-circle-filled',
   'plus-circle-up',
-  'plus',
   'point-of-sale',
+  'point-of-sale-register',
   'price-list',
   'print',
+  'product',
   'product-add',
   'product-cost',
+  'product-filled',
   'product-list',
   'product-reference',
   'product-remove',
   'product-return',
   'product-unavailable',
-  'product',
-  'profile-filled',
   'profile',
-  'question-circle-filled',
+  'profile-filled',
   'question-circle',
+  'question-circle-filled',
+  'radio-control',
+  'receipt',
   'receipt-dollar',
   'receipt-euro',
   'receipt-folded',
@@ -451,7 +674,6 @@ declare const privateIconArray: readonly [
   'receipt-refund',
   'receipt-rupee',
   'receipt-yen',
-  'receipt',
   'receivables',
   'redo',
   'referral-code',
@@ -469,10 +691,12 @@ declare const privateIconArray: readonly [
   'sandbox',
   'save',
   'savings',
+  'scan-qr-code',
+  'search',
+  'search-add',
   'search-list',
   'search-recent',
   'search-resource',
-  'search',
   'select',
   'send',
   'settings',
@@ -482,6 +706,7 @@ declare const privateIconArray: readonly [
   'shield-pending',
   'shield-person',
   'shipping-label',
+  'shipping-label-cancel',
   'shopcodes',
   'slideshow',
   'smiley-happy',
@@ -490,74 +715,80 @@ declare const privateIconArray: readonly [
   'smiley-sad',
   'social-ad',
   'social-post',
+  'sort',
   'sort-ascending',
   'sort-descending',
-  'sort',
   'sound',
+  'split',
   'sports',
+  'star',
+  'star-circle',
   'star-filled',
   'star-half',
   'star-list',
-  'star',
-  'status-active',
   'status',
+  'status-active',
   'stop-circle',
+  'store',
   'store-import',
   'store-managed',
   'store-online',
-  'store',
   'sun',
-  'table-masonry',
   'table',
+  'table-masonry',
   'tablet',
   'target',
   'tax',
   'team',
+  'text',
   'text-align-center',
   'text-align-left',
   'text-align-right',
   'text-block',
   'text-bold',
   'text-color',
-  'text-font-list',
   'text-font',
+  'text-font-list',
   'text-grammar',
   'text-in-columns',
   'text-in-rows',
-  'text-indent-remove',
   'text-indent',
+  'text-indent-remove',
   'text-italic',
   'text-quote',
   'text-title',
   'text-underline',
   'text-with-image',
-  'text',
+  'theme',
   'theme-edit',
   'theme-store',
   'theme-template',
-  'theme',
   'three-d-environment',
   'thumbs-down',
   'thumbs-up',
   'tip-jar',
   'toggle-off',
   'toggle-on',
+  'transaction',
+  'transaction-fee-add',
   'transaction-fee-dollar',
   'transaction-fee-euro',
   'transaction-fee-pound',
   'transaction-fee-rupee',
   'transaction-fee-yen',
-  'transaction',
+  'transfer',
   'transfer-in',
   'transfer-internal',
   'transfer-out',
-  'transfer',
   'truck',
   'undo',
   'unknown-device',
   'unlock',
   'upload',
   'variant',
+  'variant-list',
+  'video',
+  'video-list',
   'view',
   'viewport-narrow',
   'viewport-short',
@@ -567,12 +798,12 @@ declare const privateIconArray: readonly [
   'wand',
   'watch',
   'wifi',
-  'work-list',
   'work',
+  'work-list',
   'wrench',
-  'x-circle-filled',
-  'x-circle',
   'x',
+  'x-circle',
+  'x-circle-filled',
 ];
 export type IconType = (typeof privateIconArray)[number];
 /**
@@ -585,6 +816,7 @@ export type MaybeAllValuesShorthandProperty<T extends string> =
   | `${T} ${T} ${T}`
   | `${T} ${T} ${T} ${T}`;
 export type MaybeTwoValuesShorthandProperty<T extends string> = T | `${T} ${T}`;
+export type MaybeResponsive<T> = T | `@container${string}`;
 /**
  * Prevents widening string literal types in a union to `string`.
  * @example
@@ -594,6 +826,13 @@ export type MaybeTwoValuesShorthandProperty<T extends string> = T | `${T} ${T}`;
  * //   ^? 'foo' | 'bar' | (string & {})
  */
 export type AnyString = string & {};
+/**
+ * This is purely to give the ability
+ * to have a space or not in the string literal types.
+ *
+ * For example in the `aspectRatio` property, `16/9` and `16 / 9` are both valid.
+ */
+export type optionalSpace = '' | ' ';
 interface BadgeProps$1 extends GlobalProps {
   /**
    * The content of the Badge.
@@ -628,22 +867,6 @@ interface BadgeProps$1 extends GlobalProps {
    */
   size?: SizeKeyword;
 }
-export interface ActionProps {
-  /**
-   * The text to use as the Action modal’s title. If not provided, the name of the extension will be used.
-   */
-  heading?: string;
-}
-export interface ActionSlots {
-  /**
-   * The primary action to perform, provided as a button or link type element.
-   */
-  primaryAction?: ComponentChildren;
-  /**
-   * The secondary actions to perform, provided as button or link type elements.
-   */
-  secondaryActions?: ComponentChildren;
-}
 interface BannerProps$1 extends GlobalProps, ActionSlots {
   /**
    * The title of the banner.
@@ -695,7 +918,7 @@ interface BannerProps$1 extends GlobalProps, ActionSlots {
    *
    * The `hidden` property will be `false` when this event fires.
    */
-  onDismiss?: () => void;
+  onDismiss?: (event: Event) => void;
   /**
    * Event handler when the banner has fully hidden.
    *
@@ -705,7 +928,7 @@ interface BannerProps$1 extends GlobalProps, ActionSlots {
    * 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.
    */
-  onAfterHide?: () => void;
+  onAfterHide?: (event: Event) => void;
   /**
    * Determines whether the banner is hidden.
    *
@@ -729,7 +952,7 @@ export interface DisplayProps {
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
    * @default 'auto'
    */
-  display?: 'auto' | 'none';
+  display?: MaybeResponsive<'auto' | 'none'>;
 }
 export interface AccessibilityRoleProps {
   /**
@@ -907,7 +1130,7 @@ export interface PaddingProps {
    *
    * @default 'none'
    */
-  padding?: MaybeAllValuesShorthandProperty<PaddingKeyword>;
+  padding?: MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>;
   /**
    * Adjust the block-padding.
    *
@@ -917,7 +1140,9 @@ export interface PaddingProps {
    *
    * @default '' - meaning no override
    */
-  paddingBlock?: MaybeTwoValuesShorthandProperty<PaddingKeyword> | '';
+  paddingBlock?: MaybeResponsive<
+    MaybeTwoValuesShorthandProperty<PaddingKeyword> | ''
+  >;
   /**
    * Adjust the block-start padding.
    *
@@ -925,7 +1150,7 @@ export interface PaddingProps {
    *
    * @default '' - meaning no override
    */
-  paddingBlockStart?: PaddingKeyword | '';
+  paddingBlockStart?: MaybeResponsive<PaddingKeyword | ''>;
   /**
    * Adjust the block-end padding.
    *
@@ -933,7 +1158,7 @@ export interface PaddingProps {
    *
    * @default '' - meaning no override
    */
-  paddingBlockEnd?: PaddingKeyword | '';
+  paddingBlockEnd?: MaybeResponsive<PaddingKeyword | ''>;
   /**
    * Adjust the inline padding.
    *
@@ -943,7 +1168,9 @@ export interface PaddingProps {
    *
    * @default '' - meaning no override
    */
-  paddingInline?: MaybeTwoValuesShorthandProperty<PaddingKeyword> | '';
+  paddingInline?: MaybeResponsive<
+    MaybeTwoValuesShorthandProperty<PaddingKeyword> | ''
+  >;
   /**
    * Adjust the inline-start padding.
    *
@@ -951,7 +1178,7 @@ export interface PaddingProps {
    *
    * @default '' - meaning no override
    */
-  paddingInlineStart?: PaddingKeyword | '';
+  paddingInlineStart?: MaybeResponsive<PaddingKeyword | ''>;
   /**
    * Adjust the inline-end padding.
    *
@@ -959,7 +1186,7 @@ export interface PaddingProps {
    *
    * @default '' - meaning no override
    */
-  paddingInlineEnd?: PaddingKeyword | '';
+  paddingInlineEnd?: MaybeResponsive<PaddingKeyword | ''>;
 }
 export type SizeUnits = `${number}px` | `${number}%` | `0`;
 export type SizeUnitsOrAuto = SizeUnits | 'auto';
@@ -972,7 +1199,7 @@ export interface SizingProps {
    *
    * @default 'auto'
    */
-  blockSize?: SizeUnitsOrAuto;
+  blockSize?: MaybeResponsive<SizeUnitsOrAuto>;
   /**
    * Adjust the minimum block size.
    *
@@ -980,7 +1207,7 @@ export interface SizingProps {
    *
    * @default '0'
    */
-  minBlockSize?: SizeUnits;
+  minBlockSize?: MaybeResponsive<SizeUnits>;
   /**
    * Adjust the maximum block size.
    *
@@ -988,7 +1215,7 @@ export interface SizingProps {
    *
    * @default 'none'
    */
-  maxBlockSize?: SizeUnitsOrNone;
+  maxBlockSize?: MaybeResponsive<SizeUnitsOrNone>;
   /**
    * Adjust the inline size.
    *
@@ -996,7 +1223,7 @@ export interface SizingProps {
    *
    * @default 'auto'
    */
-  inlineSize?: SizeUnitsOrAuto;
+  inlineSize?: MaybeResponsive<SizeUnitsOrAuto>;
   /**
    * Adjust the minimum inline size.
    *
@@ -1004,7 +1231,7 @@ export interface SizingProps {
    *
    * @default '0'
    */
-  minInlineSize?: SizeUnits;
+  minInlineSize?: MaybeResponsive<SizeUnits>;
   /**
    * Adjust the maximum inline size.
    *
@@ -1012,7 +1239,7 @@ export interface SizingProps {
    *
    * @default 'none'
    */
-  maxInlineSize?: SizeUnitsOrNone;
+  maxInlineSize?: MaybeResponsive<SizeUnitsOrNone>;
 }
 export type BorderStyleKeyword =
   | 'none'
@@ -1127,8 +1354,7 @@ export interface OverflowProps {
   overflow?: 'hidden' | 'visible';
 }
 export interface BaseBoxProps
-  extends GlobalProps,
-    AccessibilityVisibilityProps,
+  extends AccessibilityVisibilityProps,
     BackgroundProps,
     DisplayProps,
     SizingProps,
@@ -1150,20 +1376,10 @@ export interface BaseBoxProps
 export interface BaseBoxPropsWithRole
   extends BaseBoxProps,
     AccessibilityRoleProps {}
-interface BoxProps$1 extends BaseBoxPropsWithRole {}
-export interface FocusEventProps {
-  /**
-   * Callback when the element loses focus.
-   */
-  onBlur?: () => void;
-  /**
-   * Callback when the element receives focus.
-   */
-  onFocus?: () => void;
-}
+interface BoxProps$1 extends BaseBoxPropsWithRole, GlobalProps {}
 export interface ButtonBehaviorProps extends InteractionProps, FocusEventProps {
   /**
-   * The behavior of the button.
+   * The behavior of the Button.
    *
    * - `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.
    * - `button`: Used to indicate the component acts as a button, meaning it has no default action.
@@ -1175,12 +1391,14 @@ export interface ButtonBehaviorProps extends InteractionProps, FocusEventProps {
    */
   type?: 'submit' | 'button' | 'reset';
   /**
-   * Callback when the button is activated.
+   * Callback when the Button is activated.
    * This will be called before the action indicated by `type`.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
    */
-  onClick?: () => void;
+  onClick?: (event: Event) => void;
   /**
-   * Disables the button, meaning it cannot be clicked or receive focus.
+   * Disables the Button meaning it cannot be clicked or receive focus.
    *
    * @default false
    */
@@ -1188,7 +1406,7 @@ export interface ButtonBehaviorProps extends InteractionProps, FocusEventProps {
   /**
    * Replaces content with a loading indicator while a background action is being performed.
    *
-   * This also disables the button.
+   * This also disables the Button.
    *
    * @default false
    */
@@ -1218,15 +1436,17 @@ export interface LinkBehaviorProps extends InteractionProps, FocusEventProps {
   target?: 'auto' | '_blank' | '_self' | '_parent' | '_top' | AnyString;
   /**
    * Causes the browser to treat the linked URL as a download with the string being the file name.
-   * Download only works for same-origin URLs, or the blob: and data: schemes.
+   * Download only works for same-origin URLs or the `blob:` and `data:` schemes.
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download
    */
   download?: string;
   /**
    * Callback when the link is activated.
    * This will be called before navigating to the location specified by `href`.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
    */
-  onClick?: () => void;
+  onClick?: (event: Event) => void;
 }
 export interface InteractionProps {
   /**
@@ -1253,6 +1473,10 @@ export interface InteractionProps {
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command
    */
   command?: '--auto' | '--show' | '--hide' | '--toggle' | '--copy';
+  /**
+   * ID of a component that should respond to interest (e.g. hover and focus) on this component.
+   */
+  interestFor?: string;
 }
 export interface BaseClickableProps
   extends ButtonBehaviorProps,
@@ -1261,7 +1485,7 @@ interface ButtonProps$1 extends GlobalProps, BaseClickableProps {
   /**
    * A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.
    *
-   * Use this when using only an icon or the button text is not enough context
+   * Use this when using only an icon or the Button text is not enough context
    * for users using assistive technologies.
    */
   accessibilityLabel?: string;
@@ -1270,13 +1494,13 @@ interface ButtonProps$1 extends GlobalProps, BaseClickableProps {
    */
   children?: ComponentChildren;
   /**
-   * The type of icon to be displayed in the button.
+   * The type of icon to be displayed in the Button.
    *
    * @default ''
    */
   icon?: IconType | AnyString;
   /**
-   * The displayed inline width of the button.
+   * The displayed inline width of the Button.
    *
    * - `auto`: the size of the button depends on the surface and context.
    * - `fill`: the button will takes up 100% of the available inline size.
@@ -1292,7 +1516,7 @@ interface ButtonProps$1 extends GlobalProps, BaseClickableProps {
    */
   variant?: 'auto' | 'primary' | 'secondary' | 'tertiary';
   /**
-   * Sets the tone of the Button, based on the intention of the information being conveyed.
+   * Sets the tone of the Button based on the intention of the information being conveyed.
    *
    * @default 'auto'
    */
@@ -1304,6 +1528,23 @@ interface ButtonProps$1 extends GlobalProps, BaseClickableProps {
    */
   lang?: string;
 }
+interface ButtonGroupProps$1 extends GlobalProps, ActionSlots {
+  /**
+   * The content of the ButtonGroup.
+   */
+  children?: ComponentChildren;
+  /**
+   * The gap between elements.
+   * @default 'base'
+   */
+  gap?: 'base' | 'none';
+  /**
+   * Label for the button group that describes the content of the group for screen reader users to understand what's included.
+   *
+   * @implementation Used as a hidden heading or an aria-label on the wrapping element.
+   */
+  accessibilityLabel?: string;
+}
 export interface BaseInputProps {
   /**
    * An identifier for the field that is unique within the nearest containing form.
@@ -1319,12 +1560,16 @@ export interface BaseInputProps {
 export interface InputProps extends BaseInputProps {
   /**
    * 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
    */
-  onChange?: (newValue: string) => void;
+  onChange?: (event: Event) => void;
   /**
    * Callback when the user makes any changes in the field.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
    */
-  onInput?: (newValue: string) => void;
+  onInput?: (event: Event) => void;
   /**
    * The current value for the field. If omitted, the field will be empty.
    */
@@ -1338,13 +1583,17 @@ export interface InputProps extends BaseInputProps {
 }
 export interface MultipleInputProps extends BaseInputProps {
   /**
-   * Callback when the user has selected file(s).
+   * Callback when the user has selected option(s).
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
    */
-  onChange?: (newValue: string[]) => void;
+  onChange?: (event: Event) => void;
   /**
-   * Callback when the user has selected file(s).
+   * Callback when the user has selected option(s).
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
    */
-  onInput?: (newValue: string[]) => void;
+  onInput?: (event: Event) => void;
   /**
    * An array of the `value`s of the selected options.
    *
@@ -1352,6 +1601,35 @@ export interface MultipleInputProps extends BaseInputProps {
    */
   values?: string[];
 }
+export interface FileInputProps extends BaseInputProps {
+  /**
+   * Callback when the user has **finished selecting** a file or files.
+   */
+  onChange?: (event: Event) => void;
+  /**
+   * Callback when the user makes any changes in the file selection.
+   */
+  onInput?: (event: Event) => void;
+  /**
+   * A string that represents the path to the selected file(s). If no file is selected yet, the value is an empty string ("").
+   * When the user selected multiple files, the value represents the first file in the list of files they selected.
+   * The value is always the file's name prefixed with "C:\fakepath\", which isn't the real path of the file.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file#value
+   *
+   * @default ''
+   */
+  value?: string;
+  /**
+   * An array of File objects representing the files currently selected by the user.
+   *
+   * This property is read-only and cannot be directly modified.
+   * To clear the selected files, set the `value` prop to an empty string or null.
+   *
+   * @default []
+   */
+  files?: ReadonlyArray<File>;
+}
 export interface FieldErrorProps {
   /**
    * Indicate an error to the user. The field will be given a specific stylistic treatment
@@ -1560,12 +1838,16 @@ export interface BaseCheckableProps
   name?: string;
   /**
    * A callback that is run whenever the control is changed.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
    */
-  onChange?: (checked: boolean) => void;
+  onChange?: (event: Event) => void;
   /**
    * A callback that is run whenever the control is changed.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
    */
-  onInput?: (checked: boolean) => void;
+  onInput?: (event: Event) => void;
 }
 interface CheckboxProps$1
   extends GlobalProps,
@@ -1605,11 +1887,42 @@ interface CheckboxProps$1
    */
   required?: boolean;
 }
+export interface ChipProps$1 extends GlobalProps {
+  /**
+   * The content of the chip.
+   */
+  children?: ComponentChildren;
+  /**
+   * The graphic to display inside of the chip.
+   *
+   * @implementation Only `s-icon` is supported.
+   */
+  graphic?: ComponentChildren;
+  /**
+   * A label that describes the purpose or contents of the Chip. It will be read to users using assistive technologies such as screen readers.
+   */
+  accessibilityLabel?: string;
+  /**
+   * Modify the color to be more or less intense.
+   *
+   * @default 'base'
+   */
+  color?: ColorKeyword;
+}
+interface ChipProps$2 extends ChipProps$1, GlobalProps {}
 interface ChoiceProps$1 extends GlobalProps, BaseOptionProps {
   /**
    * Content to use as the choice label.
+   *
+   * @implementation (StringChildren) The label is produced by extracting and
+   * concatenating the text nodes from the provided content; any markup or
+   * element structure is ignored.
+   *
+   * @implementation (ComponentChildren) Behaves as a slot: any elements passed
+   * are rendered as the label content (subject to surface constraints); there
+   * is no coercion to a string.
    */
-  label?: string;
+  children?: ComponentChildren | StringChildren;
   /**
    * Additional text to provide context or guidance for the input.
    *
@@ -1618,13 +1931,23 @@ interface ChoiceProps$1 extends GlobalProps, BaseOptionProps {
    *
    * @implementation this content should be linked to the input with an `aria-describedby` attribute.
    */
-  details?: string;
+  details?: ComponentChildren;
   /**
    * Set to `true` to associate a choice with the error passed to `ChoiceList`
    *
    * @default false
    */
   error?: boolean;
+  /**
+   * Secondary content for a choice.
+   */
+  secondaryContent?: ComponentChildren;
+  /**
+   * Content to display when the option is selected.
+   *
+   * This can be used to provide additional information or options related to the choice.
+   */
+  selectedContent?: ComponentChildren;
 }
 interface ChoiceListProps$1
   extends GlobalProps,
@@ -1651,8 +1974,26 @@ interface ChoiceListProps$1
    * @default false
    */
   disabled?: MultipleInputProps['disabled'];
+  /**
+   * The variant of the choice grid.
+   *
+   * - `auto`: The variant is determined by the context.
+   * - `list`: The choices are displayed in a list.
+   * - `inline`: The choices are displayed on the inline axis.
+   * - `block`: The choices are displayed on the block axis.
+   * - `grid`: The choices are displayed in a grid.
+   *
+   * @implementation The `block`, `inline` and `grid` variants are more suitable for button looking choices, but it's at the
+   * discretion of each surface.
+   *
+   * @default 'auto'
+   */
+  variant?: 'auto' | 'list' | 'inline' | 'block' | 'grid';
 }
-interface ClickableProps$1 extends BaseBoxProps, BaseClickableProps {
+interface ClickableProps$1
+  extends GlobalProps,
+    BaseBoxProps,
+    BaseClickableProps {
   /**
    * Disables the clickable, and indicates to assistive technology that the loading is in progress.
    *
@@ -1680,158 +2021,95 @@ interface ClickableProps$1 extends BaseBoxProps, BaseClickableProps {
    */
   lang?: string;
 }
-interface DatePickerProps$1 extends GlobalProps, InputProps, FocusEventProps {
+interface ClickableChipProps$1 extends ChipProps$1, GlobalProps {
   /**
-   * Default month to display in `YYYY-MM` format.
-   *
-   * This value is used until `view` is set, either directly or as a result of user interaction.
-   *
-   * Defaults to the current month in the user's locale.
+   * Callback when the chip is clicked.
    */
-  defaultView?: string;
+  onClick?: (event: Event) => void;
   /**
-   * Displayed month in `YYYY-MM` format.
-   *
-   * `onViewChange` is called when this value changes.
+   * The URL to link to.
    *
-   * Defaults to `defaultView`.
+   * - If set, it will navigate to the location specified by `href` after executing the `click` event.
    */
-  view?: string;
+  href?: string;
   /**
-   * Called whenever the month to display changes.
+   * Whether the chip is removable.
    *
-   * @param view The new month to display in `YYYY-MM` format.
+   * @default false
    */
-  onViewChange?: (view: string) => void;
+  removable?: boolean;
   /**
-   * The type of selection the date picker allows.
-   *
-   * - `single` allows selecting a single date.
-   * - `multiple` allows selecting multiple non-contiguous dates.
-   * - `range` allows selecting a single range of dates.
-   *
-   * @default "single"
+   * Callback when the chip is removed.
    */
-  type?: 'single' | 'multiple' | 'range';
+  onRemove?: (event: Event) => void;
   /**
-   * Dates that can be selected.
+   * Determines whether the chip is hidden.
    *
-   * A comma-separated list of dates, date ranges. Whitespace is allowed after commas.
-   *
-   * The default `''` allows all dates.
-   *
-   * - Dates in `YYYY-MM-DD` format allow a single date.
-   * - Dates in `YYYY-MM` format allow a whole month.
-   * - Dates in `YYYY` format allow a whole year.
-   * - Ranges are expressed as `start--end`.
-   *     - Ranges are inclusive.
-   *     - If either `start` or `end` is omitted, the range is unbounded in that direction.
-   *     - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.
-   *       So `2024--` is equivalent to `2024-01-01--`.
-   *     - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.
-   *       So `--2024` is equivalent to `--2024-12-31`.
-   *     - Whitespace is allowed either side of `--`.
+   * If this property is being set on each framework render (as in 'controlled' usage),
+   * and the chip is `removable`,
+   * ensure you update app state for this property when the `remove` event fires.
    *
-   * @default ""
+   * If the chip is not `removable`, it can still be hidden by setting this property.
    *
-   * @example
-   * `2024-02--2025` // allow any date from February 2024 to the end of 2025
-   * `2024-02--` // allow any date from February 2024 to the end of the month
-   * `2024-05-09, 2024-05-11` // allow only the 9th and 11th of May 2024
+   * @default false
    */
-  allow?: string;
+  hidden?: boolean;
   /**
-   * Dates that cannot be selected. These subtract from `allowDates`.
-   *
-   * A comma-separated list of dates, date ranges. Whitespace is allowed after commas.
-   *
-   * The default `''` has no effect on `allowDates`.
-   *
-   * - Dates in `YYYY-MM-DD` format disallow a single date.
-   * - Dates in `YYYY-MM` format disallow a whole month.
-   * - Dates in `YYYY` format disallow a whole year.
-   * - Ranges are expressed as `start--end`.
-   *     - Ranges are inclusive.
-   *     - If either `start` or `end` is omitted, the range is unbounded in that direction.
-   *     - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.
-   *       So `2024--` is equivalent to `2024-01-01--`.
-   *     - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.
-   *       So `--2024` is equivalent to `--2024-12-31`.
-   *     - Whitespace is allowed either side of `--`.
+   * Event handler when the chip has fully hidden.
    *
-   * @default ""
+   * The `hidden` property will be `true` when this event fires.
    *
-   * @example
-   * `--2024-02` // disallow any date before February 2024
-   * `2024-05-09, 2024-05-11` // disallow the 9th and 11th of May 2024
+   * @implementation If implementations animate the hiding of the chip,
+   * this event must fire after the chip has fully hidden.
+   * We can add an `onHide` event in future if we want to provide a hook for the start of the animation.
    */
-  disallow?: string;
+  onAfterHide?: (event: Event) => void;
   /**
-   * Days of the week that can be selected. These intersect with the result of `allowDates` and `disallowDates`.
-   *
-   * A comma-separated list of dates, date ranges. Whitespace is allowed after commas.
-   *
-   * The default `''` has no effect on the result of `allowDates` and `disallowDates`.
-   *
-   * Days are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.
-   *
-   * @default ""
+   * Disables the chip, disallowing any interaction.
    *
-   * @example
-   * 'saturday, sunday' // allow only weekends within the result of `allowDates` and `disallowDates`.
+   * @default false
    */
-  allowDays?: string;
+  disabled?: boolean;
+}
+interface ColorPickerProps$1 extends GlobalProps, InputProps {
   /**
-   * Days of the week that cannot be selected. This subtracts from `allowDays`, and intersects with the result of `allowDates` and `disallowDates`.
-   *
-   * A comma-separated list of dates, date ranges. Whitespace is allowed after commas.
+   * Allow user to select an alpha value.
    *
-   * The default `''` has no effect on `allowDays`.
-   *
-   * Days are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.
-   *
-   * @default ""
-   *
-   * @example
-   * 'saturday, sunday' // disallow weekends within the result of `allowDates` and `disallowDates`.
+   * @default false
    */
-  disallowDays?: string;
+  alpha?: boolean;
   /**
-   * Default selected value.
-   *
-   * The default means no date is selected.
-   *
-   * If the provided value is invalid, no date is selected.
+   * This callback will emit the value in hex.
    *
-   * - If `type="single"`, this is a date in `YYYY-MM-DD` format.
-   * - If `type="multiple"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.
-   * - If `type="range"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.
-   *
-   * @default ""
+   * If the `alpha` prop is `true`, `onChange` will emit an 8-value hex (#RRGGBBAA).
+   * If the `alpha` prop is `false`, `onChange` will emit a 6-value hex (#RRGGBB).
    */
-  defaultValue?: string;
+  onChange?: InputProps['onChange'];
   /**
-   * Current selected value.
+   * This callback will emit the value in hex.
    *
-   * The default means no date is selected.
-   *
-   * If the provided value is invalid, no date is selected.
-   *
-   * Otherwise:
+   * If the `alpha` prop is `true`, `onInput` will emit an 8-value hex (#RRGGBBAA).
+   * If the `alpha` prop is `false`, `onInput` will emit a 6-value hex (#RRGGBB).
+   */
+  onInput?: InputProps['onChange'];
+  /**
+   * The currently selected color.
    *
-   * - If `type="single"`, this is a date in `YYYY-MM-DD` format.
-   * - If `type="multiple"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.
-   * - If `type="range"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.
+   * Supported formats include:
+   * - HSL @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
+   * - HSLA @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla
+   * - RGB @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
+   * - RGBA @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
+   * - Hex (3-value, 4-value, 6-value, 8-value) @see https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color
    *
-   * Events:
+   * For RGB and RGBA, both the legacy syntax (comma-separated) and modern syntax (space-separate) are supported.
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
    *
-   * - `onInput` - Invoked when any date is selected. Will fire before `onChange`.
-   * - `onChange` - Invoked when the `value` is changed. For `type="single"` and `type="multiple"`, this is the same as `onInput`.
-   *      For `type="range"`, this is only called when the range is completed by selecting the end date of the range.
+   * If the value is invalid, the component will return an empty string ''.
    *
-   * @default ""
+   * Note that the `onChange` handler will emit the value in hex.
    */
-  value?: string;
+  value?: InputProps['value'];
 }
 export interface AutocompleteProps<
   AutocompleteField extends AnyAutocompleteField,
@@ -1978,35 +2256,347 @@ export type TextAutocompleteField = ExtractStrict<
   | 'cc-family-name'
   | 'cc-type'
 >;
+interface ColorFieldProps$1
+  extends GlobalProps,
+    BaseTextFieldProps,
+    Pick<ColorPickerProps$1, 'alpha' | 'value' | 'defaultValue'> {
+  autocomplete?: Extract<
+    AutocompleteProps<never>['autocomplete'],
+    'on' | 'off'
+  >;
+}
+interface DatePickerProps$1 extends GlobalProps, InputProps, FocusEventProps {
+  /**
+   * Default month to display in `YYYY-MM` format.
+   *
+   * This value is used until `view` is set, either directly or as a result of user interaction.
+   *
+   * Defaults to the current month in the user's locale.
+   */
+  defaultView?: string;
+  /**
+   * Displayed month in `YYYY-MM` format.
+   *
+   * `onViewChange` is called when this value changes.
+   *
+   * Defaults to `defaultView`.
+   */
+  view?: string;
+  /**
+   * Called whenever the month to display changes.
+   *
+   * @param view The new month to display in `YYYY-MM` format.
+   */
+  onViewChange?: (view: string) => void;
+  /**
+   * The type of selection the date picker allows.
+   *
+   * - `single` allows selecting a single date.
+   * - `multiple` allows selecting multiple non-contiguous dates.
+   * - `range` allows selecting a single range of dates.
+   *
+   * @default "single"
+   */
+  type?: 'single' | 'multiple' | 'range';
+  /**
+   * Dates that can be selected.
+   *
+   * A comma-separated list of dates, date ranges. Whitespace is allowed after commas.
+   *
+   * The default `''` allows all dates.
+   *
+   * - Dates in `YYYY-MM-DD` format allow a single date.
+   * - Dates in `YYYY-MM` format allow a whole month.
+   * - Dates in `YYYY` format allow a whole year.
+   * - Ranges are expressed as `start--end`.
+   *     - Ranges are inclusive.
+   *     - If either `start` or `end` is omitted, the range is unbounded in that direction.
+   *     - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.
+   *       So `2024--` is equivalent to `2024-01-01--`.
+   *     - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.
+   *       So `--2024` is equivalent to `--2024-12-31`.
+   *     - Whitespace is allowed either side of `--`.
+   *
+   * @default ""
+   *
+   * @example
+   * `2024-02--2025` // allow any date from February 2024 to the end of 2025
+   * `2024-02--` // allow any date from February 2024 to the end of the month
+   * `2024-05-09, 2024-05-11` // allow only the 9th and 11th of May 2024
+   */
+  allow?: string;
+  /**
+   * Dates that cannot be selected. These subtract from `allow`.
+   *
+   * A comma-separated list of dates, date ranges. Whitespace is allowed after commas.
+   *
+   * The default `''` has no effect on `allow`.
+   *
+   * - Dates in `YYYY-MM-DD` format disallow a single date.
+   * - Dates in `YYYY-MM` format disallow a whole month.
+   * - Dates in `YYYY` format disallow a whole year.
+   * - Ranges are expressed as `start--end`.
+   *     - Ranges are inclusive.
+   *     - If either `start` or `end` is omitted, the range is unbounded in that direction.
+   *     - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.
+   *       So `2024--` is equivalent to `2024-01-01--`.
+   *     - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.
+   *       So `--2024` is equivalent to `--2024-12-31`.
+   *     - Whitespace is allowed either side of `--`.
+   *
+   * @default ""
+   *
+   * @example
+   * `--2024-02` // disallow any date before February 2024
+   * `2024-05-09, 2024-05-11` // disallow the 9th and 11th of May 2024
+   */
+  disallow?: string;
+  /**
+   * Days of the week that can be selected. These intersect with the result of `allow` and `disallow`.
+   *
+   * A comma-separated list of days. Whitespace is allowed after commas.
+   *
+   * The default `''` has no effect on the result of `allow` and `disallow`.
+   *
+   * Days are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.
+   *
+   * @default ""
+   *
+   * @example
+   * 'saturday, sunday' // allow only weekends within the result of `allow` and `disallow`.
+   */
+  allowDays?: string;
+  /**
+   * Days of the week that cannot be selected. This subtracts from `allowDays`, and intersects with the result of `allow` and `disallow`.
+   *
+   * A comma-separated list of days. Whitespace is allowed after commas.
+   *
+   * The default `''` has no effect on `allowDays`.
+   *
+   * Days are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.
+   *
+   * @default ""
+   *
+   * @example
+   * 'saturday, sunday' // disallow weekends within the result of `allow` and `disallow`.
+   */
+  disallowDays?: string;
+  /**
+   * Default selected value.
+   *
+   * The default means no date is selected.
+   *
+   * If the provided value is invalid, no date is selected.
+   *
+   * - If `type="single"`, this is a date in `YYYY-MM-DD` format.
+   * - If `type="multiple"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.
+   * - If `type="range"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.
+   *
+   * @default ""
+   */
+  defaultValue?: string;
+  /**
+   * Current selected value.
+   *
+   * The default means no date is selected.
+   *
+   * If the provided value is invalid, no date is selected.
+   *
+   * Otherwise:
+   *
+   * - If `type="single"`, this is a date in `YYYY-MM-DD` format.
+   * - If `type="multiple"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.
+   * - If `type="range"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.
+   *
+   * @default ""
+   */
+  value?: string;
+  /**
+   * Callback when any date is selected.
+   *
+   * - If `type="single"`, fires when a date is selected and happens before `onChange`.
+   * - If `type="multiple"`, fires when a date is selected before `onChange`.
+   * - If `type="range"`, fires when a first date is selected (with the partial value formatted as `YYYY-MM-DD--`), and when the last date is selected before `onChange`.
+   */
+  onInput?: (event: Event) => void;
+  /**
+   * Callback when the value is committed.
+   *
+   * - If `type="single"`, fires when a date is selected after `onInput`.
+   * - If `type="multiple"`, fires when a date is selected after `onInput`.
+   * - If `type="range"`, fires when a range is completed by selecting the end date after `onInput`.
+   */
+  onChange?: (event: Event) => void;
+}
+interface DateFieldProps$1
+  extends GlobalProps,
+    BaseTextFieldProps,
+    Pick<
+      DatePickerProps$1,
+      | 'view'
+      | 'defaultView'
+      | 'value'
+      | 'defaultValue'
+      | 'allow'
+      | 'disallow'
+      | 'allowDays'
+      | 'disallowDays'
+      | 'onViewChange'
+    >,
+    AutocompleteProps<DateAutocompleteField> {
+  /**
+   * Callback when the user makes any changes in the field.
+   * Also triggered when a date is selected using the date picker popup before `onChange`.
+   */
+  onInput?: (event: Event) => void;
+  /**
+   * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
+   * Also triggered when a date is selected using the date picker popup after `onInput`.
+   */
+  onChange?: (event: Event) => void;
+  /**
+   * Callback when the field has an invalid date.
+   * This callback will be called, if the date typed is invalid or disabled.
+   *
+   * Dates that don’t exist or have formatting errors are considered invalid. Some examples of invalid dates are:
+   * - 2021-02-31: February doesn’t have 31 days
+   * - 2021-02-00: The day can’t be 00
+   *
+   * Disallowed dates are considered invalid.
+   *
+   * It’s important to note that this callback will be called only when the user **finishes editing** the date,
+   * and it’s called right after the `onChange` callback.
+   * The field is **not** validated on every change to the input. Once the buyer has signalled that
+   * they have finished editing the field (typically, by blurring the field), the field gets validated and the callback is run if the value is invalid.
+   */
+  onInvalid?: (event: Event) => void;
+}
+export type DateAutocompleteField = ExtractStrict<
+  AnyAutocompleteField,
+  | 'bday'
+  | 'bday-day'
+  | 'bday-month'
+  | 'bday-year'
+  | 'cc-expiry'
+  | 'cc-expiry-month'
+  | 'cc-expiry-year'
+>;
 interface DividerProps$1 extends GlobalProps {
   /**
-   * Specify the direction of the divider.
+   * Specify the direction of the divider. This uses [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
+   *
+   * @default 'inline'
+   */
+  direction?: 'inline' | 'block';
+  /**
+   * Modify the color to be more or less intense.
+   *
+   * @default 'base'
+   */
+  color?: ColorKeyword;
+}
+interface DropZoneProps$1 extends GlobalProps, FileInputProps, BasicFieldProps {
+  /**
+   * A string representing the types of files that are accepted by the drop zone.
+   * This string is a comma-separated list of unique file type specifiers which can be one of the following:
+   * - A file extension starting with a period (".") character (e.g. .jpg, .pdf, .doc)
+   * - A valid MIME type string with no extensions
+   *
+   * If omitted, all file types are accepted.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
+   * @default ''
+   */
+  accept?: string;
+  /**
+   * A label that describes the purpose or contents of the item. When set,
+   * it will be announced to buyers using assistive technologies and will
+   * provide them with more context.
+   */
+  accessibilityLabel?: string;
+  /**
+   * Whether multiple files can be selected or dropped at once.
+   *
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * Callback fired when rejected files are dropped.
+   * Files are rejected based on the `accept` prop and are not added to `files`.
+   */
+  onDropRejected?: (event: Event) => void;
+}
+interface EmailFieldProps$1
+  extends GlobalProps,
+    BaseTextFieldProps,
+    MinMaxLengthProps,
+    AutocompleteProps<EmailAutocompleteField> {}
+export type EmailAutocompleteField = ExtractStrict<
+  AnyAutocompleteField,
+  'email' | `${AutocompleteAddressGroup} email`
+>;
+interface FormProps$1 extends GlobalProps {
+  /**
+   * The content of the form.
+   */
+  children?: ComponentChildren;
+  /**
+   * Whether the form is able to be submitted.
+   *
+   * When set to `true`, this will also disable the implicit submit behavior of the form.
+   *
+   * @default false
+   *
+   * @deprecated Prevent default within the onSubmit callback using a local state instead. Deprecated in v1.6.0
+   * @private
+   */
+  disabled?: boolean;
+  /**
+   * A callback that is run when the form is submitted.
    *
-   * An 'inline' divider separates blocks of content.
-   * In a left-to-right or right-to-left writing mode, this would typically be a horizontal line.
-   *
-   * A 'block' divider separates items within the current line of content.
-   * In a left-to-right or right-to-left writing mode, this would typically be a vertical line.
+   * Use `event.waitUntil` to signal how long it takes to save the data,
+   * and whether it was successful or not.
+   */
+  onSubmit?: (event: ExtendableEvent) => void;
+  /**
+   * A callback that is run when the form is reset.
+   */
+  onReset?: (event: Event) => void;
+}
+interface FunctionSettingsProps$1 extends GlobalProps, FormProps$1 {
+  /**
+   * An optional callback function that will be run by the admin when the user
+   * commits their changes in the admin-rendered part of the function settings
+   * experience. If `event.waitUntil` is called with a promise, the admin will wait for the
+   * promise to resolve before committing any changes to Shopify’s servers. If
+   * the promise rejects, the admin will abort the changes and display an error,
+   * using the `message` property of the error you reject with.
+   */
+  onSubmit?: (event: ExtendableEvent) => void;
+  /**
+   * An optional callback function that will be run by the admin when
+   * committing the changes to Shopify’s servers fails. The error event you receive includes
+   * an `error` property that is an `AggregateError` object. This object includes
+   * an array of errors that were caused by data your extension provided.
+   * Network errors and user errors that are out of your control will not be reported here.
    *
-   * @default 'inline'
+   * In the `onError` callback, you should update your extension’s UI to
+   * highlight the fields that caused the errors, and display the error messages
+   * to the user.
    */
-  direction?: 'inline' | 'block';
+  onError?: (event: AggregateErrorEvent<FunctionSettingsError>) => void;
+}
+export interface FunctionSettingsError extends Error {
   /**
-   * Modify the color to be more or less intense.
+   * A unique identifier describing the “class” of error. These will match
+   * the GraphQL error codes as closely as possible. For example the enums
+   * returned by the `metafieldsSet` mutation
    *
-   * @default 'base'
+   * @see https://shopify.dev/docs/api/admin-graphql/latest/enums/MetafieldsSetUserErrorCode
    */
-  color?: ColorKeyword;
+  code: string;
+  name: 'FunctionSettingsError';
 }
-interface EmailFieldProps$1
-  extends GlobalProps,
-    BaseTextFieldProps,
-    MinMaxLengthProps,
-    AutocompleteProps<EmailAutocompleteField> {}
-export type EmailAutocompleteField = ExtractStrict<
-  AnyAutocompleteField,
-  'email' | `${AutocompleteAddressGroup} email`
->;
 export type SpacingKeyword = SizeKeyword | 'none';
 export interface GapProps {
   /**
@@ -2017,7 +2607,7 @@ export interface GapProps {
    *
    * @default 'none'
    */
-  gap?: MaybeTwoValuesShorthandProperty<SpacingKeyword>;
+  gap?: MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>;
   /**
    * Adjust spacing between elements in the block axis.
    *
@@ -2025,7 +2615,7 @@ export interface GapProps {
    *
    * @default '' - meaning no override
    */
-  rowGap?: SpacingKeyword | '';
+  rowGap?: MaybeResponsive<SpacingKeyword | ''>;
   /**
    * Adjust spacing between elements in the inline axis.
    *
@@ -2033,7 +2623,7 @@ export interface GapProps {
    *
    * @default '' - meaning no override
    */
-  columnGap?: SpacingKeyword | '';
+  columnGap?: MaybeResponsive<SpacingKeyword | ''>;
 }
 export type BaselinePosition = 'baseline' | 'first baseline' | 'last baseline';
 export type ContentDistribution =
@@ -2088,21 +2678,21 @@ export type AlignContentKeyword =
   | ContentDistribution
   | OverflowPosition
   | ContentPosition;
-interface GridProps$1 extends BaseBoxPropsWithRole, GapProps {
+interface GridProps$1 extends GlobalProps, BaseBoxPropsWithRole, GapProps {
   /**
 	  Define columns and specify their size.
   
 	  @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
 	  @default 'none'
 	*/
-  gridTemplateColumns?: string;
+  gridTemplateColumns?: MaybeResponsive<string>;
   /**
 	  Define rows and specify their size.
   
 	  @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
 	  @default 'none'
 	*/
-  gridTemplateRows?: string;
+  gridTemplateRows?: MaybeResponsive<string>;
   /**
 	  Aligns the grid items along the inline (row) axis.
   
@@ -2111,7 +2701,7 @@ interface GridProps$1 extends BaseBoxPropsWithRole, GapProps {
 	  @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
 	  @default '' - meaning no override
 	*/
-  justifyItems?: JustifyItemsKeyword | '';
+  justifyItems?: MaybeResponsive<JustifyItemsKeyword | ''>;
   /**
 	  Aligns the grid items along the block (column) axis.
   
@@ -2120,16 +2710,16 @@ interface GridProps$1 extends BaseBoxPropsWithRole, GapProps {
 	  @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
 	  @default '' - meaning no override
 	*/
-  alignItems?: AlignItemsKeyword | '';
+  alignItems?: MaybeResponsive<AlignItemsKeyword | ''>;
   /**
 	  A shorthand property for `justify-items` and `align-items`.
   
 	  @see https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
 	  @default 'normal normal'
 	*/
-  placeItems?:
-    | `${AlignItemsKeyword} ${JustifyItemsKeyword}`
-    | AlignItemsKeyword;
+  placeItems?: MaybeResponsive<
+    `${AlignItemsKeyword} ${JustifyItemsKeyword}` | AlignItemsKeyword
+  >;
   /**
 	  Aligns the grid along the inline (row) axis.
   
@@ -2138,7 +2728,7 @@ interface GridProps$1 extends BaseBoxPropsWithRole, GapProps {
 	  @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
 	  @default '' - meaning no override
 	*/
-  justifyContent?: JustifyContentKeyword | '';
+  justifyContent?: MaybeResponsive<JustifyContentKeyword | ''>;
   /**
 	  Aligns the grid along the block (column) axis.
   
@@ -2147,18 +2737,18 @@ interface GridProps$1 extends BaseBoxPropsWithRole, GapProps {
 	  @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
 	  @default '' - meaning no override
 	*/
-  alignContent?: AlignContentKeyword | '';
+  alignContent?: MaybeResponsive<AlignContentKeyword | ''>;
   /**
 	  A shorthand property for `justify-content` and `align-content`.
   
 	  @see https://developer.mozilla.org/en-US/docs/Web/CSS/place-content
 	  @default 'normal normal'
 	*/
-  placeContent?:
-    | `${AlignContentKeyword} ${JustifyContentKeyword}`
-    | AlignContentKeyword;
+  placeContent?: MaybeResponsive<
+    `${AlignContentKeyword} ${JustifyContentKeyword}` | AlignContentKeyword
+  >;
 }
-interface GridItemProps$1 extends BaseBoxPropsWithRole {
+interface GridItemProps$1 extends GlobalProps, BaseBoxPropsWithRole {
   /**
    * Number of columns the item will span across
    *
@@ -2260,7 +2850,9 @@ interface HeadingProps$1
     | 'heading'
     | ExtractStrict<AccessibilityRole, 'presentation' | 'none'>;
 }
-interface IconProps$1 extends GlobalProps {
+interface IconProps$1
+  extends GlobalProps,
+    Pick<InteractionProps, 'interestFor'> {
   /**
    * Sets the tone of the icon, based on the intention of the information being conveyed.
    *
@@ -2326,13 +2918,6 @@ export interface BaseImageProps {
    */
   srcSet?: string;
 }
-/**
- * This is purely to give the ability
- * to have a space or not in the string literal types.
- *
- * For example in the `aspectRatio` property, `16/9` and `16 / 9` are both valid.
- */
-export type optionalSpace = '' | ' ';
 interface ImageProps$1 extends GlobalProps, BaseImageProps, BorderProps {
   /**
    * Sets the semantic meaning of the component’s content. When set,
@@ -2400,13 +2985,13 @@ interface ImageProps$1 extends GlobalProps, BaseImageProps, BorderProps {
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
    */
-  onLoad?: () => void;
+  onLoad?: (event: Event) => void;
   /**
    * Invoked on load error.
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
    */
-  onError?: () => void;
+  onError?: (event: Event) => void;
 }
 interface LinkProps$1 extends GlobalProps, LinkBehaviorProps {
   /**
@@ -2439,189 +3024,69 @@ interface ListItemProps$1 extends GlobalProps {
    */
   children?: ComponentChildren;
 }
-interface MoneyFieldProps$1
+interface MenuProps$1 extends GlobalProps {
+  /**
+   * A label that describes the purpose or contents of the element. When set,
+   * it will be announced using assistive technologies and provide additional context.
+   */
+  accessibilityLabel?: string;
+  /**
+   * The children define the actions to render inside the Menu. Only Button components are allowed as children of a Menu, and these Buttons can perform actions (using `onClick`) or link to other parts of the application (using `to`/ `href`). Any other component placed here will be ignored.
+   */
+  children?: ComponentChildren;
+}
+interface ModalProps$1
   extends GlobalProps,
-    BaseTextFieldProps,
-    NumberConstraintsProps,
-    AutocompleteProps<MoneyAutocompleteField> {
+    BaseOverlayProps,
+    BaseOverlayMethods,
+    ActionSlots {
   /**
-   * Specifies the currency code that will be displayed.
+   * A label that describes the purpose of the modal. When set,
+   * it will be announced to users using assistive technologies and will
+   * provide them with more context.
    *
-   * @default ''
+   * This overrides the `heading` prop for screen readers.
+   */
+  accessibilityLabel?: string;
+  /**
+   * A title that describes the content of the Modal.
+   *
+   */
+  heading?: string;
+  /**
+   * Adjust the padding around the Modal content.
+   *
+   * `base`: applies padding that is appropriate for the element.
+   *
+   * `none`: removes all padding from the element. This can be useful when elements inside the Modal need to span
+   * to the edge of the Modal. For example, a full-width image. In this case, rely on `Box` with a padding of 'base'
+   * to bring back the desired padding for the rest of the content.
+   *
+   * @default 'base'
+   */
+  padding?: 'base' | 'none';
+  /**
+   * Adjust the size of the Modal.
+   *
+   * `max`: expands the Modal to its maximum size as defined by the host application, on both the horizontal and vertical axes.
+   *
+   * @default 'base'
+   */
+  size?: SizeKeyword | 'max';
+  /**
+   * The content of the Modal.
    */
-  currencyCode?: CurrencyCode | AnyString;
+  children?: ComponentChildren;
 }
+interface MoneyFieldProps$1
+  extends GlobalProps,
+    BaseTextFieldProps,
+    NumberConstraintsProps,
+    AutocompleteProps<MoneyAutocompleteField> {}
 export type MoneyAutocompleteField = ExtractStrict<
   AnyAutocompleteField,
   'transaction-amount'
 >;
-/**
- * Supported monetary currencies from [ISO 4217](https://www.iso.org/iso-4217-currency-codes.html).
- *
- * @see https://www.iso.org/iso-4217-currency-codes.html
- */
-export type CurrencyCode =
-  | 'USD'
-  | 'EUR'
-  | 'GBP'
-  | 'CAD'
-  | 'AFN'
-  | 'ALL'
-  | 'DZD'
-  | 'AOA'
-  | 'ARS'
-  | 'AMD'
-  | 'AWG'
-  | 'AUD'
-  | 'BBD'
-  | 'AZN'
-  | 'BDT'
-  | 'BSD'
-  | 'BHD'
-  | 'BIF'
-  | 'BZD'
-  | 'BMD'
-  | 'BTN'
-  | 'BAM'
-  | 'BRL'
-  | 'BOB'
-  | 'BWP'
-  | 'BND'
-  | 'BGN'
-  | 'MMK'
-  | 'KHR'
-  | 'CVE'
-  | 'KYD'
-  | 'XAF'
-  | 'CLP'
-  | 'CNY'
-  | 'COP'
-  | 'KMF'
-  | 'CDF'
-  | 'CRC'
-  | 'HRK'
-  | 'CZK'
-  | 'DKK'
-  | 'DOP'
-  | 'XCD'
-  | 'EGP'
-  | 'ETB'
-  | 'XPF'
-  | 'FJD'
-  | 'GMD'
-  | 'GHS'
-  | 'GTQ'
-  | 'GYD'
-  | 'GEL'
-  | 'HTG'
-  | 'HNL'
-  | 'HKD'
-  | 'HUF'
-  | 'ISK'
-  | 'INR'
-  | 'IDR'
-  | 'ILS'
-  | 'IQD'
-  | 'JMD'
-  | 'JPY'
-  | 'JEP'
-  | 'JOD'
-  | 'KZT'
-  | 'KES'
-  | 'KWD'
-  | 'KGS'
-  | 'LAK'
-  | 'LVL'
-  | 'LBP'
-  | 'LSL'
-  | 'LRD'
-  | 'LTL'
-  | 'MGA'
-  | 'MKD'
-  | 'MOP'
-  | 'MWK'
-  | 'MVR'
-  | 'MXN'
-  | 'MYR'
-  | 'MUR'
-  | 'MDL'
-  | 'MAD'
-  | 'MNT'
-  | 'MZN'
-  | 'NAD'
-  | 'NPR'
-  | 'ANG'
-  | 'NZD'
-  | 'NIO'
-  | 'NGN'
-  | 'NOK'
-  | 'OMR'
-  | 'PAB'
-  | 'PKR'
-  | 'PGK'
-  | 'PYG'
-  | 'PEN'
-  | 'PHP'
-  | 'PLN'
-  | 'QAR'
-  | 'RON'
-  | 'RUB'
-  | 'RWF'
-  | 'WST'
-  | 'SAR'
-  | 'RSD'
-  | 'SCR'
-  | 'SGD'
-  | 'SDG'
-  | 'SYP'
-  | 'ZAR'
-  | 'KRW'
-  | 'SSP'
-  | 'SBD'
-  | 'LKR'
-  | 'SRD'
-  | 'SZL'
-  | 'SEK'
-  | 'CHF'
-  | 'TWD'
-  | 'THB'
-  | 'TZS'
-  | 'TTD'
-  | 'TND'
-  | 'TRY'
-  | 'TMT'
-  | 'UGX'
-  | 'UAH'
-  | 'AED'
-  | 'UYU'
-  | 'UZS'
-  | 'VUV'
-  | 'VND'
-  | 'XOF'
-  | 'YER'
-  | 'ZMW'
-  | 'BYN'
-  | 'BYR'
-  | 'DJF'
-  | 'ERN'
-  | 'FKP'
-  | 'GIP'
-  | 'GNF'
-  | 'IRR'
-  | 'KID'
-  | 'LYD'
-  | 'MRU'
-  | 'SLL'
-  | 'SHP'
-  | 'SOS'
-  | 'STD'
-  | 'STN'
-  | 'TJS'
-  | 'TOP'
-  | 'VED'
-  | 'VEF'
-  | 'VES'
-  | 'XXX';
 interface NumberFieldProps$1
   extends GlobalProps,
     BaseTextFieldProps,
@@ -2665,7 +3130,7 @@ interface OptionGroupProps$1 extends GlobalProps {
   children?: ComponentChildren;
 }
 interface OrderedListProps$1 extends GlobalProps {}
-interface PageProps$1 extends GlobalProps {
+interface PageProps$1 extends GlobalProps, ActionSlots {
   /**
    * The content of the Page.
    */
@@ -2679,18 +3144,13 @@ interface PageProps$1 extends GlobalProps {
    */
   subheading?: string;
   /**
-   * The primary action to perform, provided as a button or link type element.
-   * When a `Button` is added to the `primaryAction` it's variant is set to `primary`
+   * Additional contextual information about the page.
    */
-  primaryAction?: ComponentChildren;
+  accessory?: ComponentChildren;
   /**
    * The breadcrumb actions to perform, provided as link elements.
    */
   breadcrumbActions?: ComponentChildren;
-  /**
-   * Secondary actions. These are `Button`s that will be contextually the 'secondary' variant.
-   */
-  secondaryActions?: ComponentChildren;
   /**
    * The aside element is section of a page that contains content that is tangentially related to the content around the aside element, and which could be considered separate from that content.
    * Such sections are often represented as sidebars in printed typography.
@@ -2751,6 +3211,17 @@ export type PasswordAutocompleteField = ExtractStrict<
   AnyAutocompleteField,
   'new-password' | 'current-password'
 >;
+interface PopoverProps$1
+  extends GlobalProps,
+    BaseOverlayProps,
+    BaseOverlayMethods,
+    ToggleEventProps,
+    SizingProps {
+  /**
+   * The content of the popover.
+   */
+  children?: ComponentChildren;
+}
 interface QueryContainerProps$1 extends GlobalProps {
   /**
    * The content of the container.
@@ -2771,7 +3242,7 @@ interface QueryContainerProps$1 extends GlobalProps {
    */
   containerName?: string;
 }
-interface SectionProps$1 extends GlobalProps {
+interface SectionProps$1 extends GlobalProps, ActionSlots {
   /**
    * The content of the Section.
    */
@@ -2830,40 +3301,40 @@ interface SpinnerProps$1 extends GlobalProps {
    */
   accessibilityLabel?: string;
 }
-interface StackProps$1 extends BaseBoxPropsWithRole, GapProps {
+interface StackProps$1 extends GlobalProps, BaseBoxPropsWithRole, GapProps {
   /**
    * The content of the Stack.
    */
   children?: ComponentChildren;
   /**
-   * Sets how the children are placed within the Stack.
+   * Sets how the children are placed within the Stack. This uses [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
    *
    * @default 'block'
    *
    * @implementation the content will wrap if the direction is 'inline', and not wrap if the direction is 'block'
    */
-  direction?: 'block' | 'inline';
+  direction?: MaybeResponsive<'block' | 'inline'>;
   /**
    * Aligns the Stack along the main axis.
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
    * @default 'normal'
    */
-  justifyContent?: JustifyContentKeyword;
+  justifyContent?: MaybeResponsive<JustifyContentKeyword>;
   /**
    * Aligns the Stack's children along the cross axis.
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
    * @default 'normal'
    */
-  alignItems?: AlignItemsKeyword;
+  alignItems?: MaybeResponsive<AlignItemsKeyword>;
   /**
    * Aligns the Stack along the cross axis.
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
    * @default 'normal'
    */
-  alignContent?: AlignContentKeyword;
+  alignContent?: MaybeResponsive<AlignContentKeyword>;
 }
 interface SwitchProps$1
   extends GlobalProps,
@@ -2881,11 +3352,11 @@ export interface PaginationProps {
   /**
    * Called when the previous page button is clicked.
    */
-  onPreviousPage?: () => void;
+  onPreviousPage?: (event: Event) => void;
   /**
    * Called when the next page button is clicked.
    */
-  onNextPage?: () => void;
+  onNextPage?: (event: Event) => void;
   /**
    * Whether there's an additional page of data.
    *
@@ -2930,11 +3401,11 @@ interface TableBodyProps$1 extends GlobalProps {
   /**
    * The body of the table. May not have any semantic meaning in the Table's `list` variant.
    */
-  children: ComponentChildren;
+  children?: ComponentChildren;
 }
 interface TableCellProps$1 extends GlobalProps {
   /**
-   * The content of the table data.
+   * The content of the table cell.
    */
   children?: ComponentChildren;
 }
@@ -2952,7 +3423,7 @@ interface TableHeaderProps$1 extends GlobalProps {
   /**
    * Content designation for the table's `list` variant.
    *
-   * - `primary'`: The most important content. Only one column can have this designation.
+   * - `primary`: The most important content. Only one column can have this designation.
    * - `secondary`: The secondary content. Only one column can have this designation.
    * - `kicker`: Content that is displayed before primary and secondary content, but with less visual prominence. Only one column can have this designation.
    * - `inline`: Content that is displayed inline.
@@ -2961,6 +3432,16 @@ interface TableHeaderProps$1 extends GlobalProps {
    * @default 'labeled'
    */
   listSlot?: ListSlotType;
+  /**
+   * The format of the column. Will automatically apply styling and alignment to cell content based on the value.
+   *
+   * - `base`: The base format for columns.
+   * - `currency`: Formats the column as currency.
+   * - `numeric`: Formats the column as a number.
+   *
+   * @default 'base'
+   */
+  format?: 'base' | 'currency' | 'numeric';
 }
 interface TableHeaderRowProps$1 extends GlobalProps {
   /**
@@ -2973,12 +3454,24 @@ interface TableRowProps$1 extends GlobalProps {
    * The content of a TableRow, which should be `TableCell` components.
    */
   children?: ComponentChildren;
+  /**
+   * The ID of an interactive element (e.g. `s-link`) in the row that will be the target of the click when the row is clicked.
+   * This is the primary action for the row; it should not be used for secondary actions.
+   *
+   * This is a click-only affordance, and does not introduce any keyboard or screen reader affordances.
+   * Which is why the target element must be in the table; so that keyboard and screen reader users can interact with it normally.
+   *
+   * @implementation no focus or keyboard affordances are introduced by this property. No aria attributes need to be added to the table row.
+   * @implementation the row and/or delegate should have some affordance that indicates it is clickable. This may be a background color, a border, a hover effect, etc.
+   */
+  clickDelegate?: string;
 }
 interface TextProps$1
   extends GlobalProps,
     AccessibilityVisibilityProps,
     BaseTypographyProps,
-    DisplayProps {
+    DisplayProps,
+    Pick<InteractionProps, 'interestFor'> {
   /**
    * The content of the Text.
    */
@@ -2986,7 +3479,7 @@ interface TextProps$1
   /**
    * Provide semantic meaning and default styling to the text.
    *
-   * Other presentation properties on `<s-text>` override the default styling.
+   * Other presentation properties on Text override the default styling.
    *
    * @default 'generic'
    */
@@ -3086,42 +3579,207 @@ interface TextAreaProps$1
    */
   rows?: number;
 }
-interface TextFieldProps$1
-  extends GlobalProps,
-    BaseTextFieldProps,
-    MinMaxLengthProps,
-    AutocompleteProps<TextAutocompleteField>,
-    FieldDecorationProps {}
-interface ThumbnailProps$1 extends GlobalProps, BaseImageProps {
-  /**
-   * 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;
-  /**
-   * Adjusts the size the product thumbnail image.
-   *
-   * @default 'base'
-   */
-  size?: SizeKeyword;
+interface TextFieldProps$1
+  extends GlobalProps,
+    BaseTextFieldProps,
+    MinMaxLengthProps,
+    AutocompleteProps<TextAutocompleteField>,
+    FieldDecorationProps {}
+interface ThumbnailProps$1 extends GlobalProps, BaseImageProps {
+  /**
+   * Invoked when load of provided image completes successfully.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
+   */
+  onLoad?: (event: Event) => void;
+  /**
+   * Invoked on load error of provided image.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
+   */
+  onError?: (event: Event) => void;
+  /**
+   * Adjusts the size the product thumbnail image.
+   *
+   * @default 'base'
+   */
+  size?: SizeKeyword;
+}
+interface TooltipProps$1 extends GlobalProps {
+  /**
+   * The content of the Tooltip.
+   */
+  children?: ComponentChildren;
+}
+interface UnorderedListProps$1 extends GlobalProps {}
+interface URLFieldProps$1
+  extends GlobalProps,
+    BaseTextFieldProps,
+    MinMaxLengthProps,
+    AutocompleteProps<URLAutocompleteField> {}
+export type URLAutocompleteField = ExtractStrict<
+  AnyAutocompleteField,
+  'url' | 'photo' | 'impp' | `${AutocompleteAddressGroup} impp`
+>;
+//
+// Preact Virtual DOM
+// -----------------------------------
+export interface VNode<P = {}> {
+  type: ComponentType<P> | string;
+  props: P & {
+    children: ComponentChildren$1;
+  };
+  key: Key;
+  /**
+   * ref is not guaranteed by React.ReactElement, for compatibility reasons
+   * with popular react libs we define it as optional too
+   */
+  ref?: Ref<any> | null;
+  /**
+   * The time this `vnode` started rendering. Will only be set when
+   * the devtools are attached.
+   * Default value: `0`
+   */
+  startTime?: number;
+  /**
+   * The time that the rendering of this `vnode` was completed. Will only be
+   * set when the devtools are attached.
+   * Default value: `-1`
+   */
+  endTime?: number;
+}
+//
+// Preact Component interface
+// -----------------------------------
+export type Key = string | number | any;
+export interface RefObject<T> {
+  current: T | null;
+}
+export type RefCallback<T> = (instance: T | null) => void;
+export type Ref<T> = RefObject<T> | RefCallback<T> | null;
+export type ComponentChild =
+  | VNode<any>
+  | object
+  | string
+  | number
+  | bigint
+  | boolean
+  | null
+  | undefined;
+type ComponentChildren$1 = ComponentChild[] | ComponentChild;
+export interface Attributes {
+  key?: Key | undefined;
+  jsx?: boolean | undefined;
+}
+export interface ErrorInfo {
+  componentStack?: string;
+}
+export type RenderableProps<P, RefType = any> = P &
+  Readonly<
+    Attributes & {
+      children?: ComponentChildren$1;
+      ref?: Ref<RefType>;
+    }
+  >;
+export type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
+export interface FunctionComponent<P = {}> {
+  (props: RenderableProps<P>, context?: any): ComponentChildren$1;
+  displayName?: string;
+  defaultProps?: Partial<P> | undefined;
+}
+export interface ComponentClass<P = {}, S = {}> {
+  new (props: P, context?: any): Component<P, S>;
+  displayName?: string;
+  defaultProps?: Partial<P>;
+  contextType?: Context<any>;
+  getDerivedStateFromProps?(
+    props: Readonly<P>,
+    state: Readonly<S>,
+  ): Partial<S> | null;
+  getDerivedStateFromError?(error: any): Partial<S> | null;
+}
+export interface Component<P = {}, S = {}> {
+  componentWillMount?(): void;
+  componentDidMount?(): void;
+  componentWillUnmount?(): void;
+  getChildContext?(): object;
+  componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+  shouldComponentUpdate?(
+    nextProps: Readonly<P>,
+    nextState: Readonly<S>,
+    nextContext: any,
+  ): boolean;
+  componentWillUpdate?(
+    nextProps: Readonly<P>,
+    nextState: Readonly<S>,
+    nextContext: any,
+  ): void;
+  getSnapshotBeforeUpdate?(oldProps: Readonly<P>, oldState: Readonly<S>): any;
+  componentDidUpdate?(
+    previousProps: Readonly<P>,
+    previousState: Readonly<S>,
+    snapshot: any,
+  ): void;
+  componentDidCatch?(error: any, errorInfo: ErrorInfo): void;
+}
+declare abstract class Component<P, S> {
+  constructor(props?: P, context?: any);
+  static displayName?: string;
+  static defaultProps?: any;
+  static contextType?: Context<any>;
+  // Static members cannot reference class type parameters. This is not
+  // supported in TypeScript. Reusing the same type arguments from `Component`
+  // will lead to an impossible state where one cannot satisfy the type
+  // constraint under no circumstances, see #1356.In general type arguments
+  // seem to be a bit buggy and not supported well at the time of this
+  // writing with TS 3.3.3333.
+  static getDerivedStateFromProps?(
+    props: Readonly<object>,
+    state: Readonly<object>,
+  ): object | null;
+
+  static getDerivedStateFromError?(error: any): object | null;
+  state: Readonly<S>;
+  props: RenderableProps<P>;
+  context: any;
+  base?: Element | Text;
+  // From https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e836acc75a78cf0655b5dfdbe81d69fdd4d8a252/types/react/index.d.ts#L402
+  // // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
+  // // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
+  setState<K extends keyof S>(
+    state:
+      | ((
+          prevState: Readonly<S>,
+          props: Readonly<P>,
+        ) => Pick<S, K> | Partial<S> | null)
+      | (Pick<S, K> | Partial<S> | null),
+    callback?: () => void,
+  ): void;
+
+  forceUpdate(callback?: () => void): void;
+  abstract render(
+    props?: RenderableProps<P>,
+    state?: Readonly<S>,
+    context?: any,
+  ): ComponentChildren$1;
+}
+//
+// Context
+// -----------------------------------
+export interface Consumer<T>
+  extends FunctionComponent<{
+    children: (value: T) => ComponentChildren$1;
+  }> {}
+export interface Provider<T>
+  extends FunctionComponent<{
+    value: T;
+    children?: ComponentChildren$1;
+  }> {}
+export interface Context<T> extends Provider<T> {
+  Consumer: Consumer<T>;
+  Provider: Provider<T>;
+  displayName?: string;
 }
-interface UnorderedListProps$1 extends GlobalProps {}
-interface URLFieldProps$1
-  extends GlobalProps,
-    BaseTextFieldProps,
-    MinMaxLengthProps,
-    AutocompleteProps<URLAutocompleteField> {}
-export type URLAutocompleteField = ExtractStrict<
-  AnyAutocompleteField,
-  'url' | 'photo' | 'impp' | `${AutocompleteAddressGroup} impp`
->;
 type IconType$1 =
   | 'adjust'
   | 'affiliate'
@@ -3162,6 +3820,7 @@ type IconType$1 =
   | 'book-open'
   | 'bug'
   | 'bullet'
+  | 'business-entity'
   | 'button'
   | 'button-press'
   | 'calculator'
@@ -3302,6 +3961,7 @@ type IconType$1 =
   | 'file'
   | 'file-list'
   | 'filter'
+  | 'filter-active'
   | 'flag'
   | 'flip-horizontal'
   | 'flip-vertical'
@@ -3350,6 +4010,7 @@ type IconType$1 =
   | 'incoming'
   | 'incomplete'
   | 'info'
+  | 'inheritance'
   | 'inventory'
   | 'inventory-updated'
   | 'iq'
@@ -3480,6 +4141,7 @@ type IconType$1 =
   | 'plus'
   | 'plus-circle'
   | 'plus-circle-down'
+  | 'plus-circle-filled'
   | 'plus-circle-up'
   | 'point-of-sale'
   | 'price-list'
@@ -3520,6 +4182,7 @@ type IconType$1 =
   | 'sandbox'
   | 'save'
   | 'search'
+  | 'search-add'
   | 'search-list'
   | 'search-recent'
   | 'search-resource'
@@ -3619,191 +4282,3 @@ type IconType$1 =
   | 'wrench'
   | 'x'
   | 'x-circle';
-//
-// Preact Virtual DOM
-// -----------------------------------
-export interface VNode<P = {}> {
-  type: ComponentType<P> | string;
-  props: P & {
-    children: ComponentChildren$1;
-  };
-  key: Key;
-  /**
-   * ref is not guaranteed by React.ReactElement, for compatibility reasons
-   * with popular react libs we define it as optional too
-   */
-  ref?: Ref<any> | null;
-  /**
-   * The time this `vnode` started rendering. Will only be set when
-   * the devtools are attached.
-   * Default value: `0`
-   */
-  startTime?: number;
-  /**
-   * The time that the rendering of this `vnode` was completed. Will only be
-   * set when the devtools are attached.
-   * Default value: `-1`
-   */
-  endTime?: number;
-}
-//
-// Preact Component interface
-// -----------------------------------
-export type Key = string | number | any;
-export interface RefObject<T> {
-  current: T | null;
-}
-export type RefCallback<T> = (instance: T | null) => void;
-export type Ref<T> = RefObject<T> | RefCallback<T> | null;
-export type ComponentChild =
-  | VNode<any>
-  | object
-  | string
-  | number
-  | bigint
-  | boolean
-  | null
-  | undefined;
-type ComponentChildren$1 = ComponentChild[] | ComponentChild;
-export interface Attributes {
-  key?: Key | undefined;
-  jsx?: boolean | undefined;
-}
-export interface ErrorInfo {
-  componentStack?: string;
-}
-export type RenderableProps<P, RefType = any> = P &
-  Readonly<
-    Attributes & {
-      children?: ComponentChildren$1;
-      ref?: Ref<RefType>;
-    }
-  >;
-export type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
-export interface FunctionComponent<P = {}> {
-  (props: RenderableProps<P>, context?: any): ComponentChildren$1;
-  displayName?: string;
-  defaultProps?: Partial<P> | undefined;
-}
-export interface ComponentClass<P = {}, S = {}> {
-  new (props: P, context?: any): Component<P, S>;
-  displayName?: string;
-  defaultProps?: Partial<P>;
-  contextType?: Context<any>;
-  getDerivedStateFromProps?(
-    props: Readonly<P>,
-    state: Readonly<S>,
-  ): Partial<S> | null;
-  getDerivedStateFromError?(error: any): Partial<S> | null;
-}
-export interface Component<P = {}, S = {}> {
-  componentWillMount?(): void;
-  componentDidMount?(): void;
-  componentWillUnmount?(): void;
-  getChildContext?(): object;
-  componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
-  shouldComponentUpdate?(
-    nextProps: Readonly<P>,
-    nextState: Readonly<S>,
-    nextContext: any,
-  ): boolean;
-  componentWillUpdate?(
-    nextProps: Readonly<P>,
-    nextState: Readonly<S>,
-    nextContext: any,
-  ): void;
-  getSnapshotBeforeUpdate?(oldProps: Readonly<P>, oldState: Readonly<S>): any;
-  componentDidUpdate?(
-    previousProps: Readonly<P>,
-    previousState: Readonly<S>,
-    snapshot: any,
-  ): void;
-  componentDidCatch?(error: any, errorInfo: ErrorInfo): void;
-}
-declare abstract class Component<P, S> {
-  constructor(props?: P, context?: any);
-  static displayName?: string;
-  static defaultProps?: any;
-  static contextType?: Context<any>;
-  // Static members cannot reference class type parameters. This is not
-  // supported in TypeScript. Reusing the same type arguments from `Component`
-  // will lead to an impossible state where one cannot satisfy the type
-  // constraint under no circumstances, see #1356.In general type arguments
-  // seem to be a bit buggy and not supported well at the time of this
-  // writing with TS 3.3.3333.
-  static getDerivedStateFromProps?(
-    props: Readonly<object>,
-    state: Readonly<object>,
-  ): object | null;
-
-  static getDerivedStateFromError?(error: any): object | null;
-  state: Readonly<S>;
-  props: RenderableProps<P>;
-  context: any;
-  base?: Element | Text;
-  // From https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e836acc75a78cf0655b5dfdbe81d69fdd4d8a252/types/react/index.d.ts#L402
-  // // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
-  // // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
-  setState<K extends keyof S>(
-    state:
-      | ((
-          prevState: Readonly<S>,
-          props: Readonly<P>,
-        ) => Pick<S, K> | Partial<S> | null)
-      | (Pick<S, K> | Partial<S> | null),
-    callback?: () => void,
-  ): void;
-
-  forceUpdate(callback?: () => void): void;
-  abstract render(
-    props?: RenderableProps<P>,
-    state?: Readonly<S>,
-    context?: any,
-  ): ComponentChildren$1;
-}
-//
-// Context
-// -----------------------------------
-export interface Consumer<T>
-  extends FunctionComponent<{
-    children: (value: T) => ComponentChildren$1;
-  }> {}
-export interface Provider<T>
-  extends FunctionComponent<{
-    value: T;
-    children?: ComponentChildren$1;
-  }> {}
-export interface Context<T> extends Provider<T> {
-  Consumer: Consumer<T>;
-  Provider: Provider<T>;
-  displayName?: string;
-}
-interface AdminActionProps$1 extends GlobalProps, ActionProps, ActionSlots {
-  /**
-   * Whether the action is in a loading state, such as initial page load or action opening.
-   * When true, the action could be in an inert state, which prevents user interaction.
-   *
-   * @default false
-   */
-  loading?: boolean;
-}
-interface AdminBlockProps$1 extends GlobalProps {
-  /**
-   * The text to use as the Block title in the block header. If not provided, the name of the
-   * extension will be used.
-   */
-  heading?: string;
-  /**
-   * The summary to display when the app block is collapsed.
-   * Summary longer than 30 characters will be truncated.
-   */
-  collapsedSummary?: string;
-}
-interface AdminPrintActionProps$1 extends GlobalProps {
-  /**
-   * Sets the src URL of the preview and the document to print.
-   * If not provided, the preview will show an empty state and the print button will be disabled.
-   * HTML, PDFs and images are supported.
-   */
-  src?: string;
-}