@shopify/ui-extensions 2.0.0-alpha.2 → 2022.10.1

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/Tag/examples/basic-tag.example.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=basic-tag.example.d.ts.map

package/build/ts/surfaces/checkout/components/Tag/examples/basic-tag.example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-tag.example.d.ts","sourceRoot":"","sources":["../../../../../../../src/surfaces/checkout/components/Tag/examples/basic-tag.example.ts"],"names":[],"mappings":""}

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/Text/examples/basic-text.example.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=basic-text.example.d.ts.map

package/build/ts/surfaces/checkout/components/Text/examples/basic-text.example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-text.example.d.ts","sourceRoot":"","sources":["../../../../../../../src/surfaces/checkout/components/Text/examples/basic-text.example.ts"],"names":[],"mappings":""}

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/TextBlock/examples/basic-textblock.example.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=basic-textblock.example.d.ts.map

package/build/ts/surfaces/checkout/components/TextBlock/examples/basic-textblock.example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-textblock.example.d.ts","sourceRoot":"","sources":["../../../../../../../src/surfaces/checkout/components/TextBlock/examples/basic-textblock.example.ts"],"names":[],"mappings":""}

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"}

package/build/ts/surfaces/checkout/components/TextField/examples/basic-textfield.example.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=basic-textfield.example.d.ts.map

package/build/ts/surfaces/checkout/components/TextField/examples/basic-textfield.example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-textfield.example.d.ts","sourceRoot":"","sources":["../../../../../../../src/surfaces/checkout/components/TextField/examples/basic-textfield.example.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,16 @@
+export interface TooltipProps {
+}
+/**
+ * Tooltips are floating labels that briefly explain the function of a user interface element.
+ * They must be specified inside the `overlay` prop of an activator component.
+ * Currently, activator components are `Button`, `Link`, and `Pressable`.
+ *
+ * The library takes care of applying the WAI-ARIA Tooltip Widget pattern automatically for the activator
+ * and the tooltip content. Expect screen readers to read the tooltip content when the user focuses the activator.
+ */
+export declare const Tooltip: "Tooltip" & {
+    readonly type?: "Tooltip" | undefined;
+    readonly props?: TooltipProps | undefined;
+    readonly children?: true | undefined;
+};
+//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/checkout/components/Tooltip/Tooltip.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;CAAG;AAEhC;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO;;;;CAEnB,CAAC"}

package/build/ts/surfaces/checkout/components/Tooltip/examples/basic-tooltip.example.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=basic-tooltip.example.d.ts.map

package/build/ts/surfaces/checkout/components/Tooltip/examples/basic-tooltip.example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-tooltip.example.d.ts","sourceRoot":"","sources":["../../../../../../../src/surfaces/checkout/components/Tooltip/examples/basic-tooltip.example.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,169 @@
+import { MaybeResponsiveConditionalStyle } from '../../style';
+import type { BlockAlignment, BorderProps, InlineAlignment, SizingProps, SpacingProps, VisibilityProps, Display, MultiPick, ViewLikeAccessibilityRole } from '../shared';
+type AccessibilityVisibility = 'hidden';
+type Opacity = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
+export type PositionType = 'absolute' | 'relative' | 'sticky';
+export type Coordinate = number | `${number}%`;
+interface BaseCoordinates {
+    /**
+     * Adjust the block start offset.
+     *
+     * `number`: size in pixels.
+     *
+     * `` `${number}%` ``: size in percentages. It refers to the block size of the parent component.
+     */
+    blockStart: Coordinate;
+    /**
+     * Adjust the inline start offset.
+     *
+     * `number`: size in pixels.
+     *
+     * `` `${number}%` ``: size in percentages. It refers to the block size of the parent component.
+     */
+    inlineStart: Coordinate;
+    /**
+     * Adjust the block end offset.
+     *
+     * `number`: size in pixels.
+     *
+     * `` `${number}%` ``: size in percentages. It refers to the block size of the parent component.
+     */
+    blockEnd: Coordinate;
+    /**
+     * Adjust the inline end offset.
+     *
+     * `number`: size in pixels.
+     *
+     * `` `${number}%` ``: size in percentages. It refers to the block size of the parent component.
+     */
+    inlineEnd: Coordinate;
+}
+type PositionCoordinates = MultiPick<BaseCoordinates, [
+    'blockStart' | 'inlineStart',
+    'blockStart' | 'inlineEnd',
+    'blockEnd' | 'inlineStart',
+    'blockEnd' | 'inlineEnd',
+    'blockStart',
+    'blockEnd',
+    'inlineStart',
+    'inlineEnd'
+]>;
+export type Position = {
+    /**
+     * Changes how the View is positioned. For setting the position, only properties
+     * that set the offset on a different axis can be set simultaneously. This means
+     * that these combinations are not allowed:
+     *
+     * ```
+     * { blockStart, blockEnd }
+     * ```
+     *
+     * ```
+     * { inlineStart, inlineEnd }
+     * ```
+     *
+     * @defaultValue 'relative'
+     */
+    type?: PositionType;
+} & PositionCoordinates;
+export interface Translate {
+    /**
+     * Adjust the translation on the cross axis.
+     *
+     * A percentage value refers to the block size of the View.
+     */
+    block?: number | `${number}%`;
+    /**
+     * Adjust the translation on the main axis.
+     *
+     * A percentage value refers to the inline size of the View.
+     */
+    inline?: number | `${number}%`;
+}
+export interface ViewProps extends BorderProps, SizingProps, SpacingProps, VisibilityProps {
+    /**
+     * Changes the visibility of the element to assistive technologies.
+     *
+     * `hidden` hides the component from assistive technology (for example,
+     * a screen reader) but remains visually visible.
+     */
+    accessibilityVisibility?: AccessibilityVisibility;
+    /**
+     * Changes the display of the View.
+     *
+     *
+     * `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 unique identifier for the View.
+     */
+    id?: string;
+    /**
+     * 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.
+     */
+    opacity?: Opacity;
+    /**
+     * 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;
+    /**
+     * Sets the semantic meaning of the component’s content. When set,
+     * the role will be used by assistive technologies to help buyers
+     * navigate the page.
+     *
+     *
+     * For example:
+     *
+     * - In an HTML host a `['listItem', 'separator']` tuple will render: <li role='separator'>
+     *
+     * - In an HTML host a `listItem` string will render: <li>
+     */
+    accessibilityRole?: ViewLikeAccessibilityRole;
+    /**
+     * Changes how the View is positioned.
+     */
+    position?: MaybeResponsiveConditionalStyle<Position>;
+    /**
+     * Specifies a two-dimensional translation of the View.
+     */
+    translate?: MaybeResponsiveConditionalStyle<Translate>;
+    /**
+     * Position children along the cross axis
+     */
+    blockAlignment?: MaybeResponsiveConditionalStyle<Extract<BlockAlignment, 'start' | 'center' | 'end'>>;
+    /**
+     * Position children along the main axis
+     */
+    inlineAlignment?: MaybeResponsiveConditionalStyle<InlineAlignment>;
+    /**
+     * Adjust the inline size.
+     *
+     * `fill`: takes all the available space.
+     */
+    inlineSize?: MaybeResponsiveConditionalStyle<'fill'>;
+}
+/**
+ *  View is a generic container component. Its contents will always be their
+ * “natural” size, so this component can be useful in layout components (like `Grid`,
+ * `BlockStack`, `InlineStack`) that would otherwise stretch their children to fit.
+ *
+ * Note: View’s box model related properties like `padding`, `border`, `borderRadius`, and `borderColor` are implemented as
+ * [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts).
+ */
+export declare const View: "View" & {
+    readonly type?: "View" | undefined;
+    readonly props?: ViewProps | undefined;
+    readonly children?: true | undefined;
+};
+export {};
+//# sourceMappingURL=View.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/checkout/components/View/View.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,+BAA+B,EAAC,MAAM,aAAa,CAAC;AAC5D,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EACX,eAAe,EACf,WAAW,EACX,YAAY,EACZ,eAAe,EACf,OAAO,EACP,SAAS,EACT,yBAAyB,EAC1B,MAAM,WAAW,CAAC;AAEnB,KAAK,uBAAuB,GAAG,QAAQ,CAAC;AAExC,KAAK,OAAO,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE1D,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC;AAC/C,UAAU,eAAe;IACvB;;;;;;OAMG;IACH,UAAU,EAAE,UAAU,CAAC;IACvB;;;;;;OAMG;IACH,WAAW,EAAE,UAAU,CAAC;IACxB;;;;;;OAMG;IACH,QAAQ,EAAE,UAAU,CAAC;IACrB;;;;;;OAMG;IACH,SAAS,EAAE,UAAU,CAAC;CACvB;AAED,KAAK,mBAAmB,GAAG,SAAS,CAClC,eAAe,EACf;IACE,YAAY,GAAG,aAAa;IAC5B,YAAY,GAAG,WAAW;IAC1B,UAAU,GAAG,aAAa;IAC1B,UAAU,GAAG,WAAW;IACxB,YAAY;IACZ,UAAU;IACV,aAAa;IACb,WAAW;CACZ,CACF,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB;;;;;;;;;;;;;;OAcG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB,GAAG,mBAAmB,CAAC;AAExB,MAAM,WAAW,SAAS;IACxB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC;IAC9B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC;CAChC;AAED,MAAM,WAAW,SACf,SAAQ,WAAW,EACjB,WAAW,EACX,YAAY,EACZ,eAAe;IACjB;;;;;OAKG;IACH,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;IAElD;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;;;;;;;;OAWG;IACH,iBAAiB,CAAC,EAAE,yBAAyB,CAAC;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,+BAA+B,CAAC,QAAQ,CAAC,CAAC;IACrD;;OAEG;IACH,SAAS,CAAC,EAAE,+BAA+B,CAAC,SAAS,CAAC,CAAC;IACvD;;OAEG;IACH,cAAc,CAAC,EAAE,+BAA+B,CAC9C,OAAO,CAAC,cAAc,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC,CACpD,CAAC;IACF;;OAEG;IACH,eAAe,CAAC,EAAE,+BAA+B,CAAC,eAAe,CAAC,CAAC;IACnE;;;;OAIG;IACH,UAAU,CAAC,EAAE,+BAA+B,CAAC,MAAM,CAAC,CAAC;CACtD;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,IAAI;;;;CAAmD,CAAC"}

package/build/ts/surfaces/checkout/components/View/examples/basic-view.example.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=basic-view.example.d.ts.map

package/build/ts/surfaces/checkout/components/View/examples/basic-view.example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-view.example.d.ts","sourceRoot":"","sources":["../../../../../../../src/surfaces/checkout/components/View/examples/basic-view.example.ts"],"names":[],"mappings":""}