@shopify/ui-extensions 0.0.0-internal-20230622171951

package/build/ts/surfaces/checkout/components/ScrollView/ScrollView.d.ts

@@ -0,0 +1,75 @@
+/// <reference types="react" />
+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 declare const ScrollView: "ScrollView" & {
+    readonly type?: "ScrollView" | undefined;
+    readonly props?: ScrollViewProps | undefined; /** The current scroll horizontal position, in pixels.*/
+    readonly children?: true | undefined;
+};
+//# sourceMappingURL=ScrollView.d.ts.map

package/build/ts/surfaces/checkout/components/ScrollView/ScrollView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/checkout/components/ScrollView/ScrollView.ts"],"names":[],"mappings":";AAEA,OAAO,EAAC,WAAW,EAAE,WAAW,EAAE,YAAY,EAAC,MAAM,WAAW,CAAC;AAEjE,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,QAAQ,EAAE;QACR,wDAAwD;QACxD,MAAM,EAAE,MAAM,CAAC;QACf,sDAAsD;QACtD,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF;;OAEG;IACH,UAAU,EAAE;QACV,6EAA6E;QAC7E,MAAM,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;QAC/B,4EAA4E;QAC5E,KAAK,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;KAC/B,CAAC;CACH;AAED,MAAM,WAAW,eACf,SAAQ,WAAW,EACjB,WAAW,EACX,YAAY;IACd;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,aAAa,GAAG;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAC,CAAC;IACvD;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAChC;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CACpD;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU;;kDAhEnB,wDAAwD;;CAkE3D,CAAC"}

package/build/ts/surfaces/checkout/components/Select/Select.d.ts

@@ -0,0 +1,98 @@
+import { Autocomplete } from '../shared';
+interface Option {
+    /**
+     * The value that will be passed to the select’s `onChange` callback
+     * when this option is selected.
+     */
+    value: string;
+    /**
+     * The buyer-facing label for this option.
+     */
+    label: string;
+    /**
+     * Whether this option can be selected or not.
+     */
+    disabled?: boolean;
+}
+export interface SelectProps {
+    /**
+     * A unique identifier for the field. When no `id` is set,
+     * a globally unique value will be used instead.
+     */
+    id?: string;
+    /**
+     * Content to use as the field label.
+     */
+    label: string;
+    /**
+     * An identifier for the field that is unique within the nearest
+     * containing `Form` component.
+     */
+    name?: string;
+    /**
+     * The active option for the select. This should match to one of the
+     * `value` properties in the `options` prop. When not set,
+     * the value will default to an empty string, which will show the
+     * `placeholder` text as the "selected value".
+     */
+    value?: string;
+    /**
+     * The options a buyer can select from.
+     */
+    options: Option[];
+    /**
+     * 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.
+     */
+    required?: boolean;
+    /**
+     * Whether the select can be changed.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the field is read only
+     */
+    readonly?: boolean;
+    /**
+     * Indicate an error to the user. The field will be given a specific stylistic treatment
+     * to communicate problems that have to be resolved immediately.
+     */
+    error?: string;
+    /**
+     * A hint as to the intended content of the field.
+     *
+     * 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.
+     *
+     * When set to `false`, you are indicating that this field contains sensitive
+     * information, or contents that are never saved, like one-time codes. Note that
+     * it is impossible to prevent autocomplete in some browsers, so do not depend on
+     * its absence.
+     *
+     * Alternatively, you can provide an `Autocomplete` object, which describes the
+     * specific data you would like to be entered into this field during autocomplete.
+     */
+    autocomplete?: Autocomplete | boolean;
+    /**
+     * A callback that is run whenever the selected option changes. This callback
+     * is called with the string `value` of the selected `option`. This component
+     * is [controlled](https://reactjs.org/docs/forms.html#controlled-components),
+     * so you must store this value in state and reflect it back in the `value`
+     * prop of the select.
+     */
+    onChange?(value: string): void;
+}
+/**
+ * Selects let buyers choose one option from an options menu. Consider select
+ * when you have 4 or more options, to avoid cluttering the interface.
+ */
+export declare const Select: "Select" & {
+    readonly type?: "Select" | undefined;
+    readonly props?: SelectProps | undefined;
+    readonly children?: true | undefined;
+};
+export {};
+//# sourceMappingURL=Select.d.ts.map

package/build/ts/surfaces/checkout/components/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/checkout/components/Select/Select.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;AAEvC,UAAU,MAAM;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;;OAcG;IACH,YAAY,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;IACtC;;;;;;OAMG;IACH,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM;;;;CAAyD,CAAC"}

package/build/ts/surfaces/checkout/components/SkeletonImage/SkeletonImage.d.ts

@@ -0,0 +1,25 @@
+import { MaybeResponsiveConditionalStyle } from '../../style';
+export interface SkeletonImageProps {
+    /**
+     * Adjust the block size of the skeleton.
+     */
+    blockSize?: MaybeResponsiveConditionalStyle<number | `${number}%` | 'fill'>;
+    /**
+     * Adjust the inline size of the skeleton.
+     */
+    inlineSize?: MaybeResponsiveConditionalStyle<number | `${number}%` | 'fill'>;
+    /**
+     * Displays the skeleton at the specified aspect ratio (fills the width of the
+     * parent container and sets the height accordingly).
+     */
+    aspectRatio?: number;
+}
+/**
+ * SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page.
+ */
+export declare const SkeletonImage: "SkeletonImage" & {
+    readonly type?: "SkeletonImage" | undefined;
+    readonly props?: SkeletonImageProps | undefined;
+    readonly children?: true | undefined;
+};
+//# sourceMappingURL=SkeletonImage.d.ts.map

package/build/ts/surfaces/checkout/components/SkeletonImage/SkeletonImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonImage.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/checkout/components/SkeletonImage/SkeletonImage.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,+BAA+B,EAAC,MAAM,aAAa,CAAC;AAE5D,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,+BAA+B,CAAC,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC;IAE5E;;OAEG;IACH,UAAU,CAAC,EAAE,+BAA+B,CAAC,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC;IAE7E;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AACD;;GAEG;AACH,eAAO,MAAM,aAAa;;;;CAGR,CAAC"}

package/build/ts/surfaces/checkout/components/SkeletonText/SkeletonText.d.ts

@@ -0,0 +1,21 @@
+import type { Size } from '../shared';
+import type { TextProps } from '../Text/Text';
+export interface SkeletonTextProps extends Pick<TextProps, 'size'> {
+    /**
+     * Use to emphasize a word or a group of words.
+     */
+    emphasis?: 'bold';
+    /**
+     * Adjust the length of the text when no children are passed.
+     */
+    inlineSize?: Extract<Size, 'small' | 'base' | 'large'>;
+}
+/**
+ * SkeletonText is used to provide a low fidelity representation of text content before it appears on the page.
+ */
+export declare const SkeletonText: "SkeletonText" & {
+    readonly type?: "SkeletonText" | undefined;
+    readonly props?: SkeletonTextProps | undefined;
+    readonly children?: true | undefined;
+};
+//# sourceMappingURL=SkeletonText.d.ts.map

package/build/ts/surfaces/checkout/components/SkeletonText/SkeletonText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/checkout/components/SkeletonText/SkeletonText.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AACpC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;CACxD;AAED;;GAEG;AACH,eAAO,MAAM,YAAY;;;;CAGR,CAAC"}

package/build/ts/surfaces/checkout/components/SkeletonTextBlock/SkeletonTextBlock.d.ts

@@ -0,0 +1,22 @@
+import type { TextBlockProps } from '../TextBlock/TextBlock';
+export interface SkeletonTextBlockProps extends Pick<TextBlockProps, 'size'> {
+    /**
+     * Use to emphasize a word or a group of words.
+     */
+    emphasis?: 'bold';
+    /**
+     * Number of lines to display when no children are passed.
+     *
+     * @defaultValue 1
+     */
+    lines?: number;
+}
+/**
+ * SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page.
+ */
+export declare const SkeletonTextBlock: "SkeletonTextBlock" & {
+    readonly type?: "SkeletonTextBlock" | undefined;
+    readonly props?: SkeletonTextBlockProps | undefined;
+    readonly children?: true | undefined;
+};
+//# sourceMappingURL=SkeletonTextBlock.d.ts.map

package/build/ts/surfaces/checkout/components/SkeletonTextBlock/SkeletonTextBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonTextBlock.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/checkout/components/SkeletonTextBlock/SkeletonTextBlock.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAE3D,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC;IAC1E;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;CAGR,CAAC"}

package/build/ts/surfaces/checkout/components/Spinner/Spinner.d.ts

@@ -0,0 +1,32 @@
+import type { Size, Appearance } from '../shared';
+export interface SpinnerProps {
+    /**
+     * Adjusts the size of the icon.
+     *
+     * @defaultValue 'base'
+     */
+    size?: Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'fill'>;
+    /**
+     * Sets the appearance (color) of the icon.
+     *
+     * @defaultValue 'accent'
+     */
+    appearance?: Extract<Appearance, 'accent' | 'monochrome'>;
+    /**
+     * A label to use for the Spinner that will be used for buyers using
+     * assistive technologies like screen readers. If will also be used to replace
+     * the animated loading indicator when buyers prefers reduced motion. If not included,
+     * it will use the loading indicator for all buyers.
+     */
+    accessibilityLabel?: string;
+}
+/**
+ * Spinner is used to notify buyers that their action is being processed.
+ * The Spinner is usually used when sending or receiving data from a server.
+ */
+export declare const Spinner: "Spinner" & {
+    readonly type?: "Spinner" | undefined;
+    readonly props?: SpinnerProps | undefined;
+    readonly children?: true | undefined;
+};
+//# sourceMappingURL=Spinner.d.ts.map

package/build/ts/surfaces/checkout/components/Spinner/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/checkout/components/Spinner/Spinner.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,WAAW,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;IAEzE;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,EAAE,QAAQ,GAAG,YAAY,CAAC,CAAC;IAE1D;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;CAEnB,CAAC"}

package/build/ts/surfaces/checkout/components/Stepper/Stepper.d.ts

@@ -0,0 +1,42 @@
+import type { TextFieldProps } from '../TextField/TextField';
+import type { IconSource } from '../Icon/Icon';
+export interface StepperProps extends Pick<TextFieldProps<number | undefined>, 'id' | 'name' | 'label' | 'prefix' | 'accessibilityDescription' | 'required' | 'error' | 'disabled' | 'readonly' | 'value' | 'onFocus' | 'onBlur' | 'onInput' | 'onChange'> {
+    /**
+     * An icon to render at the start of the field.
+     */
+    icon?: IconSource;
+    /**
+     * The highest decimal or integer to be accepted for the stepper field.
+     * When used with `step` the value will round down to the max number.
+     * Note: a buyer will still be able to use the keyboard to input a number higher than
+     * the max. It is up to the developer to add appropriate validation.
+     */
+    max?: number;
+    /**
+     * The lowest decimal or integer to be accepted for the stepper field.
+     * When used with `step` the value will round up to the min number.
+     * Note: a buyer will still be able to use the keyboard to input a number lower than
+     * the min. It is up to the developer to add appropriate validation.
+     *
+     * @defaultValue 0
+     */
+    min?: number;
+    /**
+     * The amount the value can increase or decrease by. This can be an integer or decimal.
+     * If a `max` or `min` is specified with `step` when increasing/decreasing the value
+     * via the stepper buttons the final value will always round to the `max` or `min`
+     * rather than the closest valid amount.
+     *
+     * @defaultValue 1
+     */
+    step?: number;
+}
+/**
+ * Use a stepper to increase or decrease a value, like changing the quantity from 1 to 2.
+ */
+export declare const Stepper: "Stepper" & {
+    readonly type?: "Stepper" | undefined;
+    readonly props?: StepperProps | undefined;
+    readonly children?: true | undefined;
+};
+//# sourceMappingURL=Stepper.d.ts.map

package/build/ts/surfaces/checkout/components/Stepper/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/checkout/components/Stepper/Stepper.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,YACf,SAAQ,IAAI,CACV,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,EAChC,IAAI,GACJ,MAAM,GACN,OAAO,GACP,QAAQ,GACR,0BAA0B,GAC1B,UAAU,GACV,OAAO,GACP,UAAU,GACV,UAAU,GACV,OAAO,GACP,SAAS,GACT,QAAQ,GACR,SAAS,GACT,UAAU,CACb;IACD;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,OAAO;;;;CAEnB,CAAC"}

package/build/ts/surfaces/checkout/components/Tag/Tag.d.ts

@@ -0,0 +1,31 @@
+import type { IconSource } from '../Icon/Icon';
+export interface TagProps {
+    children?: string;
+    /**
+     * Icon source
+     */
+    icon?: IconSource;
+    /**
+     * A label used for buyers using assistive technologies. When set, any
+     * `children` supplied to this component are hidden from being seen for
+     * accessibility purposes to prevent duplicate content from being read.
+     */
+    accessibilityLabel?: string;
+    /**
+     * Callback when tag is removed
+     */
+    onRemove?(): void;
+}
+/**
+ * A Tag is used to help label, organize or categorize objects. It is commonly used in Checkout to display the discounts applied to a cart.
+ */
+export declare const Tag: "Tag" & {
+    readonly type?: "Tag" | undefined; /**
+     * A label used for buyers using assistive technologies. When set, any
+     * `children` supplied to this component are hidden from being seen for
+     * accessibility purposes to prevent duplicate content from being read.
+     */
+    readonly props?: TagProps | undefined;
+    readonly children?: true | undefined;
+};
+//# sourceMappingURL=Tag.d.ts.map

package/build/ts/surfaces/checkout/components/Tag/Tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/checkout/components/Tag/Tag.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,IAAI,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,GAAG;uCAfd;;;;OAIG;;;CAW2D,CAAC"}

package/build/ts/surfaces/checkout/components/Text/Text.d.ts

@@ -0,0 +1,34 @@
+import type { TextAccessibilityRole, Emphasis, Size, Appearance, VisibilityProps } from '../shared';
+export interface TextProps extends VisibilityProps {
+    /**
+     * Size of the text
+     */
+    size?: Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge'> | 'medium';
+    /**
+     * Use to emphasize a word or a group of words.
+     */
+    emphasis?: Emphasis;
+    /**
+     * Set the semantic of the component’s content
+     */
+    accessibilityRole?: TextAccessibilityRole;
+    /**
+     * Unique identifier. Typically used as a target for another component’s controls
+     * to associate an accessible label with an action.
+     */
+    id?: string;
+    /**
+     * Changes the visual appearance
+     */
+    appearance?: Extract<Appearance, 'accent' | 'subdued' | 'info' | 'success' | 'warning' | 'critical'>;
+}
+/**
+ * Text is used to visually style and provide semantic value for a small piece of text
+ * content.
+ */
+export declare const Text: "Text" & {
+    readonly type?: "Text" | undefined;
+    readonly props?: TextProps | undefined;
+    readonly children?: true | undefined;
+};
+//# sourceMappingURL=Text.d.ts.map

package/build/ts/surfaces/checkout/components/Text/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/checkout/components/Text/Text.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,qBAAqB,EACrB,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,eAAe,EAChB,MAAM,WAAW,CAAC;AAEnB,MAAM,WAAW,SAAU,SAAQ,eAAe;IAChD;;OAEG;IACH,IAAI,CAAC,EACD,OAAO,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,YAAY,CAAC,GACvE,QAAQ,CAAC;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAClB,UAAU,EACV,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CACnE,CAAC;CACH;AAED;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;CAAmD,CAAC"}

package/build/ts/surfaces/checkout/components/TextBlock/TextBlock.d.ts

@@ -0,0 +1,32 @@
+import type { InlineAlignment, Emphasis, Size, Appearance } from '../shared';
+export interface TextBlockProps {
+    /**
+     * Size of the text
+     */
+    size?: Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge'> | 'medium';
+    /**
+     * Use to emphasize a word or a group of words.
+     */
+    emphasis?: Emphasis;
+    /**
+     * Unique identifier
+     */
+    id?: string;
+    /**
+     * Changes the visual appearance
+     */
+    appearance?: Extract<Appearance, 'accent' | 'subdued' | 'info' | 'success' | 'warning' | 'critical'>;
+    /**
+     * Align text along the main axis.
+     */
+    inlineAlignment?: InlineAlignment;
+}
+/**
+ * Text block is used to render a block of text that occupies the full width available, like a paragraph.
+ */
+export declare const TextBlock: "TextBlock" & {
+    readonly type?: "TextBlock" | undefined;
+    readonly props?: TextBlockProps | undefined;
+    readonly children?: true | undefined;
+};
+//# sourceMappingURL=TextBlock.d.ts.map

package/build/ts/surfaces/checkout/components/TextBlock/TextBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextBlock.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/checkout/components/TextBlock/TextBlock.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,eAAe,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAC,MAAM,WAAW,CAAC;AAE3E,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,IAAI,CAAC,EACD,OAAO,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,YAAY,CAAC,GACvE,QAAQ,CAAC;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAClB,UAAU,EACV,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CACnE,CAAC;IACF;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC;AAED;;GAEG;AACH,eAAO,MAAM,SAAS;;;;CAErB,CAAC"}

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

@@ -0,0 +1,175 @@
+import { RemoteFragment } from '@remote-ui/core';
+import type { Autocomplete } from '../shared';
+import type { IconSource } from '../Icon/Icon';
+type Type = 'text' | 'email' | 'number' | 'telephone';
+export interface TextFieldProps<T extends string | number | undefined> {
+    /**
+     * A unique identifier for the field. When no `id` is set,
+     * a globally unique value will be used instead.
+     */
+    id?: string;
+    /**
+     * An icon to render at the start or end of the field.
+     * It will render at the start by default.
+     */
+    icon?: IconSource | {
+        source: IconSource;
+        position?: 'start' | 'end';
+    };
+    /**
+     * An identifier for the field that is unique within the nearest
+     * containing `Form` component.
+     */
+    name?: string;
+    /**
+     * Content to use as the field label. This value is also used as the placeholder
+     * when the field is empty.
+     */
+    label: string;
+    /**
+     * Text content to render before the value.
+     */
+    prefix?: string;
+    /**
+     * Text content to render at the end of the text field.
+     */
+    suffix?: string;
+    /**
+     * 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.
+     */
+    accessory?: string | RemoteFragment;
+    /**
+     * A detailed description for screen readers.
+     */
+    accessibilityDescription?: string;
+    /**
+     * The current value for the field. If omitted, the field will be empty. You should
+     * update this value in response to the `onChange` callback.
+     */
+    value?: T;
+    /**
+     * In rare cases, like the PhoneField component, we completely control state.
+     * In those cases, there is never a difference between the `value` prop of the field
+     * and the current value in the field, and so this component never considers the
+     * field to have changed. Use the `controlledValue` prop to provide the value that
+     * should be shown to the buyer in those circumstances, but where the `value` prop
+     * will continue to be used as the comparison value to determine whether the field
+     * has changed. This value will usually be set to the last committed, unformatted value
+     * for the controlled input.
+     */
+    controlledValue?: T;
+    /**
+     * The content type a buyer will enter into the field. This type is used to provide
+     * semantic value to the field and, where possible, will provide the buyer with
+     * a better editing experience for the content type.
+     *
+     * Note that the type property does not change the way the text field’s value will
+     * be provided in `onChange` or `onInput`; a text field with a type of `'number'`
+     * will still provide the exact user entry, as a string, to those callbacks. The
+     * type also does not perform any form of automatic validation. If you want to
+     * perform validation, use the `error` property.
+     */
+    type?: Type;
+    /**
+     * 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.
+     */
+    required?: boolean;
+    /**
+     * Indicate an error to the user. The field will be given a specific stylistic treatment
+     * to communicate problems that have to be resolved immediately.
+     */
+    error?: string;
+    /**
+     * Whether the field supports multiple lines of input.
+     * Set a `number` to define the default lines of the input.
+     */
+    multiline?: boolean | number;
+    /**
+     * A hint as to the intended content of the field.
+     *
+     * 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.
+     *
+     * When set to `false`, you are indicating that this field contains sensitive
+     * information, or contents that are never saved, like one-time codes.
+     *
+     * Alternatively, you can provide an `Autocomplete` object, which describes the
+     * specific data you would like to be entered into this field during autofill.
+     */
+    autocomplete?: Autocomplete | boolean;
+    /**
+     * Whether the field can be modified.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the field is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Specifies the maximum number of characters allowed.
+     */
+    maxLength?: number;
+    /**
+     * Callback when input is focused.
+     */
+    onFocus?(): void;
+    /**
+     * Callback when focus is removed.
+     */
+    onBlur?(): void;
+    /**
+     * Callback when the buyer has **finished editing** a field. 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. Text 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 text field’s `value` property.
+     *
+     * 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.
+     *
+     * 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`.
+     *
+     * This callback is called with the current 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.
+     */
+    onChange?(value: T): void;
+    /**
+     * Callback when the user makes any changes in the field. 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.
+     *
+     * This callback is called with the current value of the field.
+     */
+    onInput?(value: T): void;
+}
+/**
+ * Use a text field to get text input from a customer.
+ */
+export declare const TextField: "TextField" & {
+    readonly type?: "TextField" | undefined;
+    readonly props?: TextFieldProps<string> | undefined;
+    readonly children?: true | undefined;
+};
+export {};
+//# sourceMappingURL=TextField.d.ts.map

package/build/ts/surfaces/checkout/components/TextField/TextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/checkout/components/TextField/TextField.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,cAAc,EAAC,MAAM,iBAAiB,CAAC;AAEtE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;AAC5C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C,KAAK,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAC;AAEtD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS;IACnE;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG;QAAC,MAAM,EAAE,UAAU,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;KAAC,CAAC;IACrE;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IACpC;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,CAAC,CAAC;IACpB;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAC1B;;;;;;;;OAQG;IACH,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,SAAS;;;;CAGR,CAAC"}