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

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

@@ -0,0 +1,15 @@
+# Icon
+
+Icons are pictograms or graphic symbols.
+They can act as wayfinding tools or as a means of communicating functionality.
+
+## Props
+
+optional = ?
+
+| Name                | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| accessibilityLabel? | <code>string</code>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | A label that describes the purpose or contents of the icon. When set, it will be announced to buyers using assistive technologies and will provide them with more context.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| appearance?         | <code>"accent" &#124; "interactive" &#124; "subdued" &#124; "info" &#124; "success" &#124; "warning" &#124; "critical" &#124; "monochrome"</code>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Sets the appearance (color) of the icon.<br /><br />By default the icon will inherit the color of its parent.<br /><br /><code>"accent"</code>: Use to convey emphasis and draw attention to the icon.<br /><br /><code>"interactive"</code>: Use to convey that the icon is pressable, hoverable or otherwise interactive.<br /><br /><code>"subdued"</code>: Use to convey a subdued or disabled state for the icon.<br /><br /><code>"info"</code>: Use to convey icon is informative or has information.<br /><br /><code>"success"</code>: Use to convey a successful interaction.<br /><br /><code>"warning"</code>: Use to convey something needs attention or an action needs to be taken.<br /><br /><code>"critical"</code>: Use to convey a problem has arisen.<br /><br /><code>"monochrome"</code>: Will take the color of its parent<br /><br />Default value: <code>'monochrome'</code> |
+| size?               | <code>"extraSmall" &#124; "small" &#124; "base" &#124; "large" &#124; "fill"</code>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Adjusts the size of the icon.<br /><br />Default value: <code>'base'</code>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| source              | <code>"arrowLeft" &#124; "arrowRight" &#124; "arrowUp" &#124; "arrowUpRight" &#124; "arrowDown" &#124; "bag" &#124; "calendar" &#124; "camera" &#124; "caretDown" &#124; "cart" &#124; "checkmark" &#124; "chevronDown" &#124; "chevronUp" &#124; "chevronRight" &#124; "chevronLeft" &#124; "close" &#124; "critical" &#124; "discount" &#124; "delivered" &#124; "delivery" &#124; "disabled" &#124; "email" &#124; "errorFill" &#124; "geolocation" &#124; "grid" &#124; "hamburger" &#124; "horizontalDots" &#124; "info" &#124; "infoFill" &#124; "list" &#124; "lock" &#124; "magnify" &#124; "map" &#124; "marker" &#124; "minus" &#124; "mobile" &#124; "note" &#124; "pen" &#124; "verticalDots" &#124; "plus" &#124; "questionFill" &#124; "reorder" &#124; "store" &#124; "success" &#124; "truck" &#124; "warning" &#124; "warningFill" &#124; "giftFill" &#124; "external" &#124; "profile"</code> | Specifies which icon to display                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

package/src/surfaces/checkout/components/Icon/examples/basic-icon.example.ts

@@ -0,0 +1,7 @@
+import {extend, Icon} from '@shopify/checkout-ui-extensions';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const icon = root.createComponent(Icon, {source: 'discount'});
+
+  root.appendChild(icon);
+});

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

@@ -0,0 +1,83 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import type {
+  MaybeConditionalStyle,
+  MaybeResponsiveConditionalStyle,
+  ResolutionCondition,
+  ViewportSizeCondition,
+  AtLeastOne,
+} from '../../style';
+import {BorderProps} from '../shared';
+import type {Fit, AccessibilityRole} from '../shared';
+
+export interface ImageProps extends BorderProps {
+  /**
+   * The URL or path to the image. Supports the `resolution` and `viewportInlineSize` conditional styles only.
+   */
+  source: Required<
+    MaybeConditionalStyle<
+      string,
+      AtLeastOne<ViewportSizeCondition & ResolutionCondition>
+    >
+  >;
+  /**
+   * An alternative text description that describe the image for the reader to
+   * understand what it is about. It is extremely useful for both buyers using
+   * assistive technology and sighted buyers. A well written `description`
+   * provides people with visual impairments the ability to participate in
+   * consuming non-text content. When a screen readers encounters an `Image`,
+   * the description is read and announced aloud. If an image fails to load,
+   * potentially due to a poor connection, the `description` is displayed on
+   * screen instead. This has the benefit of letting a sighted buyer know an
+   * image was meant to load here, but as an alternative, they’re still able to
+   * consume the text content. Read
+   * [considerations when writing alternative text](https://ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204)
+   * to learn more.
+   *
+   * @defaultValue ''
+   */
+  accessibilityDescription?: string;
+  /**
+   * Indicates how the browser should load the image, either eager or lazy.
+   *
+   * Uses native browser behavior and is not supported by all browsers.
+   * If no value is provided then the image is loaded immediately, regardless of
+   * whether or not the image is currently within the visible viewport.
+   */
+  loading?: Loading;
+  /**
+   * Displays the image at the specified aspect ratio (fills the width of the
+   * parent container and sets the height accordingly) and creates an invisible
+   * placeholder to prevent content jumping when the image loads. Use along
+   * with `fit` if the specified aspect ratio does not match the intrinsic
+   * aspect ratio to prevent the image from stretching.
+   */
+  aspectRatio?: number;
+  /**
+   * Indicates how the image fits in its frame.
+   * Use if the image is not displayed at its intrinsic size to maintain
+   * the aspect ratio.
+   */
+  fit?: MaybeResponsiveConditionalStyle<Fit>;
+  /**
+   * 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.
+   */
+  accessibilityRole?: Extract<AccessibilityRole, 'decorative'>;
+}
+
+type Loading =
+  /**
+   * Image is loaded immediately, regardless of whether or not the image is currently within the visible viewport.
+   */
+  | 'eager'
+  /**
+   * Image is loaded when it’s within the visible viewport.
+   */
+  | 'lazy';
+
+/**
+ * Image is used for large format, responsive images.
+ */
+export const Image = createRemoteComponent<'Image', ImageProps>('Image');

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

@@ -0,0 +1,53 @@
+# Image
+
+Image is used for large format, responsive images.
+
+## Props
+
+optional = ?
+
+| Name                      | Type                                                                                                                                                                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| source                    | <code>Required<<wbr>string &#124; ConditionalStyle<<wbr>string, AcceptedConditions<wbr>><wbr>></code>                                                                                                                                                                                                 | The URL or path to the image. Supports the `resolution` and `viewportInlineSize` conditional styles only.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| accessibilityDescription? | <code>string</code>                                                                                                                                                                                                                                                                                   | An alternative text description that describe the image for the reader to understand what it is about. It is extremely useful for both buyers using assistive technology and sighted buyers. A well written `description` provides people with visual impairments the ability to participate in consuming non-text content. When a screen readers encounters an `Image`, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, the `description` is displayed on screen instead. This has the benefit of letting a sighted buyer know an image was meant to load here, but as an alternative, they’re still able to consume the text content. Read [considerations when writing alternative text](https://ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204) to learn more.<br /><br />Default value: <code>''</code> |
+| loading?                  | <code>"eager" &#124; "lazy"</code>                                                                                                                                                                                                                                                                    | Indicates how the browser should load the image, either eager or lazy.<br /><br />Uses native browser behavior and is not supported by all browsers. If no value is provided then the image is loaded immediately, regardless of whether or not the image is currently within the visible viewport.<br /><br /><code>"eager"</code>: Image is loaded immediately, regardless of whether or not the image is currently within the visible viewport.<br /><br /><code>"lazy"</code>: Image is loaded when it’s within the visible viewport.                                                                                                                                                                                                                                                                                                                                                    |
+| aspectRatio?              | <code>number</code>                                                                                                                                                                                                                                                                                   | Displays the image at the specified aspect ratio (fills the width of the parent container and sets the height accordingly) and creates an invisible placeholder to prevent content jumping when the image loads. Use along with `fit` if the specified aspect ratio does not match the intrinsic aspect ratio to prevent the image from stretching.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| fit?                      | <code><a href="#fit">Fit</a> &#124; ConditionalStyle<<wbr><a href="#fit">Fit</a>, AcceptedConditions<wbr>></code>                                                                                                                                                                                     | Indicates how the image fits in its frame. Use if the image is not displayed at its intrinsic size to maintain the aspect ratio.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| accessibilityRole?        | <code>"decorative"</code>                                                                                                                                                                                                                                                                             | 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.<br /><br /><code>"decorative"</code>: Used to indicate that an image is decorative and should be hidden from assistive technologies.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| border?                   | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderstyle">BorderStyle</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderstyle">BorderStyle</a><wbr>>, AcceptedConditions<wbr>></code>     | Adjust the border style.<br /><br />To shorten the code, it is possible to specify all the border style properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border styles are `base`<br /><br />- `['base', 'none']` means blockStart and blockEnd border styles are `base`, inlineStart and inlineEnd border styles are `none`<br /><br />- `['base', 'none', 'dotted', 'base']` means blockStart border style is `base`, inlineEnd border style is `none`, blockEnd border style is `dotted` and blockStart border style is `base`                                                                                                                                                                                                                                                                               |
+| borderWidth?              | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderwidth">BorderWidth</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderwidth">BorderWidth</a><wbr>>, AcceptedConditions<wbr>></code>     | Adjust the border width.<br /><br />To shorten the code, it is possible to specify all the border width properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border widths are `base`<br /><br />- `['base', 'medium']` means blockStart and blockEnd border widths are `base`, inlineStart and inlineEnd border widths are `medium`<br /><br />- `['base', 'medium', 'medium', 'base']` means blockStart border width is `base`, inlineEnd border width is `medium`, blockEnd border width is `medium` and blockStart border width is `base`                                                                                                                                                                                                                                                                       |
+| borderRadius?             | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderradius">BorderRadius</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderradius">BorderRadius</a><wbr>>, AcceptedConditions<wbr>></code> | Adjust the border radius.<br /><br />To shorten the code, it is possible to specify all the border width properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border radii are `base`<br /><br />- `['base', 'none']` means blockStart and blockEnd border radii are `base`, inlineStart and inlineEnd border radii are `none`<br /><br />- `['base', 'none', 'tight', 'base']` means blockStart border radius is `base`, inlineEnd border radius is `none`, blockEnd border radius is `tight` and blockStart border radius is `base`                                                                                                                                                                                                                                                                               |
+
+<a name="BorderRadius"></a>
+
+### BorderRadius
+
+<code>"base" &#124; "tight" &#124; "loose" &#124; "fullyRounded" &#124; "none"</code>
+<a name="BorderWidth"></a>
+
+### BorderWidth
+
+<code>"base" &#124; "medium"</code>
+<a name="MaybeShorthandProperty"></a>
+
+### MaybeShorthandProperty
+
+<code>T &#124; <a href="#shorthandproperty">ShorthandProperty</a><<wbr>T<wbr>></code>
+<a name="ShorthandProperty"></a>
+
+### ShorthandProperty
+
+<code>[T, T] &#124; [T, T, T, T]</code>
+<a name="BorderStyle"></a>
+
+### BorderStyle
+
+<code>"base" &#124; "dotted" &#124; "none"</code>
+<a name="Fit"></a>
+
+### Fit
+
+| Value                  | Description                                                                                                               |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| <code>"cover"</code>   | Image maintains its aspect ratio while fitting within the frame.                                                          |
+| <code>"contain"</code> | Image maintains its aspect ratio while filling the frame. If the image is larger than the frame, then it will be cropped. |

package/src/surfaces/checkout/components/Image/examples/basic-image.example.ts

@@ -0,0 +1,10 @@
+import {extend, Image} from '@shopify/checkout-ui-extensions';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const image = root.createComponent(Image, {
+    source:
+      'https://shopify.dev/assets/api/checkout-extensions/checkout/components/image-example-code.png',
+  });
+
+  root.appendChild(image);
+});

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

@@ -0,0 +1,49 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import type {MaybeResponsiveConditionalStyle} from '../../style';
+import type {BorderProps, Columns, SizingProps, SpacingProps} from '../shared';
+import type {GridProps} from '../Grid/Grid';
+
+export interface InlineLayoutProps
+  extends Omit<GridProps, 'columns' | 'rows'>,
+    BorderProps,
+    SizingProps,
+    SpacingProps {
+  /**
+   * Sizes for each column of the layout.
+   *
+   *
+   * `auto`: intrinsic size of the element.
+   *
+   * `fill`: fills the remaining available space. When multiple elements are set to `fill`, the remaining space is shared equally.
+   *
+   * `` `${number}%` ``: size in percentages.
+   *
+   * `` `${number}fr` ``: size in fractions.
+   *
+   * `number`: size in pixels.
+   *
+   *
+   * - When the sum of the defined sizes is larger than the available space, elements will shrink to avoid overflow.
+   *
+   * - When the size of an element is not explicitly set, it will fill the remaining space available.
+   *
+   * - When only one size is set and outside of an array, all elements of the layout will take that size.
+   *
+   *
+   * @defaultValue 'fill'
+   */
+  columns?: MaybeResponsiveConditionalStyle<Columns>;
+}
+
+/**
+ * InlineLayout is used to lay out content over multiple columns.
+ *
+ * By default, all columns are of equal size and fill the available inline space.
+ * Content does not wrap on new rows when not enough columns have been explicitly set,
+ * instead they are added as new column and fill the remaining inline space.
+ */
+export const InlineLayout = createRemoteComponent<
+  'InlineLayout',
+  InlineLayoutProps
+>('InlineLayout');

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

@@ -0,0 +1,103 @@
+# InlineLayout
+
+InlineLayout is used to lay out content over multiple columns.
+
+By default, all columns are of equal size and fill the available inline space.
+Content does not wrap on new rows when not enough columns have been explicitly set,
+instead they are added as new column and fill the remaining inline space.
+
+## Props
+
+optional = ?
+
+| Name                | Type                                                                                                                                                                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| columns?            | <code><a href="#columns">Columns</a> &#124; ConditionalStyle<<wbr><a href="#columns">Columns</a>, AcceptedConditions<wbr>></code>                                                                                                                                                                     | Sizes for each column of the layout.<br /><br />`auto`: intrinsic size of the element.<br /><br />`fill`: fills the remaining available space. When multiple elements are set to `fill`, the remaining space is shared equally.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`` `${number}fr` ``: size in fractions.<br /><br />`number`: size in pixels.<br /><br />- When the sum of the defined sizes is larger than the available space, elements will shrink to avoid overflow.<br /><br />- When the size of an element is not explicitly set, it will fill the remaining space available.<br /><br />- When only one size is set and outside of an array, all elements of the layout will take that size.<br /><br />Default value: <code>'fill'</code> |
+| spacing?            | <code><a href="#spacing">Spacing</a> &#124; [<a href="#spacing">Spacing</a>, <a href="#spacing">Spacing</a>] &#124; ConditionalStyle<<wbr><a href="#spacing">Spacing</a> &#124; [<a href="#spacing">Spacing</a>, <a href="#spacing">Spacing</a>], AcceptedConditions<wbr>></code>                     | Adjust spacing between children.<br /><br />- `base` means the space between rows and columns is `base`.<br /><br />- [`base`, `none`] means the space between rows is `base`, space between columns is `none`.<br /><br />Default value: <code>'none'</code>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| blockAlignment?     | <code><a href="#blockalignment">BlockAlignment</a> &#124; ConditionalStyle<<wbr><a href="#blockalignment">BlockAlignment</a>, AcceptedConditions<wbr>></code>                                                                                                                                         | Position children along the cross axis.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| inlineAlignment?    | <code><a href="#inlinealignment">InlineAlignment</a> &#124; ConditionalStyle<<wbr><a href="#inlinealignment">InlineAlignment</a>, AcceptedConditions<wbr>></code>                                                                                                                                     | Position children along the main axis.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| accessibilityRole?  | <code><a href="#nonpresentationalaccessibilityrole">NonPresentationalAccessibilityRole</a> &#124; [<a href="#nonpresentationalaccessibilityrole">NonPresentationalAccessibilityRole</a>, <a href="#nonpresentationalaccessibilityrole">NonPresentationalAccessibilityRole</a>]</code>                 | 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.<br /><br />For example:<br /><br />- In an HTML host a `['listItem', 'separator']` tuple will render: &lt;li role='separator'&gt;<br /><br />- In an HTML host a `listItem` string will render: &lt;li&gt;                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| accessibilityLabel? | <code>string</code>                                                                                                                                                                                                                                                                                   | A label that describes the purpose or contents of the element. When set, it will be announced to buyers using assistive technologies and will provide them with more context.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| border?             | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderstyle">BorderStyle</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderstyle">BorderStyle</a><wbr>>, AcceptedConditions<wbr>></code>     | Adjust the border style.<br /><br />To shorten the code, it is possible to specify all the border style properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border styles are `base`<br /><br />- `['base', 'none']` means blockStart and blockEnd border styles are `base`, inlineStart and inlineEnd border styles are `none`<br /><br />- `['base', 'none', 'dotted', 'base']` means blockStart border style is `base`, inlineEnd border style is `none`, blockEnd border style is `dotted` and blockStart border style is `base`                                                                                                                                                                   |
+| borderWidth?        | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderwidth">BorderWidth</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderwidth">BorderWidth</a><wbr>>, AcceptedConditions<wbr>></code>     | Adjust the border width.<br /><br />To shorten the code, it is possible to specify all the border width properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border widths are `base`<br /><br />- `['base', 'medium']` means blockStart and blockEnd border widths are `base`, inlineStart and inlineEnd border widths are `medium`<br /><br />- `['base', 'medium', 'medium', 'base']` means blockStart border width is `base`, inlineEnd border width is `medium`, blockEnd border width is `medium` and blockStart border width is `base`                                                                                                                                                           |
+| borderRadius?       | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderradius">BorderRadius</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderradius">BorderRadius</a><wbr>>, AcceptedConditions<wbr>></code> | Adjust the border radius.<br /><br />To shorten the code, it is possible to specify all the border width properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border radii are `base`<br /><br />- `['base', 'none']` means blockStart and blockEnd border radii are `base`, inlineStart and inlineEnd border radii are `none`<br /><br />- `['base', 'none', 'tight', 'base']` means blockStart border radius is `base`, inlineEnd border radius is `none`, blockEnd border radius is `tight` and blockStart border radius is `base`                                                                                                                                                                   |
+| maxBlockSize?       | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the maximum block size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| maxInlineSize?      | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the maximum inline size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| minInlineSize?      | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the minimum inline size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| minBlockSize?       | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the block size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| padding?            | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#spacing">Spacing</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#spacing">Spacing</a><wbr>>, AcceptedConditions<wbr>></code>                     | Adjust the padding.<br /><br />To shorten the code, it is possible to specify all the padding properties in one property.<br /><br />Examples:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart paddings are `base`<br /><br />- [`base`, `none`] means blockStart and blockEnd paddings are `base`, inlineStart and inlineEnd paddings are `none`<br /><br />- [`base`, `none`, `loose`, `tight`] means blockStart padding is `base`, inlineEnd padding is `none`, blockEnd padding is `loose` and blockStart padding is `tight`                                                                                                                                                                                                                       |
+
+<a name="BorderRadius"></a>
+
+### BorderRadius
+
+<code>"base" &#124; "tight" &#124; "loose" &#124; "fullyRounded" &#124; "none"</code>
+<a name="BorderWidth"></a>
+
+### BorderWidth
+
+<code>"base" &#124; "medium"</code>
+<a name="MaybeShorthandProperty"></a>
+
+### MaybeShorthandProperty
+
+<code>T &#124; <a href="#shorthandproperty">ShorthandProperty</a><<wbr>T<wbr>></code>
+<a name="ShorthandProperty"></a>
+
+### ShorthandProperty
+
+<code>[T, T] &#124; [T, T, T, T]</code>
+<a name="BorderStyle"></a>
+
+### BorderStyle
+
+<code>"base" &#124; "dotted" &#124; "none"</code>
+<a name="NonPresentationalAccessibilityRole"></a>
+
+### NonPresentationalAccessibilityRole
+
+| Value                        | Description                                                                                                            |
+| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| <code>"main"</code>          | Used to indicate the primary content.                                                                                  |
+| <code>"header"</code>        | Used to indicate the component is a header.                                                                            |
+| <code>"footer"</code>        | Used to display information such as copyright information, navigation links, and privacy statements.                   |
+| <code>"section"</code>       | Used to indicate a generic section.                                                                                    |
+| <code>"complementary"</code> | Used to designate a supporting section that relates to the main content.                                               |
+| <code>"navigation"</code>    | Used to identify major groups of links used for navigating.                                                            |
+| <code>"orderedList"</code>   | Used to identify a list of ordered items.                                                                              |
+| <code>"listItem"</code>      | Used to identify an item inside a list of items.                                                                       |
+| <code>"unorderedList"</code> | Used to identify a list of unordered items.                                                                            |
+| <code>"separator"</code>     | Used to indicates the component acts as a divider that separates and distinguishes sections of content.                |
+| <code>"status"</code>        | Used to define a live region containing advisory information for the user that is not important enough to be an alert. |
+| <code>"alert"</code>         | Used for important, and usually time-sensitive, information.                                                           |
+
+<a name="InlineAlignment"></a>
+
+### InlineAlignment
+
+<code>"start" &#124; "center" &#124; "end"</code>
+<a name="BlockAlignment"></a>
+
+### BlockAlignment
+
+<code><a href="#alignment">Alignment</a> &#124; "baseline"</code>
+<a name="Alignment"></a>
+
+### Alignment
+
+<code>"start" &#124; "center" &#124; "end"</code>
+<a name="Spacing"></a>
+
+### Spacing
+
+<code>"none" &#124; "extraTight" &#124; "tight" &#124; "base" &#124; "loose" &#124; "extraLoose"</code>
+<a name="Columns"></a>
+
+### Columns
+
+<code><a href="#griditemsize">GridItemSize</a>[] &#124; <a href="#griditemsize">GridItemSize</a></code>
+<a name="GridItemSize"></a>
+
+### GridItemSize
+
+<code>"auto" &#124; "fill" &#124; number &#124; &#96;&dollar;{number}fr&#96; &#124; &#96;&dollar;{number}%&#96;</code>

package/src/surfaces/checkout/components/InlineLayout/examples/basic-inlineLayout.example.ts

@@ -0,0 +1,16 @@
+import {extend, InlineLayout, View} from '@shopify/checkout-ui-extensions';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const inlineLayout = root.createComponent(
+    InlineLayout,
+    {
+      columns: ['20%', 'fill'],
+    },
+    [
+      root.createComponent(View, {border: 'base', padding: 'base'}, '20%'),
+      root.createComponent(View, {border: 'base', padding: 'base'}, 'fill'),
+    ],
+  );
+
+  root.appendChild(inlineLayout);
+});

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

@@ -0,0 +1,24 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import type {MaybeResponsiveConditionalStyle} from '../../style';
+import type {Spacing} from '../shared';
+
+export interface InlineSpacerProps {
+  /**
+   * Adjust size of the spacer
+   *
+   * @defaultValue 'base'
+   **/
+  spacing?: MaybeResponsiveConditionalStyle<Exclude<Spacing, 'none'>>;
+}
+
+/**
+ * InlineSpacer is used to create empty inline space, typically when variable spacing
+ * is needed between multiple elements.
+ *
+ * Note that you should favor InlineStack when spacing between all elements is the same.
+ */
+export const InlineSpacer = createRemoteComponent<
+  'InlineSpacer',
+  InlineSpacerProps
+>('InlineSpacer');

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

@@ -0,0 +1,14 @@
+# InlineSpacer
+
+InlineSpacer is used to create empty inline space, typically when variable spacing
+is needed between multiple elements.
+
+Note that you should favor InlineStack when spacing between all elements is the same.
+
+## Props
+
+optional = ?
+
+| Name     | Type                                                                                                                                                                                                                          | Description                                                             |
+| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| spacing? | <code>"extraTight" &#124; "tight" &#124; "base" &#124; "loose" &#124; "extraLoose" &#124; ConditionalStyle<<wbr>"extraTight" &#124; "tight" &#124; "base" &#124; "loose" &#124; "extraLoose", AcceptedConditions<wbr>></code> | Adjust size of the spacer<br /><br />Default value: <code>'base'</code> |

package/src/surfaces/checkout/components/InlineSpacer/examples/basic-inlinespacer.example.ts

@@ -0,0 +1,16 @@
+import {
+  extend,
+  InlineSpacer,
+  InlineStack,
+  View,
+} from '@shopify/checkout-ui-extensions';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const inlineSpacer = root.createComponent(InlineStack, {spacing: 'none'}, [
+    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
+    root.createComponent(InlineSpacer, {spacing: 'loose'}),
+    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
+  ]);
+
+  root.appendChild(inlineSpacer);
+});

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

@@ -0,0 +1,63 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import type {MaybeResponsiveConditionalStyle} from '../../style';
+import type {
+  BlockAlignment,
+  BorderProps,
+  InlineAlignment,
+  SizingProps,
+  Spacing,
+  SpacingProps,
+  ViewLikeAccessibilityRole,
+} from '../shared';
+
+export interface InlineStackProps
+  extends BorderProps,
+    SizingProps,
+    SpacingProps {
+  /**
+   * 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'` string will render: `<li>`
+   *
+   * - In an HTML host a `['listItem', 'separator']` tuple will render: `<li role='separator'>`
+   */
+  accessibilityRole?: ViewLikeAccessibilityRole;
+  /**
+   * 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;
+  /**
+   * Position children along the cross axis
+   *
+   * @defaultValue 'start'
+   */
+  blockAlignment?: MaybeResponsiveConditionalStyle<BlockAlignment>;
+  /**
+   * Position children along the main axis
+   *
+   * @defaultValue 'start'
+   */
+  inlineAlignment?: MaybeResponsiveConditionalStyle<InlineAlignment>;
+  /**
+   * Adjust spacing between children
+   *
+   * @defaultValue 'base'
+   **/
+  spacing?: MaybeResponsiveConditionalStyle<Spacing>;
+}
+
+/**
+ * InlineStack is used to lay out a horizontal row of elements. Elements always wrap.
+ */
+export const InlineStack = createRemoteComponent<
+  'InlineStack',
+  InlineStackProps
+>('InlineStack');