@duffel/components 3.1.4 → 3.1.6--canary.1

package/README.md

@@ -0,0 +1,68 @@
+# @duffel/components
+
+This package is a component library to help you build your travel product using the [Duffel API](https://duffel.com/docs).
+
+## Get started
+
+### Installing
+
+```sh
+yarn add @duffel/components
+# -- or --
+npm i @duffel/components
+```
+
+### (alternative) Load from CDN:
+
+```html
+<script src="https://assets.duffel.com/components/VERSION/duffel-ancillaries.js"></script>
+<script src="https://assets.duffel.com/components/VERSION/duffel-payments.js"></script>
+```
+
+## How do I integrate this into my website?
+
+1. Please start by reading our integration guide on https://duffel.com/docs/guides/ancillaries-component
+
+## Integration examples
+
+1. **client-side** | This example loads a local version of the components using a `script` tag. It uses a fixture for the offer and seat maps.
+
+   - [Find it on src/examples/client-side](src/examples/client-side)
+
+2. **full-stack** | This example loads a local version of the components using a `script` tag. It will search and retrieve an offer from the Duffel API and render the ancillaries component custom element with its `offer_id` and `client_key`. As soon as a service modal is closed it will create a test order with the given payload.
+
+   - [Find it on src/examples/full-stack](src/examples/full-stack)
+
+3. **just-typescript** | This example imports a local version of `@duffel/components` and renders the custom element with an offer fixture once the page loads.
+
+   - [Find it on src/examples/just-typescript](src/examples/just-typescript)
+
+4. **react-app** | This example imports a local version of `@duffel/components` and renders the a react element with an offer fixture.
+
+   - [Find it on src/examples/react-app](src/examples/react-app)
+
+5. **payments-custom-element** | This example demonstrates the use of the payments component loaded through a script tag
+
+- [Find it on src/examples/payments-custom-element](src/examples/payments-custom-element)
+
+6. **payments-just-typescript** | This example imports a local version of `@duffel/components` and renders the payments custom element with a fixture of the payment intent.
+
+   - [Find it on src/examples/payments-just-typescript](src/examples/payments-just-typescript)
+
+7. **next** | This example imports and renders `@duffel/components` into a `next.js` project.
+
+   - [Find it on src/examples/payments-just-typescript](src/examples/next)
+
+## What components are available?
+
+### Ancillaries component
+
+The ancillaries component allows your customers to add ancillaries to their order. It's simple to add to your website and can be customised to fit your brand. This component is avaiable through npm and our cdn.
+
+- [Find live demo on codesandbox.io&nbsp;&nbsp;↗](https://codesandbox.io/s/duffel-ancillaries-example-1nxuu7)
+
+### Payments component
+
+The payments component provides a [PCI-compliant](https://help.duffel.com/hc/en-gb/articles/4409049543058) way for you to collect card payments for online bookings from your customers. To learn more about how to work with Duffel payments please visit the [Collecting customer card payments guide](https://duffel.com/docs/guides/collecting-customer-card-payments).
+
+#### more coming soon...

package/components/AirlineLogo/AirlineLogo.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+interface AirlineLogoProps {
+    name: string;
+    iataCode: string | null;
+    size?: number;
+}
+export declare const AirlineLogo: React.FC<AirlineLogoProps>;
+export {};

package/components/DuffelAncillaries/bags/BaggageSelectionCard.d.ts

@@ -1,11 +1,12 @@
+/// <reference types="@duffel/api" />
 import React from "react";
-import { CreateOrderPayload, CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { Offer } from "../../../types/Offer";
+import { CreateOrder, CreateOrderService, Offer } from "@duffel/api/types";
+import { WithServiceInformation } from "src/types";
 export interface BaggageSelectionCardProps {
     isLoading: boolean;
     offer?: Offer;
-    passengers: CreateOrderPayload["passengers"];
-    selectedServices: CreateOrderPayloadServices;
-    setSelectedServices: (selectedServices: CreateOrderPayloadServices) => void;
+    passengers: CreateOrder["passengers"];
+    selectedServices: WithServiceInformation<CreateOrderService>[];
+    setSelectedServices: (selectedServices: WithServiceInformation<CreateOrderService>[]) => void;
 }
 export declare const BaggageSelectionCard: React.FC<BaggageSelectionCardProps>;

package/components/DuffelAncillaries/bags/BaggageSelectionController.d.ts

@@ -1,11 +1,12 @@
+/// <reference types="@duffel/api" />
+import { CreateOrderService, OfferAvailableServiceBaggage } from "@duffel/api/types";
 import React from "react";
-import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { OfferAvailableServiceBaggage } from "../../../types/Offer";
+import { WithServiceInformation } from "src/types";
 interface BaggageSelectionControllerProps {
     segmentId: string;
     passengerId: string;
     availableService: OfferAvailableServiceBaggage;
-    selectedServices: CreateOrderPayloadServices;
+    selectedServices: WithServiceInformation<CreateOrderService>[];
     quantity: number;
     onQuantityChanged: (quantity: number) => void;
 }

package/components/DuffelAncillaries/bags/BaggageSelectionModal.d.ts

@@ -1,11 +1,12 @@
+/// <reference types="@duffel/api" />
 import React from "react";
-import { CreateOrderPayload, CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { Offer } from "../../../types/Offer";
+import { CreateOrder, CreateOrderService, Offer } from "@duffel/api/types";
+import { WithServiceInformation } from "src/types";
 export interface BaggageSelectionModalProps {
     isOpen: boolean;
     offer?: Offer;
-    passengers: CreateOrderPayload["passengers"];
-    selectedServices: CreateOrderPayloadServices;
-    onClose: (selectedServices: CreateOrderPayloadServices) => void;
+    passengers: CreateOrder["passengers"];
+    selectedServices: WithServiceInformation<CreateOrderService>[];
+    onClose: (selectedServices: WithServiceInformation<CreateOrderService>[]) => void;
 }
 export declare const BaggageSelectionModal: React.FC<BaggageSelectionModalProps>;

package/components/DuffelAncillaries/bags/BaggageSelectionModalBody.d.ts

@@ -1,11 +1,12 @@
+/// <reference types="@duffel/api" />
 import React from "react";
-import { CreateOrderPayloadPassenger, CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { Offer, OfferSliceSegment } from "../../../types/Offer";
+import { CreateOrderPassenger, CreateOrderService, Offer, OfferSliceSegment } from "@duffel/api/types";
+import { WithServiceInformation } from "src/types";
 export interface BaggageSelectionModalBodyProps {
     offer: Offer;
     segment: OfferSliceSegment;
-    passengersById: Record<CreateOrderPayloadPassenger["id"], CreateOrderPayloadPassenger>;
-    selectedServices: CreateOrderPayloadServices;
-    setSelectedServices: (selectedServices: CreateOrderPayloadServices) => void;
+    passengersById: Record<CreateOrderPassenger["id"], CreateOrderPassenger>;
+    selectedServices: WithServiceInformation<CreateOrderService>[];
+    setSelectedServices: (selectedServices: WithServiceInformation<CreateOrderService>[]) => void;
 }
 export declare const BaggageSelectionModalBody: React.FC<BaggageSelectionModalBodyProps>;

package/components/DuffelAncillaries/bags/BaggageSelectionModalBodyPassenger.d.ts

@@ -1,13 +1,14 @@
+/// <reference types="@duffel/api" />
+import { CreateOrderService, OfferAvailableServiceBaggage, OfferSliceSegmentPassengerBaggage } from "@duffel/api/types";
 import React from "react";
-import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { OfferAvailableServiceBaggage, OfferSliceSegmentPassengerBaggage } from "../../../types/Offer";
+import { WithServiceInformation } from "src/types";
 export interface BaggageSelectionModalBodyPassengerProps {
     segmentId: string;
     passengerId: string;
     passengerName: string;
     includedBaggage: OfferSliceSegmentPassengerBaggage[];
     passengerServicesForSegment: OfferAvailableServiceBaggage[];
-    selectedServices: CreateOrderPayloadServices;
-    setSelectedServices: (selectedServices: CreateOrderPayloadServices) => void;
+    selectedServices: WithServiceInformation<CreateOrderService>[];
+    setSelectedServices: (selectedServices: WithServiceInformation<CreateOrderService>[]) => void;
 }
 export declare const BaggageSelectionModalBodyPassenger: React.FC<BaggageSelectionModalBodyPassengerProps>;

package/components/DuffelAncillaries/bags/BaggageSelectionModalFooter.d.ts

@@ -1,9 +1,10 @@
+/// <reference types="@duffel/api" />
+import { CreateOrder } from "@duffel/api/types";
 import { ServicePriceMapById } from "@lib/getServicePriceMapById";
 import React from "react";
-import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
 export interface BaggageSelectionModalFooterProps {
     currency: string;
-    selectedServices: CreateOrderPayloadServices;
+    selectedServices: CreateOrder["services"];
     servicePrices: ServicePriceMapById;
     isFirstSegment: boolean;
     isLastSegment: boolean;

package/components/DuffelAncillaries/bags/BaggageSelectionModalHeader.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="@duffel/api" />
+import { OfferSliceSegment } from "@duffel/api/types";
 import React from "react";
-import { OfferSliceSegment } from "../../../types/Offer";
 export interface BaggageSelectionModalHeaderProps {
     segmentCount: number;
     currentSegmentIndex: number;

package/components/DuffelAncillaries/bags/IncludedBaggageBanner.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="@duffel/api" />
+import { OfferSliceSegmentPassengerBaggage } from "@duffel/api/types";
 import React from "react";
-import { OfferSliceSegmentPassengerBaggage } from "../../../types/Offer";
 interface IncludedBaggageBannerProps {
     includedBaggage: OfferSliceSegmentPassengerBaggage[];
 }

package/components/DuffelAncillaries/cancel_for_any_reason/CfarSelectionCard.d.ts

@@ -1,10 +1,11 @@
+/// <reference types="@duffel/api" />
+import { CreateOrderService, Offer } from "@duffel/api/types";
 import React from "react";
-import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { Offer } from "../../../types/Offer";
+import { WithServiceInformation } from "src/types";
 export interface CfarSelectionCardProps {
     isLoading: boolean;
     offer?: Offer;
-    selectedServices: CreateOrderPayloadServices;
-    setSelectedServices: (selectedServices: CreateOrderPayloadServices) => void;
+    selectedServices: WithServiceInformation<CreateOrderService>[];
+    setSelectedServices: (selectedServices: WithServiceInformation<CreateOrderService>[]) => void;
 }
 export declare const CfarSelectionCard: React.FC<CfarSelectionCardProps>;

package/components/DuffelAncillaries/cancel_for_any_reason/CfarSelectionModal.d.ts

@@ -1,11 +1,12 @@
+/// <reference types="@duffel/api" />
+import { CreateOrderService, Offer, OfferAvailableServiceCFAR } from "@duffel/api/types";
 import React from "react";
-import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { Offer, OfferAvailableServiceCancelForAnyReason } from "../../../types/Offer";
+import { WithServiceInformation } from "src/types";
 export interface CfarSelectionModalProps {
     isOpen: boolean;
     offerCurrency?: Offer["base_currency"];
-    service?: OfferAvailableServiceCancelForAnyReason;
-    selectedServices: CreateOrderPayloadServices;
-    onClose: (selectedServices: CreateOrderPayloadServices) => void;
+    service?: OfferAvailableServiceCFAR;
+    selectedServices: WithServiceInformation<CreateOrderService>[];
+    onClose: (selectedServices: WithServiceInformation<CreateOrderService>[]) => void;
 }
 export declare const CfarSelectionModal: React.FC<CfarSelectionModalProps>;

package/components/DuffelAncillaries/cancel_for_any_reason/CfarSelectionModalBody.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="@duffel/api" />
 import React from "react";
-import { Offer, OfferAvailableServiceCancelForAnyReason } from "../../../types/Offer";
+import { Offer, OfferAvailableServiceCFAR } from "@duffel/api/types";
 export interface CfarSelectionModalBodyProps {
     offerCurrency: Offer["base_currency"];
-    service: OfferAvailableServiceCancelForAnyReason;
+    service: OfferAvailableServiceCFAR;
 }
 export declare const CfarSelectionModalBody: React.FC<CfarSelectionModalBodyProps>;

package/components/DuffelAncillaries/cancel_for_any_reason/CfarSelectionModalFooter.d.ts

@@ -1,9 +1,10 @@
+/// <reference types="@duffel/api" />
+import { CreateOrderService, OfferAvailableServiceCFAR } from "@duffel/api/types";
 import React from "react";
-import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { OfferAvailableServiceCancelForAnyReason } from "../../../types/Offer";
+import { WithServiceInformation } from "src/types";
 export interface CfarSelectionModalFooterProps {
-    service: OfferAvailableServiceCancelForAnyReason;
-    selectedServices: CreateOrderPayloadServices;
+    service: OfferAvailableServiceCFAR;
+    selectedServices: WithServiceInformation<CreateOrderService>[];
     onAddCfarService: () => void;
     onRemoveCfarService: () => void;
     onClose: () => void;

package/components/DuffelAncillaries/seats/Amenity.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="@duffel/api" />
+import { SeatMapCabinRowSectionElementAmenity } from "@duffel/api/types";
 import * as React from "react";
-import { SeatMapCabinRowSectionElementAmenity } from "../../../types/SeatMap";
 export interface AmenityProps {
     type: SeatMapCabinRowSectionElementAmenity;
 }

package/components/DuffelAncillaries/seats/Element.d.ts

@@ -1,12 +1,13 @@
+/// <reference types="@duffel/api" />
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
-import { SeatMapCabinRowSectionElement } from "../../../types/SeatMap";
+import { CreateOrderService, SeatMapCabinRowSectionElement } from "@duffel/api/types";
+import { WithServiceInformation } from "src/types";
 interface ElementProps {
     sectionIndex: number;
     elementIndex: number;
     element: SeatMapCabinRowSectionElement;
-    selectedServicesMap: Record<string, CreateOrderPayloadSeatService>;
-    onSeatToggled: (seatService: CreateOrderPayloadSeatService) => void;
+    selectedServicesMap: Record<string, WithServiceInformation<CreateOrderService>>;
+    onSeatToggled: (seatService: WithServiceInformation<CreateOrderService>) => void;
     currentPassengerId: string;
     currentSegmentId: string;
     currentPassengerName: string;

package/components/DuffelAncillaries/seats/Legend.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="@duffel/api" />
+import { SeatMapCabinRowSectionElementAmenity } from "@duffel/api/types";
 import * as React from "react";
-import { SeatMapCabinRowSectionElementAmenity } from "../../../types/SeatMap";
 export interface LegendProps {
     /**
      * The set of additional symbols to display

package/components/DuffelAncillaries/seats/Row.d.ts

@@ -1,11 +1,12 @@
+/// <reference types="@duffel/api" />
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
-import { SeatMapCabinRow } from "../../../types/SeatMap";
+import { CreateOrderService, SeatMapCabinRow } from "@duffel/api/types";
+import { WithServiceInformation } from "src/types";
 export interface RowProps {
     row: SeatMapCabinRow;
     hasWings: boolean;
-    selectedServicesMap: Record<string, CreateOrderPayloadSeatService>;
-    onSeatToggled: (seatService: CreateOrderPayloadSeatService) => void;
+    selectedServicesMap: Record<string, WithServiceInformation<CreateOrderService>>;
+    onSeatToggled: (seatService: WithServiceInformation<CreateOrderService>) => void;
     currentPassengerId: string;
     currentPassengerName: string;
     currentSegmentId: string;

package/components/DuffelAncillaries/seats/RowSection.d.ts

@@ -1,14 +1,15 @@
+/// <reference types="@duffel/api" />
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
-import { SeatMapCabinRow, SeatMapCabinRowSection } from "../../../types/SeatMap";
+import { CreateOrderService, SeatMapCabinRow, SeatMapCabinRowSection } from "@duffel/api/types";
+import { WithServiceInformation } from "src/types";
 interface RowSectionProps {
     row: SeatMapCabinRow;
     rowNumber: string | null;
     hasWings: boolean;
     section: SeatMapCabinRowSection;
     sectionIndex: number;
-    selectedServicesMap: Record<string, CreateOrderPayloadSeatService>;
-    onSeatToggled: (seatService: CreateOrderPayloadSeatService) => void;
+    selectedServicesMap: Record<string, WithServiceInformation<CreateOrderService>>;
+    onSeatToggled: (seatService: WithServiceInformation<CreateOrderService>) => void;
     currentPassengerId: string;
     currentPassengerName: string;
     currentSegmentId: string;

package/components/DuffelAncillaries/seats/SeatElement.d.ts

@@ -1,13 +1,14 @@
+/// <reference types="@duffel/api" />
+import { CreateOrderService, SeatMapCabinRowSectionElementSeat } from "@duffel/api/types";
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
-import { SeatMapCabinRowSectionElementSeat } from "../../../types/SeatMap";
+import { WithServiceInformation } from "src/types";
 interface SeatElementProps {
     element: SeatMapCabinRowSectionElementSeat;
     currentSegmentId: string;
     currentPassengerId: string;
     currentPassengerName: string;
-    onSeatToggled: (seatService: CreateOrderPayloadSeatService) => void;
-    selectedServicesMap: Record<string, CreateOrderPayloadSeatService>;
+    onSeatToggled: (seatService: WithServiceInformation<CreateOrderService>) => void;
+    selectedServicesMap: Record<string, WithServiceInformation<CreateOrderService>>;
 }
 export declare const SeatElement: React.FC<SeatElementProps>;
 export {};

package/components/DuffelAncillaries/seats/SeatInfo.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="@duffel/api" />
+import { SeatMapCabinRowSectionAvailableService, SeatMapCabinRowSectionElementSeat } from "@duffel/api/types";
 import * as React from "react";
-import { SeatMapCabinRowSectionAvailableService, SeatMapCabinRowSectionElementSeat } from "../../../types/SeatMap";
 export interface SeatInfoProps {
     seat: SeatMapCabinRowSectionElementSeat | null;
     service: SeatMapCabinRowSectionAvailableService | undefined;

package/components/DuffelAncillaries/seats/SeatMap.d.ts

@@ -1,10 +1,11 @@
+/// <reference types="@duffel/api" />
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
-import { SeatMap as SeatMapType } from "../../../types/SeatMap";
+import { CreateOrderService, SeatMap as SeatMapType } from "@duffel/api/types";
+import { WithServiceInformation } from "src/types";
 export interface SeatMapProps {
     seatMap: SeatMapType;
-    selectedServicesMap: Record<string, CreateOrderPayloadSeatService>;
-    onSeatToggled: (seatService: CreateOrderPayloadSeatService) => void;
+    selectedServicesMap: Record<string, WithServiceInformation<CreateOrderService>>;
+    onSeatToggled: (seatService: WithServiceInformation<CreateOrderService>) => void;
     currentPassengerId: string;
     currentPassengerName: string;
     currentSegmentId: string;

package/components/DuffelAncillaries/seats/SeatSelectionCard.d.ts

@@ -1,13 +1,13 @@
+/// <reference types="@duffel/api" />
 import React from "react";
-import { CreateOrderPayload, CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { Offer } from "../../../types/Offer";
-import { SeatMap } from "../../../types/SeatMap";
+import { CreateOrder, CreateOrderService, Offer, SeatMap } from "@duffel/api/types";
+import { WithServiceInformation } from "src/types";
 export interface SeatSelectionCardProps {
     isLoading: boolean;
     offer?: Offer;
     seatMaps?: SeatMap[];
-    passengers: CreateOrderPayload["passengers"];
-    selectedServices: CreateOrderPayloadServices;
-    setSelectedServices: (selectedServices: CreateOrderPayloadServices) => void;
+    passengers: CreateOrder["passengers"];
+    selectedServices: WithServiceInformation<CreateOrderService>[];
+    setSelectedServices: (selectedServices: WithServiceInformation<CreateOrderService>[]) => void;
 }
 export declare const SeatSelectionCard: React.FC<SeatSelectionCardProps>;

package/components/DuffelAncillaries/seats/SeatSelectionModal.d.ts

@@ -1,13 +1,15 @@
+/// <reference types="@duffel/api" />
 import React from "react";
-import { CreateOrderPayload, CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
-import { Offer } from "../../../types/Offer";
-import { SeatMap } from "../../../types/SeatMap";
+import { CreateOrder, CreateOrderService, Offer, SeatMap } from "@duffel/api/types";
+import { WithServiceInformation } from "src/types";
+type CreateOrderServiceWithInformation = WithServiceInformation<CreateOrderService>;
 export interface SeatSelectionModalProps {
     isOpen: boolean;
     offer?: Offer;
     seatMaps?: SeatMap[];
-    selectedServices: CreateOrderPayloadSeatService[];
-    passengers: CreateOrderPayload["passengers"];
-    onClose: (selectedServices: CreateOrderPayloadSeatService[]) => void;
+    selectedServices: CreateOrderServiceWithInformation[];
+    passengers: CreateOrder["passengers"];
+    onClose: (selectedServices: CreateOrderServiceWithInformation[]) => void;
 }
 export declare const SeatSelectionModal: React.FC<SeatSelectionModalProps>;
+export {};

package/components/DuffelAncillaries/seats/SeatSelectionModalFooter.d.ts

@@ -1,10 +1,10 @@
+/// <reference types="@duffel/api" />
 import { ServicePriceMapById } from "@lib/getServicePriceMapById";
 import React from "react";
-import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { SeatMap } from "../../../types/SeatMap";
+import { CreateOrder, SeatMap } from "@duffel/api/types";
 export interface SeatSelectionModalFooterProps {
     currency: string;
-    selectedServices: CreateOrderPayloadServices;
+    selectedServices: CreateOrder["services"];
     servicePrices: ServicePriceMapById;
     isFirstSegment: boolean;
     isLastSegment: boolean;

package/components/DuffelAncillaries/seats/SeatSelectionModalHeader.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="@duffel/api" />
+import { OfferSliceSegment } from "@duffel/api/types";
 import React from "react";
-import { OfferSliceSegment } from "../../../types/Offer";
 export interface SeatSelectionModalHeaderProps {
     segmentAndPassengerPermutationsCount: number;
     currentSegment: OfferSliceSegment;

package/components/DuffelAncillaries/seats/SeatUnavailable.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="@duffel/api" />
+import { SeatMapCabinRowSectionElementSeat } from "@duffel/api/types";
 import * as React from "react";
-import { SeatMapCabinRowSectionElementSeat } from "../../../types/SeatMap";
 export declare const SeatUnavailable: React.FC<{
     seat: SeatMapCabinRowSectionElementSeat;
 }>;

package/components/DuffelCardForm/DuffelCardForm.d.ts

@@ -0,0 +1,16 @@
+import { CustomStyles } from "src/types";
+import * as React from "react";
+export interface DuffelCardFormProps {
+    clientKey: string;
+    styles?: CustomStyles & {
+        stylesheetUrl?: string;
+    };
+    submitButtonLabel?: string;
+    onSubmit?: (data: TokenisedCardData) => void;
+}
+export declare const DuffelCardForm: React.FC<DuffelCardFormProps>;
+interface TokenisedCardData {
+    id: string;
+    live_mode: false;
+}
+export {};

package/components/DuffelCardForm/DuffelCardFormCustomElement.d.ts

@@ -0,0 +1,11 @@
+import { DuffelCardFormProps } from "./DuffelCardForm";
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "duffel-card-form": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+type DuffelCardFormCustomElementRenderArguments = DuffelCardFormProps;
+export declare function renderDuffelCardFormCustomElement(props: DuffelCardFormCustomElementRenderArguments): void;
+export {};

package/components/OfferSlice/OfferSlice.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="@duffel/api" />
+import { OfferSlice as OfferSliceType } from "@duffel/api/types";
+export interface OfferSliceProps {
+    slice: OfferSliceType;
+    showFullDate?: boolean;
+    showFlightNumbers?: boolean;
+    hideFareBrand?: boolean;
+    highlightAll?: boolean;
+}
+export declare const OfferSlice: React.FC<OfferSliceProps>;

package/components/OfferSlice/OfferSliceDetailItem.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { SliceItem } from "src/types/TravelDetails";
+interface OfferSliceDetailItemProps {
+    item: SliceItem;
+}
+export declare const OfferSliceDetailItem: React.FC<OfferSliceDetailItemProps>;
+export {};

package/components/OfferSlice/OfferSliceDetailLayoverItem.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { LayoverDetails, SliceDetailItemChangeStatus } from "src/types/TravelDetails";
+export interface SliceDetailsLayoverItemProps {
+    layoverDetails: LayoverDetails;
+    changeStatus?: SliceDetailItemChangeStatus;
+    className?: string;
+}
+export declare const OfferSliceDetailLayoverItem: React.FC<SliceDetailsLayoverItemProps>;

package/components/OfferSlice/OfferSliceDetailTravelItem.d.ts

@@ -0,0 +1,9 @@
+import { SliceDetailItemChangeStatus, TravelDetails } from "src/types/TravelDetails";
+export interface SliceDetailsTravelItemProps {
+    changeStatus?: SliceDetailItemChangeStatus;
+    travelDetails: TravelDetails<"offer" | "order">;
+    highlightAll?: boolean;
+    keysToHighlight?: string[];
+}
+export declare const getTerminalString: (terminal?: string | null) => string;
+export declare const OfferSliceDetailTravelItem: React.FC<SliceDetailsTravelItemProps>;

package/components/OfferSlice/lib/getHighlightStyles.d.ts

@@ -0,0 +1,7 @@
+import { Color } from "@lib/colors";
+export declare const getHighlightStyles: (highlightAll: boolean, key?: string, keysToHighlight?: string[], highlightColor?: Color) => {
+    className?: string | undefined;
+    style?: {
+        backgroundColor: string;
+    } | undefined;
+};

package/components/shared/HSpace.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+type DivProps = JSX.IntrinsicElements["div"];
+export interface HSpaceProps extends DivProps {
+    /**
+     * A space-delimited list of class names to pass along to a child element.
+     */
+    className?: string;
+    /**
+     * The vertical spacing between each child element
+     */
+    space: 0 | 4 | 8 | 16;
+}
+export declare const HSpace: React.FC<HSpaceProps>;
+export {};

package/components/shared/Icon.d.ts

@@ -30,6 +30,7 @@ export declare const ICON_MAP: {
     seat_paid_indicator: import("react/jsx-runtime").JSX.Element;
     shield_with_moon: import("react/jsx-runtime").JSX.Element;
     stairs: import("react/jsx-runtime").JSX.Element;
+    warning: import("react/jsx-runtime").JSX.Element;
     wifi: import("react/jsx-runtime").JSX.Element;
 };
 export type IconName = keyof typeof ICON_MAP;

package/components/shared/VSpace.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+type DivProps = JSX.IntrinsicElements["div"];
+export interface VSpaceProps extends DivProps {
+    /**
+     * A space-delimited list of class names to pass along to a child element.
+     */
+    className?: string;
+    /**
+     * The vertical spacing between each child element
+     */
+    space: 0 | 4 | 8 | 16;
+}
+export declare const VSpace: React.FC<VSpaceProps>;
+export {};

package/custom-elements.d.ts

@@ -4,3 +4,4 @@
  */
 export { onDuffelAncillariesPayloadReady, renderDuffelAncillariesCustomElement, } from "./components/DuffelAncillaries/DuffelAncillariesCustomElement";
 export { onDuffelPaymentsFailedPayment, onDuffelPaymentsSuccessfulPayment, renderDuffelPaymentsCustomElement, } from "./components/DuffelPayments/DuffelPaymentsCustomElement";
+export { renderDuffelCardFormCustomElement } from "./components/DuffelCardForm/DuffelCardFormCustomElement";

package/fixtures/passengers/mock_passengers.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="@duffel/api" />
+import { CreateOrder } from "@duffel/api/types";
+declare const mockPassengers: CreateOrder["passengers"];
+export default mockPassengers;

package/index.d.ts

@@ -4,4 +4,5 @@
  */
 export * from "./components/DuffelAncillaries/DuffelAncillaries";
 export * from "./components/DuffelPayments/DuffelPayments";
+export * from "./components/DuffelCardForm/DuffelCardForm";
 export * from "./types";