@shopify/ui-extensions 0.0.0-internal-20230622171951

package/src/surfaces/checkout/components/PhoneField/README.md

@@ -0,0 +1,49 @@
+# PhoneField
+
+A PhoneField is an input field that merchants can type into optimized
+for phone numbers with a country code base auto-formatting.
+The country code is required for the initial render of the field but
+it can be overriden later by the user either by selecting a country
+in the country selection dropdown or by manually editing the country phone code
+directly in the text field.
+
+## Props
+
+optional = ?
+
+| Name                      | Type                                                                                                                                     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
+| onChange?                 | <code>(value: string) => void</code>                                                                                                     | Callback when the buyer has **finished editing** a field or pressed the country dropdown. Unlike `onChange` callbacks you may be familiar with from Polaris or other React component libraries, this callback is **not** run on every change to the input. Phone fields are “partially controlled” components, which means that while the buyer edits the field, its state is controlled by the component. Once the buyer has signalled that they have finished editing the field (typically, by blurring the field), `onChange` is called if the input actually changed from the most recent `value` property. At that point, you are expected to store this “committed value” in state, and reflect it in the phone field’s `value` property.<br /><br />This state management model is important given how UI Extensions are rendered. UI Extension components run on a separate thread from the UI, so they can’t respond to input synchronously. A pattern popularized by [controlled React components](https://reactjs.org/docs/forms.html#controlled-components) is to have the component be the source of truth for the input `value`, and update the `value` on every user input. The delay in responding to events from a UI extension is only a few milliseconds, but attempting to strictly store state with this delay can cause issues if a user types quickly, or if the buyer is using a lower-powered device. Having the UI thread take ownership for “in progress” input, and only synchronizing when the user is finished with a field, avoids this risk.<br /><br />It can still sometimes be useful to be notified when the user makes any input in the field. If you need this capability, you can use the `onInput` prop. However, never use that property to create tightly controlled state for the `value`.<br /><br />This callback is called with the current formatted value of the field. If the value of a field is the same as the current `value` prop provided to the field, the `onChange` callback will not be run. |
+| onInput?                  | <code>(value: string) => void</code>                                                                                                     | Callback when the user makes any changes in the field including selecting a country in the dropdown. As noted in the documentation for `onChange`, you **must not** use this to update `state` — use the `onChange` callback for that purpose. Use the `onInput` prop when you need to do something as soon as the buyer makes a change, like clearing validation errors that apply to the field as soon as the user begins making the necessary adjustments.<br /><br />This callback is called with the current formatted value.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| id?                       | <code>string</code>                                                                                                                      | A unique identifier for the field. When no `id` is set, a globally unique value will be used instead.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| icon?                     | <code><a href="#iconsource">IconSource</a> &#124; {source: <a href="#iconsource">IconSource</a>, position?: "start" &#124; "end"}</code> | An icon to render at the start or end of the field. It will render at the start by default.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| name?                     | <code>string</code>                                                                                                                      | An identifier for the field that is unique within the nearest containing `Form` component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| label                     | <code>string</code>                                                                                                                      | Content to use as the field label. This value is also used as the placeholder when the field is empty.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| accessory?                | <code>string &#124; RemoteFragment</code>                                                                                                | Any content to render at the end of the text field. Commonly used to display an icon that opens a tooltip providing more information about the field.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| accessibilityDescription? | <code>string</code>                                                                                                                      | A detailed description for screen readers.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| value?                    | <code>string</code>                                                                                                                      | The current value for the field. If omitted, the field will be empty. You should update this value in response to the `onChange` callback.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| required?                 | <code>boolean</code>                                                                                                                     | Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` prop.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| error?                    | <code>string</code>                                                                                                                      | Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| autocomplete?             | <code><a href="#autocomplete">Autocomplete</a> &#124; boolean</code>                                                                     | A hint as to the intended content of the field.<br /><br />When set to `true`, this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.<br /><br />When set to `false`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.<br /><br />Alternatively, you can provide an `Autocomplete` object, which describes the specific data you would like to be entered into this field during autofill.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| disabled?                 | <code>boolean</code>                                                                                                                     | Whether the field can be modified.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| readonly?                 | <code>boolean</code>                                                                                                                     | Whether the field is read-only.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| maxLength?                | <code>number</code>                                                                                                                      | Specifies the maximum number of characters allowed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onFocus?                  | <code>() => void</code>                                                                                                                  | Callback when input is focused.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| onBlur?                   | <code>() => void</code>                                                                                                                  | Callback when focus is removed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | <a name="Autocomplete"></a> |
+
+### Autocomplete
+
+A descriptor for selecting the data a field would like to receive during
+autocomplete. This attribute is modeled off of a limited set of the autocomplete
+values supported in browsers.
+
+| Name   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Description                                                                    |
+| ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
+| group? | <code>"shipping" &#124; "billing" &#124; "location"</code>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | The contact information “group” the autocomplete data should be sourced from.  |
+| field  | <code>"name" &#124; "honorific-prefix" &#124; "given-name" &#124; "additional-name" &#124; "family-name" &#124; "honorific-suffix" &#124; "nickname" &#124; "username" &#124; "new-password" &#124; "current-password" &#124; "one-time-code" &#124; "organization-title" &#124; "organization" &#124; "street-address" &#124; "address-line1" &#124; "address-line2" &#124; "address-line3" &#124; "address-level4" &#124; "address-level3" &#124; "address-level2" &#124; "address-level1" &#124; "country" &#124; "country-name" &#124; "postal-code" &#124; "credit-card-name" &#124; "credit-card-given-name" &#124; "credit-card-additional-name" &#124; "credit-card-family-name" &#124; "credit-card-number" &#124; "credit-card-expiry" &#124; "credit-card-expiry-month" &#124; "credit-card-expiry-year" &#124; "credit-card-security-code" &#124; "credit-card-type" &#124; "transaction-currency" &#124; "transaction-amount" &#124; "language" &#124; "birthday" &#124; "birthday-day" &#124; "birthday-month" &#124; "birthday-year" &#124; "sex" &#124; "url" &#124; "photo" &#124; "telephone" &#124; "telephone-country-code" &#124; "telephone-national" &#124; "telephone-area-code" &#124; "telephone-local" &#124; "telephone-local-prefix" &#124; "telephone-local-suffix" &#124; "telephone-extension" &#124; "email" &#124; "instant-message" &#124; "home telephone" &#124; "home telephone-country-code" &#124; "home telephone-national" &#124; "home telephone-area-code" &#124; "home telephone-local" &#124; "home telephone-local-prefix" &#124; "home telephone-local-suffix" &#124; "home telephone-extension" &#124; "home email" &#124; "home instant-message" &#124; "work telephone" &#124; "work telephone-country-code" &#124; "work telephone-national" &#124; "work telephone-area-code" &#124; "work telephone-local" &#124; "work telephone-local-prefix" &#124; "work telephone-local-suffix" &#124; "work telephone-extension" &#124; "work email" &#124; "work instant-message" &#124; "mobile telephone" &#124; "mobile telephone-country-code" &#124; "mobile telephone-national" &#124; "mobile telephone-area-code" &#124; "mobile telephone-local" &#124; "mobile telephone-local-prefix" &#124; "mobile telephone-local-suffix" &#124; "mobile telephone-extension" &#124; "mobile email" &#124; "mobile instant-message" &#124; "fax telephone" &#124; "fax telephone-country-code" &#124; "fax telephone-national" &#124; "fax telephone-area-code" &#124; "fax telephone-local" &#124; "fax telephone-local-prefix" &#124; "fax telephone-local-suffix" &#124; "fax telephone-extension" &#124; "fax email" &#124; "fax instant-message" &#124; "pager telephone" &#124; "pager telephone-country-code" &#124; "pager telephone-national" &#124; "pager telephone-area-code" &#124; "pager telephone-local" &#124; "pager telephone-local-prefix" &#124; "pager telephone-local-suffix" &#124; "pager telephone-extension" &#124; "pager email" &#124; "pager instant-message"</code> | The type of data that should be inserted into a field supporting autocomplete. |
+
+<a name="IconSource"></a>
+
+### IconSource
+
+<code>"arrowLeft" &#124; "arrowRight" &#124; "arrowUp" &#124; "arrowUpRight" &#124; "arrowDown" &#124; "bag" &#124; "calendar" &#124; "camera" &#124; "caretDown" &#124; "cart" &#124; "checkmark" &#124; "chevronDown" &#124; "chevronUp" &#124; "chevronRight" &#124; "chevronLeft" &#124; "close" &#124; "critical" &#124; "discount" &#124; "delivered" &#124; "delivery" &#124; "disabled" &#124; "email" &#124; "errorFill" &#124; "geolocation" &#124; "grid" &#124; "hamburger" &#124; "horizontalDots" &#124; "info" &#124; "infoFill" &#124; "list" &#124; "lock" &#124; "magnify" &#124; "map" &#124; "marker" &#124; "minus" &#124; "mobile" &#124; "note" &#124; "pen" &#124; "verticalDots" &#124; "plus" &#124; "questionFill" &#124; "reorder" &#124; "store" &#124; "success" &#124; "truck" &#124; "warning" &#124; "warningFill" &#124; "giftFill" &#124; "external" &#124; "profile"</code>

package/src/surfaces/checkout/components/PhoneField/examples/basic-phonefield.example.ts

@@ -0,0 +1,10 @@
+import {extend, PhoneField} from '@shopify/ui-extensions/checkout';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const phoneField = root.createComponent(PhoneField, {
+    label: 'Phone',
+    value: '1 (555) 555-5555',
+  });
+
+  root.appendChild(phoneField);
+});

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

@@ -0,0 +1,128 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import {MaybeResponsiveConditionalStyle} from '../../style';
+import type {
+  BlockAlignment,
+  BorderProps,
+  InlineAlignment,
+  SizingProps,
+  SpacingProps,
+  Display,
+  ButtonAccessibilityRole,
+  OverlayActivatorProps,
+} from '../shared';
+import type {ViewProps} from '../View/View';
+
+export interface PressableProps
+  extends BorderProps,
+    SizingProps,
+    SpacingProps,
+    OverlayActivatorProps,
+    Pick<ViewProps, 'opacity'> {
+  /**
+   * Changes the display of the Pressable.
+   *
+   *
+   * `inline` follows the direction of words in a sentence based on the document’s writing mode.
+   *
+   * `block` follows the direction of paragraphs based on the document’s writing mode.
+   *
+   *
+   * @defaultValue 'block'
+   */
+  display?: Display;
+
+  /**
+   * A label that describes the purpose or contents of the element. When set,
+   * it will be announced to buyers using assistive technologies and will
+   * provide them with more context.
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * The role of the button that will be rendered.
+   *
+   * `button`: renders a regular button.
+   *
+   * `submit`: renders a button that submits a form.
+   *
+   * @defaultValue 'button'
+   */
+  accessibilityRole?: ButtonAccessibilityRole;
+
+  /**
+   * Disables the button, disallowing any interaction
+   */
+  disabled?: boolean;
+
+  /**
+   * A unique identifier for the Pressable.
+   */
+  id?: string;
+
+  /**
+   * Disables the button while loading. Unlike `Button`, no indicator is rendered while loading.
+   */
+  loading?: boolean;
+
+  /**
+   * Callback that is run when the button or link is pressed.
+   */
+  onPress?: () => void;
+
+  /**
+   * Callback that is run when the button or link focus is removed.
+   */
+  onBlur?: () => void;
+
+  /**
+   * Callback that is run when the button or link is focused.
+   */
+  onFocus?: () => void;
+
+  /**
+   * Callback that is run when a pointing device button is pressed while the pointer is inside the button or link.
+   */
+  onPointerDown?: () => void;
+
+  /**
+   * Callback that is run when the pointing device is over (enters) the button or link.
+   */
+  onPointerEnter?: () => void;
+
+  /**
+   *  Callback that is run when the pointing device has left the button or link.
+   */
+  onPointerLeave?: () => void;
+
+  /**
+   * Callback that is run when a pointing device button is released while the pointer is inside the element button or link.
+   */
+  onPointerUp?: () => void;
+
+  /**
+   * Destination URL to link to. If this value is set, If this value is set, the component will render an `<a>` tag.
+   */
+  to?: string;
+
+  /**
+   * Position children along the cross axis
+   */
+  blockAlignment?: MaybeResponsiveConditionalStyle<
+    Extract<BlockAlignment, 'start' | 'center' | 'end'>
+  >;
+
+  /**
+   * Position children along the main axis
+   */
+  inlineAlignment?: MaybeResponsiveConditionalStyle<InlineAlignment>;
+}
+
+/**
+ * Pressable is a generic interactive component. It shares the same styling properties as View but also adds
+ * pressable behavior, meaning that you can execute some logic in response to user interaction.
+ * Use this component for creating interactive elements without the default styling that comes with `Button` and `Link`.
+ */
+export const Pressable = createRemoteComponent<'Pressable', PressableProps>(
+  'Pressable',
+);

package/src/surfaces/checkout/components/Pressable/README.md

@@ -0,0 +1,74 @@
+# Pressable
+
+Pressable is a generic interactive component. It shares the same styling properties as View but also adds
+pressable behavior, meaning that you can execute some logic in response to user interaction.
+Use this component for creating interactive elements without the default styling that comes with `Button` and `Link`.
+
+## Props
+
+optional = ?
+
+| Name                | Type                                                                                                                                                                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| display?            | <code>"block" &#124; "inline"</code>                                                                                                                                                                                                                                                                  | Changes the display of the Pressable.<br /><br />`inline` follows the direction of words in a sentence based on the document’s writing mode.<br /><br />`block` follows the direction of paragraphs based on the document’s writing mode.<br /><br />Default value: <code>'block'</code>                                                                                                                                                                                                                                                                                                                               |
+| accessibilityLabel? | <code>string</code>                                                                                                                                                                                                                                                                                   | A label that describes the purpose or contents of the element. When set, it will be announced to buyers using assistive technologies and will provide them with more context.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| accessibilityRole?  | <code>"button" &#124; "submit"</code>                                                                                                                                                                                                                                                                 | The role of the button that will be rendered.<br /><br />`button`: renders a regular button.<br /><br />`submit`: renders a button that submits a form.<br /><br />Default value: <code>'button'</code>                                                                                                                                                                                                                                                                                                                                                                                                                |
+| disabled?           | <code>boolean</code>                                                                                                                                                                                                                                                                                  | Disables the button, disallowing any interaction                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| id?                 | <code>string</code>                                                                                                                                                                                                                                                                                   | A unique identifier for the Pressable.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| loading?            | <code>boolean</code>                                                                                                                                                                                                                                                                                  | Disables the button while loading. Unlike `Button`, no indicator is rendered while loading.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onPress?            | <code>() => void</code>                                                                                                                                                                                                                                                                               | Callback that is run when the button or link is pressed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onBlur?             | <code>() => void</code>                                                                                                                                                                                                                                                                               | Callback that is run when the button or link focus is removed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| onFocus?            | <code>() => void</code>                                                                                                                                                                                                                                                                               | Callback that is run when the button or link is focused.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onPointerDown?      | <code>() => void</code>                                                                                                                                                                                                                                                                               | Callback that is run when a pointing device button is pressed while the pointer is inside the button or link.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| onPointerEnter?     | <code>() => void</code>                                                                                                                                                                                                                                                                               | Callback that is run when the pointing device is over (enters) the button or link.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onPointerLeave?     | <code>() => void</code>                                                                                                                                                                                                                                                                               | Callback that is run when the pointing device has left the button or link.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| onPointerUp?        | <code>() => void</code>                                                                                                                                                                                                                                                                               | Callback that is run when a pointing device button is released while the pointer is inside the element button or link.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| to?                 | <code>string</code>                                                                                                                                                                                                                                                                                   | Destination URL to link to. If this value is set, If this value is set, the component will render an `&lt;a&gt;` tag.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| blockAlignment?     | <code>"start" &#124; "center" &#124; "end" &#124; ConditionalStyle<<wbr>"start" &#124; "center" &#124; "end", AcceptedConditions<wbr>></code>                                                                                                                                                         | Position children along the cross axis                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| inlineAlignment?    | <code><a href="#inlinealignment">InlineAlignment</a> &#124; ConditionalStyle<<wbr><a href="#inlinealignment">InlineAlignment</a>, AcceptedConditions<wbr>></code>                                                                                                                                     | Position children along the main axis                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| border?             | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderstyle">BorderStyle</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderstyle">BorderStyle</a><wbr>>, AcceptedConditions<wbr>></code>     | Adjust the border style.<br /><br />To shorten the code, it is possible to specify all the border style properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border styles are `base`<br /><br />- `['base', 'none']` means blockStart and blockEnd border styles are `base`, inlineStart and inlineEnd border styles are `none`<br /><br />- `['base', 'none', 'dotted', 'base']` means blockStart border style is `base`, inlineEnd border style is `none`, blockEnd border style is `dotted` and blockStart border style is `base`         |
+| borderWidth?        | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderwidth">BorderWidth</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderwidth">BorderWidth</a><wbr>>, AcceptedConditions<wbr>></code>     | Adjust the border width.<br /><br />To shorten the code, it is possible to specify all the border width properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border widths are `base`<br /><br />- `['base', 'medium']` means blockStart and blockEnd border widths are `base`, inlineStart and inlineEnd border widths are `medium`<br /><br />- `['base', 'medium', 'medium', 'base']` means blockStart border width is `base`, inlineEnd border width is `medium`, blockEnd border width is `medium` and blockStart border width is `base` |
+| borderRadius?       | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderradius">BorderRadius</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderradius">BorderRadius</a><wbr>>, AcceptedConditions<wbr>></code> | Adjust the border radius.<br /><br />To shorten the code, it is possible to specify all the border width properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border radii are `base`<br /><br />- `['base', 'none']` means blockStart and blockEnd border radii are `base`, inlineStart and inlineEnd border radii are `none`<br /><br />- `['base', 'none', 'tight', 'base']` means blockStart border radius is `base`, inlineEnd border radius is `none`, blockEnd border radius is `tight` and blockStart border radius is `base`         |
+| maxBlockSize?       | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the maximum block size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| maxInlineSize?      | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the maximum inline size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| minInlineSize?      | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the minimum inline size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| minBlockSize?       | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the block size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| padding?            | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#spacing">Spacing</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#spacing">Spacing</a><wbr>>, AcceptedConditions<wbr>></code>                     | Adjust the padding.<br /><br />To shorten the code, it is possible to specify all the padding properties in one property.<br /><br />Examples:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart paddings are `base`<br /><br />- [`base`, `none`] means blockStart and blockEnd paddings are `base`, inlineStart and inlineEnd paddings are `none`<br /><br />- [`base`, `none`, `loose`, `tight`] means blockStart padding is `base`, inlineEnd padding is `none`, blockEnd padding is `loose` and blockStart padding is `tight`                                                             |
+| overlay?            | <code>RemoteFragment</code>                                                                                                                                                                                                                                                                           | An overlay component to render when the user interacts with the component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| opacity?            | <code>10 &#124; 20 &#124; 30 &#124; 40 &#124; 50 &#124; 60 &#124; 70 &#124; 80 &#124; 90</code>                                                                                                                                                                                                       | Sets the opacity of the View. The opacity will be applied to the background as well as all the children of the View. Use carefully as this could decrease the contrast ratio between the background and foreground elements, resulting in unreadable and inaccessible text.                                                                                                                                                                                                                                                                                                                                            |
+
+<a name="Spacing"></a>
+
+### Spacing
+
+<code>"none" &#124; "extraTight" &#124; "tight" &#124; "base" &#124; "loose" &#124; "extraLoose"</code>
+<a name="BorderRadius"></a>
+
+### BorderRadius
+
+<code>"base" &#124; "tight" &#124; "loose" &#124; "fullyRounded" &#124; "none"</code>
+<a name="BorderWidth"></a>
+
+### BorderWidth
+
+<code>"base" &#124; "medium"</code>
+<a name="MaybeShorthandProperty"></a>
+
+### MaybeShorthandProperty
+
+<code>T &#124; <a href="#shorthandproperty">ShorthandProperty</a><<wbr>T<wbr>></code>
+<a name="ShorthandProperty"></a>
+
+### ShorthandProperty
+
+<code>[T, T] &#124; [T, T, T, T]</code>
+<a name="BorderStyle"></a>
+
+### BorderStyle
+
+<code>"base" &#124; "dotted" &#124; "none"</code>
+<a name="InlineAlignment"></a>
+
+### InlineAlignment
+
+<code>"start" &#124; "center" &#124; "end"</code>

package/src/surfaces/checkout/components/Pressable/examples/basic-pressable.example.ts

@@ -0,0 +1,27 @@
+import {
+  extend,
+  Icon,
+  InlineLayout,
+  Pressable,
+  Text,
+} from '@shopify/ui-extensions/checkout';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const pressable = root.createComponent(
+    Pressable,
+    {
+      border: 'base',
+      borderRadius: 'base',
+      padding: 'base',
+      onPress: () => console.log('onPress event'),
+    },
+    [
+      root.createComponent(InlineLayout, {columns: ['fill', 'auto']}, [
+        root.createComponent(Text, {}, 'Pressable'),
+        root.createComponent(Icon, {source: 'chevronDown', size: 'small'}),
+      ]),
+    ],
+  );
+
+  root.appendChild(pressable);
+});

package/src/surfaces/checkout/components/ScrollView/README.md

@@ -0,0 +1,62 @@
+# ScrollView
+
+ScrollView is a container for long form content, such as order summary line items,
+that allows for scrolling so customers can expose more content as they view.
+
+## Props
+
+optional = ?
+
+| Name              | Type                                                                                                                                                                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| hint?             | <code>"innerShadow" &#124; {type: "pill", content: string}</code>                                                                                                                                                                                                                                     | Provides a hint to the user that the area is scrollable.<br /><br />`pill`: renders a pill with a message at the end of the the scrollable area. It disappear as soon as the user starts scrolling.<br /><br />`innerShadow`: renders an inner visual hint to indicate that the content is scrollable.                                                                                                                                                                                                                                                                                                                 |
+| direction?        | <code>"block" &#124; "inline"</code>                                                                                                                                                                                                                                                                  | The direction on which the content is scrollable.<br /><br />`block`: Indicates that the content is scrollable on the main axis.<br /><br />`inline`: Indicates that the content is scrollable on the cross axis.<br /><br />Default value: <code>block</code>                                                                                                                                                                                                                                                                                                                                                         |
+| scrollTo?         | <code>number &#124; HTMLElement</code>                                                                                                                                                                                                                                                                | Scroll to a specific position or to an element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| onScroll?         | <code>(args: <a href="#scrollviewevent">ScrollViewEvent</a>) => void</code>                                                                                                                                                                                                                           | Callback function that is called when the scroll position changes. Allows to listen to events inside the component returning the position of the scroll.<br /><br />Note: On touch devices, the onScroll event is fired only when the user finishes scrolling which differs from non touch devices, where the onScroll event is fired when the user scrolls                                                                                                                                                                                                                                                            |
+| onScrolledToEdge? | <code>(args: <a href="#scrollviewevent">ScrollViewEvent</a>) => void</code>                                                                                                                                                                                                                           | Callback function that is called when the scroll position reaches one of the edges.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| border?           | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderstyle">BorderStyle</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderstyle">BorderStyle</a><wbr>>, AcceptedConditions<wbr>></code>     | Adjust the border style.<br /><br />To shorten the code, it is possible to specify all the border style properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border styles are `base`<br /><br />- `['base', 'none']` means blockStart and blockEnd border styles are `base`, inlineStart and inlineEnd border styles are `none`<br /><br />- `['base', 'none', 'dotted', 'base']` means blockStart border style is `base`, inlineEnd border style is `none`, blockEnd border style is `dotted` and blockStart border style is `base`         |
+| borderWidth?      | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderwidth">BorderWidth</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderwidth">BorderWidth</a><wbr>>, AcceptedConditions<wbr>></code>     | Adjust the border width.<br /><br />To shorten the code, it is possible to specify all the border width properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border widths are `base`<br /><br />- `['base', 'medium']` means blockStart and blockEnd border widths are `base`, inlineStart and inlineEnd border widths are `medium`<br /><br />- `['base', 'medium', 'medium', 'base']` means blockStart border width is `base`, inlineEnd border width is `medium`, blockEnd border width is `medium` and blockStart border width is `base` |
+| borderRadius?     | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderradius">BorderRadius</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderradius">BorderRadius</a><wbr>>, AcceptedConditions<wbr>></code> | Adjust the border radius.<br /><br />To shorten the code, it is possible to specify all the border width properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border radii are `base`<br /><br />- `['base', 'none']` means blockStart and blockEnd border radii are `base`, inlineStart and inlineEnd border radii are `none`<br /><br />- `['base', 'none', 'tight', 'base']` means blockStart border radius is `base`, inlineEnd border radius is `none`, blockEnd border radius is `tight` and blockStart border radius is `base`         |
+| maxBlockSize?     | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the maximum block size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| maxInlineSize?    | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the maximum inline size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| minInlineSize?    | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the minimum inline size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| minBlockSize?     | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the block size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| padding?          | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#spacing">Spacing</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#spacing">Spacing</a><wbr>>, AcceptedConditions<wbr>></code>                     | Adjust the padding.<br /><br />To shorten the code, it is possible to specify all the padding properties in one property.<br /><br />Examples:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart paddings are `base`<br /><br />- [`base`, `none`] means blockStart and blockEnd paddings are `base`, inlineStart and inlineEnd paddings are `none`<br /><br />- [`base`, `none`, `loose`, `tight`] means blockStart padding is `base`, inlineEnd padding is `none`, blockEnd padding is `loose` and blockStart padding is `tight`                                                             |
+
+<a name="Spacing"></a>
+
+### Spacing
+
+<code>"none" &#124; "extraTight" &#124; "tight" &#124; "base" &#124; "loose" &#124; "extraLoose"</code>
+<a name="BorderRadius"></a>
+
+### BorderRadius
+
+<code>"base" &#124; "tight" &#124; "loose" &#124; "fullyRounded" &#124; "none"</code>
+<a name="BorderWidth"></a>
+
+### BorderWidth
+
+<code>"base" &#124; "medium"</code>
+<a name="MaybeShorthandProperty"></a>
+
+### MaybeShorthandProperty
+
+<code>T &#124; <a href="#shorthandproperty">ShorthandProperty</a><<wbr>T<wbr>></code>
+<a name="ShorthandProperty"></a>
+
+### ShorthandProperty
+
+<code>[T, T] &#124; [T, T, T, T]</code>
+<a name="BorderStyle"></a>
+
+### BorderStyle
+
+<code>"base" &#124; "dotted" &#124; "none"</code><a name="ScrollViewEvent"></a>
+
+### ScrollViewEvent
+
+| Name       | Type                                                                                             | Description                                                         |
+| ---------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------- |
+| position   | <code>{inline: number, block: number}</code>                                                     | The current scroll position, in pixels.                             |
+| scrolledTo | <code>{inline: "start" &#124; "end" &#124; null, block: "start" &#124; "end" &#124; null}</code> | A flag to indicate if the scroll is at the start or end of an axis. |

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

@@ -0,0 +1,76 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import {BorderProps, SizingProps, SpacingProps} from '../shared';
+
+export interface ScrollViewEvent {
+  /**
+   * The current scroll position, in pixels.
+   */
+  position: {
+    /** The current scroll horizontal position, in pixels.*/
+    inline: number;
+    /** The current scroll vertical position, in pixels.*/
+    block: number;
+  };
+  /**
+   * A flag to indicate if the scroll is at the start or end of an axis.
+   */
+  scrolledTo: {
+    /** A flag to indicate if the scroll is at the start or end of cross axis. */
+    inline: 'start' | 'end' | null;
+    /** A flag to indicate if the scroll is at the start or end of main axis. */
+    block: 'start' | 'end' | null;
+  };
+}
+
+export interface ScrollViewProps
+  extends BorderProps,
+    SizingProps,
+    SpacingProps {
+  /**
+   * Provides a hint to the user that the area is scrollable.
+   *
+   * `pill`: renders a pill with a message at the end of the the scrollable area. It disappear as soon as the user starts scrolling.
+   *
+   * `innerShadow`: renders an inner visual hint to indicate that the content is scrollable.
+   */
+  hint?: 'innerShadow' | {type: 'pill'; content: string};
+  /**
+   * The direction on which the content is scrollable.
+   *
+   * `block`:
+   * Indicates that the content is scrollable on the main axis.
+   *
+   * `inline`:
+   * Indicates that the content is scrollable on the cross axis.
+   *
+   * @defaultValue block
+   */
+  direction?: 'block' | 'inline';
+  /**
+   * Scroll to a specific position or to an element.
+   */
+  scrollTo?: number | HTMLElement;
+  /**
+   * Callback function that is called when the scroll position changes.
+   * Allows to listen to events inside the component
+   * returning the position of the scroll.
+   *
+   * Note:
+   * On touch devices, the onScroll event is fired only when the user finishes scrolling
+   * which differs from non touch devices, where the onScroll event is fired when the user scrolls
+   */
+  onScroll?: (args: ScrollViewEvent) => void;
+  /**
+   * Callback function that is called when the scroll position reaches one of the edges.
+   */
+  onScrolledToEdge?: (args: ScrollViewEvent) => void;
+}
+
+/**
+ * ScrollView is a container for long form content, such as order summary line items,
+ * that allows for scrolling so customers can expose more content as they view.
+ */
+export const ScrollView = createRemoteComponent<'ScrollView', ScrollViewProps>(
+  'ScrollView',
+);