@shipengine/elements 0.34.0 → 0.36.0

package/src/elements/purchase-label/purchase-label.d.ts

@@ -4,26 +4,171 @@ import { ConfigureShipmentProps } from "../configure-shipment";
 import { UseConfigureShipmentProps } from "./hooks";
 import { PurchaseLabelSalesOrderProps } from "./purchase-label-by-sales-order";
 import { PurchaseLabelByShipmentProps } from "./purchase-label-by-shipment";
+/**
+ * # Purchase Label Component Props
+ *
+ * These are the shared props that will be passed into the `<PurchaseLabel.Element />`, and work
+ * for either shipment-based or sales order-based label purchasing.
+ *
+ * @see {@link PurchaseLabel.Element | This prop types usage in `<PurchaseLabel.Element />`}
+ */
 export type PurchaseLabelCommonProps = {
+    /**
+     * `features` is a set of feature flags you would like to enable or disable in this component.
+     */
     features?: ConfigureShipmentProps["features"];
+    /**
+     * `onAddressValidation` is an async/sync callback function that will be invoked on each Address
+     * validation request. For example, whenever you update the `Ship To Address` or
+     * `Ship From Address` for a given shipment.
+     */
     onAddressValidation?: ConfigureShipmentProps["onAddressValidation"];
+    /**
+     *  `onApplyPreset` is an async/sync callback function that will be invoked each time a `Preset`
+     *  has been applied to a shipment.
+     */
     onApplyPreset?: ConfigureShipmentProps["onApplyPreset"];
+    /**
+     * `onBeforeLabelCreate` is an async/sync callback function that will be invoked before every
+     * label purchase.
+     */
     onBeforeLabelCreate?: ConfigureShipmentProps["onBeforeLabelCreate"];
+    /**
+     * `onChangeAddress` is an async/sync callback function that will be invoked each time a
+     * `Ship To Address` or `Ship From Address` has been updated.
+     */
     onChangeAddress?: ConfigureShipmentProps["onChangeAddress"];
+    /**
+     * `onChangeShipmentFormMode` is an async/sync callback function that will be invoked each time
+     * the user toggles the `Shipment Form Mode` between `Browse Rates` and `Selected Rate`.
+     */
     onChangeShipmentFormMode?: ConfigureShipmentProps["onChangeShipmentFormMode"];
+    /**
+     * `onLabelCreateFailure` is an async/sync callback function that will be invoked each time a
+     * label purchase fails.
+     */
     onLabelCreateFailure?: ConfigureShipmentProps["onLabelCreateFailure"];
+    /**
+     * `onLabelCreateSuccess` is an async/sync callback provided by the client that is invoked if the
+     * label is successfully created/purchased.
+     */
     onLabelCreateSuccess?: ConfigureShipmentProps["onLabelCreateSuccess"];
+    /**
+     * `onLoad` is an async/sync callback provided by the host application that is invoked after the
+     * element is loaded. (This may be useful to grab the shipmentId of a one-off label)
+     */
     onLoad?: UseConfigureShipmentProps["onLoad"];
+    /**
+     * `onRateSaved` is an async/sync callback function that will be invoked each time a rate is
+     * saved by the user when rate shopping in the host application.
+     */
     onRateSaved?: ConfigureShipmentProps["onRateSaved"];
+    /**
+     * `onRatesCalculated` is an async/sync callback function that will be invoked each time rates
+     * are calculated for a given shipment.
+     */
     onRatesCalculated?: ConfigureShipmentProps["onRatesCalculated"];
+    /**
+     * `onShipmentUpdated` is an async/sync callback function that will be invoked each time a
+     * shipment is updated with a new `ShipTo/ShipFrom Address`, `rate`, `preset`, etc.
+     */
     onShipmentUpdated?: ConfigureShipmentProps["onShipmentUpdated"];
+    /**
+     * `onToggleAddressPreferenceDisclosure` is an async/sync callback function that will be invoked
+     * each time the user toggles the `Address Preference` disclosure. This disclosure component
+     * allows the user to select whether they would like to use the address they entered, or
+     * the formatted address that we return after validation.
+     */
     onToggleAddressPreferenceDisclosure?: ConfigureShipmentProps["onToggleAddressPreferenceDisclosure"];
+    /**
+     * `printLabelLayout` is a string that represents the label layout you would like to use when
+     * purchasing a label. e.g. `4x6`
+     */
     printLabelLayout?: ConfigureShipmentProps["printLabelLayout"];
+    /**
+     * `shippingPresets` is an object that contains configured shipment details/specs
+     * (dimensions, shipping service, etc) that can be applied to a shipment when purchasing a label.
+     */
     shippingPresets?: UseShippingPresetsOptionsProps;
+    /**
+     * `warehouseId` is a string that represents a previously configured warehouse you would
+     * like to use as the `Ship From Address` when purchasing a label.
+     */
     warehouseId?: UseConfigureShipmentProps["warehouseId"];
 };
-type ElementProps = PurchaseLabelByShipmentProps | PurchaseLabelSalesOrderProps;
+/**
+ * # PurchaseLabel Element Props
+ *
+ * - The Purchase Label `ElementProps` is a `union` of the `PurchaseLabelByShipmentProps` and
+ * `PurchaseLabelSalesOrderProps` prop types. This is for ease of use when purchasing labels by
+ * `shipment` or `sales order`.
+ *
+ * @see {@link PurchaseLabel.Element | This prop types usage in `<PurchaseLabel />`}
+ */
+export type ElementProps = PurchaseLabelByShipmentProps | PurchaseLabelSalesOrderProps;
+/**
+ * # Purchase Label Component
+ *
+ * The `<PurchaseLabel />` component is used to purchase shipping labels from various carriers
+ *
+ * @param ElementProps The props necessary to render the `<PurchaseLabel />` component for shipment
+ * based or sales order based label purchasing.
+ *
+ * @returns Element An EmotionJSX.Element that will render the `<PurchaseLabel />` component
+ * with all the appropriate wrappers.
+ *
+ * @example
+ * You can see how the `<Component />` is used in the `createElement` function call below.
+ * ```tsx
+ * export const Element = alchemy.createElement(Component, ErrorFallback, {
+ *   css: { height: "100%", maxWidth: "800px", minWidth: "440px", width: "100%" },
+ *   resources: { en },
+ * });
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link PurchaseLabel.Element | The **Element** created to render `<PurchaseLabel />`}
+ */
 export declare const Component: ({ ...props }: ElementProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * # Registered Purchase Label Element
+ *
+ * @param ElementProps The props necessary to render the `<PurchaseLabel.Element />` for shipment
+ * based or sales order based label purchasing.
+ *
+ * @example
+ * The `<Component />` is the source JSX that is rendered when you make use of the `PurchaseLabel`
+ * Element directly.
+ * ```tsx
+ * <PurchaseLabel.Element
+ *   key={currentSalesOrderId}
+ *   printLabelLayout='4x6'
+ *   shippingPresets={presets}
+ *   onShipmentUpdated={(shipment) => console.log('Shipment Updated', shipment)}
+ *   onRateSaved={(
+ *     shipment: SE.SalesOrderShipment,
+ *     rate?: SE.Rate,
+ *     rateOptions?: SE.Rate[]
+ *   ) => console.log('Rate Saved', shipment, rate, rateOptions)}
+ *   onRatesCalculated={() => console.log('Rates Calculated')}
+ *   onBeforeLabelCreate={onBeforeLabelPurchase}
+ *   onLabelCreateSuccess={onLabelPurchaseSuccess}
+ *   onLabelCreateFailure={(rate) => console.log('Label Purchase Failed', rate)}
+ *   warehouseId={defaultWarehouseId}
+ * />
+ * ```
+ *
+ * <br />
+ *
+ * - Once a label has been purchased using this Element, you can take the `shipmentId` for the
+ * associated shipment and pass it into the `<ViewShipment.Element />` Element in order to view
+ * the shipment details.
+ *
+ * @see {@link PurchaseLabel.PurchaseLabelCommonProps | The **Common props** used in `<PurchaseLabel.Element />`}
+ *
+ * @see {@link ViewShipment.Element | The next step in the label purchase workflow `<ViewShipment.Element />`}
+ */
 export declare const Element: ({ resources, ...props }: ElementProps & {
     resources?: {
         en: {
@@ -164,12 +309,22 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                     currentBalance: string;
                     insufficientBalanceCTA: string;
                 };
+                /**
+                 * # Purchase Label Component Props
+                 *
+                 * These are the shared props that will be passed into the `<PurchaseLabel.Element />`, and work
+                 * for either shipment-based or sales order-based label purchasing.
+                 *
+                 * @see {@link PurchaseLabel.Element | This prop types usage in `<PurchaseLabel.Element />`}
+                 */
                 cta: {
                     addPackageDetails: string;
                 };
                 errorMessages: {
                     customsItemsRequired: string;
-                    invalidAddress: string;
+                    invalidAddress: string; /**
+                     * `features` is a set of feature flags you would like to enable or disable in this component.
+                     */
                     noRates: string;
                     salesOrderNotLoaded: string;
                     unsupportedAddress: string;
@@ -230,6 +385,7 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                 rates: {
                     uspsMediaMailAcknowledgement: string;
                     uspsFirstClassMailAcknowledgement_leof: string;
+                    dhlExpressTermsAcknowledgement: string;
                 };
                 shipToAddressFormFields: string;
                 sections: {
@@ -291,6 +447,14 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                 status: {
                     saving: string;
                     saved: string;
+                    /**
+                     * # Purchase Label Component Props
+                     *
+                     * These are the shared props that will be passed into the `<PurchaseLabel.Element />`, and work
+                     * for either shipment-based or sales order-based label purchasing.
+                     *
+                     * @see {@link PurchaseLabel.Element | This prop types usage in `<PurchaseLabel.Element />`}
+                     */
                     savingFailed: string;
                 };
                 units: {
@@ -304,7 +468,9 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                         title: string;
                         standard: string;
                         g: string;
-                        kg: string;
+                        kg: string; /**
+                         * `features` is a set of feature flags you would like to enable or disable in this component.
+                         */
                     };
                 };
             };
@@ -497,7 +663,12 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                     fields: {
                         contentsType: string;
                         countryOfOrigin: string;
-                        description: string;
+                        description: string; /**
+                         * `onToggleAddressPreferenceDisclosure` is an async/sync callback function that will be invoked
+                         * each time the user toggles the `Address Preference` disclosure. This disclosure component
+                         * allows the user to select whether they would like to use the address they entered, or
+                         * the formatted address that we return after validation.
+                         */
                         harmonizedTariffCode: string;
                         ifDeliveryFails: string;
                         quantity: string;
@@ -514,7 +685,10 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                 };
                 errorMessages: {
                     invalidNameOrCompany: string;
-                    parsingFailure: string;
+                    parsingFailure: string; /**
+                     * `shippingPresets` is an object that contains configured shipment details/specs
+                     * (dimensions, shipping service, etc) that can be applied to a shipment when purchasing a label.
+                     */
                     noWarehouses: string;
                     unableToLoad: {
                         accountSettings: string;
@@ -616,11 +790,16 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                     ounces: string;
                     pounds_one: string;
                     pounds_other: string;
+                    kilogram: string;
+                    gram: string;
                 };
                 units: {
-                    in: string;
+                    inch: string;
                     lbs: string;
                     oz: string;
+                    centimeter: string;
+                    gram: string;
+                    kilogram: string;
                 };
                 "VGhlIHNlbGVjdGVkIHNlcnZpY2UgaW5jbHVkZXMgaW5zdXJhbmNlIGZvciBhbiBpbnN1cmVkIGFtb3VudCB1cCB0byAkMTAwLgo=": string;
                 "VGhlIHNlbGVjdGVkIHNlcnZpY2UgaW5jbHVkZXMgaW5zdXJhbmNlIGZvciBhbiBpbnN1cmVkIGFtb3VudCB1cCB0byAkNTAuCg==": string;
@@ -629,6 +808,7 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                 QSBzaGlwcGluZyBjYXJyaWVyIGVycm9yIG9jY3VycmVkOiBVUFMgd2VpZ2h0IGxpbWl0IHBlciBwYWNrYWdlIGlzIDE1MCBsYnMu: string;
                 UGxlYXNlIGFkZCBhIFN0YW1wcy5jb20gYWNjb3VudCB0byBTaGlwRW5naW5lIGluIG9yZGVyIHRvIGNyZWF0ZSBzaGlwcGluZyBsYWJlbHMu: string;
                 QSBzaGlwcGluZyBlcnJvciBvY2N1cnJlZDogTWlzc2luZyBvciBpbnZhbGlkIHNoaXBwZXIgbnVtYmVy: string;
+                QSBzaGlwcGluZyBjYXJyaWVyIGVycm9yIG9jY3VycmVkOiBNaXNzaW5nIG9yIGludmFsaWQgc2hpcHBlciBuYW1l: string;
                 "QSBzaGlwcGluZyBjYXJyaWVyIGVycm9yIG9jY3VycmVkOiBNaXNzaW5nIG9yIGludmFsaWQgc2hpcCB0byBTdGF0ZVByb3ZpbmNlQ29kZQ==": string;
                 "QSBzaGlwcGluZyBjYXJyaWVyIGVycm9yIG9jY3VycmVkOiBJbnZhbGlkIHNvbGQgdG8gc3RhdGUgcHJvdmluY2UgY29kZS4gVmFsaWQgbGVuZ3RoIGlzIDAgdG8gNSBhbHBoYW51bWVyaWM=": string;
             };
@@ -648,5 +828,9 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
         };
     } | undefined;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * # Purchase Label Component Props
+ *
+ * @see {@link PurchaseLabel.Component | The **Common Props** used in the `<PurchaseLabel /> component`}
+ */
 export type ComponentProps = React.ComponentProps<typeof Element>;
-export {};

package/src/elements/shipengine-workflow/label-workflow.d.ts

@@ -1,12 +1,39 @@
+import React from "react";
 import { Shipment } from "@shipengine/js-api";
-type LabelWorkflowProps = {
+/**
+ * @internal
+ *
+ * # Label Workflow Props
+ *
+ * - These are the base props that will be passed into the `<LabelWorkflow />` component.
+ *
+ * @see {@link LabelWorkflow.Element | The `<LabelWorkflow.Element />` component}
+ */
+export type LabelWorkflowProps = {
+    /**
+     * `callbacks` is an optional set of callbacks that will be invoked at various points in the
+     * label purchasing workflow.
+     */
     callbacks?: {
+        /**
+         * `onLabelCreateSuccess` is an optional callback function that will be invoked when a label
+         * has been successfully purchased.
+         */
         onLabelCreateSuccess?: (label: {
             labelId: string;
         }, shipment: Shipment) => void;
     };
+    /**
+     * `features` is a set of feature flags you would like to enable or disable in this component.
+     */
     features: any;
+    /**
+     * `labelId` is the unique identifier for the label you wish to view.
+     */
     labelId?: string;
+    /**
+     * `multiplexedId` is the unique pattern of props that help index which Element is being displayed.
+     */
     multiplexedId: ({
         orderSourceCode: string;
     } & ({
@@ -21,5 +48,114 @@ type LabelWorkflowProps = {
         oneOff: true;
     };
 };
+/**
+ * @internal
+ *
+ * # Label Workflow Component
+ *
+ * @example
+ * ```tsx
+ *   const {
+ *     labelId,
+ *     multiplexedId,
+ *     isVoidingLabel,
+ *     shipmentId,
+ *     setLabelId,
+ *     setShipmentId,
+ *     setIsVoidingLabel,
+ *   } = useLabelWorkflow({
+ *     _labelId,
+ *     _multiplexedId,
+ *   });
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link LabelWorkflow.Element | The `<LabelWorkflow.Element />` component using this hook}
+ */
+export declare const useLabelWorkflow: ({ _multiplexedId, _labelId, }: {
+    _callbacks?: {
+        /**
+         * `onLabelCreateSuccess` is an optional callback function that will be invoked when a label
+         * has been successfully purchased.
+         */
+        onLabelCreateSuccess?: ((label: {
+            labelId: string;
+        }, shipment: Shipment) => void) | undefined;
+    } | undefined;
+    _labelId?: string | undefined;
+    _multiplexedId: ({
+        orderSourceCode: string;
+    } & ({
+        externalOrderNumber: string;
+    } | {
+        externalOrderId: string;
+    })) | {
+        salesOrderId: string;
+    } | {
+        shipmentId: string;
+    } | {
+        oneOff: true;
+    };
+}) => {
+    isVoidingLabel: boolean;
+    labelId: string | undefined;
+    multiplexedId: ({
+        orderSourceCode: string;
+    } & ({
+        externalOrderNumber: string;
+    } | {
+        externalOrderId: string;
+    })) | {
+        salesOrderId: string;
+    } | {
+        shipmentId: string;
+    } | {
+        oneOff: true;
+    };
+    setIsVoidingLabel: React.Dispatch<React.SetStateAction<boolean>>;
+    setLabelId: (nextLabelId: LabelWorkflowProps["labelId"]) => void;
+    setMultiplexedId: React.Dispatch<React.SetStateAction<({
+        orderSourceCode: string;
+    } & ({
+        externalOrderNumber: string;
+    } | {
+        externalOrderId: string;
+    })) | {
+        salesOrderId: string;
+    } | {
+        shipmentId: string;
+    } | {
+        oneOff: true;
+    }>>;
+    setShipmentId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    shipmentId: string | undefined;
+};
+/**
+ * @internal
+ *
+ * # Label Workflow Element
+ *
+ * - The `<LabelWorkflow.Element />` component is a composition of the PurchaseLabel, ViewShipment,
+ * and VoidLabel elements that allows users to purchase a label, view the shipment details, and optionally void their shipping label.
+ *
+ * @param LabelWorkflowProps The props necessary to render the `<LabelWorkflow.Element />` for shipment
+ * based or sales order based label purchasing.
+ *
+ * @returns Element A React Element that will render the `<LabelWorkflow />` component.
+ *
+ * @example
+ * ```tsx
+ * <LabelWorkflow
+ *       {...elementProps}
+ *       callbacks={{ onLabelCreateSuccess }}
+ *       multiplexedId={elementIdProps}
+ * />
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link LabelWorkflowProps | The props that are passed into the `<LabelWorkflow />` component}
+ * @see {@link LabelWorkflow.useLabelWorkflow | The `hook` that is used to manage the state of the `<LabelWorkflow />` component}
+ */
 export declare const Element: ({ multiplexedId: _multiplexedId, labelId: _labelId, features: propFeatures, callbacks, }: LabelWorkflowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};

package/src/elements/view-shipment/view-shipment.d.ts

@@ -1,14 +1,94 @@
 /// <reference types="react" />
 import { SE } from "@shipengine/alchemy";
 import { Templates } from "../../components";
+/**
+ * # View Shipment Component Props
+ *
+ * - These are the base props that will be passed into the `<ViewShipment />` component.
+ *
+ * @see {@link ViewShipment.Component | This prop types usage in the `<ViewShipment />` component}
+ */
 export type ComponentProps = {
+    /**
+     * `features` is a set of feature flags you would like to enable or disable in this component.
+     */
     features?: Templates.ShipmentFeatures;
+    /**
+     * `onClickPrintLabel` is a callback function that will be invoked when the user clicks the
+     * `Print Label` button.
+     */
     onClickPrintLabel?: () => void;
+    /**
+     * `onClickPurchaseLabel` is a callback function that will be invoked when the user clicks the
+     * `Purchase Label` button.
+     */
     onClickPurchaseLabel?: (order: SE.SalesOrder) => void;
+    /**
+     * `onClickVoidLabel` is a callback function that will be invoked when the user clicks the
+     * `Void Label` button.
+     */
     onClickVoidLabel?: (label: SE.Label) => void;
+    /**
+     * `shipmentId` is the unique identifier for the shipment you wish to view.
+     */
     shipmentId?: string;
 };
+/**
+ * # View Shipment Component
+ *
+ * - The `<ViewShipment />` component is used to for viewing the shipment's tracking number, printing the label that
+ * was created, and the option to void the label. When a label is voided, you can see a list of the
+ * previously voided labels for a given shipment using this component.
+ *
+ * @param ComponentProps The base props that will be passed into the `<ViewShipment />` component.
+ *
+ * @returns Element An EmotionJSX.Element that will render the `<ViewShipment />` component
+ * with all the appropriate wrappers.
+ *
+ * @example
+ * You can see how the `<Component />` is used in the `createElement` function call below.
+ * ```tsx
+ * export const Element = alchemy.createElement(Component, ErrorFallback, {
+ *   css: { height: "100%", maxWidth: "800px", minWidth: "440px", width: "100%" },
+ *   resources: { en },
+ * });
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link ViewShipment.Element | The **Element** created to render `<ViewShipment />`}
+ */
 export declare const Component: ({ features, onClickPrintLabel, onClickPurchaseLabel, onClickVoidLabel, shipmentId, }: ComponentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * # Registered View Shipment Element
+ *
+ * - This is the registered `<ViewShipment />` element that will be used to render the
+ * `<ViewShipment.Element />` component.
+ *
+ * @param ElementProps The props, callbacks, and resources necessary to render
+ * the `<ViewShipment.Element />` component.
+ *
+ * @example
+ * The `<Component />` is the source JSX that is rendered when you make use of the `ViewShipment`
+ * Element directly. Here is a brief example of how you would use it within your application.
+ * ```tsx
+ * <ViewShipment.Element
+ *   onClickPurchaseLabel={({ salesOrderId }) => {
+ *     console.log('sales order ID', salesOrderId);
+ *   }}
+ *   onClickVoidLabel={({ labelId }) => {
+ *     console.log('voided label', labelId);
+ *   }}
+ *   shipmentId="se-1234567"
+ * />
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link ViewShipment.ComponentProps | The **props** that can be passed into the `<ViewShipment.Element />` component}
+ *
+ * @see {@link VoidLabel.Element | The next step in the label purchase workflow `<VoidLabel.Element />`}
+ **/
 export declare const Element: ({ resources, ...props }: ComponentProps & {
     resources?: {
         en: {
@@ -215,6 +295,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                 rates: {
                     uspsMediaMailAcknowledgement: string;
                     uspsFirstClassMailAcknowledgement_leof: string;
+                    dhlExpressTermsAcknowledgement: string;
                 };
                 shipToAddressFormFields: string;
                 sections: {
@@ -244,6 +325,10 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     register: string;
                     carriers: string;
                     addresses: string;
+                    /**
+                     * `onClickPrintLabel` is a callback function that will be invoked when the user clicks the
+                     * `Print Label` button.
+                     */
                     billing: string;
                 };
                 warehouse: {
@@ -282,7 +367,10 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     title: string;
                     dimensions: {
                         title: string;
-                        standard: string;
+                        standard: string; /**
+                         * `onClickPrintLabel` is a callback function that will be invoked when the user clicks the
+                         * `Print Label` button.
+                         */
                         metric: string;
                     };
                     weight: {
@@ -418,6 +506,31 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                         title: string;
                         originalAddress: string;
                         matchedAddress: string;
+                        /**
+                         * # View Shipment Component
+                         *
+                         * - The `<ViewShipment />` component is used to for viewing the shipment's tracking number, printing the label that
+                         * was created, and the option to void the label. When a label is voided, you can see a list of the
+                         * previously voided labels for a given shipment using this component.
+                         *
+                         * @param ComponentProps The base props that will be passed into the `<ViewShipment />` component.
+                         *
+                         * @returns Element An EmotionJSX.Element that will render the `<ViewShipment />` component
+                         * with all the appropriate wrappers.
+                         *
+                         * @example
+                         * You can see how the `<Component />` is used in the `createElement` function call below.
+                         * ```tsx
+                         * export const Element = alchemy.createElement(Component, ErrorFallback, {
+                         *   css: { height: "100%", maxWidth: "800px", minWidth: "440px", width: "100%" },
+                         *   resources: { en },
+                         * });
+                         * ```
+                         *
+                         * <br />
+                         *
+                         * @see {@link ViewShipment.Element | The **Element** created to render `<ViewShipment />`}
+                         */
                         unableToValidate: string;
                         use: {
                             originalAddress: string;
@@ -601,11 +714,16 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     ounces: string;
                     pounds_one: string;
                     pounds_other: string;
+                    kilogram: string;
+                    gram: string;
                 };
                 units: {
-                    in: string;
+                    inch: string;
                     lbs: string;
                     oz: string;
+                    centimeter: string;
+                    gram: string;
+                    kilogram: string;
                 };
                 "VGhlIHNlbGVjdGVkIHNlcnZpY2UgaW5jbHVkZXMgaW5zdXJhbmNlIGZvciBhbiBpbnN1cmVkIGFtb3VudCB1cCB0byAkMTAwLgo=": string;
                 "VGhlIHNlbGVjdGVkIHNlcnZpY2UgaW5jbHVkZXMgaW5zdXJhbmNlIGZvciBhbiBpbnN1cmVkIGFtb3VudCB1cCB0byAkNTAuCg==": string;
@@ -614,6 +732,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                 QSBzaGlwcGluZyBjYXJyaWVyIGVycm9yIG9jY3VycmVkOiBVUFMgd2VpZ2h0IGxpbWl0IHBlciBwYWNrYWdlIGlzIDE1MCBsYnMu: string;
                 UGxlYXNlIGFkZCBhIFN0YW1wcy5jb20gYWNjb3VudCB0byBTaGlwRW5naW5lIGluIG9yZGVyIHRvIGNyZWF0ZSBzaGlwcGluZyBsYWJlbHMu: string;
                 QSBzaGlwcGluZyBlcnJvciBvY2N1cnJlZDogTWlzc2luZyBvciBpbnZhbGlkIHNoaXBwZXIgbnVtYmVy: string;
+                QSBzaGlwcGluZyBjYXJyaWVyIGVycm9yIG9jY3VycmVkOiBNaXNzaW5nIG9yIGludmFsaWQgc2hpcHBlciBuYW1l: string;
                 "QSBzaGlwcGluZyBjYXJyaWVyIGVycm9yIG9jY3VycmVkOiBNaXNzaW5nIG9yIGludmFsaWQgc2hpcCB0byBTdGF0ZVByb3ZpbmNlQ29kZQ==": string;
                 "QSBzaGlwcGluZyBjYXJyaWVyIGVycm9yIG9jY3VycmVkOiBJbnZhbGlkIHNvbGQgdG8gc3RhdGUgcHJvdmluY2UgY29kZS4gVmFsaWQgbGVuZ3RoIGlzIDAgdG8gNSBhbHBoYW51bWVyaWM=": string;
             };
@@ -633,4 +752,11 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
         };
     } | undefined;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * # View Shipment Element Props
+ *
+ * - These are the base props that will be passed into the `<ViewShipment />` element.
+ *
+ * @see {@link ViewShipment.Element | See the full type that `typeof Element` will return}
+ */
 export type ElementProps = React.ComponentProps<typeof Element>;