@shipengine/elements 0.37.0 → 0.37.2

package/index.cjs

@@ -2648,6 +2648,14 @@ const featureFlags = {
      * Elements.
      */
     compatibleCountryCodes: ["AU", "CA", "FR", "DE", "GB", "IL", "IT", "NO", "ES", "SE", "US"],
+    /**
+     * @internal
+     *
+     * `partnerMessages` enables the partner consuming elements to specify override messages in specific cases.
+     */
+    partnerMessages: {
+      incompleteLabelPurchaseRequirements: undefined
+    },
     /**
      *  `rateForm` all scoped feature flags for the `rate form` section of the `<PurchaseLabel />`
      *  element.
@@ -2701,14 +2709,6 @@ const featureFlags = {
        * to opt for third party insurance when insuring their shipment.
        */
       includeThirdPartyInsurance: true,
-      /**
-       * @internal
-       *
-       * `partnerMessages` enables the partner consuming elements to specify override messages in specific cases.
-       */
-      partnerMessages: {
-        incompleteLabelPurchaseRequirements: undefined
-      },
       /**
        * `selectService` enables the `select service` feature, allowing users to select a service
        * when rate shopping across multiple carrier providers.
@@ -12832,7 +12832,7 @@ const CustomsItemForm = ({
   }));
   const formInterface = jsxRuntime.jsxs("section", Object.assign({
     css: theme => ({
-      backgroundColor: theme.palette.gray.megaLight,
+      backgroundColor: theme.palette.gray.ultraLight,
       padding: theme.spacing(2)
     })
   }, {
@@ -14635,22 +14635,21 @@ const rateSchema = zod.z.object({
 const RateForm = ({
   carriers,
   disabled,
-  errors,
   displayableRateErrors,
-  displayableLabelErrors,
+  errors,
   features,
+  isLoading,
   labelErrors,
   labels,
   labelsLoading,
-  isLoading,
   onSave,
   onSelectRate,
   onSubmit,
-  rates,
-  preferredRates,
-  shipment,
   outOfBandDisplayableErrors,
-  preferredServiceCodes
+  preferredRates,
+  preferredServiceCodes,
+  rates,
+  shipment
 }) => {
   var _a, _b, _c, _d, _e, _f;
   features = Object.assign({
@@ -14664,7 +14663,6 @@ const RateForm = ({
       saveRate: true
     }
   }, features !== null && features !== void 0 ? features : {});
-  const allDisplayableErrors = [...(displayableRateErrors !== null && displayableRateErrors !== void 0 ? displayableRateErrors : []), ...(outOfBandDisplayableErrors !== null && outOfBandDisplayableErrors !== void 0 ? outOfBandDisplayableErrors : [])];
   const {
     t
   } = reactI18next.useTranslation();
@@ -14762,6 +14760,22 @@ const RateForm = ({
     const preferredRate = preferredRates === null || preferredRates === void 0 ? void 0 : preferredRates.find(r => r.rate.rateId === (selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.rateId));
     return !!preferredRate;
   }, [preferredRates, selectedRate]);
+  const displayableErrors = React.useMemo(() => {
+    const rateAndShipmentErrors = [...(displayableRateErrors !== null && displayableRateErrors !== void 0 ? displayableRateErrors : []), ...(outOfBandDisplayableErrors !== null && outOfBandDisplayableErrors !== void 0 ? outOfBandDisplayableErrors : [])];
+    if (rateAndShipmentErrors.length && rateOptions.length === 0) {
+      return {
+        messages: rateAndShipmentErrors,
+        title: "errorTypes.rateInvalid"
+      };
+    }
+    if (labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length) {
+      return {
+        messages: labelErrors,
+        title: "errorTypes.purchase"
+      };
+    }
+    return undefined;
+  }, [rateOptions, labelErrors, displayableRateErrors, outOfBandDisplayableErrors]);
   return jsxRuntime.jsxs("form", Object.assign({
     id: "rate-form",
     onSubmit: handleSubmit,
@@ -14806,7 +14820,7 @@ const RateForm = ({
             children: showHiddenRates ? t("purchase-label:actions.showFewerRates") : t("purchase-label:actions.showMoreRates")
           }))
         }))]
-      }) : !isLoading && !!allDisplayableErrors.length ? null : jsxRuntime.jsxs("article", Object.assign({
+      }) : !isLoading && !!displayableErrors ? null : jsxRuntime.jsxs("article", Object.assign({
         css: styles$3.ratesInterstitial,
         role: "presentation"
       }, {
@@ -14815,13 +14829,11 @@ const RateForm = ({
         }), jsxRuntime.jsx(Spacer, {}), isLoading ? t("purchase-label:loading.calculatingRates") : t("purchase-label:cta.addPackageDetails")]
       })), jsxRuntime.jsx(Spacer, {
         multiplier: 2
-      }), !isLoading && (!!allDisplayableErrors.length && rateOptions.length === 0 || !!(labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length)) && jsxRuntime.jsx(giger.InlineNotification, Object.assign({
-        title: t("errorTypes.rateInvalid"),
+      }), !isLoading && !!displayableErrors && jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+        title: t(displayableErrors.title),
         type: giger.NotificationType.ERROR
       }, {
-        children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [displayableRateErrors, outOfBandDisplayableErrors, displayableLabelErrors]
-        })
+        children: displayableErrors.messages
       }))]
     })), ((_d = features === null || features === void 0 ? void 0 : features.rateForm) === null || _d === void 0 ? void 0 : _d.labelLayout) && !labelsLoading && !(labels === null || labels === void 0 ? void 0 : labels.length) && jsxRuntime.jsx(Section, Object.assign({
       title: t("manage-defaults:label.title")
@@ -14990,21 +15002,37 @@ const styles$1 = createStyles({
     padding: `${theme.spacing(1)}px ${theme.spacing(2)}px 0 ${theme.spacing(1)}px`,
     width: theme.spacing(5)
   }),
+  header: theme => ({
+    "& > tr > th": {
+      "&:after": {
+        borderBottom: "none"
+      }
+    }
+  }),
+  headerActions: theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
+    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px 0 ${theme.spacing(1)}px`,
+    width: theme.spacing(5)
+  }),
   headerDescription: theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
     overflow: "visible",
     padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`
   }),
   headerEach: theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
     padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px 0`,
     textAlign: "right",
     width: theme.spacing(10)
   }),
   headerQty: theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
     padding: theme.spacing(1),
     textAlign: "right",
     width: theme.spacing(5)
   }),
   headerTotal: theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
     padding: `${theme.spacing(1)}px 0 ${theme.spacing(1)}px ${theme.spacing(1)}px`,
     textAlign: "right",
     width: theme.spacing(10)
@@ -15026,7 +15054,7 @@ const styles$1 = createStyles({
   itemQty: theme => ({
     overflow: "visible",
     padding: `${theme.spacing(1)}px ${theme.spacing(1)}px 0`,
-    textAlign: "center",
+    textAlign: "right",
     width: theme.spacing(5)
   }),
   itemTotal: theme => ({
@@ -15034,6 +15062,14 @@ const styles$1 = createStyles({
     padding: `${theme.spacing(1)}px 0 0 ${theme.spacing(1)}px`,
     textAlign: "right",
     width: theme.spacing(10)
+  }),
+  subtitle: () => ({
+    letterSpacing: "0.01em"
+  }),
+  table: () => ({
+    border: "1px solid #d4e4e8",
+    borderRadius: "0",
+    boxShadow: "none"
   })
 });
 
@@ -15144,12 +15180,15 @@ const CustomsItemsDisplay = ({
       }))]
     })), customsItems.length > 0 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(Spacer, {}), jsxRuntime.jsx(giger.Table, Object.assign({
-        header: jsxRuntime.jsx(giger.TableHeader, {
+        header: jsxRuntime.jsx(giger.TableHeader, Object.assign({
+          css: styles$1.header
+        }, {
           children: jsxRuntime.jsxs(giger.TableBaseRow, {
             children: [jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
               css: styles$1.headerDescription
             }, {
               children: jsxRuntime.jsx(giger.Typography, Object.assign({
+                css: styles$1.subtitle,
                 variant: "subtitle2"
               }, {
                 children: t("customs.fields.description")
@@ -15158,6 +15197,7 @@ const CustomsItemsDisplay = ({
               css: styles$1.headerEach
             }, {
               children: jsxRuntime.jsx(giger.Typography, Object.assign({
+                css: styles$1.subtitle,
                 variant: "subtitle2"
               }, {
                 children: t("customs.each", {
@@ -15168,6 +15208,7 @@ const CustomsItemsDisplay = ({
               css: styles$1.headerQty
             }, {
               children: jsxRuntime.jsx(giger.Typography, Object.assign({
+                css: styles$1.subtitle,
                 variant: "subtitle2"
               }, {
                 children: t("customs.fields.quantity")
@@ -15176,6 +15217,7 @@ const CustomsItemsDisplay = ({
               css: styles$1.headerTotal
             }, {
               children: jsxRuntime.jsx(giger.Typography, Object.assign({
+                css: styles$1.subtitle,
                 variant: "subtitle2"
               }, {
                 children: t("customs.total", {
@@ -15183,10 +15225,11 @@ const CustomsItemsDisplay = ({
                 })
               }))
             })), jsxRuntime.jsx(giger.TableHeaderCell, {
-              css: styles$1.actionsColumn
+              css: styles$1.headerActions
             })]
           })
-        })
+        })),
+        outerWrapperStyles: styles$1.table
       }, {
         children: jsxRuntime.jsx(giger.TableBody, {
           children: customsItems.map(item => jsxRuntime.jsxs(React.Fragment, {
@@ -15411,7 +15454,7 @@ const ShipmentForm = ({
   warehouseId,
   warehouses
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   features = Object.assign({
     browseRates: true,
     includeShipsuranceInsurance: true,
@@ -15597,16 +15640,16 @@ const ShipmentForm = ({
   }, [form]);
   const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
     try {
-      const _o = values,
+      const _l = values,
         {
           __mode: discard
-        } = _o,
-        payload = __rest(_o, ["__mode"]);
+        } = _l,
+        payload = __rest(_l, ["__mode"]);
       const updatedShipment = yield onSubmit(Object.assign(Object.assign({}, shipment || {}), payload));
       // Defer shipment hydration to the task queue so that the submission promise resolves first, otherwise the
       // submission count will increment after hydration resets the form, keeping it in revalidate mode
       if (updatedShipment) setTimeout(() => hydrateShipment(updatedShipment), 0);
-    } catch (_p) {
+    } catch (_m) {
       // Reset the form to its current state, but as a side effect this sets isDirty to false
       // That way, form lifecycle contract is upheld
       form.reset(form.getValues());
@@ -15739,19 +15782,6 @@ const ShipmentForm = ({
   const hasUpsOptions = React.useMemo(() => {
     return (packageOptions === null || packageOptions === void 0 ? void 0 : packageOptions.some(option => option.label === "UPS")) && ((selectedPackage === null || selectedPackage === void 0 ? void 0 : selectedPackage.code) === "package" || selectedCarrierId === upsCarrierId);
   }, [packageOptions, selectedPackage, selectedCarrierId, upsCarrierId]);
-  const incompleteRequirementsKeys = React.useMemo(() => {
-    if ((warehouses === null || warehouses === void 0 ? void 0 : warehouses.length) === 0 && (carriers === null || carriers === void 0 ? void 0 : carriers.length) === 0) {
-      return ["noWarehouseOrCarrier"];
-    } else {
-      const keys = [(warehouses === null || warehouses === void 0 ? void 0 : warehouses.length) === 0 && "noWarehouse", (carriers === null || carriers === void 0 ? void 0 : carriers.length) === 0 && "noCarrier"].filter(Boolean);
-      return keys;
-    }
-  }, [carriers, warehouses]);
-  const isPartnerMessagingEnabled = !!((_d = features.partnerMessages) === null || _d === void 0 ? void 0 : _d.incompleteLabelPurchaseRequirements);
-  const incompleteRequirementsError = isPartnerMessagingEnabled ? (_e = features.partnerMessages) === null || _e === void 0 ? void 0 : _e.incompleteLabelPurchaseRequirements : t("errorMessages.incompleteLabelPurchaseRequirements", {
-    requirements: incompleteRequirementsKeys.map(key => t(`purchase-label:requirements.${key}`))
-  });
-  if (incompleteRequirementsKeys.length > 0) throw new Error(incompleteRequirementsError);
   if (isLoading) return jsxRuntime.jsx(Loader, {
     message: t("loading.shipment")
   });
@@ -15825,7 +15855,7 @@ const ShipmentForm = ({
         }, {
           children: formatDate(salesOrder.orderDate)
         })), jsxRuntime.jsx(Spacer, {})]
-      })), ((_f = salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.paymentDetails) === null || _f === void 0 ? void 0 : _f.grandTotal) && jsxRuntime.jsxs(FieldLabel, Object.assign({
+      })), ((_d = salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.paymentDetails) === null || _d === void 0 ? void 0 : _d.grandTotal) && jsxRuntime.jsxs(FieldLabel, Object.assign({
         label: t("purchase-label:fields.orderValue")
       }, {
         children: [jsxRuntime.jsx(giger.Typography, Object.assign({
@@ -15903,7 +15933,7 @@ const ShipmentForm = ({
       }), jsxRuntime.jsx(CustomsItemsDisplay, {
         onUpdate: handleUpdateCustomsItems,
         shipment: shipment
-      }), ((_g = customsErrors === null || customsErrors === void 0 ? void 0 : customsErrors.customsItems) === null || _g === void 0 ? void 0 : _g.type) === "too_small" && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      }), ((_e = customsErrors === null || customsErrors === void 0 ? void 0 : customsErrors.customsItems) === null || _e === void 0 ? void 0 : _e.type) === "too_small" && jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [jsxRuntime.jsx(Spacer, {}), jsxRuntime.jsx(giger.InlineNotification, {
           title: t("purchase-label:errorMessages.customsItemsRequired"),
           type: giger.NotificationType.ERROR
@@ -16094,14 +16124,14 @@ const ShipmentForm = ({
         label: "purchase-label:fields.addOns"
       }, {
         children: [jsxRuntime.jsx(Switch, Object.assign({
-          defaultChecked: ((_h = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _h !== void 0 ? _h : "none") !== "none",
+          defaultChecked: ((_f = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _f !== void 0 ? _f : "none") !== "none",
           label: t("purchase-label:fields.confirmation"),
           name: "confirmationEnabled",
           onChange: e => form.setValue("confirmation", e.target.checked ? alchemy.SE.ConfirmationType.DELIVERY : undefined, {
             shouldDirty: true
           }),
           shouldUnmount: true,
-          value: ((_j = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _j !== void 0 ? _j : "none") !== "none"
+          value: ((_g = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _g !== void 0 ? _g : "none") !== "none"
         }, {
           children: jsxRuntime.jsx(Select, {
             control: form.control,
@@ -16113,7 +16143,7 @@ const ShipmentForm = ({
             shouldUnregister: true
           })
         })), jsxRuntime.jsxs(Switch, Object.assign({
-          defaultChecked: ((_k = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _k !== void 0 ? _k : "none") !== "none",
+          defaultChecked: ((_h = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _h !== void 0 ? _h : "none") !== "none",
           label: t("purchase-label:fields.insurance"),
           name: "insuranceEnabled",
           onChange: e => {
@@ -16123,7 +16153,7 @@ const ShipmentForm = ({
             });
           },
           shouldUnmount: true,
-          value: ((_l = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _l !== void 0 ? _l : "none") !== "none"
+          value: ((_j = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _j !== void 0 ? _j : "none") !== "none"
         }, {
           children: [insuranceProviderOptions.length === 1 && insuranceProviderOptions[0].value === "carrier" ? null : jsxRuntime.jsx(Select, {
             control: form.control,
@@ -16147,7 +16177,7 @@ const ShipmentForm = ({
             showCurrencySymbol: true
           })]
         })), hasUpsOptions && jsxRuntime.jsx(Switch, {
-          defaultChecked: ((_m = shipment === null || shipment === void 0 ? void 0 : shipment.advancedOptions) === null || _m === void 0 ? void 0 : _m.additionalHandling) || false,
+          defaultChecked: ((_k = shipment === null || shipment === void 0 ? void 0 : shipment.advancedOptions) === null || _k === void 0 ? void 0 : _k.additionalHandling) || false,
           label: jsxRuntime.jsx(reactI18next.Trans, {
             components: {
               Link: jsxRuntime.jsx(giger.Link, {
@@ -16910,7 +16940,7 @@ var common = {
 		invalidAddressNameStrict: "Recipient Name must have two characters in First and Last Name.",
 		invalidAddressPoBox: "A physical address is required for wallet registration. You can add a PO Box as a Ship From address.",
 		invalidCreditCardType: "Card type must be Visa, Mastercard, American Express, or Discover",
-		invalidExpiration: "Invalid Expiration Date",
+		invalidExpirationDate: "Invalid Expiration Date",
 		invalidPostalCode: "Invalid Postal Code",
 		invalidStateProvince: "Invalid State",
 		invalidString: "{{fieldLabel}} is invalid",
@@ -17946,12 +17976,12 @@ const useRequestRates = ({
     getPreferredRates
   });
   const requestRates = React.useCallback((shipment, isInternational) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b;
-    const internationalCarrierIds = (_a = carriers === null || carriers === void 0 ? void 0 : carriers.map(c => c.carrierId)) !== null && _a !== void 0 ? _a : [];
-    const domesticCarrierIds = (_b = carriers === null || carriers === void 0 ? void 0 : carriers.filter(c => !["dhl"].includes(c.carrierCode)).map(c => c.carrierId)) !== null && _b !== void 0 ? _b : [];
+    var _a;
+    // filter out DHL for domestic shipments
+    const carrierIds = (_a = carriers === null || carriers === void 0 ? void 0 : carriers.filter(c => isInternational || !c.carrierCode.includes("dhl")).map(c => c.carrierId)) !== null && _a !== void 0 ? _a : [];
     const standardRatesResponse = yield calculateRates({
       rateOptions: {
-        carrierIds: shipment.carrierId ? [shipment.carrierId] : isInternational ? internationalCarrierIds : domesticCarrierIds,
+        carrierIds: shipment.carrierId ? [shipment.carrierId] : carrierIds,
         packageTypes: (customPackageTypes === null || customPackageTypes === void 0 ? void 0 : customPackageTypes.find(p => p.packageId === shipment.packages[0].packageId)) ? ["package"] // Only specify package types for non-custom packages
         : shipment.packages.map(pkg => pkg.packageCode),
         serviceCodes: shipment.serviceCode ? [shipment.serviceCode] : undefined
@@ -18249,11 +18279,10 @@ const useRatesForm = ({
   });
   return {
     carriers,
-    displayableLabelErrors,
     displayableRateErrors,
     errors: errors.length > 0 ? errors : undefined,
     isLoading: ratesCalculating,
-    labelErrors: (labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length) ? labelErrors : undefined,
+    labelErrors: displayableLabelErrors,
     labels,
     labelsLoading,
     onSave: handleSave,
@@ -18774,7 +18803,27 @@ const PurchaseLabelByShipment = _a => {
  * @see {@link PurchaseLabel.Element | The **Element** created to render `<PurchaseLabel />`}
  */
 const Component$2 = _a => {
-  var props = __rest(_a, []);
+  var _b;
+  var {
+      features
+    } = _a,
+    props = __rest(_a, ["features"]);
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const warehouses = alchemy.useListWarehouses();
+  const carriers = alchemy.useListCarriers();
+  const incompleteRequirementsKeys = React.useMemo(() => {
+    var _a, _b;
+    const isMissingWarehouse = ((_a = warehouses.data) === null || _a === void 0 ? void 0 : _a.length) === 0;
+    const isMissingCarrier = ((_b = carriers.data) === null || _b === void 0 ? void 0 : _b.length) === 0;
+    return isMissingWarehouse && isMissingCarrier ? ["noWarehouseOrCarrier"] : [isMissingWarehouse && "noWarehouse", isMissingCarrier && "noCarrier"].filter(Boolean);
+  }, [carriers, warehouses]);
+  const partnerMessages = (_b = features === null || features === void 0 ? void 0 : features.partnerMessages) === null || _b === void 0 ? void 0 : _b.incompleteLabelPurchaseRequirements;
+  const incompleteRequirementsError = partnerMessages ? partnerMessages : t("errorMessages.incompleteLabelPurchaseRequirements", {
+    requirements: incompleteRequirementsKeys.map(key => t(`purchase-label:requirements.${key}`))
+  });
+  if (incompleteRequirementsKeys.length > 0) throw new Error(incompleteRequirementsError);
   if ("salesOrderId" in props || "orderSourceCode" in props) {
     return jsxRuntime.jsx(PurchaseLabelBySalesOrder, Object.assign({}, props));
   } else {

package/index.js

@@ -2616,6 +2616,14 @@ const featureFlags = {
      * Elements.
      */
     compatibleCountryCodes: ["AU", "CA", "FR", "DE", "GB", "IL", "IT", "NO", "ES", "SE", "US"],
+    /**
+     * @internal
+     *
+     * `partnerMessages` enables the partner consuming elements to specify override messages in specific cases.
+     */
+    partnerMessages: {
+      incompleteLabelPurchaseRequirements: undefined
+    },
     /**
      *  `rateForm` all scoped feature flags for the `rate form` section of the `<PurchaseLabel />`
      *  element.
@@ -2669,14 +2677,6 @@ const featureFlags = {
        * to opt for third party insurance when insuring their shipment.
        */
       includeThirdPartyInsurance: true,
-      /**
-       * @internal
-       *
-       * `partnerMessages` enables the partner consuming elements to specify override messages in specific cases.
-       */
-      partnerMessages: {
-        incompleteLabelPurchaseRequirements: undefined
-      },
       /**
        * `selectService` enables the `select service` feature, allowing users to select a service
        * when rate shopping across multiple carrier providers.
@@ -12800,7 +12800,7 @@ const CustomsItemForm = ({
   }));
   const formInterface = jsxs("section", Object.assign({
     css: theme => ({
-      backgroundColor: theme.palette.gray.megaLight,
+      backgroundColor: theme.palette.gray.ultraLight,
       padding: theme.spacing(2)
     })
   }, {
@@ -14603,22 +14603,21 @@ const rateSchema = z.object({
 const RateForm = ({
   carriers,
   disabled,
-  errors,
   displayableRateErrors,
-  displayableLabelErrors,
+  errors,
   features,
+  isLoading,
   labelErrors,
   labels,
   labelsLoading,
-  isLoading,
   onSave,
   onSelectRate,
   onSubmit,
-  rates,
-  preferredRates,
-  shipment,
   outOfBandDisplayableErrors,
-  preferredServiceCodes
+  preferredRates,
+  preferredServiceCodes,
+  rates,
+  shipment
 }) => {
   var _a, _b, _c, _d, _e, _f;
   features = Object.assign({
@@ -14632,7 +14631,6 @@ const RateForm = ({
       saveRate: true
     }
   }, features !== null && features !== void 0 ? features : {});
-  const allDisplayableErrors = [...(displayableRateErrors !== null && displayableRateErrors !== void 0 ? displayableRateErrors : []), ...(outOfBandDisplayableErrors !== null && outOfBandDisplayableErrors !== void 0 ? outOfBandDisplayableErrors : [])];
   const {
     t
   } = useTranslation();
@@ -14730,6 +14728,22 @@ const RateForm = ({
     const preferredRate = preferredRates === null || preferredRates === void 0 ? void 0 : preferredRates.find(r => r.rate.rateId === (selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.rateId));
     return !!preferredRate;
   }, [preferredRates, selectedRate]);
+  const displayableErrors = useMemo(() => {
+    const rateAndShipmentErrors = [...(displayableRateErrors !== null && displayableRateErrors !== void 0 ? displayableRateErrors : []), ...(outOfBandDisplayableErrors !== null && outOfBandDisplayableErrors !== void 0 ? outOfBandDisplayableErrors : [])];
+    if (rateAndShipmentErrors.length && rateOptions.length === 0) {
+      return {
+        messages: rateAndShipmentErrors,
+        title: "errorTypes.rateInvalid"
+      };
+    }
+    if (labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length) {
+      return {
+        messages: labelErrors,
+        title: "errorTypes.purchase"
+      };
+    }
+    return undefined;
+  }, [rateOptions, labelErrors, displayableRateErrors, outOfBandDisplayableErrors]);
   return jsxs("form", Object.assign({
     id: "rate-form",
     onSubmit: handleSubmit,
@@ -14774,7 +14788,7 @@ const RateForm = ({
             children: showHiddenRates ? t("purchase-label:actions.showFewerRates") : t("purchase-label:actions.showMoreRates")
           }))
         }))]
-      }) : !isLoading && !!allDisplayableErrors.length ? null : jsxs("article", Object.assign({
+      }) : !isLoading && !!displayableErrors ? null : jsxs("article", Object.assign({
         css: styles$3.ratesInterstitial,
         role: "presentation"
       }, {
@@ -14783,13 +14797,11 @@ const RateForm = ({
         }), jsx(Spacer, {}), isLoading ? t("purchase-label:loading.calculatingRates") : t("purchase-label:cta.addPackageDetails")]
       })), jsx(Spacer, {
         multiplier: 2
-      }), !isLoading && (!!allDisplayableErrors.length && rateOptions.length === 0 || !!(labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length)) && jsx(InlineNotification, Object.assign({
-        title: t("errorTypes.rateInvalid"),
+      }), !isLoading && !!displayableErrors && jsx(InlineNotification, Object.assign({
+        title: t(displayableErrors.title),
         type: NotificationType.ERROR
       }, {
-        children: jsxs(Fragment, {
-          children: [displayableRateErrors, outOfBandDisplayableErrors, displayableLabelErrors]
-        })
+        children: displayableErrors.messages
       }))]
     })), ((_d = features === null || features === void 0 ? void 0 : features.rateForm) === null || _d === void 0 ? void 0 : _d.labelLayout) && !labelsLoading && !(labels === null || labels === void 0 ? void 0 : labels.length) && jsx(Section, Object.assign({
       title: t("manage-defaults:label.title")
@@ -14958,21 +14970,37 @@ const styles$1 = createStyles({
     padding: `${theme.spacing(1)}px ${theme.spacing(2)}px 0 ${theme.spacing(1)}px`,
     width: theme.spacing(5)
   }),
+  header: theme => ({
+    "& > tr > th": {
+      "&:after": {
+        borderBottom: "none"
+      }
+    }
+  }),
+  headerActions: theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
+    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px 0 ${theme.spacing(1)}px`,
+    width: theme.spacing(5)
+  }),
   headerDescription: theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
     overflow: "visible",
     padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`
   }),
   headerEach: theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
     padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px 0`,
     textAlign: "right",
     width: theme.spacing(10)
   }),
   headerQty: theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
     padding: theme.spacing(1),
     textAlign: "right",
     width: theme.spacing(5)
   }),
   headerTotal: theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
     padding: `${theme.spacing(1)}px 0 ${theme.spacing(1)}px ${theme.spacing(1)}px`,
     textAlign: "right",
     width: theme.spacing(10)
@@ -14994,7 +15022,7 @@ const styles$1 = createStyles({
   itemQty: theme => ({
     overflow: "visible",
     padding: `${theme.spacing(1)}px ${theme.spacing(1)}px 0`,
-    textAlign: "center",
+    textAlign: "right",
     width: theme.spacing(5)
   }),
   itemTotal: theme => ({
@@ -15002,6 +15030,14 @@ const styles$1 = createStyles({
     padding: `${theme.spacing(1)}px 0 0 ${theme.spacing(1)}px`,
     textAlign: "right",
     width: theme.spacing(10)
+  }),
+  subtitle: () => ({
+    letterSpacing: "0.01em"
+  }),
+  table: () => ({
+    border: "1px solid #d4e4e8",
+    borderRadius: "0",
+    boxShadow: "none"
   })
 });
 
@@ -15112,12 +15148,15 @@ const CustomsItemsDisplay = ({
       }))]
     })), customsItems.length > 0 && jsxs(Fragment, {
       children: [jsx(Spacer, {}), jsx(Table, Object.assign({
-        header: jsx(TableHeader, {
+        header: jsx(TableHeader, Object.assign({
+          css: styles$1.header
+        }, {
           children: jsxs(TableBaseRow, {
             children: [jsx(TableHeaderCell, Object.assign({
               css: styles$1.headerDescription
             }, {
               children: jsx(Typography, Object.assign({
+                css: styles$1.subtitle,
                 variant: "subtitle2"
               }, {
                 children: t("customs.fields.description")
@@ -15126,6 +15165,7 @@ const CustomsItemsDisplay = ({
               css: styles$1.headerEach
             }, {
               children: jsx(Typography, Object.assign({
+                css: styles$1.subtitle,
                 variant: "subtitle2"
               }, {
                 children: t("customs.each", {
@@ -15136,6 +15176,7 @@ const CustomsItemsDisplay = ({
               css: styles$1.headerQty
             }, {
               children: jsx(Typography, Object.assign({
+                css: styles$1.subtitle,
                 variant: "subtitle2"
               }, {
                 children: t("customs.fields.quantity")
@@ -15144,6 +15185,7 @@ const CustomsItemsDisplay = ({
               css: styles$1.headerTotal
             }, {
               children: jsx(Typography, Object.assign({
+                css: styles$1.subtitle,
                 variant: "subtitle2"
               }, {
                 children: t("customs.total", {
@@ -15151,10 +15193,11 @@ const CustomsItemsDisplay = ({
                 })
               }))
             })), jsx(TableHeaderCell, {
-              css: styles$1.actionsColumn
+              css: styles$1.headerActions
             })]
           })
-        })
+        })),
+        outerWrapperStyles: styles$1.table
       }, {
         children: jsx(TableBody, {
           children: customsItems.map(item => jsxs(Fragment$1, {
@@ -15379,7 +15422,7 @@ const ShipmentForm = ({
   warehouseId,
   warehouses
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   features = Object.assign({
     browseRates: true,
     includeShipsuranceInsurance: true,
@@ -15565,16 +15608,16 @@ const ShipmentForm = ({
   }, [form]);
   const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
     try {
-      const _o = values,
+      const _l = values,
         {
           __mode: discard
-        } = _o,
-        payload = __rest(_o, ["__mode"]);
+        } = _l,
+        payload = __rest(_l, ["__mode"]);
       const updatedShipment = yield onSubmit(Object.assign(Object.assign({}, shipment || {}), payload));
       // Defer shipment hydration to the task queue so that the submission promise resolves first, otherwise the
       // submission count will increment after hydration resets the form, keeping it in revalidate mode
       if (updatedShipment) setTimeout(() => hydrateShipment(updatedShipment), 0);
-    } catch (_p) {
+    } catch (_m) {
       // Reset the form to its current state, but as a side effect this sets isDirty to false
       // That way, form lifecycle contract is upheld
       form.reset(form.getValues());
@@ -15707,19 +15750,6 @@ const ShipmentForm = ({
   const hasUpsOptions = useMemo(() => {
     return (packageOptions === null || packageOptions === void 0 ? void 0 : packageOptions.some(option => option.label === "UPS")) && ((selectedPackage === null || selectedPackage === void 0 ? void 0 : selectedPackage.code) === "package" || selectedCarrierId === upsCarrierId);
   }, [packageOptions, selectedPackage, selectedCarrierId, upsCarrierId]);
-  const incompleteRequirementsKeys = useMemo(() => {
-    if ((warehouses === null || warehouses === void 0 ? void 0 : warehouses.length) === 0 && (carriers === null || carriers === void 0 ? void 0 : carriers.length) === 0) {
-      return ["noWarehouseOrCarrier"];
-    } else {
-      const keys = [(warehouses === null || warehouses === void 0 ? void 0 : warehouses.length) === 0 && "noWarehouse", (carriers === null || carriers === void 0 ? void 0 : carriers.length) === 0 && "noCarrier"].filter(Boolean);
-      return keys;
-    }
-  }, [carriers, warehouses]);
-  const isPartnerMessagingEnabled = !!((_d = features.partnerMessages) === null || _d === void 0 ? void 0 : _d.incompleteLabelPurchaseRequirements);
-  const incompleteRequirementsError = isPartnerMessagingEnabled ? (_e = features.partnerMessages) === null || _e === void 0 ? void 0 : _e.incompleteLabelPurchaseRequirements : t("errorMessages.incompleteLabelPurchaseRequirements", {
-    requirements: incompleteRequirementsKeys.map(key => t(`purchase-label:requirements.${key}`))
-  });
-  if (incompleteRequirementsKeys.length > 0) throw new Error(incompleteRequirementsError);
   if (isLoading) return jsx(Loader, {
     message: t("loading.shipment")
   });
@@ -15793,7 +15823,7 @@ const ShipmentForm = ({
         }, {
           children: formatDate(salesOrder.orderDate)
         })), jsx(Spacer, {})]
-      })), ((_f = salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.paymentDetails) === null || _f === void 0 ? void 0 : _f.grandTotal) && jsxs(FieldLabel, Object.assign({
+      })), ((_d = salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.paymentDetails) === null || _d === void 0 ? void 0 : _d.grandTotal) && jsxs(FieldLabel, Object.assign({
         label: t("purchase-label:fields.orderValue")
       }, {
         children: [jsx(Typography, Object.assign({
@@ -15871,7 +15901,7 @@ const ShipmentForm = ({
       }), jsx(CustomsItemsDisplay, {
         onUpdate: handleUpdateCustomsItems,
         shipment: shipment
-      }), ((_g = customsErrors === null || customsErrors === void 0 ? void 0 : customsErrors.customsItems) === null || _g === void 0 ? void 0 : _g.type) === "too_small" && jsxs(Fragment, {
+      }), ((_e = customsErrors === null || customsErrors === void 0 ? void 0 : customsErrors.customsItems) === null || _e === void 0 ? void 0 : _e.type) === "too_small" && jsxs(Fragment, {
         children: [jsx(Spacer, {}), jsx(InlineNotification, {
           title: t("purchase-label:errorMessages.customsItemsRequired"),
           type: NotificationType.ERROR
@@ -16062,14 +16092,14 @@ const ShipmentForm = ({
         label: "purchase-label:fields.addOns"
       }, {
         children: [jsx(Switch, Object.assign({
-          defaultChecked: ((_h = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _h !== void 0 ? _h : "none") !== "none",
+          defaultChecked: ((_f = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _f !== void 0 ? _f : "none") !== "none",
           label: t("purchase-label:fields.confirmation"),
           name: "confirmationEnabled",
           onChange: e => form.setValue("confirmation", e.target.checked ? SE.ConfirmationType.DELIVERY : undefined, {
             shouldDirty: true
           }),
           shouldUnmount: true,
-          value: ((_j = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _j !== void 0 ? _j : "none") !== "none"
+          value: ((_g = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _g !== void 0 ? _g : "none") !== "none"
         }, {
           children: jsx(Select, {
             control: form.control,
@@ -16081,7 +16111,7 @@ const ShipmentForm = ({
             shouldUnregister: true
           })
         })), jsxs(Switch, Object.assign({
-          defaultChecked: ((_k = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _k !== void 0 ? _k : "none") !== "none",
+          defaultChecked: ((_h = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _h !== void 0 ? _h : "none") !== "none",
           label: t("purchase-label:fields.insurance"),
           name: "insuranceEnabled",
           onChange: e => {
@@ -16091,7 +16121,7 @@ const ShipmentForm = ({
             });
           },
           shouldUnmount: true,
-          value: ((_l = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _l !== void 0 ? _l : "none") !== "none"
+          value: ((_j = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _j !== void 0 ? _j : "none") !== "none"
         }, {
           children: [insuranceProviderOptions.length === 1 && insuranceProviderOptions[0].value === "carrier" ? null : jsx(Select, {
             control: form.control,
@@ -16115,7 +16145,7 @@ const ShipmentForm = ({
             showCurrencySymbol: true
           })]
         })), hasUpsOptions && jsx(Switch, {
-          defaultChecked: ((_m = shipment === null || shipment === void 0 ? void 0 : shipment.advancedOptions) === null || _m === void 0 ? void 0 : _m.additionalHandling) || false,
+          defaultChecked: ((_k = shipment === null || shipment === void 0 ? void 0 : shipment.advancedOptions) === null || _k === void 0 ? void 0 : _k.additionalHandling) || false,
           label: jsx(Trans, {
             components: {
               Link: jsx(Link, {
@@ -16878,7 +16908,7 @@ var common = {
 		invalidAddressNameStrict: "Recipient Name must have two characters in First and Last Name.",
 		invalidAddressPoBox: "A physical address is required for wallet registration. You can add a PO Box as a Ship From address.",
 		invalidCreditCardType: "Card type must be Visa, Mastercard, American Express, or Discover",
-		invalidExpiration: "Invalid Expiration Date",
+		invalidExpirationDate: "Invalid Expiration Date",
 		invalidPostalCode: "Invalid Postal Code",
 		invalidStateProvince: "Invalid State",
 		invalidString: "{{fieldLabel}} is invalid",
@@ -17914,12 +17944,12 @@ const useRequestRates = ({
     getPreferredRates
   });
   const requestRates = useCallback((shipment, isInternational) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b;
-    const internationalCarrierIds = (_a = carriers === null || carriers === void 0 ? void 0 : carriers.map(c => c.carrierId)) !== null && _a !== void 0 ? _a : [];
-    const domesticCarrierIds = (_b = carriers === null || carriers === void 0 ? void 0 : carriers.filter(c => !["dhl"].includes(c.carrierCode)).map(c => c.carrierId)) !== null && _b !== void 0 ? _b : [];
+    var _a;
+    // filter out DHL for domestic shipments
+    const carrierIds = (_a = carriers === null || carriers === void 0 ? void 0 : carriers.filter(c => isInternational || !c.carrierCode.includes("dhl")).map(c => c.carrierId)) !== null && _a !== void 0 ? _a : [];
     const standardRatesResponse = yield calculateRates({
       rateOptions: {
-        carrierIds: shipment.carrierId ? [shipment.carrierId] : isInternational ? internationalCarrierIds : domesticCarrierIds,
+        carrierIds: shipment.carrierId ? [shipment.carrierId] : carrierIds,
         packageTypes: (customPackageTypes === null || customPackageTypes === void 0 ? void 0 : customPackageTypes.find(p => p.packageId === shipment.packages[0].packageId)) ? ["package"] // Only specify package types for non-custom packages
         : shipment.packages.map(pkg => pkg.packageCode),
         serviceCodes: shipment.serviceCode ? [shipment.serviceCode] : undefined
@@ -18217,11 +18247,10 @@ const useRatesForm = ({
   });
   return {
     carriers,
-    displayableLabelErrors,
     displayableRateErrors,
     errors: errors.length > 0 ? errors : undefined,
     isLoading: ratesCalculating,
-    labelErrors: (labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length) ? labelErrors : undefined,
+    labelErrors: displayableLabelErrors,
     labels,
     labelsLoading,
     onSave: handleSave,
@@ -18742,7 +18771,27 @@ const PurchaseLabelByShipment = _a => {
  * @see {@link PurchaseLabel.Element | The **Element** created to render `<PurchaseLabel />`}
  */
 const Component$2 = _a => {
-  var props = __rest(_a, []);
+  var _b;
+  var {
+      features
+    } = _a,
+    props = __rest(_a, ["features"]);
+  const {
+    t
+  } = useTranslation();
+  const warehouses = useListWarehouses();
+  const carriers = useListCarriers();
+  const incompleteRequirementsKeys = useMemo(() => {
+    var _a, _b;
+    const isMissingWarehouse = ((_a = warehouses.data) === null || _a === void 0 ? void 0 : _a.length) === 0;
+    const isMissingCarrier = ((_b = carriers.data) === null || _b === void 0 ? void 0 : _b.length) === 0;
+    return isMissingWarehouse && isMissingCarrier ? ["noWarehouseOrCarrier"] : [isMissingWarehouse && "noWarehouse", isMissingCarrier && "noCarrier"].filter(Boolean);
+  }, [carriers, warehouses]);
+  const partnerMessages = (_b = features === null || features === void 0 ? void 0 : features.partnerMessages) === null || _b === void 0 ? void 0 : _b.incompleteLabelPurchaseRequirements;
+  const incompleteRequirementsError = partnerMessages ? partnerMessages : t("errorMessages.incompleteLabelPurchaseRequirements", {
+    requirements: incompleteRequirementsKeys.map(key => t(`purchase-label:requirements.${key}`))
+  });
+  if (incompleteRequirementsKeys.length > 0) throw new Error(incompleteRequirementsError);
   if ("salesOrderId" in props || "orderSourceCode" in props) {
     return jsx(PurchaseLabelBySalesOrder, Object.assign({}, props));
   } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipengine/elements",
-  "version": "0.37.0",
+  "version": "0.37.2",
   "peerDependencies": {
     "@packlink/giger": "*",
     "react-i18next": "*",

package/src/components/templates/customs-items-display/customs-items-display.styles.d.ts

@@ -12,21 +12,37 @@ export declare const styles: {
         padding: string;
         width: number;
     };
+    header: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
+        "& > tr > th": {
+            "&:after": {
+                borderBottom: string;
+            };
+        };
+    };
+    headerActions: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
+        backgroundColor: string;
+        padding: string;
+        width: number;
+    };
     headerDescription: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
+        backgroundColor: string;
         overflow: "visible";
         padding: string;
     };
     headerEach: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
+        backgroundColor: string;
         padding: string;
         textAlign: "right";
         width: number;
     };
     headerQty: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
+        backgroundColor: string;
         padding: number;
         textAlign: "right";
         width: number;
     };
     headerTotal: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
+        backgroundColor: string;
         padding: string;
         textAlign: "right";
         width: number;
@@ -48,7 +64,7 @@ export declare const styles: {
     itemQty: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
         overflow: "visible";
         padding: string;
-        textAlign: "center";
+        textAlign: "right";
         width: number;
     };
     itemTotal: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
@@ -57,4 +73,12 @@ export declare const styles: {
         textAlign: "right";
         width: number;
     };
+    subtitle: () => {
+        letterSpacing: string;
+    };
+    table: () => {
+        border: string;
+        borderRadius: string;
+        boxShadow: "none";
+    };
 };

package/src/components/templates/rate-form/rate-form.d.ts

@@ -3,12 +3,11 @@ import { ConfigureShipmentFeatures, PreferredRatesResponse } from "../../../elem
 export type RateFormProps = {
     carriers?: SE.Carrier[];
     disabled?: boolean;
-    displayableLabelErrors?: string[];
     displayableRateErrors?: string[];
     errors?: SE.CodedError[];
     features?: ConfigureShipmentFeatures;
     isLoading?: boolean;
-    labelErrors?: SE.CodedError[];
+    labelErrors?: string[];
     labels?: SE.Label[];
     labelsLoading?: boolean;
     onSave?: (rate: Pick<SE.Rate, "carrierId" | "serviceCode">) => Promise<void> | void;
@@ -20,4 +19,4 @@ export type RateFormProps = {
     rates?: SE.Rate[];
     shipment?: SE.SalesOrderShipment;
 };
-export declare const RateForm: ({ carriers, disabled, errors, displayableRateErrors, displayableLabelErrors, features, labelErrors, labels, labelsLoading, isLoading, onSave, onSelectRate, onSubmit, rates, preferredRates, shipment, outOfBandDisplayableErrors, preferredServiceCodes, }: RateFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const RateForm: ({ carriers, disabled, displayableRateErrors, errors, features, isLoading, labelErrors, labels, labelsLoading, onSave, onSelectRate, onSubmit, outOfBandDisplayableErrors, preferredRates, preferredServiceCodes, rates, shipment, }: RateFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/components/templates/shipment-form/shipment-form.d.ts

@@ -12,9 +12,6 @@ export type ShipmentFormFeatures = {
     browseRates?: boolean;
     includeShipsuranceInsurance?: boolean;
     includeThirdPartyInsurance?: boolean;
-    partnerMessages?: {
-        incompleteLabelPurchaseRequirements?: string;
-    };
     selectService?: boolean;
     shippingPresets?: boolean;
 };

package/src/elements/account-settings/account-settings.d.ts

@@ -702,7 +702,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     invalidAddressNameStrict: string;
                     invalidAddressPoBox: string;
                     invalidCreditCardType: string;
-                    invalidExpiration: string;
+                    invalidExpirationDate: string;
                     invalidPostalCode: string;
                     invalidStateProvince: string;
                     invalidString: string;

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

@@ -25,6 +25,9 @@ export type RateFormFeatures = {
 };
 export type ConfigureShipmentFeatures = {
     compatibleCountryCodes?: UseShipmentFormProps["compatibleCountryCodes"];
+    partnerMessages?: {
+        incompleteLabelPurchaseRequirements?: string;
+    };
     presentation?: {
         poweredByShipEngine?: boolean;
     };

package/src/elements/configure-shipment/hooks/use-rates-form.d.ts

@@ -5,7 +5,7 @@ export type UseRatesFormProps = {
     onBeforeLabelCreate?: (rate: SE.Rate, shipment: SE.SalesOrderShipment) => Promise<void> | Promise<{
         error?: SE.CodedError;
         rate?: SE.Rate;
-    }> | void;
+    } | undefined> | void;
     onBeforeRateSaved?: (carrierId: string, serviceCode: string) => Promise<void> | Promise<{
         data?: {
             carrierId: string;
@@ -23,11 +23,10 @@ export type UseRatesFormProps = {
 };
 export declare const useRatesForm: ({ getPreferredRates, onBeforeRateSaved, onBeforeLabelCreate, onLabelCreateFailure, onLabelCreateSuccess, onRateSaved, onRatesCalculated, onShipmentUpdated, printLabelLayout, shipment, }: UseRatesFormProps) => {
     carriers: SE.Carrier[] | undefined;
-    displayableLabelErrors: string[] | undefined;
     displayableRateErrors: string[] | undefined;
     errors: SE.CodedError[] | undefined;
     isLoading: boolean;
-    labelErrors: SE.CodedError[] | undefined;
+    labelErrors: string[] | undefined;
     labels: SE.Label[] | undefined;
     labelsLoading: boolean;
     onSave: ({ carrierId, serviceCode }: Pick<SE.Rate, "carrierId" | "serviceCode">) => Promise<void>;

package/src/elements/onboarding/onboarding.d.ts

@@ -664,7 +664,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     invalidAddressNameStrict: string;
                     invalidAddressPoBox: string;
                     invalidCreditCardType: string;
-                    invalidExpiration: string;
+                    invalidExpirationDate: string;
                     invalidPostalCode: string;
                     invalidStateProvince: string;
                     invalidString: string;

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

@@ -149,7 +149,7 @@ export type ElementProps = PurchaseLabelByShipmentProps | PurchaseLabelSalesOrde
  *
  * @see {@link PurchaseLabel.Element | The **Element** created to render `<PurchaseLabel />`}
  */
-export declare const Component: ({ ...props }: ElementProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Component: ({ features, ...props }: ElementProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * # Registered Purchase Label Element
  *
@@ -254,7 +254,14 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                 highVolumeForms: string;
                 multipleShippingServices: string;
                 sections: {
-                    labels: string;
+                    labels: string; /**
+                     *`getPreferredRates is an async/sync optional callback function that will be invoked each time rates are caculated.
+                     * This is an optional callback function that returns an array of ShipEngine rates. The rates from this response will
+                     * be spliced into the normal get rates response the Elements makes internally. If a service code matches a service
+                     * code on a rate returned from getPreferredRates, the rate returned from getPreferredRates will not be shown in the
+                     * rate form. These preferred rates will be displayed with a set of UI enhancements that incude a dynamic cost savings
+                     * flag and green checkmark when the rate is selected.
+                     */
                 };
                 noLabels: string;
             };
@@ -328,22 +335,12 @@ 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; /**
-                     * `features` is a set of feature flags you would like to enable or disable in this component.
-                     */
+                    invalidAddress: string;
                     noRates: string;
                     salesOrderNotLoaded: string;
                     unsupportedAddress: string;
@@ -367,19 +364,13 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                     estimatedShipping: string;
                     insurance: string;
                     insuranceProvider: string;
-                    insuredValue: string; /**
-                     *  `onApplyPreset` is an async/sync callback function that will be invoked each time a `Preset`
-                     *  has been applied to a shipment.
-                     */
+                    insuredValue: string;
                     items: string;
                     orderDate: string;
                     orderValue: string;
                     packageCode: string;
                     requestedShipping: string;
-                    shipDate: string; /**
-                     * `onBeforeLabelCreate` is an async/sync callback function that will be invoked before every
-                     * label purchase.
-                     */
+                    shipDate: string;
                     service: string;
                     shipTo: string;
                     addShipToAddress: string;
@@ -392,6 +383,10 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                     today: string;
                 };
                 hints: {
+                    /**
+                     * `onBeforeRateSave` is an async/sync callback function that will be invoked before each time a user
+                     * saves a rate.
+                     */
                     contentDescription: string;
                 };
                 loading: {
@@ -410,15 +405,15 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                 rates: {
                     uspsMediaMailAcknowledgement: string;
                     uspsFirstClassMailAcknowledgement_leof: string;
-                    rateSavings: string;
+                    rateSavings: string; /**
+                     * `onLabelCreateSuccess` is an async/sync callback provided by the client that is invoked if the
+                     * label is successfully created/purchased.
+                     */
                     upsGroundSaverTermsAcknowledgement: string;
                     dhlExpressTermsAcknowledgement: string;
                 };
                 requirements: {
-                    noWarehouse: string; /**
-                     * `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.
-                     */
+                    noWarehouse: string;
                     noCarrier: string;
                     noWarehouseOrCarrier: string;
                 };
@@ -458,6 +453,9 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                     inlineMessage: string;
                 };
                 success: {
+                    /**
+                     * `features` is a set of feature flags you would like to enable or disable in this component.
+                     */
                     title: string;
                     subtitle: string;
                     action: string;
@@ -482,14 +480,6 @@ 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: {
@@ -503,9 +493,7 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                         title: string;
                         standard: string;
                         g: string;
-                        kg: string; /**
-                         * `features` is a set of feature flags you would like to enable or disable in this component.
-                         */
+                        kg: string;
                     };
                 };
             };
@@ -683,10 +671,7 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                     none: string;
                     signature: string;
                     verbalConfirmation: string;
-                }; /**
-                 * `onLabelCreateFailure` is an async/sync callback function that will be invoked each time a
-                 * label purchase fails.
-                 */
+                };
                 customs: {
                     addDeclaration: string;
                     contents: {
@@ -725,6 +710,12 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                         autoFundingSettings: string;
                         carrier: string;
                         carriers: 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.
+                         */
                         label: string;
                         salesOrder: string;
                         shipment: string;
@@ -757,7 +748,10 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                     connectingCarriers: string;
                     data: string;
                     importingSalesOrder: string;
-                    label: string;
+                    label: string; /**
+                     * `warehouseId` is a string that represents a previously configured warehouse you would
+                     * like to use as the `Ship From Address` when purchasing a label.
+                     */
                     onboarding: string;
                     salesOrder: string;
                     shipment: string;
@@ -798,7 +792,7 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                     invalidAddressNameStrict: string;
                     invalidAddressPoBox: string;
                     invalidCreditCardType: string;
-                    invalidExpiration: string;
+                    invalidExpirationDate: string;
                     invalidPostalCode: string;
                     invalidStateProvince: string;
                     invalidString: string;

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

@@ -699,7 +699,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     invalidAddressNameStrict: string;
                     invalidAddressPoBox: string;
                     invalidCreditCardType: string;
-                    invalidExpiration: string;
+                    invalidExpirationDate: string;
                     invalidPostalCode: string;
                     invalidStateProvince: string;
                     invalidString: string;

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

@@ -702,7 +702,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     invalidAddressNameStrict: string;
                     invalidAddressPoBox: string;
                     invalidCreditCardType: string;
-                    invalidExpiration: string;
+                    invalidExpirationDate: string;
                     invalidPostalCode: string;
                     invalidStateProvince: string;
                     invalidString: string;

package/src/locales/en/index.d.ts

@@ -574,7 +574,7 @@ declare const _default: {
             invalidAddressNameStrict: string;
             invalidAddressPoBox: string;
             invalidCreditCardType: string;
-            invalidExpiration: string;
+            invalidExpirationDate: string;
             invalidPostalCode: string;
             invalidStateProvince: string;
             invalidString: string;

package/src/utilities/feature-flags.d.ts

@@ -51,6 +51,14 @@ export declare const featureFlags: {
          * Elements.
          */
         readonly compatibleCountryCodes: readonly ["AU", "CA", "FR", "DE", "GB", "IL", "IT", "NO", "ES", "SE", "US"];
+        /**
+         * @internal
+         *
+         * `partnerMessages` enables the partner consuming elements to specify override messages in specific cases.
+         */
+        readonly partnerMessages: {
+            readonly incompleteLabelPurchaseRequirements: undefined;
+        };
         /**
          *  `rateForm` all scoped feature flags for the `rate form` section of the `<PurchaseLabel />`
          *  element.
@@ -104,14 +112,6 @@ export declare const featureFlags: {
              * to opt for third party insurance when insuring their shipment.
              */
             readonly includeThirdPartyInsurance: true;
-            /**
-             * @internal
-             *
-             * `partnerMessages` enables the partner consuming elements to specify override messages in specific cases.
-             */
-            readonly partnerMessages: {
-                readonly incompleteLabelPurchaseRequirements: undefined;
-            };
             /**
              * `selectService` enables the `select service` feature, allowing users to select a service
              * when rate shopping across multiple carrier providers.