@commercelayer/react-components 4.7.10 → 4.7.11

package/lib/cjs/components/orders/CartLink.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CartLink=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),getApplicationLink_1=require("../../utils/getApplicationLink"),getDomain_1=require("../../utils/getDomain"),events_1=require("../../utils/events");function CartLink(props){const{label,children,type,customDomain}=props,p=tslib_1.__rest(props,["label","children","type","customDomain"]),{order,createOrder}=(0,react_1.useContext)(OrderContext_1.default),{accessToken,endpoint}=(0,react_1.useContext)(CommerceLayerContext_1.default);if(accessToken==null)throw new Error("Cannot use `CartLink` outside of `CommerceLayer`");if(endpoint==null)throw new Error("Cannot use `CartLink` outside of `CommerceLayer`");const{domain,slug}=(0,getDomain_1.getDomain)(endpoint),href=slug&&order?.id?(0,getApplicationLink_1.getApplicationLink)({slug,orderId:order?.id,accessToken,domain,applicationType:"cart",customDomain}):void 0,handleClick=event=>tslib_1.__awaiter(this,void 0,void 0,function*(){if(event.preventDefault(),type!=="mini")if(order?.id)location.href=href??"";else{const orderId=yield createOrder({});slug&&(location.href=(0,getApplicationLink_1.getApplicationLink)({slug,orderId,accessToken,domain,applicationType:"cart",customDomain}))}else(0,events_1.publish)("open-cart")}),parentProps=Object.assign({handleClick,label,href,orderId:order?.id,accessToken},p);return accessToken?children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children})):(0,jsx_runtime_1.jsx)("a",Object.assign({href},p,{onClick:e=>{handleClick(e)},children:label})):null}exports.CartLink=CartLink,exports.default=CartLink;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CartLink=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),getApplicationLink_1=require("../../utils/getApplicationLink"),getDomain_1=require("../../utils/getDomain"),events_1=require("../../utils/events");function CartLink(props){const{label,children,type,customDomain}=props,p=tslib_1.__rest(props,["label","children","type","customDomain"]),{order,createOrder}=(0,react_1.useContext)(OrderContext_1.default),{accessToken,endpoint}=(0,react_1.useContext)(CommerceLayerContext_1.default);if(accessToken==null)throw new Error("Cannot use `CartLink` outside of `CommerceLayer`");if(endpoint==null)throw new Error("Cannot use `CartLink` outside of `CommerceLayer`");const{domain,slug}=(0,getDomain_1.getDomain)(endpoint),href=slug&&order?.id?(0,getApplicationLink_1.getApplicationLink)({slug,orderId:order?.id,accessToken,domain,applicationType:"cart",customDomain}):void 0,handleClick=event=>tslib_1.__awaiter(this,void 0,void 0,function*(){if(event.preventDefault(),type!=="mini")if(order?.id)location.href=href??"";else{const orderId=yield createOrder({});slug&&(location.href=(0,getApplicationLink_1.getApplicationLink)({slug,orderId,accessToken,domain,applicationType:"cart",customDomain}))}else(0,events_1.publish)("open-cart")}),parentProps=Object.assign({handleClick,label,href,orderId:order?.id,accessToken},p);return accessToken?children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children})):(0,jsx_runtime_1.jsx)("a",Object.assign({href,onClick:e=>{handleClick(e)}},p,{children:label})):null}exports.CartLink=CartLink,exports.default=CartLink;

package/lib/cjs/components/orders/CheckoutLink.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ChildrenFunction } from '../../typings/index';
 interface ChildrenProps extends Omit<Props, 'children'> {
     checkoutUrl: string;
@@ -5,8 +6,23 @@ interface ChildrenProps extends Omit<Props, 'children'> {
 }
 interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
     children?: ChildrenFunction<ChildrenProps>;
+    /**
+     * Label for the checkout link
+     */
     label?: string;
+    /**
+     * Ignores `order.checkout_url` and redirects to the hosted checkout micro-frontend.
+     * @default true
+     */
     hostedCheckout?: boolean;
 }
+/**
+ * This component generates a link to the hosted mfe-checkout application.
+ * In this way you can connect your shop application with our hosted micro-frontend.
+ *
+ * By default it will takes the customer to our hosted checkout micro-frontend,
+ * but if `hostedCheckout` is set as `false` it will use the `checkout_url` attribute
+ * found in the `order` object.
+ */
 export declare function CheckoutLink(props: Props): JSX.Element;
 export default CheckoutLink;

package/lib/cjs/components/orders/DiscountAmount.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseAmountComponent } from '../../typings/index';
 export declare function DiscountAmount(props: BaseAmountComponent): JSX.Element;
 export default DiscountAmount;

package/lib/cjs/components/orders/GiftCardAmount.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseAmountComponent } from '../../typings/index';
 export declare function GiftCardAmount(props: BaseAmountComponent): JSX.Element;
 export default GiftCardAmount;

package/lib/cjs/components/orders/HostedCart.d.ts

@@ -7,30 +7,52 @@ interface Styles {
     iconContainer?: CSSProperties;
 }
 interface Props extends Omit<JSX.IntrinsicElements['div'], 'children' | 'style'> {
+    /**
+     * The style of the cart.
+     */
+    style?: Styles;
+    /**
+     * The domain of your forked application.
+     */
+    customDomain?: string;
     /**
      * The type of the cart. Defaults to undefined.
      */
     type?: 'mini';
     /**
      * If true, the cart will open when a line item is added to the order clicking the add to cart button. Defaults to false.
+     * Works only with the `type` prop set to `mini`.
      */
     openAdd?: boolean;
-    /**
-     * The style of the cart.
-     */
-    style?: Styles;
     /**
      * If true, the cart will be open. Defaults to false.
+     * Works only with the `type` prop set to `mini`.
      */
     open?: boolean;
     /**
      * A function that will be called when the cart is open and the background is clicked.
+     * Works only with the `type` prop set to `mini`.
      */
     handleOpen?: () => void;
-    /**
-     * The domain of your forked application.
-     */
-    customDomain?: string;
 }
+/**
+ * This component allows to embed the cart application in your page as an `<iframe>`.
+ *
+ * By default, it will be rendered as inline cart and its content will fit the available container width
+ * while the height will be automatically adjusted to the content.
+ *
+ * Or it can work as mini cart - when `type` prop is set to `mini` - and it will be opened in a modal (popup).
+ *
+ * <span title="Requirement" type="warning">
+ * Must be a child of the `<OrderContainer>` component.
+ * </span>
+ *
+ * <span title="Mini cart" type="info">
+ * When set as `mini` cart, it requires the `<CartLink type='mini' />` component to be on the same page,
+ * to show the cart when clicked. <br />
+ * View the `<CartLink />` component documentation for more details and examples.
+ * </span>
+ *
+ */
 export declare function HostedCart({ type, openAdd, style, open, handleOpen, customDomain, ...props }: Props): JSX.Element | null;
 export {};

package/lib/cjs/components/orders/OrderContainer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseMetadataObject } from '../../typings/index';
 import type { OrderCreate, Order } from '@commercelayer/sdk';
 import type { DefaultChildrenType } from '../../typings/globals';
@@ -20,5 +21,38 @@ interface Props {
      */
     fetchOrder?: (order: Order) => void;
 }
+/**
+ * This component is responsible for fetching the order and store it in its context.
+ * It also provides the `fetchOrder` callback that is triggered every time the order is updated (it returns the updated order object as argument).
+ * When the order is not placed yet, its possible to pass the `metadata` and `attributes` props to update the order.
+ *
+ * <span title="Requirement" type="warning">
+ * Must be a child of the `<CommerceLayer>` component. <br />
+ * Can be a child of the `<OrderStorage>` component and receive the `orderId` from it.
+ * </span>
+ *
+ * <span title="Children" type="info">
+ * `<AddToCartButton>`,
+ * `<AdjustmentAmount>`,
+ * `<CartLink>`,
+ * `<CheckoutLink>`,
+ * `<DiscountAmount>`,
+ * `<GiftCardAmount>`,
+ * `<HostedCart>`,
+ * `<OrderNumber>`,
+ * `<PaymentMethodAmount>`,
+ * `<PlaceOrderButton>`,
+ * `<PlaceOrderContainer>`,
+ * `<PrivacyAndTermsCheckbox>`,
+ * `<Shipping Amount>`,
+ * `<SubTotalAmount>`,
+ * `<TaxesAmount>`,
+ * `<TotalAmount>`,
+ * </span>
+ *
+ * <span title="Core API" type="info">
+ * Check the `orders` resource from our [Core API documentation](https://docs.commercelayer.io/core/v/api-reference/orders/object).
+ * </span>
+ */
 export declare function OrderContainer(props: Props): JSX.Element;
 export default OrderContainer;

package/lib/cjs/components/orders/OrderList.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type TOrderList, type InitialOrderListContext, type OrderListContent } from '../../context/OrderListChildrenContext';
 import { type ColumnDef, type SortingState } from '@tanstack/react-table';
 import type { DefaultChildrenType, TRange } from '../../typings/globals';

package/lib/cjs/components/orders/OrderListEmpty.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ChildrenFunction } from '../../typings/index';
 interface Props extends Omit<JSX.IntrinsicElements['span'], 'children'> {
     /**

package/lib/cjs/components/orders/OrderListPaginationButtons.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type OrderListPaginationContext as TOrderListPaginationContext } from '../../context/OrderListPaginationContext';
 import { type ChildrenFunction } from '../../typings/index';
 interface PaginationButton extends Omit<JSX.IntrinsicElements['button'], 'children' | 'disabled'> {

package/lib/cjs/components/orders/OrderListPaginationInfo.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ChildrenFunction } from '../../typings/index';
 type TAsComponent = keyof Pick<JSX.IntrinsicElements, 'p' | 'span' | 'div'>;
 type ChildrenProps<A extends TAsComponent> = Omit<Props<A>, 'children'> & {

package/lib/cjs/components/orders/OrderListRow.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type TOrderList, type OrderListContent, type TableAccessor } from '../../context/OrderListChildrenContext';
 import { type Row } from '@tanstack/react-table';
 interface ChildrenProps extends Omit<Props, 'children'> {

package/lib/cjs/components/orders/OrderNumber.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseFieldProps } from '../utils/BaseField';
 type Props = Omit<BaseFieldProps, 'attribute'>;
 export declare function OrderNumber(props: Props): JSX.Element;

package/lib/cjs/components/orders/OrderStorage.d.ts

@@ -1,8 +1,31 @@
 import { type ReactNode } from 'react';
 interface Props {
     children: ReactNode;
+    /**
+     * The key used to persist the order id in the browser local storage.
+     */
     persistKey: string;
+    /**
+     * Removes the saved order id from the local storage when order is placed.
+     * @default true
+     */
     clearWhenPlaced?: boolean;
 }
+/**
+ * This component handle the persistence of the order id in the browser local storage.
+ * When adding a product into the cart and the order does not exist yet, in will be created by the `OrderContainer` and
+ * the order id will then be automatically saved in the local storage using `OrderStorage` context.
+ * In this way on page refresh or components remounting, the `OrderContainer` will be able to load the order getting the id from this context.
+ *
+ * By default, the localStorage key will be deleted once the order has been placed, but you can disable this behavior via `clearWhenPlaced` prop.
+ *
+ * <span title="Requirement" type="warning">
+ * Must be a child of the `<CommerceLayer>` component. <br />
+ * </span>
+ *
+ * <span title="Children" type="info">
+ * `<OrderContainer>`,
+ * </span>
+ */
 export declare function OrderStorage(props: Props): JSX.Element;
 export default OrderStorage;

package/lib/cjs/components/orders/PaymentMethodAmount.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseAmountComponent } from '../../typings/index';
 export declare function PaymentMethodAmount(props: BaseAmountComponent): JSX.Element;
 export default PaymentMethodAmount;

package/lib/cjs/components/orders/PrivacyAndTermsCheckbox.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseInputProps } from '../utils/BaseInput';
 export declare function PrivacyAndTermsCheckbox(props: Partial<BaseInputProps>): JSX.Element;
 export default PrivacyAndTermsCheckbox;

package/lib/cjs/components/orders/ShippingAmount.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseAmountComponent } from '../../typings/index';
 export declare function ShippingAmount(props: BaseAmountComponent): JSX.Element;
 export default ShippingAmount;

package/lib/cjs/components/orders/SubTotalAmount.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseAmountComponent } from '../../typings/index';
 export declare function SubTotalAmount(props: BaseAmountComponent): JSX.Element;
 export default SubTotalAmount;

package/lib/cjs/components/orders/TaxesAmount.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseAmountComponent } from '../../typings/index';
 export declare function TaxesAmount(props: BaseAmountComponent): JSX.Element;
 export default TaxesAmount;

package/lib/cjs/components/orders/TotalAmount.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseAmountComponent } from '../../typings/index';
 export declare function TotalAmount(props: BaseAmountComponent): JSX.Element;
 export default TotalAmount;

package/lib/cjs/components/parcels/ParcelField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ConditionalElement } from '../../typings/index';
 import { type TGenericChildrenProps, type TResources } from '../utils/GenericFieldComponent';
 type ParcelFieldChildrenProps = TGenericChildrenProps<TResources['Parcel']>;

package/lib/cjs/components/parcels/ParcelLineItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { DefaultChildrenType } from '../../typings/globals';
 interface Props {
     children: DefaultChildrenType;

package/lib/cjs/components/parcels/ParcelLineItemField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ConditionalElement } from '../../typings/index';
 import { type TGenericChildrenProps, type TResources } from '../utils/GenericFieldComponent';
 type ParcelLineItemFieldChildrenProps = TGenericChildrenProps<TResources['ParcelLineItem']>;

package/lib/cjs/components/parcels/ParcelLineItemsCount.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ChildrenFunction } from '../../typings/index';
 import type { Parcel } from '@commercelayer/sdk';
 interface ChildrenProps extends Omit<Props, 'children'> {

package/lib/cjs/components/parcels/Parcels.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     children: JSX.Element | JSX.Element[];
     filterBy?: string[];

package/lib/cjs/components/parcels/ParcelsCount.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ChildrenFunction } from '../../typings/index';
 import type { Parcel } from '@commercelayer/sdk';
 interface ChildrenProps extends Omit<Props, 'children'> {

package/lib/cjs/components/payment_gateways/AdyenGateway.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type GatewayBaseType } from '../payment_gateways/PaymentGateway';
 type Props = GatewayBaseType;
 export declare function AdyenGateway(props: Props): JSX.Element | null;

package/lib/cjs/components/payment_gateways/BraintreeGateway.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type GatewayBaseType } from '../payment_gateways/PaymentGateway';
 type Props = GatewayBaseType;
 export declare function BraintreeGateway(props: Props): JSX.Element | null;

package/lib/cjs/components/payment_gateways/CheckoutComGateway.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type GatewayBaseType } from '../payment_gateways/PaymentGateway';
 type Props = GatewayBaseType;
 export declare function CheckoutComGateway(props: Props): JSX.Element | null;

package/lib/cjs/components/payment_gateways/ExternalGateway.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type GatewayBaseType } from '../payment_gateways/PaymentGateway';
 type Props = GatewayBaseType;
 export declare function ExternalGateway(props: Props): JSX.Element | null;

package/lib/cjs/components/payment_gateways/KlarnaGateway.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type GatewayBaseType } from '../payment_gateways/PaymentGateway';
 type Props = GatewayBaseType;
 export declare function KlarnaGateway(props: Props): JSX.Element | null;

package/lib/cjs/components/payment_gateways/PaymentGateway.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type LoaderType } from '../../typings/index';
 import { type PaymentSourceProps } from '../payment_source/PaymentSource';
 export type GatewayBaseType = Props & {

package/lib/cjs/components/payment_gateways/PaypalGateway.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type GatewayBaseType } from '../payment_gateways/PaymentGateway';
 type Props = Partial<GatewayBaseType>;
 export declare function PaypalGateway(props: Props): JSX.Element | null;

package/lib/cjs/components/payment_gateways/StripeGateway.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type GatewayBaseType } from '../payment_gateways/PaymentGateway';
 type Props = GatewayBaseType;
 export declare function StripeGateway(props: Props): JSX.Element | null;

package/lib/cjs/components/payment_gateways/WireTransferGateway.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type GatewayBaseType } from '../payment_gateways/PaymentGateway';
 type Props = GatewayBaseType;
 export declare function WireTransferGateway(props: Props): JSX.Element | null;

package/lib/cjs/components/payment_methods/PaymentMethod.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { LoaderType } from '../../typings/index';
 import type { Order, PaymentMethod as PaymentMethodType } from '@commercelayer/sdk';
 import type { PaymentResource } from '../../reducers/PaymentMethodReducer';

package/lib/cjs/components/payment_methods/PaymentMethodName.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ChildrenFunction } from '../../typings/index';
 interface ChildrenProps extends Omit<Props, 'children'> {
     labelName: string;

package/lib/cjs/components/payment_methods/PaymentMethodPrice.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseAmountComponent } from '../../typings/index';
 interface Props extends BaseAmountComponent {
     type?: 'amount';

package/lib/cjs/components/payment_source/BraintreePayment.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type PaymentSourceProps } from './PaymentSource';
 import { type HostedFieldFieldOptions } from 'braintree-web';
 type BraintreeHostedFields<Type> = {

package/lib/cjs/components/payment_source/CheckoutComPayment.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type PaymentMethodConfig } from '../../reducers/PaymentMethodReducer';
 import { type PaymentSourceProps } from './PaymentSource';
 import { type FramesStyle } from 'frames-react';

package/lib/cjs/components/payment_source/ExternalPayment.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ChildrenFunction } from '../../typings/index';
 import type { StripeElementLocale } from '@stripe/stripe-js';
 import { type PaymentSourceProps } from './PaymentSource';

package/lib/cjs/components/payment_source/KlarnaPayment.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type PaymentMethodConfig } from '../../reducers/PaymentMethodReducer';
 import { type PaymentSourceProps } from './PaymentSource';
 type KlarnaPaymentProps = PaymentMethodConfig['klarnaPayment'] & JSX.IntrinsicElements['div'] & Partial<PaymentSourceProps['templateCustomerSaveToWallet']> & {

package/lib/cjs/components/payment_source/PaymentSource.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type LoaderType } from '../../typings/index';
 import { type CustomerCardsTemplateChildren } from '../utils/PaymentCardsTemplate';
 export interface CustomerCardsProps {

package/lib/cjs/components/payment_source/PaymentSourceBrandIcon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type IconBrand } from '../../context/PaymentSourceContext';
 import { type ChildrenFunction } from '../../typings/index';
 interface ChildrenProps extends Omit<Props, 'children'> {

package/lib/cjs/components/payment_source/PaymentSourceBrandName.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type IconBrand } from '../../context/PaymentSourceContext';
 import { type ChildrenFunction } from '../../typings/index';
 interface CustomComponent extends Omit<Props, 'children'> {

package/lib/cjs/components/payment_source/PaymentSourceDetail.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ChildrenFunction } from '../../typings/index';
 export type PaymentSourceDetailType = 'last4' | 'exp_year' | 'exp_month';
 interface ChildrenProps extends Omit<Props, 'children'> {

package/lib/cjs/components/payment_source/StripeExpressPayment.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     clientSecret: string;
 }

package/lib/cjs/components/payment_source/StripePayment.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type StripeElementLocale, type StripeElementsOptions, type StripePaymentElementOptions } from '@stripe/stripe-js';
 import { type PaymentMethodConfig } from '../../reducers/PaymentMethodReducer';
 import { type PaymentSourceProps } from './PaymentSource';

package/lib/cjs/components/payment_source/WireTransferPayment.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface WireTransferConfig {
     infoMessage?: {
         text?: string | JSX.Element[];

package/lib/cjs/components/prices/Price.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type Price as PriceType } from '@commercelayer/sdk';
 import { type ChildrenFunction, type LoaderType } from '../../typings/index';
 interface PriceChildrenProps extends Omit<PriceProps, 'children'> {

package/lib/cjs/components/prices/PricesContainer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type LoaderType } from '../../typings/index';
 interface Props {
     /**

package/lib/cjs/components/shipments/ShipmentField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type Shipment } from '@commercelayer/sdk';
 type ShipmentFieldChildrenProps = Omit<Props, 'children'> & {
     shipment: Shipment;

package/lib/cjs/components/shipments/ShipmentsCount.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ChildrenFunction } from '../../typings/index';
 import type { Shipment } from '@commercelayer/sdk';
 interface ChildrenProps extends Omit<Props, 'children'> {

package/lib/cjs/components/shipping_methods/ShippingMethodName.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ShippingMethod } from '@commercelayer/sdk';
 type ChildrenProps = Omit<Props, 'children'> & {
     label: string;

package/lib/cjs/components/shipping_methods/ShippingMethodPrice.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseAmountComponent } from '../../typings/index';
 type Props = BaseAmountComponent & {
     /**

package/lib/cjs/components/shipping_methods/ShippingMethodRadioButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Order, ShippingMethod } from '@commercelayer/sdk';
 interface ShippingMethodRadioButtonType extends Omit<Props, 'children'> {
     shippingMethod: ShippingMethod;

package/lib/cjs/components/skus/AvailabilityContainer.d.ts

@@ -17,5 +17,18 @@ interface Props {
      */
     getQuantity?: (quantity: number) => void;
 }
+/**
+ * Main container for the Availability components.
+ * It stores - in its context - the sku quantity returned from the `inventory_model` and the `delivery_lead_time` for the first shipping method found in the inventory model.
+ *
+ * It can be used to fetch the quantities for a specific `sku_code` passed as prop.
+ * <span title='Requirements' type='warning'>
+ * Must be a child of the `<CommerceLayer>` component. <br/>
+ * Can be a child of the `<SkusContainer>` component and receive the `sku_code` from its context.
+ * </span>
+ * <span title='Children' type='info'>
+ * `<AvailabilityTemplate>`
+ * </span>
+ */
 export declare function AvailabilityContainer({ children, skuCode, skuId, getQuantity }: Props): JSX.Element;
 export default AvailabilityContainer;

package/lib/cjs/components/skus/AvailabilityTemplate.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type TimeFormat, type ChildrenFunction } from '../../typings/index';
 import { type DeliveryLeadTime } from '../../reducers/AvailabilityReducer';
 interface AvailabilityTemplateChildrenProps extends Omit<Props, 'children'>, DeliveryLeadTime {
@@ -6,15 +7,16 @@ interface AvailabilityTemplateChildrenProps extends Omit<Props, 'children'>, Del
 }
 type FormatRules = {
     /**
-     * Set time format for shipping method
+     * Set time format for shipping method. When not set, ``delivery_lead_times`` will not be displayed.
+     * When set, `delivery_lead_times` for the first shipping method found in the inventory model, will be displayed in the format specified.
      */
     timeFormat?: TimeFormat;
     /**
-     * Show shipping method name
+     * Show shipping method name. Requires `timeFormat` to be set.
      */
     showShippingMethodName?: false;
     /**
-     * Show shipping method price
+     * Show shipping method price. Requires `timeFormat` to be set.
      */
     showShippingMethodPrice?: false;
 } | {
@@ -34,5 +36,17 @@ type Props = {
         negativeStock?: string;
     };
 } & Omit<JSX.IntrinsicElements['span'], 'children'> & FormatRules;
+/**
+ * The AvailabilityTemplate component displays the availability of the SKU specified
+ * in the parent `<AvailabilityContainer>` component.
+ *
+ * It is possible to customize the text displayed in case of `available`, `outOfStock` or `negativeStock.
+ * It is also possible to show delivery lead time and either shipping method name and/or price.
+ * This information will be retrieve from the first shipping method found in the inventory model.
+ *
+ * <span type="Requirement" type="info">
+ * It must to be used inside the `<AvailabilityContainer>` component.
+ * </span>
+ */
 export declare function AvailabilityTemplate(props: Props): JSX.Element;
 export default AvailabilityTemplate;

package/lib/cjs/components/skus/DeliveryLeadTime.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type DeliveryLeadTimeField = 'min_hours' | 'max_hours' | 'min_days' | 'max_days';
 export type DeliveryLeadTimeComponentChildren = Omit<Props, 'children'>;
 type Props = Partial<JSX.IntrinsicElements['span']> & {

package/lib/cjs/components/skus/SkuField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ConditionalElement } from '../../typings/index';
 import { type TGenericChildrenProps, type TResources } from '../utils/GenericFieldComponent';
 type SkuFieldChildrenProps = TGenericChildrenProps<TResources['Sku']>;
@@ -6,8 +7,19 @@ type Props = {
     children?: (props: SkuFieldChildrenProps) => JSX.Element;
 } & TCondition;
 /**
- * @param props {@link Props}
- * @returns
+ * The SkuField component displays any attribute of the `sku` specified in the parent `<SkusContainer>` component.
+ *
+ * It also accepts a `tagElement` props to enable specific tag-related props.
+ * For examples, when `tagElement` is set to `img` it will also accept props related to `<img>` tag such as `height` and `width`.
+ *
+ * <span title="Requirement" type="warning">
+ * It must to be used inside the `<SkusContainer>` component.
+ * </span>
+ *
+ * <span title="Fields" type="info">
+ * Check the `skus` resource from our [Core API documentation](https://docs.commercelayer.io/core/v/api-reference/skus/object)
+ * for more details about the available attributes to render.
+ * </span>
  */
 export declare function SkuField<P extends Props>(props: P): JSX.Element;
 export default SkuField;

package/lib/cjs/components/skus/Skus.d.ts

@@ -2,5 +2,17 @@ import { type ReactNode } from 'react';
 interface Props {
     children: ReactNode;
 }
+/**
+ * The `Skus` components loop through the list of `skus` found in `SkusContainer` context and render the children filled with the proper sku value.
+ * This means that the children will be rendered as many times as the number of skus found in the `skus` prop array
+ * and there is no need to manually loop through them from your consumer app.
+ *
+ * <span title='Requirements' type='warning'>
+ * Must be a child of the `<SkusContainer>` component.
+ * </span>
+ * <span title='Children' type='info'>
+ * `<SkuField>`, `<AvailabilityContainer>`
+ * </span>
+ */
 export declare function Skus<P extends Props>({ children }: P): JSX.Element;
 export default Skus;