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/BlockLayout/README.md DELETED Viewed

@@ -1,101 +0,0 @@
-# BlockLayout
-BlockLayout is used to lay out content over multiple rows.
-By default, all rows fill the available block space, sharing it equally.
-## Props
-optional = ?
-| Name                | Type                                                                                                                                                                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| rows?               | <code><a href="#rows">Rows</a> &#124; ConditionalStyle<<wbr><a href="#rows">Rows</a>, AcceptedConditions<wbr>></code>                                                                                                                                                                                 | Sizes for each row 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="Rows"></a>
-### Rows
-<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/BlockSpacer/README.md DELETED Viewed

@@ -1,14 +0,0 @@
-# BlockSpacer
-BlockSpacer is used to create empty block space, typically when variable spacing
-is needed between multiple elements.
-Note that you should favor BlockStack 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/BlockStack/README.md DELETED Viewed

@@ -1,77 +0,0 @@
-# BlockStack
-BlockStack is used to vertically stack elements.
-## Props
-optional = ?
-| Name                | Type                                                                                                                                                                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| inlineAlignment?    | <code><a href="#inlinealignment">InlineAlignment</a> &#124; ConditionalStyle<<wbr><a href="#inlinealignment">InlineAlignment</a>, AcceptedConditions<wbr>></code>                                                                                                                                     | Position children along the main axis                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| 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>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| 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="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>

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

@@ -1,22 +0,0 @@
-# Button
-Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”.
-## Props
-optional = ?
-| Name                | Type                                                     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| ------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| kind?               | <code>"primary" &#124; "secondary" &#124; "plain"</code> | The type of button that will be rendered. The visual presentation of the button type is controlled by merchants through the Branding API.<br /><br />`primary`: button used for main actions. For example: &#34;Continue to next step&#34;.<br /><br />`secondary`: button used for secondary actions not blocking user progress. For example: &#34;Download Shop app&#34;.<br /><br />`plain`: renders a button that visually looks like a link.<br /><br />Default value: <code>'primary'</code> |
-| appearance?         | <code>"critical" &#124; "monochrome"</code>              | Specify the color treatment of the Button.<br /><br /><code>"critical"</code>: Use to convey a problem has arisen.<br /><br /><code>"monochrome"</code>: Will take the color of its parent                                                                                                                                                                                                                                                                                                         |
-| submit?             | <code>boolean</code>                                     | Allows the button to submit a form.                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| to?                 | <code>string</code>                                      | Destination URL to link to. If this value is set, the button will render as a Link.                                                                                                                                                                                                                                                                                                                                                                                                                |
-| inlineAlignment?    | <code>"start" &#124; "center" &#124; "end"</code>        | Specifies the inline alignment of the content.<br /><br />Default value: <code>'center'</code>                                                                                                                                                                                                                                                                                                                                                                                                     |
-| loading?            | <code>boolean</code>                                     | Replaces content with a loading indicator.<br /><br />Default value: <code>false</code>                                                                                                                                                                                                                                                                                                                                                                                                            |
-| loadingLabel?       | <code>string</code>                                      | Accessible label for the loading indicator when user prefers reduced motion. This value is only used if `loading` is true.                                                                                                                                                                                                                                                                                                                                                                         |
-| 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.                                                                                                                                                                                                                                                                                      |
-| accessibilityRole?  | <code>"button" &#124; "submit"</code>                    | The role of the button that will be rendered.<br /><br />`button`: renders a regular button.<br /><br />`submit`: renders a button that submits a form.<br /><br />Default value: <code>'button'</code>                                                                                                                                                                                                                                                                                            |
-| disabled?           | <code>boolean</code>                                     | Disables the button, disallowing any interaction.<br /><br />Default value: <code>false</code>                                                                                                                                                                                                                                                                                                                                                                                                     |
-| onPress?            | <code>() => void</code>                                  | Callback that is run when the button is pressed.                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| overlay?            | <code>RemoteFragment</code>                              | An overlay component to render when the user interacts with the component.                                                                                                                                                                                                                                                                                                                                                                                                                         |

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

@@ -1,18 +0,0 @@
-# Checkbox
-Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions.
-## Props
-optional = ?
-| Name                | Type                                  | Description                                                                                                                                                                                                                                                                                                                                               |
-| ------------------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| id?                 | <code>string</code>                   | A unique identifier for the field. When no `id` is set, a globally unique value will be used instead.                                                                                                                                                                                                                                                     |
-| name?               | <code>string</code>                   | An identifier for the field that is unique within the nearest containing `Form` component.                                                                                                                                                                                                                                                                |
-| value?              | <code>boolean</code>                  | Whether the checkbox is active. This prop is an alias for `checked`, and can be useful in form libraries that provide a normalized API for dealing with both `boolean` and `string` values. If both `value` and `checked` are set, `checked` takes precedence.                                                                                            |
-| checked?            | <code>boolean</code>                  | Whether the checkbox is active.                                                                                                                                                                                                                                                                                                                           |
-| disabled?           | <code>boolean</code>                  | Whether the checkbox can be changed.                                                                                                                                                                                                                                                                                                                      |
-| error?              | <code>string</code>                   | Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.                                                                                                                                                                                                       |
-| accessibilityLabel? | <code>string</code>                   | A label to use for the field that will be 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.                                                                                                           |
-| onChange?           | <code>(value: boolean) => void</code> | A callback that is run whenever the checkbox is changed. This callback is called with a boolean indicating whether the checkbox should now be active or inactive. This component is [controlled](https://reactjs.org/docs/forms.html#controlled-components), so you must store this value in state and reflect it back in the `checked` or `value` props. |

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

@@ -1,14 +0,0 @@
-# Choice
-Options inside a `ChoiceList`.
-The wrapping `ChoiceList` component will dictate if the choice renders as radio buttons or checkboxes.
-## Props
-optional = ?
-| Name                | Type                 | Description                                                                                                                                                                                                                                      |
-| ------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| id                  | <code>string</code>  | A unique identifier for the choice.                                                                                                                                                                                                              |
-| disabled?           | <code>boolean</code> | Whether the choice can be changed.                                                                                                                                                                                                               |
-| accessibilityLabel? | <code>string</code>  | A label to use for the choice that will be 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. |

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

@@ -1,14 +0,0 @@
-# ChoiceList
-Use choice lists to present a list of choices where buyers can make
-a single selection or multiple selections.
-## Props
-optional = ?
-| Name     | Type                                                 | Description                                                                                                                                                                                                                                                                                                                                                |
-| -------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| name     | <code>string</code>                                  | An identifier for the field that is unique within the nearest containing `Form` component.                                                                                                                                                                                                                                                                 |
-| value    | <code>string &#124; string[]</code>                  | A `string` or `string[]` indicating the ids of selected choices. When a string is set, choices render as radios. When a string array is set, choices render as checkboxes.                                                                                                                                                                                 |
-| onChange | <code>(value: string &#124; string[]) => void</code> | A callback that is run whenever the choice list is changed. This callback is called with a string or array of strings indicating the ids of choices that should now be selected. This component is [controlled](https://reactjs.org/docs/forms.html#controlled-components), so you must store this value in state and reflect it back in the `value` prop. |

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

@@ -1,13 +0,0 @@
-# Divider
-A divider separates content and represents a thematic break between elements.
-## Props
-optional = ?
-| Name       | Type                                                                  | Description                                                                                      |
-| ---------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| size?      | <code>"small" &#124; "base" &#124; "large" &#124; "extraLarge"</code> | Use to create dividers with varying widths.<br /><br />Default value: <code>'small'</code>       |
-| direction? | <code>"inline" &#124; "block"</code>                                  | Use to specify direction of divider.<br /><br />Default value: <code>'inline'</code>             |
-| alignment? | <code>"start" &#124; "center" &#124; "end"</code>                     | Use to specify alignment of contents of divider.<br /><br />Default value: <code>'center'</code> |

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

@@ -1,21 +0,0 @@
-# Form
-The form component should be used to wrap one or more form controls. This
-component provides an &#34;implicit submit&#34; behavior, where customers can submit
-the form from any input by pressing &#34;Enter&#34; on their keyboards. This
-behavior is widely expected, and should be respected as often as possible.
-Unlike an HTML `form` element, this component does not support configuring
-the descendant fields to be submitted via HTTP automatically. Instead, you
-must provide an `onSubmit` callback that will perform the necessary HTTP
-requests in JavaScript.
-## Props
-optional = ?
-| Name      | Type                    | Description                                                                                                               |
-| --------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| disabled? | <code>boolean</code>    | Whether the form is able to be submitted. When set to `true`, this will disable the implicit submit behavior of the form. |
-| onSubmit  | <code>() => void</code> | A callback that is run when the form is submitted.                                                                        |
-| id?       | <code>string</code>     | An optional override for the autogenerated form ID.                                                                       |

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

@@ -1,105 +0,0 @@
-# Grid
-Grid is used to lay out content in a matrix of rows and columns.
-## 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 content.<br /><br />`fill`: fills the remaining available space. When multiple columns 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. - Except when in scrollview, where the grid will fill the space with the defined sizes.<br /><br />- When only one size is set and outside of an array, the grid will have one column of that size.<br /><br />Default value: <code>'fill'</code> |
-| rows?               | <code><a href="#rows">Rows</a> &#124; ConditionalStyle<<wbr><a href="#rows">Rows</a>, AcceptedConditions<wbr>></code>                                                                                                                                                                                 | Sizes for each row of the layout.<br /><br />`auto`: intrinsic size of the content.<br /><br />`fill`: fills the remaining available space. When multiple rows 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 only one size is set and outside of an array, the grid will have one row of 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="Rows"></a>
-### Rows
-<code><a href="#griditemsize">GridItemSize</a>[] &#124; <a href="#griditemsize">GridItemSize</a></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>