@shopify/ui-extensions 2024.4.2 → 2024.10.0

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

@@ -10,15 +10,16 @@ import type {
   SpacingProps,
   VisibilityProps,
   Display,
-  MultiPick,
   ViewLikeAccessibilityRole,
   CornerProps,
   Opacity,
+  IdProps,
 } from '../shared';
 
 export type PositionType = 'absolute' | 'relative' | 'sticky';
 export type Coordinate = number | `${number}%`;
-interface BaseCoordinates {
+
+interface PositionBlockStart {
   /**
    * Adjust the block start offset.
    *
@@ -26,7 +27,10 @@ interface BaseCoordinates {
    *
    * `` `${number}%` ``: size in percentages. It refers to the block size of the parent component.
    */
-  blockStart: Coordinate;
+  blockStart?: Coordinate;
+}
+
+interface PositionInlineStart {
   /**
    * Adjust the inline start offset.
    *
@@ -34,7 +38,10 @@ interface BaseCoordinates {
    *
    * `` `${number}%` ``: size in percentages. It refers to the block size of the parent component.
    */
-  inlineStart: Coordinate;
+  inlineStart?: Coordinate;
+}
+
+interface PositionBlockEnd {
   /**
    * Adjust the block end offset.
    *
@@ -42,7 +49,10 @@ interface BaseCoordinates {
    *
    * `` `${number}%` ``: size in percentages. It refers to the block size of the parent component.
    */
-  blockEnd: Coordinate;
+  blockEnd?: Coordinate;
+}
+
+interface PositionInlineEnd {
   /**
    * Adjust the inline end offset.
    *
@@ -50,41 +60,55 @@ interface BaseCoordinates {
    *
    * `` `${number}%` ``: size in percentages. It refers to the block size of the parent component.
    */
-  inlineEnd: Coordinate;
+  inlineEnd?: Coordinate;
 }
 
-type PositionCoordinates = MultiPick<
-  BaseCoordinates,
-  [
-    'blockStart' | 'inlineStart',
-    'blockStart' | 'inlineEnd',
-    'blockEnd' | 'inlineStart',
-    'blockEnd' | 'inlineEnd',
-    'blockStart',
-    'blockEnd',
-    'inlineStart',
-    'inlineEnd',
-  ]
->;
-
-export type Position = {
+interface PositionTypeProperty {
   /**
-   * Changes how the View is positioned. For setting the position, only properties
-   * that set the offset on a different axis can be set simultaneously. This means
-   * that these combinations are not allowed:
-   *
-   * ```
-   * { blockStart, blockEnd }
-   * ```
-   *
-   * ```
-   * { inlineStart, inlineEnd }
-   * ```
+   * Changes how the `View` is positioned.
    *
    * @defaultValue 'relative'
    */
   type?: PositionType;
-} & PositionCoordinates;
+}
+
+interface PositionBlockStartInlineStart
+  extends PositionBlockStart,
+    PositionInlineStart,
+    PositionTypeProperty {
+  blockEnd?: undefined;
+  inlineEnd?: undefined;
+}
+
+interface PositionBlockStartInlineEnd
+  extends PositionBlockStart,
+    PositionInlineEnd,
+    PositionTypeProperty {
+  blockEnd?: undefined;
+  inlineStart?: undefined;
+}
+
+interface PositionBlockEndInlineStart
+  extends PositionBlockEnd,
+    PositionInlineStart,
+    PositionTypeProperty {
+  blockStart?: undefined;
+  inlineEnd?: undefined;
+}
+
+interface PositionBlockEndInlineEnd
+  extends PositionBlockEnd,
+    PositionInlineEnd,
+    PositionTypeProperty {
+  blockStart?: undefined;
+  inlineStart?: undefined;
+}
+
+export type Position =
+  | PositionBlockStartInlineStart
+  | PositionBlockStartInlineEnd
+  | PositionBlockEndInlineStart
+  | PositionBlockEndInlineEnd;
 
 export interface Translate {
   /**
@@ -105,27 +129,27 @@ export interface ViewProps
   extends Pick<BackgroundProps, 'background'>,
     BorderProps,
     CornerProps,
+    IdProps,
     SizingProps,
     SpacingProps,
     VisibilityProps {
   /**
-   * Changes the display of the View.
+   * Changes the display of the component.
    *
    *
-   * `inline` follows the direction of words in a sentence based on the document’s writing mode.
+   * `inline` the component starts on the same line as preceding inline content and allows subsequent content to continue on the same line.
    *
-   * `block` follows the direction of paragraphs based on the document’s writing mode.
+   * `block` the component starts on its own new line and fills its parent.
    *
+   * `auto` resets the component to its initial value. The actual value depends on the component and context.
    *
-   * @defaultValue 'block'
-   */
-  display?: Display;
-
-  /**
-   * A unique identifier for the View.
+   * `none` hides the component and removes it from the accessibility tree, making it invisible to screen readers.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   *
+   * @defaultValue 'auto'
    */
-  id?: string;
-
+  display?: MaybeResponsiveConditionalStyle<Display>;
   /**
    * Sets the opacity of the View. The opacity will be applied to the background as well as all
    * the children of the View. Use carefully as this could decrease the contrast ratio between
@@ -152,7 +176,23 @@ export interface ViewProps
    */
   accessibilityRole?: ViewLikeAccessibilityRole;
   /**
-   * Changes how the View is positioned.
+   * Changes how the `View` is positioned. When setting `position`, set each axis only once.
+   *
+   * ```
+   * <View position={{blockStart, inlineEnd}} /> // Allowed; sets the `block` and `inline` axes once each
+   * ```
+   *
+   * ```
+   * <View position={{inlineStart, blockEnd}} /> // Allowed; sets the `inline` and `block` axes once each
+   * ```
+   *
+   * ```
+   * <View position={{blockStart, blockEnd}} /> // Not allowed; sets the `block` axis twice
+   * ```
+   *
+   * ```
+   * <View position={{inlineStart, inlineEnd}} /> // Not allowed; sets the `inline` axis twice
+   * ```
    */
   position?: MaybeResponsiveConditionalStyle<Position>;
   /**

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

@@ -133,7 +133,7 @@ export type AutocompleteField =
 
 export type Breakpoint = 'base' | 'extraSmall' | 'small' | 'medium' | 'large';
 
-export type Display = 'block' | 'inline';
+export type Display = 'none' | 'auto' | 'inline' | 'block';
 
 export type ShorthandProperty<T> = [T, T] | [T, T, T, T];
 

package/src/surfaces/checkout/components.ts

@@ -16,6 +16,9 @@ export type {BlockStackProps} from './components/BlockStack/BlockStack';
 export {Button} from './components/Button/Button';
 export type {ButtonProps} from './components/Button/Button';
 
+export {Chat} from './components/Chat/Chat';
+export type {ChatProps} from './components/Chat/Chat';
+
 export {ConsentCheckbox} from './components/ConsentCheckbox/ConsentCheckbox';
 export type {ConsentCheckboxProps} from './components/ConsentCheckbox/ConsentCheckbox';
 
@@ -128,6 +131,12 @@ export type {PressableProps} from './components/Pressable/Pressable';
 export {ProductThumbnail} from './components/ProductThumbnail/ProductThumbnail';
 export type {ProductThumbnailProps} from './components/ProductThumbnail/ProductThumbnail';
 
+export {Progress} from './components/Progress/Progress';
+export type {ProgressProps} from './components/Progress/Progress';
+
+export {QRCode} from './components/QRCode/QRCode';
+export type {QRCodeProps} from './components/QRCode/QRCode';
+
 export {Popover} from './components/Popover/Popover';
 export type {PopoverProps, PopoverPosition} from './components/Popover/Popover';
 
@@ -158,6 +167,9 @@ export type {SpinnerProps} from './components/Spinner/Spinner';
 export {Stepper} from './components/Stepper/Stepper';
 export type {StepperProps} from './components/Stepper/Stepper';
 
+export {Switch} from './components/Switch/Switch';
+export type {SwitchProps} from './components/Switch/Switch';
+
 export {Tag} from './components/Tag/Tag';
 export type {TagProps} from './components/Tag/Tag';
 
@@ -211,6 +223,7 @@ export type {
   CornerProps,
   DisclosureActivatorProps,
   DisclosureOpen,
+  Display,
   Fit,
   GridItemSize,
   InlineAlignment,

package/src/surfaces/checkout/helper.docs.ts

@@ -149,6 +149,42 @@ export function getExamples(
         ),
       },
     },
+    'ui-components/switch-custom-label': {
+      description:
+        'This example demonstrates pairing the switch with a custom label and layout while keeping it accessible to screen readers.',
+      image: 'switch-custom-label.png',
+      codeblock: {
+        title: 'Custom label',
+        tabs: getExtensionCodeTabs('ui-components/switch-custom-label'),
+      },
+    },
+    'ui-components/progress-determinate-state': {
+      description:
+        'In a determinate state, [TextBlock](../titles-and-text/textblock) or [Text](../titles-and-text/text) components can be used to communicate what the progress bar is tracking, and to set clear expectations about the current progress.',
+      image: 'progress-determinate.png',
+      codeblock: {
+        title: 'Determinate state',
+        tabs: getExtensionCodeTabs('ui-components/progress-determinate-state'),
+      },
+    },
+    'ui-components/qrcode-image': {
+      description:
+        'The QRCode component can display an image in the center. Adding a logo can increase brand trust and set expectations for the action when scanning.',
+      image: 'qrcode-image.png',
+      codeblock: {
+        title: 'With logo',
+        tabs: getExtensionCodeTabs('ui-components/qrcode-image'),
+      },
+    },
+    'ui-components/qrcode-fill-size': {
+      description:
+        'In most cases the default size should work well. If you need a different size, use `fill` to make it grow to the size of its parent container.',
+      image: 'qrcode-fill-size.png',
+      codeblock: {
+        title: 'Fill size',
+        tabs: getExtensionCodeTabs('ui-components/qrcode-fill-size'),
+      },
+    },
   };
 }
 

package/src/surfaces/checkout/shared.ts

@@ -4,3 +4,8 @@ import type * as ComponentsModule from './components';
 
 export type Components = ComponentsBuilder<typeof ComponentsModule>;
 export type AnyComponent = AnyComponentBuilder<typeof ComponentsModule>;
+
+export type AllowedComponents<Allowed extends keyof typeof ComponentsModule> =
+  AnyComponentBuilder<Pick<typeof ComponentsModule, Allowed>>;
+export type AnyComponentExcept<Except extends keyof typeof ComponentsModule> =
+  AnyComponentBuilder<Omit<typeof ComponentsModule, Except>>;

package/src/surfaces/checkout/style/examples/hiding.example.tsx

@@ -0,0 +1,8 @@
+<View
+  display={Style.default('auto').when(
+    {viewportInlineSize: {min: 'small'}},
+    'none',
+  )}
+>
+  Content
+</View>;

package/src/surfaces/checkout/style/style.doc.ts

@@ -64,6 +64,20 @@ const data: ReferenceEntityTemplateSchema = {
           ],
         },
       },
+      {
+        description:
+          'Using the `display` property with conditional styles enables you to hide content for certain viewport sizes. In this example, the View will be hidden on small and above screen sizes.',
+        codeblock: {
+          title: 'Conditionally hiding content',
+          tabs: [
+            {
+              title: 'React',
+              code: './examples/hiding.example.tsx',
+              language: 'tsx',
+            },
+          ],
+        },
+      },
     ],
   },
   subSections: [

package/src/surfaces/checkout/style/types.ts

@@ -11,8 +11,8 @@ export interface ResolutionCondition {
 
 type ViewportInlineSize = 'extraSmall' | 'small' | 'medium' | 'large';
 
-export interface ViewportSizeCondition {
-  viewportInlineSize: {min: ViewportInlineSize};
+export interface ViewportSizeCondition<T = ViewportInlineSize> {
+  viewportInlineSize: {min: T};
 }
 
 export type AtLeastOne<T, U = {[K in keyof T]: Pick<T, K>}> = Partial<T> &
@@ -109,7 +109,8 @@ export interface ConditionalStyle<
 
 /**
  * A type that represents a value that can be a conditional style.
- * We highly recommend using the Style helper which simplifies the creation of conditional styles.
+ * We highly recommend using the `Style` helper which simplifies the creation of conditional styles.
+ *
  * To learn more check out the [conditional styles](/api/checkout-ui-extensions/components/utilities/stylehelper) documentation.
  */
 export type MaybeConditionalStyle<
@@ -117,6 +118,12 @@ export type MaybeConditionalStyle<
   AcceptedConditions extends BaseConditions = Conditions,
 > = T | ConditionalStyle<T, AcceptedConditions>;
 
+/**
+ * A type that represents a value that can be a conditional style. The conditions are based on the viewport size.
+ * We highly recommend using the `Style` helper which simplifies the creation of conditional styles.
+ *
+ * To learn more check out the [conditional styles](/api/checkout-ui-extensions/components/utilities/stylehelper) documentation.
+ */
 export type MaybeResponsiveConditionalStyle<T> =
   | T
   | ConditionalStyle<T, ViewportSizeCondition>;

package/src/surfaces/checkout/targets.ts

@@ -19,7 +19,11 @@ import type {StandardApi} from './api/standard/standard';
 import type {ShippingOptionItemApi} from './api/shipping/shipping-option-item';
 import type {ShippingOptionListApi} from './api/shipping/shipping-option-list';
 import type {RenderExtension, RunnableExtension} from './extension';
-import type {AnyComponent} from './shared';
+import type {
+  AnyComponent,
+  AllowedComponents,
+  AnyComponentExcept,
+} from './shared';
 
 /**
  * A UI extension will register for one or more extension targets using `shopify.extend()`.
@@ -380,7 +384,7 @@ export interface RenderExtensionTargets {
     RedeemableApi &
       CheckoutApi &
       StandardApi<'purchase.checkout.gift-card.render'>,
-    AnyComponent
+    AnyComponentExcept<'Image' | 'Banner'>
   >;
   /**
    * A static extension target that renders the gift card entry form fields after
@@ -392,7 +396,7 @@ export interface RenderExtensionTargets {
    */
   'Checkout::GiftCard::Render': RenderExtension<
     RedeemableApi & CheckoutApi & StandardApi<'Checkout::GiftCard::Render'>,
-    AnyComponent
+    AnyComponentExcept<'Image' | 'Banner'>
   >;
   /**
    * A static extension target that renders the form fields for a payment method when selected by the buyer.
@@ -403,7 +407,7 @@ export interface RenderExtensionTargets {
     PaymentOptionItemApi &
       CheckoutApi &
       StandardApi<'purchase.checkout.payment-option-item.details.render'>,
-    AnyComponent
+    AnyComponentExcept<'Image' | 'Banner'>
   >;
   /**
    * A static extension target that renders the form fields for a payment method when selected by the buyer.
@@ -415,7 +419,7 @@ export interface RenderExtensionTargets {
     PaymentOptionItemApi &
       CheckoutApi &
       StandardApi<'Checkout::PaymentMethod::Render'>,
-    AnyComponent
+    AnyComponentExcept<'Image' | 'Banner'>
   >;
   /**
    * A static extension target that renders after the hosted fields of a credit card payment method.
@@ -439,7 +443,7 @@ export interface RenderExtensionTargets {
     PaymentOptionItemApi &
       CheckoutApi &
       StandardApi<'Checkout::PaymentMethod::HostedFields::RenderAfter'>,
-    AnyComponent
+    AnyComponentExcept<'Image' | 'Banner'>
   >;
   /**
    * A static extension target that renders a form modal when a buyer selects the custom onsite payment method.
@@ -705,6 +709,14 @@ export interface RenderExtensionTargets {
     CheckoutApi & StandardApi<'purchase.checkout.footer.render-after'>,
     AnyComponent
   >;
+  /**
+   * A static extension target that is rendered on top of the Checkout page as an overlay.
+   * It is positioned in the bottom right corner of the screen.
+   */
+  'purchase.checkout.chat.render': RenderExtension<
+    CheckoutApi & StandardApi<'purchase.checkout.chat.render'>,
+    AllowedComponents<'Chat'>
+  >;
   /**
    * A static extension target that is rendered below the header on the **Thank you** page.
    */
@@ -721,6 +733,14 @@ export interface RenderExtensionTargets {
       StandardApi<'purchase.thank-you.footer.render-after'>,
     AnyComponent
   >;
+  /**
+   * A static extension target that is rendered on top of the **Thank you** page as an overlay.
+   * It is positioned in the bottom right corner of the screen.
+   */
+  'purchase.thank-you.chat.render': RenderExtension<
+    CheckoutApi & StandardApi<'purchase.checkout.chat.render'>,
+    AllowedComponents<'Chat'>
+  >;
 }
 
 export interface RunnableExtensionTargets {
@@ -780,12 +800,6 @@ export type ArgumentsForExtension<Target extends keyof ExtensionTargets> =
 /**
  * For a given extension target, returns the type of the API that the
  * extension will receive at runtime.
- *
- * For RenderExtensionTargets, this API type is the second argument to
- * the callback for that extension target.
- *
- * For RunnableExtensionTargets, this API type is the only argument to
- * the callback for that extension target.
  */
 export type ApiForExtension<Target extends ExtensionTarget> =
   ExtractedApiFromExtensionDefinition<ExtensionTargets[Target]>;
@@ -869,6 +883,7 @@ export interface CustomerAccountStandardApi<
     | 'extension'
     | 'extensionPoint'
     | 'i18n'
+    | 'instructions'
     | 'lines'
     | 'localization'
     | 'metafields'

package/src/surfaces/checkout.ts

@@ -68,6 +68,13 @@ export type {
   VisitorError,
   VisitorSuccess,
   VisitorResult,
+  CartInstructions,
+  AttributesCartInstructions,
+  DeliveryCartInstructions,
+  DiscountsCartInstructions,
+  CartLinesCartInstructions,
+  MetafieldsCartInstructions,
+  NotesCartInstructions,
 } from './checkout/api/standard/standard';
 
 export type {
@@ -75,6 +82,7 @@ export type {
   SellingPlan,
   ValidationError,
   MailingAddress,
+  ShippingAddress,
 } from './checkout/api/shared';
 
 export type {
@@ -140,8 +148,15 @@ export type {CartLineItemApi} from './checkout/api/cart-line/cart-line-item';
 export type {PickupLocationListApi} from './checkout/api/pickup/pickup-location-list';
 export type {PickupPointListApi} from './checkout/api/pickup/pickup-point-list';
 export type {PickupLocationItemApi} from './checkout/api/pickup/pickup-location-item';
-export type {ShippingOptionItemApi} from './checkout/api/shipping/shipping-option-item';
-export type {ShippingOptionListApi} from './checkout/api/shipping/shipping-option-list';
+export type {
+  ShippingOptionItemApi,
+  ShippingOptionItemRenderMode,
+} from './checkout/api/shipping/shipping-option-item';
+export type {
+  ShippingOptionListApi,
+  DeliveryGroupList,
+  DeliverySelectionGroup,
+} from './checkout/api/shipping/shipping-option-list';
 export type {
   AddressAutocompleteFormatSuggestionApi,
   AddressAutocompleteFormatSuggestionOutput,
@@ -191,5 +206,7 @@ export type {
   ViewportSizeCondition,
 } from './checkout/style/types';
 
+export type {IdProps} from './checkout/components/shared';
+
 export * from './checkout/globals';
 export * from '../shared';

package/src/surfaces/customer-account/api/docs.ts

@@ -0,0 +1,151 @@
+import {OrderStatusApi} from './order-status/order-status';
+import {StandardApi} from './standard-api/standard-api';
+import {CartLineItemApi} from './cart-line/cart-line-item';
+import {FullPageApi} from '../targets';
+import {ButtonProps} from '../components';
+
+export interface Docs_OrderStatus_MetafieldsApi
+  extends Pick<OrderStatusApi<any>, 'appMetafields' | 'metafields'> {}
+
+export interface Docs_OrderStatus_AttributesApi
+  extends Pick<OrderStatusApi<any>, 'attributes'> {}
+
+export interface Docs_OrderStatus_BuyerIdentityApi
+  extends Pick<OrderStatusApi<any>, 'buyerIdentity'> {}
+
+export interface Docs_OrderStatus_CheckoutSettingsApi
+  extends Pick<OrderStatusApi<any>, 'checkoutSettings'> {}
+
+export interface Docs_OrderStatus_CostApi
+  extends Pick<OrderStatusApi<any>, 'cost'> {}
+
+export interface Docs_OrderStatus_LocalizationApi
+  extends Pick<OrderStatusApi<any>, 'localization'> {}
+
+export interface Docs_OrderStatus_DiscountsApi
+  extends Pick<OrderStatusApi<any>, 'discountAllocations' | 'discountCodes'> {}
+
+export interface Docs_OrderStatus_GiftCardsApi
+  extends Pick<OrderStatusApi<any>, 'appliedGiftCards'> {}
+
+export interface Docs_OrderStatus_NoteApi
+  extends Pick<OrderStatusApi<any>, 'note'> {}
+
+export interface Docs_OrderStatus_AddressApi
+  extends Pick<OrderStatusApi<any>, 'shippingAddress' | 'billingAddress'> {}
+
+export interface Docs_OrderStatus_ShopApi
+  extends Pick<OrderStatusApi<any>, 'shop'> {}
+
+export interface Docs_OrderStatus_RequireLoginApi
+  extends Pick<OrderStatusApi<any>, 'requireLogin'> {}
+
+export interface Docs_OrderStatus_AuthenticationStateApi
+  extends Pick<OrderStatusApi<any>, 'authenticationState'> {}
+
+export interface Docs_OrderStatus_CartLinesApi
+  extends Pick<OrderStatusApi<any>, 'lines'> {}
+
+export interface Docs_CartLineItem_CartLinesApi
+  extends Pick<CartLineItemApi, 'target'> {}
+
+export interface Docs_OrderStatus_OrderApi
+  extends Pick<OrderStatusApi<any>, 'order'> {}
+
+export interface Docs_Standard_ExtensionApi
+  extends Pick<StandardApi<any>, 'extension'> {}
+
+export interface Docs_Standard_AuthenticatedAccountApi
+  extends Pick<StandardApi<any>, 'authenticatedAccount'> {}
+
+export interface Docs_Standard_VersionApi
+  extends Pick<StandardApi<any>, 'version'> {}
+
+export interface Docs_Standard_LocalizationApi
+  extends Pick<StandardApi<any>, 'localization' | 'i18n'> {}
+
+export interface Docs_Standard_SessionTokenApi
+  extends Pick<StandardApi<any>, 'sessionToken'> {}
+
+export interface Docs_Standard_SettingsApi
+  extends Pick<StandardApi, 'settings'> {}
+
+export interface Docs_Standard_StorageApi
+  extends Pick<StandardApi<any>, 'storage'> {}
+
+export interface Docs_Standard_UIApi extends Pick<StandardApi<any>, 'ui'> {}
+
+export interface Docs_Standard_QueryApi
+  extends Pick<StandardApi<any>, 'query'> {}
+
+export interface Docs_StandardApi extends Omit<StandardApi<any>, 'router'> {}
+
+export interface Docs_FullPageApi extends FullPageApi {}
+
+export interface Docs_Page_Button_PrimaryAction
+  extends Pick<
+    ButtonProps,
+    | 'onPress'
+    | 'overlay'
+    | 'to'
+    | 'loading'
+    | 'loadingLabel'
+    | 'disabled'
+    | 'accessibilityLabel'
+  > {}
+export interface Docs_Page_Button_SecondaryAction
+  extends Pick<ButtonProps, 'onPress' | 'to'> {
+  /**
+   * A label used for buyers using assistive technologies. Needed because `children` passed to this component will be discarded.
+   */
+  accessibilityLabel: ButtonProps['accessibilityLabel'];
+}
+
+export interface Docs_ResourceItem_Button_Action
+  extends Pick<
+    ButtonProps,
+    | 'onPress'
+    | 'overlay'
+    | 'to'
+    | 'loading'
+    | 'loadingLabel'
+    | 'disabled'
+    | 'accessibilityLabel'
+    | 'kind'
+  > {}
+
+export interface Docs_Menu_Button_Action
+  extends Omit<
+    ButtonProps,
+    'kind' | 'textDecoration' | 'inlineAlignment' | 'inlineSize' | 'size'
+  > {}
+
+export interface Docs_OrderActionMenu_Button
+  extends Pick<
+    ButtonProps,
+    'onPress' | 'loading' | 'loadingLabel' | 'disabled' | 'accessibilityLabel'
+  > {
+  /**
+   * Destination URL to link to.
+   *
+   * E.g. `extension:/` to navigate to the Full-page extension.
+   */
+  to: ButtonProps['to'];
+}
+
+export interface Docs_CustomerAccountAction_Button_PrimaryAction
+  extends Pick<
+    ButtonProps,
+    | 'onPress'
+    | 'loading'
+    | 'loadingLabel'
+    | 'disabled'
+    | 'accessibilityLabel'
+    | 'accessibilityRole'
+  > {}
+
+export interface Docs_CustomerAccountAction_Button_SecondaryAction
+  extends Pick<
+    ButtonProps,
+    'onPress' | 'loading' | 'loadingLabel' | 'disabled' | 'accessibilityLabel'
+  > {}