npm - @shopify/ui-extensions - Versions diffs - 2023.4.2 → 2023.7.0 - Mend

@shopify/ui-extensions 2023.4.2 → 2023.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (251) hide show

package/src/surfaces/checkout/components/GridItem/README.md DELETED Viewed

@@ -1,72 +0,0 @@
-# GridItem
-GridItem can be used as children of Grid.
-It offers a way to span the element across a number of columns and rows.
-## Props
-optional = ?
-| Name               | Type                                                                                                                                                                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| columnSpan?        | <code>number &#124; ConditionalStyle<<wbr>number, AcceptedConditions<wbr>></code>                                                                                                                                                                                                                     | Number of columns the item will span across                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| rowSpan?           | <code>number &#124; ConditionalStyle<<wbr>number, AcceptedConditions<wbr>></code>                                                                                                                                                                                                                     | Number of rows the item will span across                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| 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;                                                                                                                                                                                                                                                           |
-| border?            | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderstyle">BorderStyle</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderstyle">BorderStyle</a><wbr>>, AcceptedConditions<wbr>></code>     | Adjust the border style.<br /><br />To shorten the code, it is possible to specify all the border style properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border styles are `base`<br /><br />- `['base', 'none']` means blockStart and blockEnd border styles are `base`, inlineStart and inlineEnd border styles are `none`<br /><br />- `['base', 'none', 'dotted', 'base']` means blockStart border style is `base`, inlineEnd border style is `none`, blockEnd border style is `dotted` and blockStart border style is `base`         |
-| borderWidth?       | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderwidth">BorderWidth</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderwidth">BorderWidth</a><wbr>>, AcceptedConditions<wbr>></code>     | Adjust the border width.<br /><br />To shorten the code, it is possible to specify all the border width properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border widths are `base`<br /><br />- `['base', 'medium']` means blockStart and blockEnd border widths are `base`, inlineStart and inlineEnd border widths are `medium`<br /><br />- `['base', 'medium', 'medium', 'base']` means blockStart border width is `base`, inlineEnd border width is `medium`, blockEnd border width is `medium` and blockStart border width is `base` |
-| borderRadius?      | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderradius">BorderRadius</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderradius">BorderRadius</a><wbr>>, AcceptedConditions<wbr>></code> | Adjust the border radius.<br /><br />To shorten the code, it is possible to specify all the border width properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border radii are `base`<br /><br />- `['base', 'none']` means blockStart and blockEnd border radii are `base`, inlineStart and inlineEnd border radii are `none`<br /><br />- `['base', 'none', 'tight', 'base']` means blockStart border radius is `base`, inlineEnd border radius is `none`, blockEnd border radius is `tight` and blockStart border radius is `base`         |
-| maxBlockSize?      | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the maximum block size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| maxInlineSize?     | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the maximum inline size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| minInlineSize?     | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the minimum inline size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| minBlockSize?      | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the block size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| padding?           | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#spacing">Spacing</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#spacing">Spacing</a><wbr>>, AcceptedConditions<wbr>></code>                     | Adjust the padding.<br /><br />To shorten the code, it is possible to specify all the padding properties in one property.<br /><br />Examples:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart paddings are `base`<br /><br />- [`base`, `none`] means blockStart and blockEnd paddings are `base`, inlineStart and inlineEnd paddings are `none`<br /><br />- [`base`, `none`, `loose`, `tight`] means blockStart padding is `base`, inlineEnd padding is `none`, blockEnd padding is `loose` and blockStart padding is `tight`                                                             |
-<a name="Spacing"></a>
-### Spacing
-<code>"none" &#124; "extraTight" &#124; "tight" &#124; "base" &#124; "loose" &#124; "extraLoose"</code>
-<a name="BorderRadius"></a>
-### BorderRadius
-<code>"base" &#124; "tight" &#124; "loose" &#124; "fullyRounded" &#124; "none"</code>
-<a name="BorderWidth"></a>
-### BorderWidth
-<code>"base" &#124; "medium"</code>
-<a name="MaybeShorthandProperty"></a>
-### MaybeShorthandProperty
-<code>T &#124; <a href="#shorthandproperty">ShorthandProperty</a><<wbr>T<wbr>></code>
-<a name="ShorthandProperty"></a>
-### ShorthandProperty
-<code>[T, T] &#124; [T, T, T, T]</code>
-<a name="BorderStyle"></a>
-### BorderStyle
-<code>"base" &#124; "dotted" &#124; "none"</code>
-<a name="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.                                                           |

package/src/surfaces/checkout/components/Heading/README.md DELETED Viewed

@@ -1,19 +0,0 @@
-# Heading
-Headings control the visual style of headings. Use headings to introduce major
-sections, like Contact information, Shipping address, or Shipping method.
-Unlike HTML headings, you don’t explicitly specify the position of the heading in the
-document outline. Nest headings within the heading group component to control
-the document outline structure used by assistive technologies.
-## Props
-optional = ?
-| Name               | Type                                              | Description                                                                                                                                                                                                                                                                                                                                                       |
-| ------------------ | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| id?                | <code>string</code>                               | Unique identifier. Typically used to make the heading a target that another component can refer to in order to provide an alternative accessibility label.                                                                                                                                                                                                        |
-| level?             | <code>1 &#124; 2 &#124; 3</code>                  | The visual level of the heading. When not set, the heading will use its “automatic” heading level, which is determined by the level of nesting within ancestor `HeadingGroup`s. No matter what value you provide here, the semantic level (e.g., how the heading contributes to the document outline) is determined exclusively by the “automatic” heading level. |
-| accessibilityRole? | <code>"presentation"</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>"presentation"</code>: Used to strip the semantic meaning of an element, but leave the visual styling intact.                                                                                  |
-| inlineAlignment?   | <code>"start" &#124; "center" &#124; "end"</code> | Align text along the main axis.                                                                                                                                                                                                                                                                                                                                   |

package/src/surfaces/checkout/components/HeadingGroup/README.md DELETED Viewed

@@ -1,7 +0,0 @@
-# HeadingGroup
-Heading group controls the heading level of headings nested within it, like H1, H2, H3.
-Use a heading group whenever you use a heading to ensure the experience is the same
-for screen reader users. When using a heading, any children related to that
-heading should be nested within the same heading group.

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

@@ -1,15 +0,0 @@
-# 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/Image/README.md DELETED Viewed

@@ -1,53 +0,0 @@
-# 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/InlineLayout/README.md DELETED Viewed

@@ -1,103 +0,0 @@
-# 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/InlineSpacer/README.md DELETED Viewed

@@ -1,14 +0,0 @@
-# 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/InlineStack/README.md DELETED Viewed

@@ -1,87 +0,0 @@
-# InlineStack
-InlineStack is used to lay out a horizontal row of elements. Elements always wrap.
-## Props
-optional = ?
-| Name                | Type                                                                                                                                                                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 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'` string will render: `&lt;li&gt;`<br /><br />- In an HTML host a `['listItem', 'separator']` tuple will render: `&lt;li role='separator'&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.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| blockAlignment?     | <code><a href="#blockalignment">BlockAlignment</a> &#124; ConditionalStyle<<wbr><a href="#blockalignment">BlockAlignment</a>, AcceptedConditions<wbr>></code>                                                                                                                                         | Position children along the cross axis<br /><br />Default value: <code>'start'</code>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| inlineAlignment?    | <code><a href="#inlinealignment">InlineAlignment</a> &#124; ConditionalStyle<<wbr><a href="#inlinealignment">InlineAlignment</a>, AcceptedConditions<wbr>></code>                                                                                                                                     | Position children along the main axis<br /><br />Default value: <code>'start'</code>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| spacing?            | <code><a href="#spacing">Spacing</a> &#124; ConditionalStyle<<wbr><a href="#spacing">Spacing</a>, AcceptedConditions<wbr>></code>                                                                                                                                                                     | Adjust spacing between children<br /><br />Default value: <code>'base'</code>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| 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="Spacing"></a>
-### Spacing
-<code>"none" &#124; "extraTight" &#124; "tight" &#124; "base" &#124; "loose" &#124; "extraLoose"</code>
-<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="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.                                                           |

package/src/surfaces/checkout/components/Link/README.md DELETED Viewed

@@ -1,18 +0,0 @@
-# Link
-Link makes text interactive so customers can perform an action, such as navigating to another location.
-## Props
-optional = ?
-| Name                | Type                        | Description                                                                                                                                                                                                                                                                                                                                |
-| ------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| to?                 | <code>string</code>         | Destination to navigate to. You must provide either this property, `onPress`, or both.                                                                                                                                                                                                                                                     |
-| external?           | <code>boolean</code>        | Open the link in a new window or tab                                                                                                                                                                                                                                                                                                       |
-| id?                 | <code>string</code>         | Unique identifier.<br /><br />Typically used as a target for another component’s controls to associate an accessible label with an action.                                                                                                                                                                                                 |
-| language?           | <code>string</code>         | 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) (&#34;subtag&#34; label) |
-| accessibilityLabel? | <code>string</code>         | A label used for buyers using assistive technologies. When set, any 'children' supplied to this component are hidden from being seen for accessibility purposes to prevent duplicate content from being read.                                                                                                                              |
-| appearance?         | <code>"monochrome"</code>   | Specify the color of the link. `monochrome` will take the color of its parent.<br /><br /><code>"monochrome"</code>: Will take the color of its parent                                                                                                                                                                                     |
-| onPress?            | <code>() => void</code>     | Callback when pressed. If `to` is set, it will execute the callback and then navigate to the location specified by `to`.                                                                                                                                                                                                                   |
-| overlay?            | <code>RemoteFragment</code> | An overlay component to render when the user interacts with the component.                                                                                                                                                                                                                                                                 |

package/src/surfaces/checkout/components/List/README.md DELETED Viewed

@@ -1,19 +0,0 @@
-# List
-Lists display a set of related content. Each list item usually begins with a bullet or a number.
-## Props
-optional = ?
-| Name                | Type                                                                                                                              | Description                                                                                                                                                                |
-| ------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| spacing?            | <code><a href="#spacing">Spacing</a> &#124; ConditionalStyle<<wbr><a href="#spacing">Spacing</a>, AcceptedConditions<wbr>></code> | Adjust spacing between list items<br /><br />Default value: <code>'base'</code>                                                                                            |
-| marker?             | <code>"none" &#124; "bullet" &#124; "number"</code>                                                                               | Type of marker to display<br /><br />Default value: <code>'bullet'</code>                                                                                                  |
-| accessibilityLabel? | <code>string</code>                                                                                                               | A label that describes the purpose or contents of the list. When set, it will be announced to buyers using assistive technologies and will provide them with more context. |
-<a name="Spacing"></a>
-### Spacing
-<code>"none" &#124; "extraTight" &#124; "tight" &#124; "base" &#124; "loose" &#124; "extraLoose"</code>

package/src/surfaces/checkout/components/ListItem/README.md DELETED Viewed

@@ -1,5 +0,0 @@
-# ListItem
-List items are used as children of the `List` component.
-They usually begins with a bullet or a number.