@shopify/ui-extensions - npm Package Compare versions

Comparing version 0.0.0-unstable-20230602162636 to 0.0.0-unstable-20230628141448

build/cjs/surfaces/admin.js

@@ -6,27 +6,15 @@ 'use strict';
 var extension = require('./admin/extension.js');
-var Badge = require('./admin/components/Badge/Badge.js');
-var Banner = require('./admin/components/Banner/Banner.js');
-var BlockStack = require('./admin/components/BlockStack/BlockStack.js');
-var Button = require('./admin/components/Button/Button.js');
-var Card = require('./admin/components/Card/Card.js');
-var CardSection = require('./admin/components/CardSection/CardSection.js');
-var Checkbox = require('./admin/components/Checkbox/Checkbox.js');
 var CustomerSegmentationTemplate = require('./admin/components/CustomerSegmentationTemplate/CustomerSegmentationTemplate.js');
-var Heading = require('./admin/components/Heading/Heading.js');
+var Divider = require('./admin/components/Divider/Divider.js');
+var EmailField = require('./admin/components/EmailField/EmailField.js');
+var HorizontalStack = require('./admin/components/HorizontalStack/HorizontalStack.js');
 var Icon = require('./admin/components/Icon/Icon.js');
-var InlineStack = require('./admin/components/InlineStack/InlineStack.js');
-var Modal = require('./admin/components/Modal/Modal.js');
+var Image = require('./admin/components/Image/Image.js');
 var Link = require('./admin/components/Link/Link.js');
-var OptionList = require('./admin/components/OptionList/OptionList.js');
-var Pressable = require('./admin/components/Pressable/Pressable.js');
-var Radio = require('./admin/components/Radio/Radio.js');
-var ResourceItem = require('./admin/components/ResourceItem/ResourceItem.js');
-var ResourceList = require('./admin/components/ResourceList/ResourceList.js');
+var NumberField = require('./admin/components/NumberField/NumberField.js');
+var PasswordField = require('./admin/components/PasswordField/PasswordField.js');
 var Select = require('./admin/components/Select/Select.js');
-var Spinner = require('./admin/components/Spinner/Spinner.js');
-var StackItem = require('./admin/components/StackItem/StackItem.js');
-var Text = require('./admin/components/Text/Text.js');
-var TextBlock = require('./admin/components/TextBlock/TextBlock.js');
 var TextField = require('./admin/components/TextField/TextField.js');
-var Thumbnail = require('./admin/components/Thumbnail/Thumbnail.js');
+var URLField = require('./admin/components/URLField/URLField.js');
+var VerticalStack = require('./admin/components/VerticalStack/VerticalStack.js');
 
@@ -37,26 +25,14 @@
 exports.extension = extension.extension;
-exports.Badge = Badge.Badge;
-exports.Banner = Banner.Banner;
-exports.BlockStack = BlockStack.BlockStack;
-exports.Button = Button.Button;
-exports.Card = Card.Card;
-exports.CardSection = CardSection.CardSection;
-exports.Checkbox = Checkbox.Checkbox;
 exports.CustomerSegmentationTemplate = CustomerSegmentationTemplate.CustomerSegmentationTemplate;
-exports.Heading = Heading.Heading;
+exports.Divider = Divider.Divider;
+exports.EmailField = EmailField.EmailField;
+exports.HorizontalStack = HorizontalStack.HorizontalStack;
 exports.Icon = Icon.Icon;
-exports.InlineStack = InlineStack.InlineStack;
-exports.Modal = Modal.Modal;
+exports.Image = Image.Image;
 exports.Link = Link.Link;
-exports.OptionList = OptionList.OptionList;
-exports.Pressable = Pressable.Pressable;
-exports.Radio = Radio.Radio;
-exports.ResourceItem = ResourceItem.ResourceItem;
-exports.ResourceList = ResourceList.ResourceList;
+exports.NumberField = NumberField.NumberField;
+exports.PasswordField = PasswordField.PasswordField;
 exports.Select = Select.Select;
-exports.Spinner = Spinner.Spinner;
-exports.StackItem = StackItem.StackItem;
-exports.Text = Text.Text;
-exports.TextBlock = TextBlock.TextBlock;
 exports.TextField = TextField.TextField;
-exports.Thumbnail = Thumbnail.Thumbnail;
+exports.URLField = URLField.URLField;
+exports.VerticalStack = VerticalStack.VerticalStack;

build/cjs/surfaces/admin/components/Icon/Icon.js

@@ -7,7 +7,4 @@ 'use strict';
 
-/**
- * Icons are small visual indicators from a set of pre-defined glyphs.
- */
 const Icon = core.createRemoteComponent('Icon');
 
 exports.Icon = Icon;

build/cjs/surfaces/admin/components/Link/Link.js

@@ -7,7 +7,4 @@ 'use strict';
 
-/**
- * Links take users to another place, and usually appear within or directly following a sentence.
- */
 const Link = core.createRemoteComponent('Link');
 
 exports.Link = Link;

build/cjs/surfaces/admin/components/Select/Select.js

@@ -7,9 +7,4 @@ 'use strict';
 
-/**
- * Select allows merchants to choose one option from a dropdown menu.
- *
- * Consider Select when you have 4 or more options, to avoid creating clutter and make your component more scalable.
- */
 const Select = core.createRemoteComponent('Select');
 
 exports.Select = Select;

build/cjs/surfaces/admin/components/TextField/TextField.js

@@ -7,9 +7,4 @@ 'use strict';
 
-/**
- * TextField is a versatile input field that merchants can type into.
- *
- * It supports several input formats including numbers.
- */
 const TextField = core.createRemoteComponent('TextField');
 
 exports.TextField = TextField;

build/ts/surfaces/admin/components.d.ts

@@ -1,52 +0,27 @@
-export { Badge } from './components/Badge/Badge';
-export type { BadgeProps } from './components/Badge/Badge';
-export { Banner } from './components/Banner/Banner';
-export type { BannerProps } from './components/Banner/Banner';
-export { BlockStack } from './components/BlockStack/BlockStack';
-export type { BlockStackProps } from './components/BlockStack/BlockStack';
-export { Button } from './components/Button/Button';
-export type { ButtonProps } from './components/Button/Button';
-export { Card } from './components/Card/Card';
-export type { CardProps } from './components/Card/Card';
-export { CardSection } from './components/CardSection/CardSection';
-export type { CardSectionProps } from './components/CardSection/CardSection';
-export { Checkbox } from './components/Checkbox/Checkbox';
-export type { CheckboxProps } from './components/Checkbox/Checkbox';
 export { CustomerSegmentationTemplate } from './components/CustomerSegmentationTemplate/CustomerSegmentationTemplate';
 export type { CustomerSegmentationTemplateProps } from './components/CustomerSegmentationTemplate/CustomerSegmentationTemplate';
-export { Heading } from './components/Heading/Heading';
-export type { HeadingProps } from './components/Heading/Heading';
+export { Divider } from './components/Divider/Divider';
+export type { DividerProps } from './components/Divider/Divider';
+export { EmailField } from './components/EmailField/EmailField';
+export type { EmailFieldProps } from './components/EmailField/EmailField';
+export { HorizontalStack } from './components/HorizontalStack/HorizontalStack';
+export type { HorizontalStackProps } from './components/HorizontalStack/HorizontalStack';
 export { Icon } from './components/Icon/Icon';
 export type { IconProps } from './components/Icon/Icon';
-export { InlineStack } from './components/InlineStack/InlineStack';
-export type { InlineStackProps } from './components/InlineStack/InlineStack';
-export { Modal } from './components/Modal/Modal';
-export type { ModalProps } from './components/Modal/Modal';
+export { Image } from './components/Image/Image';
+export type { ImageProps } from './components/Image/Image';
 export { Link } from './components/Link/Link';
 export type { LinkProps } from './components/Link/Link';
-export { OptionList } from './components/OptionList/OptionList';
-export type { OptionListProps } from './components/OptionList/OptionList';
-export { Pressable } from './components/Pressable/Pressable';
-export type { PressableProps } from './components/Pressable/Pressable';
-export { Radio } from './components/Radio/Radio';
-export type { RadioProps } from './components/Radio/Radio';
-export { ResourceItem } from './components/ResourceItem/ResourceItem';
-export type { ResourceItemProps } from './components/ResourceItem/ResourceItem';
-export { ResourceList } from './components/ResourceList/ResourceList';
-export type { ResourceListProps } from './components/ResourceList/ResourceList';
+export { NumberField } from './components/NumberField/NumberField';
+export type { NumberFieldProps } from './components/NumberField/NumberField';
+export { PasswordField } from './components/PasswordField/PasswordField';
+export type { PasswordFieldProps } from './components/PasswordField/PasswordField';
 export { Select } from './components/Select/Select';
-export type { SelectProps } from './components/Select/Select';
-export { Spinner } from './components/Spinner/Spinner';
-export type { SpinnerProps } from './components/Spinner/Spinner';
-export { StackItem } from './components/StackItem/StackItem';
-export type { StackItemProps } from './components/StackItem/StackItem';
-export { Text } from './components/Text/Text';
-export type { TextProps } from './components/Text/Text';
-export { TextBlock } from './components/TextBlock/TextBlock';
-export type { TextBlockProps } from './components/TextBlock/TextBlock';
+export type { OptionDescription, OptionGroupDescription, OptionGroupProps, OptionProps, SelectProps, } from './components/Select/Select';
 export { TextField } from './components/TextField/TextField';
 export type { TextFieldProps } from './components/TextField/TextField';
-export { Thumbnail } from './components/Thumbnail/Thumbnail';
-export type { ThumbnailProps } from './components/Thumbnail/Thumbnail';
-export type { DestructableAction, DisableableAction } from './components/shared';
+export { URLField } from './components/URLField/URLField';
+export type { URLFieldProps } from './components/URLField/URLField';
+export { VerticalStack } from './components/VerticalStack/VerticalStack';
+export type { VerticalStackProps } from './components/VerticalStack/VerticalStack';
 //# sourceMappingURL=components.d.ts.map

build/ts/surfaces/admin/components/Icon/Icon.d.ts

@@ -1,11 +0,18 @@
-type Source = 'cancelSmallMinor' | 'searchMinor' | 'starHollow' | 'starFilled' | 'sortMinor';
 export interface IconProps {
-    /** Pre-defined glyph content to display. */
-    source: Source;
-    /** Text describing the icon, to be read to screenreaders. */
     accessibilityLabel?: string;
+    tone?: 'inherit' | 'critical';
+    /** A unique identifier for the icon. */
+    id?: string;
+    /**
+     * Adjusts the size of the icon.
+     *
+     * @defaultValue 'base'
+     */
+    size?: 'base'
+    /**
+     * `fill` will take the space available in the container and keep the icon's proportion.
+     */
+     | 'fill';
+    name: string;
 }
-/**
- * Icons are small visual indicators from a set of pre-defined glyphs.
- */
 export declare const Icon: "Icon" & {
@@ -16,3 +23,2 @@ readonly type?: "Icon" | undefined;
 };
-export {};
 //# sourceMappingURL=Icon.d.ts.map

build/ts/surfaces/admin/components/Link/Link.d.ts

 export interface LinkProps {
     /**
-     * Callback when the link is pressed.
+     * A unique identifier for the link.
      */
-    onPress?: () => void;
+    id?: string;
     /**
-     * Open the link in a new tab on desktop, or in the device browser on mobile.
+     * The URL to link to.
+     * If set, it will navigate to the location specified by `href` after executing the `onClick` callback.
      */
-    external?: boolean;
+    href?: string;
     /**
-     * A relative path or absolute URL to link to.
+     * Alias for `href`
+     * If set, it will navigate to the location specified by `to` after executing the `onClick` callback.
      */
-    url?: string;
+    to?: string;
+    /**
+     * Sets the link color.
+     *
+     * - `inherit` will take the color value from its parent,
+     * giving the link a monochrome appearance. In some cases,
+     * its important to pair this property with another stylistic treatment,
+     * like an underline, to differentiate the link from a normal text.
+     */
+    tone?: 'default' | 'inherit' | 'critical';
+    /**
+     * Callback when a link is pressed. If `href` is set,
+     * it will execute the callback and then navigate to the location specified by `href`.
+     */
+    onClick?(): void;
+    /**
+     * Alias for `onClick`
+     * Callback when a link is pressed. If `href` is set,
+     * it will execute the callback and then navigate to the location specified by `href`.
+     */
+    onPress?(): void;
+    /**
+     * A label used for users using assistive technologies. When set, any
+     * `children` supplied to this component will not be announced to screen reader users.
+     */
+    accessibilityLabel?: string;
+    /**
+     * Indicate the text language. Useful when the text is in a different language than the rest of the page.
+     * It will allow assistive technologies such as screen readers to invoke the correct pronunciation.
+     * [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label)
+     */
+    language?: string;
+    /**
+     * Alias for `language`
+     */
+    lang?: string;
 }
-/**
- * Links take users to another place, and usually appear within or directly following a sentence.
- */
 export declare const Link: "Link" & {
@@ -19,0 +53,0 @@ readonly type?: "Link" | undefined;

build/ts/surfaces/admin/components/Select/Select.d.ts

@@ -1,28 +0,122 @@
-interface Option {
-    /** Rendered */
-    label: string;
-    /** Non-rendered */
-    value: string;
-}
 export interface SelectProps {
-    /** Display an error state */
+    /**
+     * Whether the select can be changed.
+     */
+    disabled?: 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;
-    /** Label for the select. */
+    /**
+     * 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;
-    /** Show the label to the left of the value, inside the control. */
-    labelInline?: boolean;
-    /** Array of Options to select from. */
-    options: Option[];
-    /** Callback when selected Option changes. */
-    onChange?: (value: string) => void;
-    /** Callback when focus is removed */
-    onBlur?: () => void;
-    /** The value of the currently selected Option. */
+    /**
+     * An identifier for the field that is unique within the nearest
+     * containing `Form` component.
+     */
+    name?: string;
+    /**
+     * Callback when focus is removed.
+     */
+    onBlur?(): void;
+    /**
+     * 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;
+    /**
+     * Callback when input is focused.
+     */
+    onFocus?(): void;
+    /**
+     * The options a user can select from.
+     *
+     * When both `options` and children `Option` or `OptionGroup` are provided,
+     * the options will be merged together, with the `options` property
+     * taking precedence.
+     */
+    options: (OptionDescription | OptionGroupDescription)[];
+    /**
+     * A short hint that describes the expected value of the field.
+     */
+    placeholder?: string;
+    /**
+     * Whether the field is read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * 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;
+    /**
+     * The active option for the select. This should match to one of the
+     * `value` properties in the `options` property or one of the `<Option>`.
+     * When not set, the value will default to an empty string,
+     * which will show the `placeholder` text as the "selected value".
+     */
     value?: string;
 }
-/**
- * Select allows merchants to choose one option from a dropdown menu.
- *
- * Consider Select when you have 4 or more options, to avoid creating clutter and make your component more scalable.
- */
+export interface OptionProps {
+    /**
+     * Whether this option can be selected or not.
+     */
+    disabled?: boolean;
+    /**
+     * The value that will be passed to the select’s `onChange` callback
+     * when this option is selected.
+     */
+    value: string;
+}
+export interface OptionGroupProps {
+    /**
+     * Whether the options within this group can be selected or not.
+     */
+    disabled?: boolean;
+    /**
+     * The user-facing label for this group of options.
+     */
+    label: string;
+}
+export interface OptionDescription {
+    /**
+     * Whether this option can be selected or not.
+     */
+    disabled?: boolean;
+    /**
+     * The user-facing label for this option.
+     */
+    label: string;
+    /**
+     * The value that will be passed to the select’s `onChange` callback
+     * when this option is selected.
+     */
+    value: string;
+}
+export interface OptionGroupDescription {
+    /**
+     * Whether the options within this group can be selected or not.
+     */
+    disabled?: boolean;
+    /**
+     * The user-facing label for this group of options.
+     */
+    label: string;
+    /**
+     * The options a user can select from.
+     */
+    options?: OptionDescription[];
+}
 export declare const Select: "Select" & {
@@ -33,3 +127,2 @@ readonly type?: "Select" | undefined;
 };
-export {};
 //# sourceMappingURL=Select.d.ts.map

build/ts/surfaces/admin/components/shared.d.ts

@@ -1,22 +0,401 @@
-export type Spacing = 'none' | 'extraTight' | 'tight' | 'base' | 'loose' | 'extraLoose';
-export interface Action {
+export interface InputProps<T> {
     /**
-     * Action label text.
+     * Whether the field can be modified.
      */
-    content: string;
+    disabled?: boolean;
     /**
-     * Callback for the action.
+     * Indicate an error to the user. The field will be given a specific stylistic treatment
+     * to communicate problems that have to be resolved immediately.
      */
-    onAction?(): void;
+    error?: string;
+    /**
+     * A unique identifier for the field.
+     */
+    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;
+    /**
+     * Callback when focus is removed.
+     */
+    onBlur?(): void;
+    /**
+     * Callback when the user has **finished editing** a field. Unlike `onChange`
+     * callbacks you may be familiar with from 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 user edits the
+     * field, its state is controlled by the component. Once the user 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 user 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 input is focused.
+     */
+    onFocus?(): 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 `value` — use the `onChange`
+     * callback for that purpose. Use the `onInput` prop when you need to do something
+     * as soon as the user 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;
+    /**
+     * A short hint that describes the expected value of the field.
+     */
+    placeholder?: string;
+    /**
+     * Whether the field is read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * 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;
+    /**
+     * 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;
 }
-export interface DisableableAction extends Action {
-    disabled?: boolean;
+export interface MinMaxLengthProps {
+    /**
+     * Specifies the maximum number of characters allowed.
+     */
+    maxLength?: number;
+    /**
+     * Specifies the min number of characters allowed.
+     */
+    minLength?: number;
 }
-export interface DestructableAction extends Action {
+export interface AccessibilityRoleProps {
     /**
-     * Indicates a dangerous or potentially negative action.
+     * Sets the semantic meaning of the component’s content. When set,
+     * the role will be used by assistive technologies to help users
+     * navigate the page.
+     *
+     * @defaultValue 'generic'
      */
-    destructive?: boolean;
+    accessibilityRole?: AccessibilityRole;
 }
-export type ValueOf<T> = T[keyof T];
+export type AccessibilityRole = 
+/**
+ * Used to indicate the primary content.
+ *
+ * In an HTML host, `main` will render a `<main>` element.
+ * Learn more about the [`<main>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role) in the MDN web docs.
+ */
+'main'
+/**
+ * Used to indicate the component is a header.
+ *
+ * In an HTML host `header` will render a `<header>` element.
+ * Learn more about the [`<header>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role) in the MDN web docs.
+ */
+ | 'header'
+/**
+ * Used to display information such as copyright information, navigation links, and privacy statements.
+ *
+ * In an HTML host `footer` will render a `<footer>` element.
+ * Learn more about the [`<footer>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role) in the MDN web docs.
+ */
+ | 'footer'
+/**
+ * Used to indicate a generic section.
+ * Sections should always have a `Heading` or an accessible name provided in the `accessibilityLabel` property.
+ *
+ * In an HTML host `section` will render a `<section>` element.
+ * Learn more about the [`<section>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role) in the MDN web docs.
+ *
+ */
+ | 'section'
+/**
+ * Used to designate a supporting section that relates to the main content.
+ *
+ * In an HTML host `aside` will render an `<aside>` element.
+ * Learn more about the [`<aside>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role) in the MDN web docs.
+ */
+ | 'aside'
+/**
+ * Used to identify major groups of links used for navigating.
+ *
+ * In an HTML host `navigation` will render a `<nav>` element.
+ * Learn more about the [`<nav>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role) in the MDN web docs.
+ */
+ | 'navigation'
+/**
+ * Used to identify a list of ordered items.
+ *
+ * In an HTML host `ordered-list` will render a `<ol>` element.
+ * Learn more about the [`<ol>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role) in the MDN web docs.
+ */
+ | 'ordered-list'
+/**
+ * Used to identify an item inside a list of items.
+ *
+ * In an HTML host `list-item` will render a `<li>` element.
+ * Learn more about the [`<li>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listitem_role) in the MDN web docs.
+ */
+ | 'list-item'
+/**
+ * Used to indicates the component acts as a divider that separates and distinguishes sections of content in a list of items.
+ *
+ * In an HTML host `list-item-separator` will render as `<li role="separator">`.
+ * Learn more about the [`<li>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) and the [`separator` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role) in the MDN web docs.
+ */
+ | 'list-item-separator'
+/**
+ * Used to identify a list of unordered items.
+ *
+ * In an HTML host `unordered-list` will render a `<ul>` element.
+ * Learn more about the [`<ul>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role) in the MDN web docs.
+ */
+ | 'unordered-list'
+/**
+ * Used to indicates the component acts as a divider that separates and distinguishes sections of content.
+ *
+ * In an HTML host `separator` will render as `<div role="separator">`.
+ * Learn more about the [`separator` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role) in the MDN web docs.
+ */
+ | 'separator'
+/**
+ * Used to define a live region containing advisory information for the user that is not important enough to be an alert.
+ *
+ * In an HTML host `status` will render as `<div role="status">`.
+ * Learn more about the [`status` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role) in the MDN web docs.
+ */
+ | 'status'
+/**
+ * Used for important, and usually time-sensitive, information.
+ *
+ * In an HTML host `alert` will render as `<div role="alert">`.
+ * Learn more about the [`alert` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) in the MDN web docs.
+ */
+ | 'alert'
+/**
+ * Used to create a nameless container element which has no semantic meaning on its own.
+ *
+ * In an HTML host `generic'` will render a `<div>` element.
+ * Learn more about the [`generic` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role) in the MDN web docs.
+ */
+ | 'generic';
+export type SpacingKeyword = 'none' | 'small' | 'base' | 'large';
+export interface SizingProps {
+    /**
+     * Adjust the block size.
+     *
+     * - `number`: size in pixels.
+     * - `` `${number}%` ``: size in percentages of the available space.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/block-size
+     */
+    blockSize?: number | `${number}%`;
+    /**
+     * Adjust the minimum block size.
+     *
+     * - `number`: size in pixels.
+     * - `` `${number}%` ``: size in percentages of the available space.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size
+     */
+    minBlockSize?: number | `${number}%`;
+    /**
+     * Adjust the maximum block size.
+     *
+     * - `number`: size in pixels.
+     * - `` `${number}%` ``: size in percentages of the available space.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size
+     */
+    maxBlockSize?: number | `${number}%`;
+    /**
+     * Adjust the inline size.
+     *
+     * - `number`: size in pixels.
+     * - `` `${number}%` ``: size in percentages of the available space.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size
+     */
+    inlineSize?: number | `${number}%`;
+    /**
+     * Adjust the minimum inline size.
+     *
+     * - `number`: size in pixels.
+     * - `` `${number}%` ``: size in percentages of the available space.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size
+     */
+    minInlineSize?: number | `${number}%`;
+    /**
+     * Adjust the maximum inline size.
+     *
+     * - `number`: size in pixels.
+     * - `` `${number}%` ``: size in percentages of the available space.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size
+     */
+    maxInlineSize?: number | `${number}%`;
+}
+export interface PaddingProps {
+    /**
+     * Adjust the padding.
+     *
+     * To shorten the code, it is possible to specify all the padding for all edges of the box in one property.
+     *
+     * - `base` means block-start, inline-end, block-end and inline-start paddings are `base`.
+     * - `base none` means block-start and block-end paddings are `base`, inline-start and inline-end paddings are `none`.
+     * - `base none large` means block-start padding is `base`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.
+     * - `base none large small` means block-start padding is `base`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.
+     * - `true` applies a default padding that is appropriate for the component.
+     *
+     * Learn more about the 1-to-4-value syntax at https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box
+     */
+    padding?: MaybeAllBoxEdgesShorthandProperty<SpacingKeyword | boolean>;
+    /**
+     * Adjust the block-padding.
+     *
+     * - `base none` means block-start padding is `base`, block-end padding is `none`.
+     */
+    paddingBlock?: MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>;
+    /**
+     * Adjust the block-start padding.
+     */
+    paddingBlockStart?: SpacingKeyword | boolean;
+    /**
+     * Adjust the block-end padding.
+     */
+    paddingBlockEnd?: SpacingKeyword | boolean;
+    /**
+     * Adjust the inline padding.
+     *
+     * - `base none` means inline-start padding is `base`, inline-end padding is `none`.
+     */
+    paddingInline?: MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>;
+    /**
+     * Adjust the inline-start padding.
+     */
+    paddingInlineStart?: SpacingKeyword | boolean;
+    /**
+     * Adjust the inline-end padding.
+     */
+    paddingInlineEnd?: SpacingKeyword | boolean;
+}
+export type MaybeAllBoxEdgesShorthandProperty<T extends SpacingKeyword | boolean> = T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`;
+export type MaybeTwoBoxEdgesShorthandProperty<T extends SpacingKeyword | boolean> = T | `${T} ${T}`;
+export interface AutocompleteProps<AutocompleteField extends AnyAutocompleteField> {
+    /**
+     * 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 value which describes the
+     * specific data you would like to be entered into this field during autofill.
+     *
+     * @see Learn more about the set of {@link https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens|autocomplete values} supported in browsers.
+     */
+    autocomplete?: AutocompleteField | `${AutocompleteSection} ${AutocompleteField}` | `${AutocompleteGroup} ${AutocompleteField}` | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}` | boolean;
+}
+/**
+ * The “section” scopes the autocomplete data that should be inserted
+ * to a specific area of the page.
+ *
+ * Commonly used when there are multiple fields with the same autocomplete needs
+ * in the same page. For example: 2 shipping address forms in the same page.
+ */
+export type AutocompleteSection = `section-${string}`;
+/**
+ * The contact information group the autocomplete data should be sourced from.
+ */
+export type AutocompleteGroup = 'shipping' | 'billing';
+/**
+ * The contact information subgroup the autocomplete data should be sourced from.
+ */
+export type AutocompleteAddressGroup = 'fax' | 'home' | 'mobile' | 'pager';
+export type AutocompleteFieldTelephoneAlias = 'tel' | 'telephone';
+export type AutocompleteFieldBirthdayAlias = 'bday' | 'birthday';
+export type AutocompleteFieldCreditCardAlias = 'cc' | 'credit-card';
+export type AutocompleteFieldInstantMessageAlias = 'impp' | 'instant-message';
+export type AutocompleteFieldSecurityCodeAlias = 'csc' | 'security-code';
+export type AnyAutocompleteField = 'additional-name' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'address-line1' | 'address-line2' | 'address-line3' | 'country-name' | 'country' | 'current-password' | 'email' | 'family-name' | 'given-name' | 'honorific-prefix' | 'honorific-suffix' | 'language' | 'name' | 'new-password' | 'nickname' | 'one-time-code' | 'organization-title' | 'organization' | 'photo' | 'postal-code' | 'sex' | 'street-address' | 'transaction-amount' | 'transaction-currency' | 'url' | 'username' | `${AutocompleteFieldBirthdayAlias}-day` | `${AutocompleteFieldBirthdayAlias}-month` | `${AutocompleteFieldBirthdayAlias}-year` | `${AutocompleteFieldBirthdayAlias}` | `${AutocompleteFieldCreditCardAlias}-additional-name` | `${AutocompleteFieldCreditCardAlias}-expiry-month` | `${AutocompleteFieldCreditCardAlias}-expiry-year` | `${AutocompleteFieldCreditCardAlias}-expiry` | `${AutocompleteFieldCreditCardAlias}-family-name` | `${AutocompleteFieldCreditCardAlias}-given-name` | `${AutocompleteFieldCreditCardAlias}-name` | `${AutocompleteFieldCreditCardAlias}-number` | `${AutocompleteFieldCreditCardAlias}-${AutocompleteFieldSecurityCodeAlias}` | `${AutocompleteFieldCreditCardAlias}-type` | `${AutocompleteAddressGroup} email` | `${AutocompleteFieldInstantMessageAlias}` | `${AutocompleteAddressGroup} ${AutocompleteFieldInstantMessageAlias}` | `${AutocompleteFieldTelephoneAlias}` | `${AutocompleteFieldTelephoneAlias}-area-code` | `${AutocompleteFieldTelephoneAlias}-country-code` | `${AutocompleteFieldTelephoneAlias}-extension` | `${AutocompleteFieldTelephoneAlias}-local-prefix` | `${AutocompleteFieldTelephoneAlias}-local-suffix` | `${AutocompleteFieldTelephoneAlias}-local` | `${AutocompleteFieldTelephoneAlias}-national` | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}` | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-area-code` | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-country-code` | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-extension` | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local-prefix` | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local-suffix` | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local` | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-national`;
+export type TextAutocompleteField = Extract<AnyAutocompleteField, 'additional-name' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'address-line1' | 'address-line2' | 'address-line3' | 'country-name' | 'country' | 'family-name' | 'given-name' | 'honorific-prefix' | 'honorific-suffix' | 'language' | 'name' | 'nickname' | 'one-time-code' | 'organization-title' | 'organization' | 'postal-code' | 'sex' | 'street-address' | 'transaction-currency' | 'username' | `${AutocompleteFieldCreditCardAlias}-name` | `${AutocompleteFieldCreditCardAlias}-given-name` | `${AutocompleteFieldCreditCardAlias}-additional-name` | `${AutocompleteFieldCreditCardAlias}-family-name` | `${AutocompleteFieldCreditCardAlias}-type`>;
+/**
+ * TODO:
+ * Move these to their respective fields when they are implemented.
+ */
+export type MoneyAutocomplete = Extract<AnyAutocompleteField, 'transaction-amount'>;
+export type DateAutocomplete = Extract<AnyAutocompleteField, `${AutocompleteFieldBirthdayAlias}` | `${AutocompleteFieldBirthdayAlias}-day` | `${AutocompleteFieldBirthdayAlias}-month` | `${AutocompleteFieldBirthdayAlias}-year` | `${AutocompleteFieldCreditCardAlias}-expiry` | `${AutocompleteFieldCreditCardAlias}-expiry-month` | `${AutocompleteFieldCreditCardAlias}-expiry-year`>;
+export type PhoneAutocompleteField = Extract<AnyAutocompleteField, `${AutocompleteFieldTelephoneAlias}` | `${AutocompleteFieldTelephoneAlias}-area-code` | `${AutocompleteFieldTelephoneAlias}-country-code` | `${AutocompleteFieldTelephoneAlias}-extension` | `${AutocompleteFieldTelephoneAlias}-local-prefix` | `${AutocompleteFieldTelephoneAlias}-local-suffix` | `${AutocompleteFieldTelephoneAlias}-local` | `${AutocompleteFieldTelephoneAlias}-national` | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}` | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-area-code` | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-country-code` | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-extension` | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local-prefix` | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local-suffix` | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local` | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-national`>;
+export interface GapProps {
+    /**
+     * Adjust spacing between children
+     */
+    gap?: MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>;
+    /**
+     * Adjust spacing between children in the block axis
+     */
+    rowGap?: SpacingKeyword | boolean;
+    /**
+     * Adjust spacing between children in the inline axis
+     */
+    columnGap?: SpacingKeyword | boolean;
+}
+export type CrossAxisAlignment = 
+/** Items are positioned at the beginning of the container's cross axis */
+'start'
+/** Items are positioned at the center of the container’s cross axis */
+ | 'center'
+/**	Items are positioned at the end of the container's cross axis */
+ | 'end'
+/** Items are positioned at the baseline of the container's cross axis */
+ | 'baseline';
+export type MainAxisAlignment = 
+/** Align items at the start of the container's main axis */
+'start'
+/** Align items to the center of the container's main axis */
+ | 'center'
+/** Align items at the end of the container's main axis */
+ | 'end'
+/** Distribute items evenly across the container's main axis, where the first item is flush with the start, the last is flush with the end */
+ | 'space-between'
+/** Distribute items evenly across the container's main axis, with a half-size space on either end of the items */
+ | 'space-around'
+/** Distribute items evenly across the container's main axis, with items having equal space around them */
+ | 'space-evenly';
 //# sourceMappingURL=shared.d.ts.map

build/ts/surfaces/admin/components/TextField/TextField.d.ts

@@ -1,36 +0,4 @@
-export interface TextFieldProps {
-    /** Human-readable label for the input. */
-    label: string;
-    /** Input type */
-    type?: 'text' | 'search' | 'number';
-    /** Input value. */
-    value?: string;
-    /** Hint text to display when no text is input */
-    placeholder?: string;
-    /** Allow for multiple lines of input. */
-    multiline?: number | boolean;
-    /** Text to display before the input value. */
-    prefix?: string;
-    /** Text to display after the input value. */
-    suffix?: string;
-    /** Error text to display beneath the label. */
-    error?: string;
-    /** Callback when value is changed. */
-    onInput?: (value: string) => void;
-    /** Callback when user leaves the input. */
-    onChange?: (value: string) => void;
-    /** Callback when input is focused. */
-    onFocus?(): void | Promise<void>;
-    /** Callback when focus is removed. */
-    onBlur?(): void | Promise<void>;
-    /** Show a 'clear text' button in the input. */
-    clearButton?: boolean;
-    /** Callback when clear button is pressed. */
-    onClearButtonPress?(): void;
+import { AutocompleteProps, TextAutocompleteField, InputProps, MinMaxLengthProps } from '../shared';
+export interface TextFieldProps extends InputProps<string>, MinMaxLengthProps, AutocompleteProps<TextAutocompleteField> {
 }
-/**
- * TextField is a versatile input field that merchants can type into.
- *
- * It supports several input formats including numbers.
- */
 export declare const TextField: "TextField" & {
@@ -37,0 +5,0 @@ readonly type?: "TextField" | undefined;

package.json

 {
   "name": "@shopify/ui-extensions",
-  "version": "0.0.0-unstable-20230602162636",
+  "version": "0.0.0-unstable-20230628141448",
   "main": "index.js",
@@ -5,0 +5,0 @@ "module": "index.mjs",

src/surfaces/admin/components.ts

@@ -1,51 +0,32 @@
-export {Badge} from './components/Badge/Badge';
-export type {BadgeProps} from './components/Badge/Badge';
-export {Banner} from './components/Banner/Banner';
-export type {BannerProps} from './components/Banner/Banner';
-export {BlockStack} from './components/BlockStack/BlockStack';
-export type {BlockStackProps} from './components/BlockStack/BlockStack';
-export {Button} from './components/Button/Button';
-export type {ButtonProps} from './components/Button/Button';
-export {Card} from './components/Card/Card';
-export type {CardProps} from './components/Card/Card';
-export {CardSection} from './components/CardSection/CardSection';
-export type {CardSectionProps} from './components/CardSection/CardSection';
-export {Checkbox} from './components/Checkbox/Checkbox';
-export type {CheckboxProps} from './components/Checkbox/Checkbox';
 export {CustomerSegmentationTemplate} from './components/CustomerSegmentationTemplate/CustomerSegmentationTemplate';
 export type {CustomerSegmentationTemplateProps} from './components/CustomerSegmentationTemplate/CustomerSegmentationTemplate';
-export {Heading} from './components/Heading/Heading';
-export type {HeadingProps} from './components/Heading/Heading';
+export {Divider} from './components/Divider/Divider';
+export type {DividerProps} from './components/Divider/Divider';
+export {EmailField} from './components/EmailField/EmailField';
+export type {EmailFieldProps} from './components/EmailField/EmailField';
+export {HorizontalStack} from './components/HorizontalStack/HorizontalStack';
+export type {HorizontalStackProps} from './components/HorizontalStack/HorizontalStack';
 export {Icon} from './components/Icon/Icon';
 export type {IconProps} from './components/Icon/Icon';
-export {InlineStack} from './components/InlineStack/InlineStack';
-export type {InlineStackProps} from './components/InlineStack/InlineStack';
-export {Modal} from './components/Modal/Modal';
-export type {ModalProps} from './components/Modal/Modal';
+export {Image} from './components/Image/Image';
+export type {ImageProps} from './components/Image/Image';
 export {Link} from './components/Link/Link';
 export type {LinkProps} from './components/Link/Link';
-export {OptionList} from './components/OptionList/OptionList';
-export type {OptionListProps} from './components/OptionList/OptionList';
-export {Pressable} from './components/Pressable/Pressable';
-export type {PressableProps} from './components/Pressable/Pressable';
-export {Radio} from './components/Radio/Radio';
-export type {RadioProps} from './components/Radio/Radio';
-export {ResourceItem} from './components/ResourceItem/ResourceItem';
-export type {ResourceItemProps} from './components/ResourceItem/ResourceItem';
-export {ResourceList} from './components/ResourceList/ResourceList';
-export type {ResourceListProps} from './components/ResourceList/ResourceList';
+export {NumberField} from './components/NumberField/NumberField';
+export type {NumberFieldProps} from './components/NumberField/NumberField';
+export {PasswordField} from './components/PasswordField/PasswordField';
+export type {PasswordFieldProps} from './components/PasswordField/PasswordField';
 export {Select} from './components/Select/Select';
-export type {SelectProps} from './components/Select/Select';
-export {Spinner} from './components/Spinner/Spinner';
-export type {SpinnerProps} from './components/Spinner/Spinner';
-export {StackItem} from './components/StackItem/StackItem';
-export type {StackItemProps} from './components/StackItem/StackItem';
-export {Text} from './components/Text/Text';
-export type {TextProps} from './components/Text/Text';
-export {TextBlock} from './components/TextBlock/TextBlock';
-export type {TextBlockProps} from './components/TextBlock/TextBlock';
+export type {
+  OptionDescription,
+  OptionGroupDescription,
+  OptionGroupProps,
+  OptionProps,
+  SelectProps,
+} from './components/Select/Select';
 export {TextField} from './components/TextField/TextField';
 export type {TextFieldProps} from './components/TextField/TextField';
-export {Thumbnail} from './components/Thumbnail/Thumbnail';
-export type {ThumbnailProps} from './components/Thumbnail/Thumbnail';
-export type {DestructableAction, DisableableAction} from './components/shared';
+export {URLField} from './components/URLField/URLField';
+export type {URLFieldProps} from './components/URLField/URLField';
+export {VerticalStack} from './components/VerticalStack/VerticalStack';
+export type {VerticalStackProps} from './components/VerticalStack/VerticalStack';

src/surfaces/admin/components/Icon/Icon.ts

 import {createRemoteComponent} from '@remote-ui/core';
 
-type Source =
-  | 'cancelSmallMinor'
-  | 'searchMinor'
-  | 'starHollow'
-  | 'starFilled'
-  | 'sortMinor';
-
 export interface IconProps {
-  /** Pre-defined glyph content to display. */
-  source: Source;
+  /*
+   * A label that describes the purpose or contents of the icon. When set,
+   * it will be announced to users using assistive technologies and will
+   * provide them with more context.
+   */
+  accessibilityLabel?: string;
 
-  /** Text describing the icon, to be read to screenreaders. */
-  accessibilityLabel?: string;
+  /*
+   * Set the color of the icon.
+   *
+   * - `inherit` will take the color value from its parent,
+   * giving the link a monochrome appearance.
+   *
+   * @defaultValue 'inherit'
+   */
+  tone?: 'inherit' | 'critical';
+
+  /** A unique identifier for the icon. */
+  id?: string;
+
+  /**
+   * Adjusts the size of the icon.
+   *
+   * @defaultValue 'base'
+   */
+  size?:
+    | 'base'
+    /**
+     * `fill` will take the space available in the container and keep the icon's proportion.
+     */
+    | 'fill';
+
+  /*
+   * Specifies the name of the icon that will be displayed.
+   */
+  name: string;
 }
 
-/**
- * Icons are small visual indicators from a set of pre-defined glyphs.
- */
 export const Icon = createRemoteComponent<'Icon', IconProps>('Icon');

src/surfaces/admin/components/Link/Link.ts

@@ -5,20 +5,60 @@ import {createRemoteComponent} from '@remote-ui/core';
   /**
-   * Callback when the link is pressed.
+   * A unique identifier for the link.
    */
-  onPress?: () => void;
+  id?: string;
 
   /**
-   * Open the link in a new tab on desktop, or in the device browser on mobile.
+   * The URL to link to.
+   * If set, it will navigate to the location specified by `href` after executing the `onClick` callback.
    */
-  external?: boolean;
+  href?: string;
 
   /**
-   * A relative path or absolute URL to link to.
+   * Alias for `href`
+   * If set, it will navigate to the location specified by `to` after executing the `onClick` callback.
    */
-  url?: string;
+  to?: string;
+
+  /**
+   * Sets the link color.
+   *
+   * - `inherit` will take the color value from its parent,
+   * giving the link a monochrome appearance. In some cases,
+   * its important to pair this property with another stylistic treatment,
+   * like an underline, to differentiate the link from a normal text.
+   */
+  tone?: 'default' | 'inherit' | 'critical';
+
+  /**
+   * Callback when a link is pressed. If `href` is set,
+   * it will execute the callback and then navigate to the location specified by `href`.
+   */
+  onClick?(): void;
+
+  /**
+   * Alias for `onClick`
+   * Callback when a link is pressed. If `href` is set,
+   * it will execute the callback and then navigate to the location specified by `href`.
+   */
+  onPress?(): void;
+
+  /**
+   * A label used for users using assistive technologies. When set, any
+   * `children` supplied to this component will not be announced to screen reader users.
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Indicate the text language. Useful when the text is in a different language than the rest of the page.
+   * It will allow assistive technologies such as screen readers to invoke the correct pronunciation.
+   * [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label)
+   */
+  language?: string;
+
+  /**
+   * Alias for `language`
+   */
+  lang?: string;
 }
 
-/**
- * Links take users to another place, and usually appear within or directly following a sentence.
- */
 export const Link = createRemoteComponent<'Link', LinkProps>('Link');

src/surfaces/admin/components/Select/Select.ts

 import {createRemoteComponent} from '@remote-ui/core';
 
-interface Option {
-  /** Rendered */
+export interface SelectProps {
+  /**
+   * Whether the select can be changed.
+   */
+  disabled?: 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 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;
 
-  /** Non-rendered */
+  /**
+   * An identifier for the field that is unique within the nearest
+   * containing `Form` component.
+   */
+  name?: string;
+
+  /**
+   * Callback when focus is removed.
+   */
+  onBlur?(): void;
+
+  /**
+   * 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;
+
+  /**
+   * Callback when input is focused.
+   */
+  onFocus?(): void;
+
+  /**
+   * The options a user can select from.
+   *
+   * When both `options` and children `Option` or `OptionGroup` are provided,
+   * the options will be merged together, with the `options` property
+   * taking precedence.
+   */
+  options: (OptionDescription | OptionGroupDescription)[];
+
+  /**
+   * A short hint that describes the expected value of the field.
+   */
+  placeholder?: string;
+
+  /**
+   * Whether the field is read-only.
+   */
+  readOnly?: boolean;
+
+  /**
+   * 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;
+
+  /**
+   * The active option for the select. This should match to one of the
+   * `value` properties in the `options` property or one of the `<Option>`.
+   * When not set, the value will default to an empty string,
+   * which will show the `placeholder` text as the "selected value".
+   */
+  value?: string;
+}
+
+export interface OptionProps {
+  /**
+   * Whether this option can be selected or not.
+   */
+  disabled?: boolean;
+
+  /**
+   * The value that will be passed to the select’s `onChange` callback
+   * when this option is selected.
+   */
   value: string;
 }
 
-export interface SelectProps {
-  /** Display an error state */
-  error?: string;
+export interface OptionGroupProps {
+  /**
+   * Whether the options within this group can be selected or not.
+   */
+  disabled?: boolean;
 
-  /** Label for the select. */
+  /**
+   * The user-facing label for this group of options.
+   */
   label: string;
+}
 
-  /** Show the label to the left of the value, inside the control. */
-  labelInline?: boolean;
+export interface OptionDescription {
+  /**
+   * Whether this option can be selected or not.
+   */
+  disabled?: boolean;
 
-  /** Array of Options to select from. */
-  options: Option[];
+  /**
+   * The user-facing label for this option.
+   */
+  label: string;
 
-  /** Callback when selected Option changes. */
-  onChange?: (value: string) => void;
+  /**
+   * The value that will be passed to the select’s `onChange` callback
+   * when this option is selected.
+   */
+  value: string;
+}
 
-  /** Callback when focus is removed */
-  onBlur?: () => void;
+export interface OptionGroupDescription {
+  /**
+   * Whether the options within this group can be selected or not.
+   */
+  disabled?: boolean;
 
-  /** The value of the currently selected Option. */
-  value?: string;
+  /**
+   * The user-facing label for this group of options.
+   */
+  label: string;
+
+  /**
+   * The options a user can select from.
+   */
+  options?: OptionDescription[];
 }
 
-/**
- * Select allows merchants to choose one option from a dropdown menu.
- *
- * Consider Select when you have 4 or more options, to avoid creating clutter and make your component more scalable.
- */
 export const Select = createRemoteComponent<'Select', SelectProps>('Select');

src/surfaces/admin/components/shared.ts

@@ -1,30 +0,597 @@
-export type Spacing =
-  | 'none'
-  | 'extraTight'
-  | 'tight'
-  | 'base'
-  | 'loose'
-  | 'extraLoose';
+export interface InputProps<T> {
+  /**
+   * Whether the field can be modified.
+   */
+  disabled?: boolean;
 
-export interface Action {
   /**
-   * Action label text.
+   * Indicate an error to the user. The field will be given a specific stylistic treatment
+   * to communicate problems that have to be resolved immediately.
    */
-  content: string;
+  error?: string;
+
   /**
-   * Callback for the action.
+   * A unique identifier for the field.
    */
-  onAction?(): void;
+  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;
+
+  /**
+   * Callback when focus is removed.
+   */
+  onBlur?(): void;
+
+  /**
+   * Callback when the user has **finished editing** a field. Unlike `onChange`
+   * callbacks you may be familiar with from 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 user edits the
+   * field, its state is controlled by the component. Once the user 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 user 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 input is focused.
+   */
+  onFocus?(): 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 `value` — use the `onChange`
+   * callback for that purpose. Use the `onInput` prop when you need to do something
+   * as soon as the user 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;
+
+  /**
+   * A short hint that describes the expected value of the field.
+   */
+  placeholder?: string;
+
+  /**
+   * Whether the field is read-only.
+   */
+  readOnly?: boolean;
+
+  /**
+   * 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;
+
+  /**
+   * 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;
 }
 
-export interface DisableableAction extends Action {
-  disabled?: boolean;
+export interface MinMaxLengthProps {
+  /**
+   * Specifies the maximum number of characters allowed.
+   */
+  maxLength?: number;
+
+  /**
+   * Specifies the min number of characters allowed.
+   */
+  minLength?: number;
 }
-export interface DestructableAction extends Action {
+
+export interface AccessibilityRoleProps {
   /**
-   * Indicates a dangerous or potentially negative action.
+   * Sets the semantic meaning of the component’s content. When set,
+   * the role will be used by assistive technologies to help users
+   * navigate the page.
+   *
+   * @defaultValue 'generic'
    */
-  destructive?: boolean;
+  accessibilityRole?: AccessibilityRole;
 }
 
-export type ValueOf<T> = T[keyof T];
+export type AccessibilityRole =
+  /**
+   * Used to indicate the primary content.
+   *
+   * In an HTML host, `main` will render a `<main>` element.
+   * Learn more about the [`<main>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role) in the MDN web docs.
+   */
+  | 'main'
+
+  /**
+   * Used to indicate the component is a header.
+   *
+   * In an HTML host `header` will render a `<header>` element.
+   * Learn more about the [`<header>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role) in the MDN web docs.
+   */
+  | 'header'
+
+  /**
+   * Used to display information such as copyright information, navigation links, and privacy statements.
+   *
+   * In an HTML host `footer` will render a `<footer>` element.
+   * Learn more about the [`<footer>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role) in the MDN web docs.
+   */
+  | 'footer'
+
+  /**
+   * Used to indicate a generic section.
+   * Sections should always have a `Heading` or an accessible name provided in the `accessibilityLabel` property.
+   *
+   * In an HTML host `section` will render a `<section>` element.
+   * Learn more about the [`<section>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role) in the MDN web docs.
+   *
+   */
+  | 'section'
+
+  /**
+   * Used to designate a supporting section that relates to the main content.
+   *
+   * In an HTML host `aside` will render an `<aside>` element.
+   * Learn more about the [`<aside>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role) in the MDN web docs.
+   */
+  | 'aside'
+
+  /**
+   * Used to identify major groups of links used for navigating.
+   *
+   * In an HTML host `navigation` will render a `<nav>` element.
+   * Learn more about the [`<nav>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role) in the MDN web docs.
+   */
+  | 'navigation'
+
+  /**
+   * Used to identify a list of ordered items.
+   *
+   * In an HTML host `ordered-list` will render a `<ol>` element.
+   * Learn more about the [`<ol>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role) in the MDN web docs.
+   */
+  | 'ordered-list'
+
+  /**
+   * Used to identify an item inside a list of items.
+   *
+   * In an HTML host `list-item` will render a `<li>` element.
+   * Learn more about the [`<li>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listitem_role) in the MDN web docs.
+   */
+  | 'list-item'
+
+  /**
+   * Used to indicates the component acts as a divider that separates and distinguishes sections of content in a list of items.
+   *
+   * In an HTML host `list-item-separator` will render as `<li role="separator">`.
+   * Learn more about the [`<li>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) and the [`separator` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role) in the MDN web docs.
+   */
+  | 'list-item-separator'
+
+  /**
+   * Used to identify a list of unordered items.
+   *
+   * In an HTML host `unordered-list` will render a `<ul>` element.
+   * Learn more about the [`<ul>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role) in the MDN web docs.
+   */
+  | 'unordered-list'
+
+  /**
+   * Used to indicates the component acts as a divider that separates and distinguishes sections of content.
+   *
+   * In an HTML host `separator` will render as `<div role="separator">`.
+   * Learn more about the [`separator` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role) in the MDN web docs.
+   */
+  | 'separator'
+
+  /**
+   * Used to define a live region containing advisory information for the user that is not important enough to be an alert.
+   *
+   * In an HTML host `status` will render as `<div role="status">`.
+   * Learn more about the [`status` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role) in the MDN web docs.
+   */
+  | 'status'
+
+  /**
+   * Used for important, and usually time-sensitive, information.
+   *
+   * In an HTML host `alert` will render as `<div role="alert">`.
+   * Learn more about the [`alert` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) in the MDN web docs.
+   */
+  | 'alert'
+
+  /**
+   * Used to create a nameless container element which has no semantic meaning on its own.
+   *
+   * In an HTML host `generic'` will render a `<div>` element.
+   * Learn more about the [`generic` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role) in the MDN web docs.
+   */
+  | 'generic';
+
+export type SpacingKeyword = 'none' | 'small' | 'base' | 'large';
+
+export interface SizingProps {
+  /**
+   * Adjust the block size.
+   *
+   * - `number`: size in pixels.
+   * - `` `${number}%` ``: size in percentages of the available space.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/block-size
+   */
+  blockSize?: number | `${number}%`;
+
+  /**
+   * Adjust the minimum block size.
+   *
+   * - `number`: size in pixels.
+   * - `` `${number}%` ``: size in percentages of the available space.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size
+   */
+  minBlockSize?: number | `${number}%`;
+
+  /**
+   * Adjust the maximum block size.
+   *
+   * - `number`: size in pixels.
+   * - `` `${number}%` ``: size in percentages of the available space.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size
+   */
+  maxBlockSize?: number | `${number}%`;
+
+  /**
+   * Adjust the inline size.
+   *
+   * - `number`: size in pixels.
+   * - `` `${number}%` ``: size in percentages of the available space.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size
+   */
+  inlineSize?: number | `${number}%`;
+
+  /**
+   * Adjust the minimum inline size.
+   *
+   * - `number`: size in pixels.
+   * - `` `${number}%` ``: size in percentages of the available space.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size
+   */
+  minInlineSize?: number | `${number}%`;
+
+  /**
+   * Adjust the maximum inline size.
+   *
+   * - `number`: size in pixels.
+   * - `` `${number}%` ``: size in percentages of the available space.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size
+   */
+  maxInlineSize?: number | `${number}%`;
+}
+
+export interface PaddingProps {
+  /**
+   * Adjust the padding.
+   *
+   * To shorten the code, it is possible to specify all the padding for all edges of the box in one property.
+   *
+   * - `base` means block-start, inline-end, block-end and inline-start paddings are `base`.
+   * - `base none` means block-start and block-end paddings are `base`, inline-start and inline-end paddings are `none`.
+   * - `base none large` means block-start padding is `base`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.
+   * - `base none large small` means block-start padding is `base`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.
+   * - `true` applies a default padding that is appropriate for the component.
+   *
+   * Learn more about the 1-to-4-value syntax at https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box
+   */
+  padding?: MaybeAllBoxEdgesShorthandProperty<SpacingKeyword | boolean>;
+
+  /**
+   * Adjust the block-padding.
+   *
+   * - `base none` means block-start padding is `base`, block-end padding is `none`.
+   */
+  paddingBlock?: MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>;
+
+  /**
+   * Adjust the block-start padding.
+   */
+  paddingBlockStart?: SpacingKeyword | boolean;
+
+  /**
+   * Adjust the block-end padding.
+   */
+  paddingBlockEnd?: SpacingKeyword | boolean;
+
+  /**
+   * Adjust the inline padding.
+   *
+   * - `base none` means inline-start padding is `base`, inline-end padding is `none`.
+   */
+  paddingInline?: MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>;
+
+  /**
+   * Adjust the inline-start padding.
+   */
+  paddingInlineStart?: SpacingKeyword | boolean;
+
+  /**
+   * Adjust the inline-end padding.
+   */
+  paddingInlineEnd?: SpacingKeyword | boolean;
+}
+
+export type MaybeAllBoxEdgesShorthandProperty<
+  T extends SpacingKeyword | boolean,
+> = T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`;
+
+export type MaybeTwoBoxEdgesShorthandProperty<
+  T extends SpacingKeyword | boolean,
+> = T | `${T} ${T}`;
+
+export interface AutocompleteProps<
+  AutocompleteField extends AnyAutocompleteField,
+> {
+  /**
+   * 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 value which describes the
+   * specific data you would like to be entered into this field during autofill.
+   *
+   * @see Learn more about the set of {@link https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens|autocomplete values} supported in browsers.
+   */
+  autocomplete?:
+    | AutocompleteField
+    | `${AutocompleteSection} ${AutocompleteField}`
+    | `${AutocompleteGroup} ${AutocompleteField}`
+    | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}`
+    | boolean;
+}
+
+/**
+ * The “section” scopes the autocomplete data that should be inserted
+ * to a specific area of the page.
+ *
+ * Commonly used when there are multiple fields with the same autocomplete needs
+ * in the same page. For example: 2 shipping address forms in the same page.
+ */
+export type AutocompleteSection = `section-${string}`;
+
+/**
+ * The contact information group the autocomplete data should be sourced from.
+ */
+export type AutocompleteGroup = 'shipping' | 'billing';
+
+/**
+ * The contact information subgroup the autocomplete data should be sourced from.
+ */
+export type AutocompleteAddressGroup = 'fax' | 'home' | 'mobile' | 'pager';
+
+export type AutocompleteFieldTelephoneAlias = 'tel' | 'telephone';
+export type AutocompleteFieldBirthdayAlias = 'bday' | 'birthday';
+export type AutocompleteFieldCreditCardAlias = 'cc' | 'credit-card';
+export type AutocompleteFieldInstantMessageAlias = 'impp' | 'instant-message';
+export type AutocompleteFieldSecurityCodeAlias = 'csc' | 'security-code';
+
+export type AnyAutocompleteField =
+  | 'additional-name'
+  | 'address-level1'
+  | 'address-level2'
+  | 'address-level3'
+  | 'address-level4'
+  | 'address-line1'
+  | 'address-line2'
+  | 'address-line3'
+  | 'country-name'
+  | 'country'
+  | 'current-password'
+  | 'email'
+  | 'family-name'
+  | 'given-name'
+  | 'honorific-prefix'
+  | 'honorific-suffix'
+  | 'language'
+  | 'name'
+  | 'new-password'
+  | 'nickname'
+  | 'one-time-code'
+  | 'organization-title'
+  | 'organization'
+  | 'photo'
+  | 'postal-code'
+  | 'sex'
+  | 'street-address'
+  | 'transaction-amount'
+  | 'transaction-currency'
+  | 'url'
+  | 'username'
+  | `${AutocompleteFieldBirthdayAlias}-day`
+  | `${AutocompleteFieldBirthdayAlias}-month`
+  | `${AutocompleteFieldBirthdayAlias}-year`
+  | `${AutocompleteFieldBirthdayAlias}`
+  | `${AutocompleteFieldCreditCardAlias}-additional-name`
+  | `${AutocompleteFieldCreditCardAlias}-expiry-month`
+  | `${AutocompleteFieldCreditCardAlias}-expiry-year`
+  | `${AutocompleteFieldCreditCardAlias}-expiry`
+  | `${AutocompleteFieldCreditCardAlias}-family-name`
+  | `${AutocompleteFieldCreditCardAlias}-given-name`
+  | `${AutocompleteFieldCreditCardAlias}-name`
+  | `${AutocompleteFieldCreditCardAlias}-number`
+  | `${AutocompleteFieldCreditCardAlias}-${AutocompleteFieldSecurityCodeAlias}`
+  | `${AutocompleteFieldCreditCardAlias}-type`
+  | `${AutocompleteAddressGroup} email`
+  | `${AutocompleteFieldInstantMessageAlias}`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldInstantMessageAlias}`
+  | `${AutocompleteFieldTelephoneAlias}`
+  | `${AutocompleteFieldTelephoneAlias}-area-code`
+  | `${AutocompleteFieldTelephoneAlias}-country-code`
+  | `${AutocompleteFieldTelephoneAlias}-extension`
+  | `${AutocompleteFieldTelephoneAlias}-local-prefix`
+  | `${AutocompleteFieldTelephoneAlias}-local-suffix`
+  | `${AutocompleteFieldTelephoneAlias}-local`
+  | `${AutocompleteFieldTelephoneAlias}-national`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-area-code`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-country-code`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-extension`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local-prefix`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local-suffix`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-national`;
+
+export type TextAutocompleteField = Extract<
+  AnyAutocompleteField,
+  | 'additional-name'
+  | 'address-level1'
+  | 'address-level2'
+  | 'address-level3'
+  | 'address-level4'
+  | 'address-line1'
+  | 'address-line2'
+  | 'address-line3'
+  | 'country-name'
+  | 'country'
+  | 'family-name'
+  | 'given-name'
+  | 'honorific-prefix'
+  | 'honorific-suffix'
+  | 'language'
+  | 'name'
+  | 'nickname'
+  | 'one-time-code'
+  | 'organization-title'
+  | 'organization'
+  | 'postal-code'
+  | 'sex'
+  | 'street-address'
+  | 'transaction-currency'
+  | 'username'
+  | `${AutocompleteFieldCreditCardAlias}-name`
+  | `${AutocompleteFieldCreditCardAlias}-given-name`
+  | `${AutocompleteFieldCreditCardAlias}-additional-name`
+  | `${AutocompleteFieldCreditCardAlias}-family-name`
+  | `${AutocompleteFieldCreditCardAlias}-type`
+>;
+
+/**
+ * TODO:
+ * Move these to their respective fields when they are implemented.
+ */
+export type MoneyAutocomplete = Extract<
+  AnyAutocompleteField,
+  'transaction-amount'
+>;
+
+export type DateAutocomplete = Extract<
+  AnyAutocompleteField,
+  | `${AutocompleteFieldBirthdayAlias}`
+  | `${AutocompleteFieldBirthdayAlias}-day`
+  | `${AutocompleteFieldBirthdayAlias}-month`
+  | `${AutocompleteFieldBirthdayAlias}-year`
+  | `${AutocompleteFieldCreditCardAlias}-expiry`
+  | `${AutocompleteFieldCreditCardAlias}-expiry-month`
+  | `${AutocompleteFieldCreditCardAlias}-expiry-year`
+>;
+
+export type PhoneAutocompleteField = Extract<
+  AnyAutocompleteField,
+  | `${AutocompleteFieldTelephoneAlias}`
+  | `${AutocompleteFieldTelephoneAlias}-area-code`
+  | `${AutocompleteFieldTelephoneAlias}-country-code`
+  | `${AutocompleteFieldTelephoneAlias}-extension`
+  | `${AutocompleteFieldTelephoneAlias}-local-prefix`
+  | `${AutocompleteFieldTelephoneAlias}-local-suffix`
+  | `${AutocompleteFieldTelephoneAlias}-local`
+  | `${AutocompleteFieldTelephoneAlias}-national`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-area-code`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-country-code`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-extension`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local-prefix`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local-suffix`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-local`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldTelephoneAlias}-national`
+>;
+
+export interface GapProps {
+  /**
+   * Adjust spacing between children
+   */
+  gap?: MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>;
+
+  /**
+   * Adjust spacing between children in the block axis
+   */
+  rowGap?: SpacingKeyword | boolean;
+
+  /**
+   * Adjust spacing between children in the inline axis
+   */
+  columnGap?: SpacingKeyword | boolean;
+}
+
+export type CrossAxisAlignment =
+  /** Items are positioned at the beginning of the container's cross axis */
+  | 'start'
+  /** Items are positioned at the center of the container’s cross axis */
+  | 'center'
+  /**	Items are positioned at the end of the container's cross axis */
+  | 'end'
+  /** Items are positioned at the baseline of the container's cross axis */
+  | 'baseline';
+
+export type MainAxisAlignment =
+  /** Align items at the start of the container's main axis */
+  | 'start'
+  /** Align items to the center of the container's main axis */
+  | 'center'
+  /** Align items at the end of the container's main axis */
+  | 'end'
+  /** Distribute items evenly across the container's main axis, where the first item is flush with the start, the last is flush with the end */
+  | 'space-between'
+  /** Distribute items evenly across the container's main axis, with a half-size space on either end of the items */
+  | 'space-around'
+  /** Distribute items evenly across the container's main axis, with items having equal space around them */
+  | 'space-evenly';

src/surfaces/admin/components/TextField/TextField.ts

 import {createRemoteComponent} from '@remote-ui/core';
+import {
+  AutocompleteProps,
+  TextAutocompleteField,
+  InputProps,
+  MinMaxLengthProps,
+} from '../shared';
 
-export interface TextFieldProps {
-  /** Human-readable label for the input. */
-  label: string;
+export interface TextFieldProps
+  extends InputProps<string>,
+    MinMaxLengthProps,
+    AutocompleteProps<TextAutocompleteField> {}
 
-  /** Input type */
-  type?: 'text' | 'search' | 'number';
-
-  /** Input value. */
-  value?: string;
-
-  /** Hint text to display when no text is input */
-  placeholder?: string;
-
-  /** Allow for multiple lines of input. */
-  multiline?: number | boolean;
-
-  /** Text to display before the input value. */
-  prefix?: string;
-
-  /** Text to display after the input value. */
-  suffix?: string;
-
-  /** Error text to display beneath the label. */
-  error?: string;
-
-  /** Callback when value is changed. */
-  onInput?: (value: string) => void;
-
-  /** Callback when user leaves the input. */
-  onChange?: (value: string) => void;
-
-  /** Callback when input is focused. */
-  onFocus?(): void | Promise<void>;
-
-  /** Callback when focus is removed. */
-  onBlur?(): void | Promise<void>;
-
-  /** Show a 'clear text' button in the input. */
-  clearButton?: boolean;
-
-  /** Callback when clear button is pressed. */
-  onClearButtonPress?(): void;
-}
-
-/**
- * TextField is a versatile input field that merchants can type into.
- *
- * It supports several input formats including numbers.
- */
 export const TextField = createRemoteComponent<'TextField', TextFieldProps>(
   'TextField',
 );

No alert changes

Improved metrics

Lines of code

13782

increased by1.25%

Worsened metrics

Total package byte prevSize

1162622

decreased by-0.69%

Number of package files

550

decreased by-15.64%

No dependency changes