@shipengine/elements 0.16.0 → 0.17.2

package/index.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { useController, get as get$1, set as set$2, useWatch, useFormState, useForm } from 'react-hook-form';
 import { useTranslation, Trans, initReactI18next, I18nextProvider } from 'react-i18next';
-import { Typography, FormField, FieldMessageType, Input, Checkbox, Icon, Divider, Link, Select as Select$1, Next, Option, Button, Switch as Switch$1, Textarea, ButtonVariant, InlineNotification, NotificationType, ButtonColor, Grid, GridChild, Tag, TagColor, Spinner, SpinnerSize, ChipList, Chip, ButtonSize, IconSize, Skeleton, SkeletonAnimation, SkeletonVariant, SkeletonBackgroundColor, Stepper, Step, BottomSheet, Table, TableBody, TableBaseRow, TableBodyCell, TableHeader, TableHeaderCell, useToggle as useToggle$1, Popover, DropdownOptionList, GigerConfigProvider, EmotionReset, FontsLoader } from '@packlink/giger';
+import { Typography, FormField, FieldMessageType, Input, Checkbox, Icon, Divider, Link, Select as Select$1, Next, Option, Button, Switch as Switch$1, Textarea, ButtonVariant, InlineNotification, NotificationType, ButtonColor, Grid, GridChild, Tag, TagColor, Skeleton, SkeletonAnimation, SkeletonVariant, SkeletonBackgroundColor, IconSize, Stepper, Step, Spinner, SpinnerSize, ChipList, Chip, ButtonSize, Table, TableBody, TableBaseRow, TableBodyCell, TableHeader, TableHeaderCell, useToggle as useToggle$1, Popover, DropdownOptionList, BottomSheet, GigerConfigProvider, EmotionReset, FontsLoader } from '@packlink/giger';
 import axios from 'axios';
-import { logger, ShipEngineProvider, useListCarriers, useConnectCarrier, useValidateAddresses, useUpdateSalesOrderShipment, useParseAddress, useListCustomPackageTypes, useCalculateRates, useCreateLabel, useListWarehouses, useAddFunds, useGetAutoFundingConfiguration, useUpdateAutoFunding, useUpdateWarehouse, useCreateWarehouse, useDeleteWarehouse, useListSalesOrderShipments, useCreateSalesOrderShipment, useGetAccountSettings, useListSalesOrders, useGetSalesOrder, useListOrderSources, useRefreshOrderSource, useGetSalesOrderShipment, useListLabels, useGetLabel, useVoidLabel } from '@shipengine/react';
+import { logger, ShipEngineProvider, useAddFunds, useGetCarrierById, useUpdateAutoFunding, useGetAutoFundingConfiguration, useListCarriers, useConnectCarrier, useListWarehouses, useUpdateWarehouse, useCreateWarehouse, useDeleteWarehouse, useValidateAddresses, useUpdateSalesOrderShipment, useParseAddress, useListCustomPackageTypes, useCalculateRates, useCreateLabel, useListSalesOrderShipments, useCreateSalesOrderShipment, useGetAccountSettings, useListSalesOrders, useGetSalesOrder, useListOrderSources, useRefreshOrderSource, useGetShipment, useGetSalesOrderShipment, useListLabels, useGetLabel, useVoidLabel } from '@shipengine/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import * as React from 'react';
@@ -18,6 +18,7 @@ import { createPortal } from 'react-dom';
 import { isValidPhoneNumber } from 'libphonenumber-js/min';
 import cardValidator from 'card-validator';
 import { encode } from 'js-base64';
+import { useIsMutating } from 'react-query';
 import { stringify, COMMENT, rulesheet, middleware, RULESET, combine, match as match$1, serialize, copy, replace as replace$4, WEBKIT as WEBKIT$1, MOZ, MS, KEYFRAMES, DECLARATION, compile, dealloc, alloc, hash, charat, strlen, indexof, next, token, from, peek, delimit, slice, position, prefixer as prefixer$1 } from 'stylis';
 import i18n from 'i18next';
 import languageDetector from 'i18next-browser-languagedetector';
@@ -2009,7 +2010,7 @@ const getRateRequiresAcknowledgement = serviceCode => {
       return false;
   }
 };
-const getTotalRateAmount = rateCosts => calculateTotal(...Object.values(rateCosts));
+const getTotalRateAmount = (rateCosts = {}) => calculateTotal(...Object.values(rateCosts));
 
 var anObject$9 = anObject$f;
 
@@ -2501,6 +2502,25 @@ const getRequestedServices = salesOrder => {
   var _a;
   return Array.from(new Set((_a = salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.salesOrderItems) === null || _a === void 0 ? void 0 : _a.filter(item => !!item.requestedShippingOptions.shippingService).map(item => item.requestedShippingOptions.shippingService)));
 };
+const getSalesOrderItemsFromSalesOrderOrShipment = ({
+  salesOrder,
+  shipment
+}) => {
+  var _a, _b;
+  return (_b = (_a = salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.salesOrderItems.map(item => ({
+    detail: `SKU ${item.lineItemDetails.sku}`,
+    name: item.lineItemDetails.name,
+    quantity: item.quantity,
+    subDetail: item.requestedShippingOptions.shippingService,
+    subDetailValue: item.priceSummary.estimatedShipping,
+    totalValue: item.priceSummary.total,
+    value: item.priceSummary.unitPrice
+  }))) !== null && _a !== void 0 ? _a : shipment === null || shipment === void 0 ? void 0 : shipment.items.map((item, i) => ({
+    detail: `SKU ${item.sku}`,
+    name: (item === null || item === void 0 ? void 0 : item.name) || `ITEM ${i}`,
+    quantity: item.quantity
+  }))) !== null && _b !== void 0 ? _b : [];
+};
 
 var tryToString$3 = tryToString$5;
 
@@ -3297,8 +3317,8 @@ const FieldLabel = ({
   }, {
     children: [label && jsxs("div", Object.assign({
       css: theme => ({
-        minWidth: "100px",
-        paddingTop: _withInput ? theme.spacing(subLabel ? 1 : 2) : undefined
+        paddingTop: _withInput ? theme.spacing(subLabel ? 1 : 2) : undefined,
+        width: theme.spacing(12.5)
       })
     }, {
       children: [jsx(Typography, Object.assign({
@@ -3331,6 +3351,7 @@ const createFieldController = (options = {}) => function FieldController(_a) {
       displayErrors = true,
       displayLabel = true,
       errors: errorsProp,
+      hint,
       inputOnly,
       isOptional,
       label,
@@ -3341,7 +3362,7 @@ const createFieldController = (options = {}) => function FieldController(_a) {
       shouldUnregister,
       subLabel
     } = _a,
-    formInputProps = __rest(_a, ["children", "control", "defaultValue", "displayErrors", "displayLabel", "errors", "inputOnly", "isOptional", "label", "labelWeight", "name", "nativeLabel", "rules", "shouldUnregister", "subLabel"]);
+    formInputProps = __rest(_a, ["children", "control", "defaultValue", "displayErrors", "displayLabel", "errors", "hint", "inputOnly", "isOptional", "label", "labelWeight", "name", "nativeLabel", "rules", "shouldUnregister", "subLabel"]);
   const {
     field,
     fieldState
@@ -3417,6 +3438,9 @@ const createFieldController = (options = {}) => function FieldController(_a) {
       message: displayErrors && mergedErrorMessages.length > 0 ? {
         content: mergedErrorMessages.join(", "),
         type: FieldMessageType.ERROR
+      } : hint ? {
+        content: hint,
+        type: FieldMessageType.HINT
       } : undefined
     }, {
       children: input
@@ -21971,9 +21995,10 @@ const SubmitButton = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function SubmitB
       children,
       control,
       disabled,
+      isLoading,
       requireDirty
     } = _a,
-    props = __rest(_a, ["alwaysRequireValidity", "children", "control", "disabled", "requireDirty"]);
+    props = __rest(_a, ["alwaysRequireValidity", "children", "control", "disabled", "isLoading", "requireDirty"]);
   const {
     isDirty,
     isValid,
@@ -21987,7 +22012,7 @@ const SubmitButton = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function SubmitB
     disabled: disabled || !isDirty && requireDirty || !isValid && (alwaysRequireValidity || isSubmitted) || isSubmitting,
     formNoValidate // Bypass all browser validations on form inputs
     : true,
-    isLoading: isSubmitting,
+    isLoading: isLoading || isSubmitting,
     ref: forwardedRef,
     type: "submit"
   }, props, {
@@ -23118,7 +23143,7 @@ const AddressForm = ({
   }));
 };
 
-const styles$b = createStyles({
+const styles$a = createStyles({
   agreement: {
     alignItems: "center",
     display: "flex",
@@ -23188,10 +23213,10 @@ const DisplayCarrierTerms = c => {
   const listCarrierLinks = () => {
     return c.carrierTerms.links.map((term, index) => {
       return jsx("li", Object.assign({
-        css: styles$b.listItems
+        css: styles$a.listItems
       }, {
         children: jsx(Link, Object.assign({
-          css: styles$b.link,
+          css: styles$a.link,
           href: term.url,
           isExternal: true,
           target: "_blank"
@@ -23207,18 +23232,18 @@ const DisplayCarrierTerms = c => {
   };
   const listCarrierTerms = () => {
     return jsxs("div", Object.assign({
-      css: styles$b.terms
+      css: styles$a.terms
     }, {
       children: [jsx(Typography, Object.assign({
         variant: "subtitle1"
       }, {
         children: c.carrierTerms.title
       })), jsx("div", Object.assign({
-        css: styles$b.terms
+        css: styles$a.terms
       }, {
         children: listCarrierContent()
       })), jsx("ul", Object.assign({
-        css: styles$b.links
+        css: styles$a.links
       }, {
         children: listCarrierLinks()
       }))]
@@ -23448,7 +23473,7 @@ const AddressDisplay = ({
   }));
 };
 
-const styles$a = createStyles({
+const styles$9 = createStyles({
   container: theme => ({
     display: "flex",
     gap: theme.spacing()
@@ -23486,13 +23511,13 @@ const Disclosure = ({
   }, [open]);
   return jsxs(Fragment, {
     children: [jsxs("div", Object.assign({
-      css: styles$a.container
+      css: styles$9.container
     }, {
       children: [jsx("div", {
         children: label
       }), _showToggle && jsx("button", Object.assign({
         "aria-expanded": isOpen,
-        css: styles$a.toggle,
+        css: styles$9.toggle,
         onClick: () => {
           setIsOpen(!isOpen);
           onToggle(!isOpen);
@@ -23500,12 +23525,12 @@ const Disclosure = ({
         type: "button"
       }, {
         children: jsx(Icon, {
-          css: styles$a.icon,
+          css: styles$9.icon,
           name: isOpen ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM
         })
       }))]
     })), isOpen && jsx("div", Object.assign({
-      css: styles$a.content
+      css: styles$9.content
     }, {
       children: typeof children === "function" ? children(() => setIsOpen(!isOpen)) : children
     }))]
@@ -23645,7 +23670,7 @@ const getCarrierRecoverySchema = requiresAddress => z.object({
   address: requiresAddress ? baseSchema : baseSchema.optional()
 });
 
-const styles$9 = createStyles({
+const styles$8 = createStyles({
   grid: theme => ({
     margin: theme.spacing(4)
   }),
@@ -23688,7 +23713,7 @@ const CarrierRecoveryForm = ({
     onSubmit: formLogger.capture(handleSubmit)
   }, {
     children: jsxs(Grid, Object.assign({
-      css: styles$9.grid,
+      css: styles$8.grid,
       noPadding: true
     }, {
       children: [jsx(GridChild, Object.assign({
@@ -23709,14 +23734,14 @@ const CarrierRecoveryForm = ({
           colSpan: 12
         }, {
           children: jsx(Typography, Object.assign({
-            css: styles$9.heading,
+            css: styles$8.heading,
             variant: "heading4"
           }, {
             children: t("register-wallet:sections.carriers.title")
           }))
         })), jsx(GridChild, Object.assign({
           colSpan: 12,
-          css: styles$9.subtitle
+          css: styles$8.subtitle
         }, {
           children: jsx(Typography, Object.assign({
             variant: "subtitle1"
@@ -23796,7 +23821,7 @@ const CarrierTerms = ({
   switch (carrierCode) {
     case "ups":
       return jsxs("div", Object.assign({
-        css: styles$b.terms
+        css: styles$a.terms
       }, {
         children: [jsx(Typography, Object.assign({
           variant: "subtitle1"
@@ -23819,7 +23844,7 @@ const CarrierTerms = ({
             text,
             url
           }, idx) => jsx("li", Object.assign({
-            css: styles$b.listItems
+            css: styles$a.listItems
           }, {
             children: jsx(Link, Object.assign({
               href: url,
@@ -23867,7 +23892,7 @@ const CarrierTermsForm = ({
     onSubmit(payload.agreement);
   }));
   return jsxs("div", Object.assign({
-    css: styles$b.termsForm,
+    css: styles$a.termsForm,
     "data-testid": "carrier-terms-form"
   }, {
     children: [jsx(Typography, Object.assign({
@@ -23883,7 +23908,7 @@ const CarrierTermsForm = ({
     })), jsx(Spacer, {
       multiplier: 1
     }), jsx("div", Object.assign({
-      css: styles$b.carrierLogos
+      css: styles$a.carrierLogos
     }, {
       children: metadatas.map(({
         name,
@@ -23899,7 +23924,7 @@ const CarrierTermsForm = ({
         onSubmit: formLogger.capture(handleSubmit)
       }, {
         children: jsxs("div", Object.assign({
-          css: styles$b.agreement
+          css: styles$a.agreement
         }, {
           children: [jsx("div", {
             children: jsx(CheckboxInput, {
@@ -23926,10 +23951,10 @@ const CarrierTermsForm = ({
               name: "agreement"
             })
           }), showTerms && jsxs("div", Object.assign({
-            css: styles$b.well
+            css: styles$a.well
           }, {
             children: [jsxs("div", Object.assign({
-              css: styles$b.terms
+              css: styles$a.terms
             }, {
               children: [jsx(Typography, Object.assign({
                 variant: "heading5"
@@ -23941,7 +23966,7 @@ const CarrierTermsForm = ({
                 carrierCode: carrierCode
               }, carrierCode))]
             })), jsx("div", Object.assign({
-              css: styles$b.close
+              css: styles$a.close
             }, {
               children: jsx(Button, Object.assign({
                 onClick: () => setShowTerms(false),
@@ -24190,522 +24215,138 @@ const CustomsItemForm = ({
   }));
 };
 
-const Loader = props => {
-  return jsx("div", Object.assign({
-    css: {
-      alignItems: "center",
-      display: "flex",
-      flexDirection: "column",
-      height: "100%",
-      justifyContent: "center",
-      textAlign: "center",
-      width: "100%"
-    }
-  }, {
-    children: jsx(Spinner, Object.assign({}, props, {
-      size: SpinnerSize.SIZE_LARGE
-    }))
-  }));
-};
-
-const styles$8 = createStyles({
-  form: theme => ({
-    backgroundColor: theme.palette.gray.megaLight,
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.spacing(2),
-    padding: theme.spacing(2)
-  })
-});
-
-const autoFundingSchema = z.object({
-  isEnabled: z.boolean(),
-  lowBalancePurchaseThreshold: moneySchema.extend({
-    amount: z.number().min(25)
-  }),
-  maximumPurchasesPerDay: z.number().min(1),
-  purchaseAmount: moneySchema.extend({
-    amount: z.number().min(10).max(10000)
-  })
-});
-
-/**
- * This form that allows users to enable or disable auto funding, and
- * configure auto funding settings in ShipEngine API.
- */
-const AutoFundingForm = ({
-  defaultValues,
-  errorMessage,
-  hasError,
-  isInteger,
-  isLoading,
-  onSubmit,
-  onToggle
+const Label = ({
+  label,
+  onClickVoid,
+  onClickPrintLabel
 }) => {
+  var _a, _b, _c, _d, _e, _f;
   const {
     t
-  } = useTranslation();
-  // const [showForm, toggleShowForm] = useReducer((n) => !n, false); May still need this in a subsequent PR
-  const form = useForm({
-    defaultValues: defaultValues,
-    resolver: validationResolver(autoFundingSchema)
-  });
-  const {
-    isDirty
-  } = form.formState;
-  const watchIsEnabled = form.watch("isEnabled");
-  const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
-    yield onSubmit(values);
-  }));
-  if (isLoading) return jsx(Loader, {
-    message: t("manage-funding:autoFunding.isLoading")
-  });
+  } = useTranslation(["common", "view-shipment"]);
+  const insuranceOrConfirmationMessages = [];
+  if (label.insuredValue && label.insuredValue.amount !== 0) {
+    insuranceOrConfirmationMessages.push(t("view-shipment:fields.insuredValue", {
+      insuredValue: formatMoney(label.insuredValue)
+    }));
+  }
+  if (label.deliveryConfirmation && label.deliveryConfirmation !== "none") {
+    insuranceOrConfirmationMessages.push(t("view-shipment:fields.deliveryConfirmation", {
+      deliveryConfirmation: t(`common:confirmationTypes.${camelize(label.deliveryConfirmation)}`)
+    }));
+  }
   return jsxs(Fragment, {
-    children: [jsx(Switch, {
-      defaultChecked: defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.isEnabled,
-      label: t("manage-funding:autoFunding.addFundsAutomatically"),
-      name: "isEnabled",
-      onChange: evt => {
-        form.reset(Object.assign(Object.assign({}, form.getValues()), {
-          isEnabled: evt.target.checked
-        }));
-        onToggle(evt.target.checked);
-      },
-      value: true
-    }), watchIsEnabled && jsxs("form", Object.assign({
-      css: styles$8.form,
-      id: "auto-funding-form",
-      onSubmit: formLogger.capture(handleSubmit)
+    children: [["processing", "completed"].includes(label.status) ? jsx(RateCard, Object.assign({
+      carrierCode: (_a = label.carrier) === null || _a === void 0 ? void 0 : _a.carrierCode,
+      carrierFriendlyName: (_b = label.carrier) === null || _b === void 0 ? void 0 : _b.friendlyName,
+      // TODO: LMNT-418 Enable Nickname via FF
+      // carrierNickname={label.carrier?.nickname}
+      insuranceAmount: label.insuranceCost,
+      messages: insuranceOrConfirmationMessages,
+      selected: true,
+      serviceType: (_c = label.service) === null || _c === void 0 ? void 0 : _c.name,
+      shippingAmount: label.shipmentCost
     }, {
-      children: [jsx(MoneyInput, {
-        control: form.control,
-        disabled: !watchIsEnabled,
-        label: t("manage-funding:autoFunding.purchaseAmount"),
-        name: "purchaseAmount",
-        showCurrencySymbol: true
-      }), jsx(MoneyInput, {
-        control: form.control,
-        disabled: !watchIsEnabled,
-        label: t("manage-funding:autoFunding.lowBalancePurchaseThreshold"),
-        name: "lowBalancePurchaseThreshold",
-        showCurrencySymbol: true
-      }), jsx(NumberInput, {
-        control: form.control,
-        disabled: !watchIsEnabled,
-        label: t("manage-funding:autoFunding.maximumPurchasesPerDay"),
-        name: "maximumPurchasesPerDay"
-      }), jsxs(ButtonGroup, Object.assign({
-        justify: "end"
-      }, {
-        children: [jsx(Button, Object.assign({
-          disabled: !isDirty,
-          onClick: () => form.reset(),
-          variant: ButtonVariant.TEXT
+      children: label.trackingNumber && jsx("div", {
+        children: label.trackingNumber.toString()
+      })
+    })) : jsx(RateCard, {
+      carrierCode: (_d = label.carrier) === null || _d === void 0 ? void 0 : _d.carrierCode,
+      carrierFriendlyName: (_e = label.carrier) === null || _e === void 0 ? void 0 : _e.friendlyName,
+      // TODO: LMNT-418 Enable Nickname via FF
+      // carrierNickname={label.carrier?.nickname}
+      insuranceAmount: label.insuranceCost,
+      selected: true,
+      serviceType: (_f = label.service) === null || _f === void 0 ? void 0 : _f.name,
+      shippingAmount: label.shipmentCost,
+      voided: label.voided
+    }), label.status === "completed" && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 2
+      }), jsxs(ButtonGroup, {
+        children: [onClickVoid && label.status === "completed" && jsx(Button, Object.assign({
+          bold: false,
+          css: {
+            whiteSpace: "nowrap"
+          },
+          onClick: () => onClickVoid(label),
+          type: "submit",
+          variant: ButtonVariant.OUTLINED
         }, {
-          children: t("actions.cancel")
-        })), jsx(SubmitButton, Object.assign({
-          control: form.control,
-          "data-testid": "autoFunding.submit",
-          disabled: !watchIsEnabled,
-          requireDirty: true,
+          children: t("view-shipment:actions.void")
+        })), label.formDownload && jsx(Button, Object.assign({
+          bold: false,
+          css: {
+            whiteSpace: "nowrap"
+          },
+          onClick: () => {
+            window.open(label.formDownload.href, "_blank", "noopener, noreferrer");
+          },
           variant: ButtonVariant.OUTLINED
         }, {
-          children: t("manage-funding:actions.saveRule")
+          children: t("view-shipment:actions.printForms")
+        })), jsx(Button, Object.assign({
+          bold: false,
+          css: {
+            whiteSpace: "nowrap"
+          },
+          isFullWidth: true,
+          onClick: () => {
+            onClickPrintLabel === null || onClickPrintLabel === void 0 ? void 0 : onClickPrintLabel();
+            window.open(label.labelDownload.href, "_blank", "noopener, noreferrer");
+            // window.open(label.labelFormat, "_blank", "noopener, noreferrer");
+          }
+        }, {
+          children: t("view-shipment:actions.printLabel")
         }))]
-      }))]
-    })), hasError && errorMessage && jsxs(Fragment, {
-      children: [jsx(Spacer, {}), jsx(InlineNotification, Object.assign({
-        title: t("manage-funding:autoFunding.error.title"),
-        type: NotificationType.ERROR
-      }, {
-        children: errorMessage
-      })), jsx(Spacer, {})]
+      })]
     })]
   });
 };
 
-const manualFundingSchema = z.object({
-  funds: moneySchema.extend({
-    amount: z.number().min(10)
-  })
+const landingPageFormSchema = z.object({
+  email: z.string().trim().email()
 });
 
-const ManualFundingForm = ({
-  currentBalance,
-  errorMessage,
-  formId,
-  hasError,
-  isLoading,
-  onCancel,
-  onSubmit,
-  portalRef,
-  requiredAmount
+const LandingPageForm = ({
+  onSubmit
 }) => {
-  var _a;
   const {
     t
   } = useTranslation();
-  const fundingRecommendations = useMemo(() => ["$20", "$50", "$100", t("manage-funding:actions.other")], [t]);
-  const suggestedAmount = Math.max(requiredAmount !== null && requiredAmount !== void 0 ? requiredAmount : 0, 10);
-  const [selectedFundingAmountIndex, setSelectedFundingAmountIndex] = useState(requiredAmount ? 3 : 0);
-  const [showFormInput, toggleShowFormInput] = useToggle(!!requiredAmount);
-  const getSelectedFundingValue = value => {
-    return Number(value.replace(/[^0-9.-]+/g, ""));
-  };
   const form = useForm({
     defaultValues: {
-      funds: {
-        amount: suggestedAmount,
-        currency: SE.Currency.USD
-      }
+      email: ""
     },
-    resolver: validationResolver(manualFundingSchema)
+    resolver: validationResolver(landingPageFormSchema)
   });
-  const resultingBalance = currentBalance + ((_a = form.watch("funds").amount) !== null && _a !== void 0 ? _a : 0);
-  const formInterface = jsxs("section", Object.assign({
-    css: theme => ({
-      backgroundColor: theme.palette.gray.megaLight,
-      padding: theme.spacing(2)
-    })
+  const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
+    const payload = values;
+    onSubmit(payload.email);
+  }));
+  return jsxs("form", Object.assign({
+    id: "landing-page-form",
+    onSubmit: formLogger.capture(handleSubmit)
   }, {
-    children: [jsx(Typography, Object.assign({
-      bold: true
-    }, {
-      children: t("manage-funding:addFunds")
-    })), jsx(Spacer, {
-      multiplier: 2
-    }), jsx(ChipList, Object.assign({
-      onChange: idx => {
-        setSelectedFundingAmountIndex(idx);
-        if (idx === fundingRecommendations.length - 1) {
-          toggleShowFormInput(true);
-          return;
-        } else {
-          toggleShowFormInput(false);
-          form.reset({
-            funds: {
-              amount: getSelectedFundingValue(fundingRecommendations[idx]),
-              currency: SE.Currency.USD
-            }
-          });
-        }
-      }
+    children: [jsx(TextInput, {
+      control: form.control,
+      "data-testid": "fields.email",
+      form: "landing-page-form",
+      label: t("address.fields.email"),
+      labelWeight: "normal",
+      name: "email",
+      nativeLabel: true
+    }), jsx(Spacer, {
+      multiplier: 4
+    }), jsx(ButtonGroup, Object.assign({
+      justify: "center"
     }, {
-      children: fundingRecommendations.map((item, idx) => jsx(Chip, Object.assign({
-        css: theme => ({
-          backgroundColor: idx !== selectedFundingAmountIndex ? theme.palette.white : theme.palette.primary.main,
-          color: idx !== selectedFundingAmountIndex ? theme.palette.gray.main : theme.palette.white
-        }),
-        isSelected: idx === selectedFundingAmountIndex
-      }, {
-        children: item
-      }), idx))
-    })), jsx(Spacer, {
-      multiplier: 1
-    }), showFormInput && jsxs(Fragment, {
-      children: [jsx(MoneyInput, {
+      children: jsx(SubmitButton, Object.assign({
+        alwaysRequireValidity: true,
         control: form.control,
-        defaultValue: {
-          amount: undefined,
-          currency: SE.Currency.USD
-        },
-        label: t("manage-funding:otp.labels.amount"),
-        name: "funds",
-        placeholder: "Amount",
-        showCurrencySymbol: true,
-        subLabel: "Minimum purchase $10.00"
-      }), jsxs(FieldLabel, Object.assign({
-        label: t("manage-funding:otp.labels.resultingBalance")
-      }, {
-        children: [jsx(Typography, Object.assign({
-          variant: "body1"
-        }, {
-          children: formatMoney({
-            amount: resultingBalance,
-            currency: SE.Currency.USD
-          })
-        })), jsx(Spacer, {})]
-      }))]
-    }), jsxs(ButtonGroup, Object.assign({
-      justify: "end"
-    }, {
-      children: [jsx(Button, Object.assign({
-        onClick: onCancel,
-        variant: ButtonVariant.TEXT
-      }, {
-        children: t("actions.cancel")
-      })), jsx(SubmitButton, Object.assign({
-        control: form.control,
-        form: formId,
-        variant: ButtonVariant.OUTLINED
-      }, {
-        children: t(formId ? "actions.purchase" : "manage-funding:actions.addNow")
-      }))]
-    }))]
-  }));
-  if (isLoading) return jsx(Loader, {
-    message: t("manage-funding:otp.isLoading")
-  });
-  return jsxs(Fragment, {
-    children: [jsx("form", Object.assign({
-      id: formId,
-      onSubmit: formLogger.capture(form.handleSubmit(onSubmit))
-    }, {
-      children: portalRef !== undefined ?
-      // Nested form in a well
-      jsx(Portal, Object.assign({
-        target: portalRef
-      }, {
-        children: jsx("section", Object.assign({
-          css: theme => ({
-            backgroundColor: theme.palette.gray.megaLight,
-            padding: theme.spacing(2)
-          })
-        }, {
-          children: formInterface
-        }))
-      })) :
-      // Standalone form
-      formInterface
-    })), hasError && errorMessage && jsxs(Fragment, {
-      children: [jsx(Spacer, {}), jsx(InlineNotification, Object.assign({
-        title: t("manage-funding:otp.error.title"),
-        type: NotificationType.ERROR
-      }, {
-        children: errorMessage
-      })), jsx(Spacer, {})]
-    })]
-  });
-};
-
-const styles$7 = createStyles({
-  addFundsButton: theme => ({
-    alignItems: "center",
-    display: "flex",
-    gap: theme.spacing(1)
-  }),
-  balanceText: theme => ({
-    color: theme.palette.success.main
-  }),
-  header: theme => ({
-    display: "flex",
-    gap: theme.spacing(2),
-    justifyContent: "space-between"
-  }),
-  negativeBalanceText: theme => ({
-    color: theme.palette.error.main
-  })
-});
-
-const FundingMethods = ({
-  addFundsErrorMessage,
-  autoFundingData,
-  autoFundingErrorMessage,
-  fundingMethod,
-  hasAutoFundingError,
-  hasManualFundingError,
-  isAutoFundingLoading,
-  isManualFundingLoading,
-  manualFundingCurrentBalance,
-  manualFundingRequiredAmount,
-  onSubmitAutoFunding,
-  onSubmitManualFunding,
-  onToggleAutoFunding
-}) => {
-  const {
-    t
-  } = useTranslation();
-  const [showFundingMethods, toggleShowFundingMethods] = useToggle(false);
-  return jsxs(Fragment, {
-    children: [jsxs("div", Object.assign({
-      css: styles$7.header
-    }, {
-      children: [jsxs("div", {
-        children: [jsx(Typography, Object.assign({
-          variant: "body1"
-        }, {
-          children: t("manage-funding:currentBalance")
-        })), jsx(Typography, Object.assign({
-          bold: true,
-          css: manualFundingCurrentBalance >= 0 ? styles$7.balanceText : styles$7.negativeBalanceText,
-          variant: "body1"
-        }, {
-          children: formatMoney({
-            amount: manualFundingCurrentBalance,
-            currency: SE.Currency.USD
-          })
-        }))]
-      }), jsxs(Link, Object.assign({
-        bold: true,
-        css: styles$7.addFundsButton,
-        onClick: toggleShowFundingMethods,
-        size: ButtonSize.MEDIUM
-      }, {
-        children: [t("manage-funding:addFunds"), jsx(Icon, {
-          name: IconNames.ADD,
-          size: IconSize.SIZE_MEDIUM,
-          title: "Add Funds"
-        })]
-      }))]
-    })), jsx(Spacer, {}), jsx("div", Object.assign({
-      css: theme => Object.assign(Object.assign({}, !showFundingMethods && {
-        display: "none"
-      }), {
-        marginBottom: theme.spacing(2)
-      })
-    }, {
-      children: ["manual", "both"].includes(fundingMethod) && jsx(ManualFundingForm, {
-        currentBalance: manualFundingCurrentBalance,
-        errorMessage: addFundsErrorMessage,
-        hasError: hasManualFundingError,
-        isLoading: isManualFundingLoading,
-        onCancel: toggleShowFundingMethods,
-        onSubmit: onSubmitManualFunding,
-        requiredAmount: manualFundingRequiredAmount
-      })
-    })), ["auto", "both"].includes(fundingMethod) && jsx(AutoFundingForm, {
-      defaultValues: autoFundingData,
-      errorMessage: autoFundingErrorMessage,
-      hasError: hasAutoFundingError,
-      isLoading: isAutoFundingLoading,
-      onSubmit: onSubmitAutoFunding,
-      onToggle: onToggleAutoFunding
-    })]
-  });
-};
-
-const Label = ({
-  label,
-  onClickVoid,
-  onClickPrintLabel
-}) => {
-  var _a, _b, _c, _d, _e, _f;
-  const {
-    t
-  } = useTranslation(["common", "view-shipment"]);
-  const insuranceOrConfirmationMessages = [];
-  if (label.insuredValue && label.insuredValue.amount !== 0) {
-    insuranceOrConfirmationMessages.push(t("view-shipment:fields.insuredValue", {
-      insuredValue: formatMoney(label.insuredValue)
-    }));
-  }
-  if (label.deliveryConfirmation && label.deliveryConfirmation !== "none") {
-    insuranceOrConfirmationMessages.push(t("view-shipment:fields.deliveryConfirmation", {
-      deliveryConfirmation: t(`common:confirmationTypes.${camelize(label.deliveryConfirmation)}`)
-    }));
-  }
-  return jsxs(Fragment, {
-    children: [["processing", "completed"].includes(label.status) ? jsx(RateCard, Object.assign({
-      carrierCode: (_a = label.carrier) === null || _a === void 0 ? void 0 : _a.carrierCode,
-      carrierFriendlyName: (_b = label.carrier) === null || _b === void 0 ? void 0 : _b.friendlyName,
-      // TODO: LMNT-418 Enable Nickname via FF
-      // carrierNickname={label.carrier?.nickname}
-      insuranceAmount: label.insuranceCost,
-      messages: insuranceOrConfirmationMessages,
-      selected: true,
-      serviceType: (_c = label.service) === null || _c === void 0 ? void 0 : _c.name,
-      shippingAmount: label.shipmentCost
-    }, {
-      children: label.trackingNumber && jsx("div", {
-        children: label.trackingNumber.toString()
-      })
-    })) : jsx(RateCard, {
-      carrierCode: (_d = label.carrier) === null || _d === void 0 ? void 0 : _d.carrierCode,
-      carrierFriendlyName: (_e = label.carrier) === null || _e === void 0 ? void 0 : _e.friendlyName,
-      // TODO: LMNT-418 Enable Nickname via FF
-      // carrierNickname={label.carrier?.nickname}
-      insuranceAmount: label.insuranceCost,
-      selected: true,
-      serviceType: (_f = label.service) === null || _f === void 0 ? void 0 : _f.name,
-      shippingAmount: label.shipmentCost,
-      voided: label.voided
-    }), label.status === "completed" && jsxs(Fragment, {
-      children: [jsx(Spacer, {
-        multiplier: 2
-      }), jsxs(ButtonGroup, {
-        children: [onClickVoid && label.status === "completed" && jsx(Button, Object.assign({
-          bold: false,
-          css: {
-            whiteSpace: "nowrap"
-          },
-          onClick: () => onClickVoid(label),
-          type: "submit",
-          variant: ButtonVariant.OUTLINED
-        }, {
-          children: t("view-shipment:actions.void")
-        })), label.formDownload && jsx(Button, Object.assign({
-          bold: false,
-          css: {
-            whiteSpace: "nowrap"
-          },
-          onClick: () => {
-            window.open(label.formDownload.href, "_blank", "noopener, noreferrer");
-          },
-          variant: ButtonVariant.OUTLINED
-        }, {
-          children: t("view-shipment:actions.printForms")
-        })), jsx(Button, Object.assign({
-          bold: false,
-          css: {
-            whiteSpace: "nowrap"
-          },
-          isFullWidth: true,
-          onClick: () => {
-            onClickPrintLabel === null || onClickPrintLabel === void 0 ? void 0 : onClickPrintLabel();
-            window.open(label.labelDownload.href, "_blank", "noopener, noreferrer");
-            // window.open(label.labelFormat, "_blank", "noopener, noreferrer");
-          }
-        }, {
-          children: t("view-shipment:actions.printLabel")
-        }))]
-      })]
-    })]
-  });
-};
-
-const landingPageFormSchema = z.object({
-  email: z.string().trim().email()
-});
-
-const LandingPageForm = ({
-  onSubmit
-}) => {
-  const {
-    t
-  } = useTranslation();
-  const form = useForm({
-    defaultValues: {
-      email: ""
-    },
-    resolver: validationResolver(landingPageFormSchema)
-  });
-  const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
-    const payload = values;
-    onSubmit(payload.email);
-  }));
-  return jsxs("form", Object.assign({
-    id: "landing-page-form",
-    onSubmit: formLogger.capture(handleSubmit)
-  }, {
-    children: [jsx(TextInput, {
-      control: form.control,
-      "data-testid": "fields.email",
-      form: "landing-page-form",
-      label: t("address.fields.email"),
-      labelWeight: "normal",
-      name: "email",
-      nativeLabel: true
-    }), jsx(Spacer, {
-      multiplier: 4
-    }), jsx(ButtonGroup, Object.assign({
-      justify: "center"
-    }, {
-      children: jsx(SubmitButton, Object.assign({
-        alwaysRequireValidity: true,
-        control: form.control,
-        "data-testid": "onboarding:landing.action",
-        form: "landing-page-form",
-        variant: ButtonVariant.FILLED
+        "data-testid": "onboarding:landing.action",
+        form: "landing-page-form",
+        variant: ButtonVariant.FILLED
       }, {
         children: t("onboarding:landing.action")
       }))
@@ -24713,7 +24354,7 @@ const LandingPageForm = ({
   }));
 };
 
-const styles$6 = createStyles({
+const styles$7 = createStyles({
   container: theme => ({
     padding: theme.spacing(2)
   }),
@@ -24734,11 +24375,11 @@ const LandingPage = ({
     t
   } = useTranslation();
   return jsxs("div", Object.assign({
-    css: styles$6.container,
+    css: styles$7.container,
     "data-testid": "landing-page"
   }, {
     children: [jsxs("div", Object.assign({
-      css: styles$6.header
+      css: styles$7.header
     }, {
       children: [jsx(Typography, Object.assign({
         variant: "heading4"
@@ -24756,7 +24397,7 @@ const LandingPage = ({
     })), jsx(LandingPageForm, {
       onSubmit: onSubmit
     }), jsxs("div", Object.assign({
-      css: styles$6.header
+      css: styles$7.header
     }, {
       children: [jsx(Spacer, {
         multiplier: 6
@@ -24767,7 +24408,7 @@ const LandingPage = ({
       })), jsx(Spacer, {
         multiplier: 2
       }), jsx(Typography, Object.assign({
-        css: styles$6.description,
+        css: styles$7.description,
         variant: "body1"
       }, {
         children: t("onboarding:landing.description")
@@ -24848,18 +24489,17 @@ const Accordion = _a => {
   });
 };
 
-const styles$5 = createStyles({
-  carrierTypography: theme => ({
-    color: theme.palette.black
-  }),
+const getStyles$3 = (isConnected = false) => createStyles({
+  connectButton: theme => [{
+    padding: `0 ${theme.spacing(.5)}px`
+  }, isConnected && {
+    backgroundColor: theme.palette.success.main,
+    color: theme.palette.white
+  }],
   container: {
     display: "flex",
     flexDirection: "column"
   },
-  loadingButtonContainer: {
-    alignItems: "center",
-    display: "flex"
-  },
   logoContainer: theme => ({
     alignItems: "center",
     columnGap: `${theme.spacing(1)}px`,
@@ -24870,31 +24510,6 @@ const styles$5 = createStyles({
     display: "flex",
     justifyContent: "space-between",
     padding: `${theme.spacing(2)}px`
-  }),
-  statusChipConnected: theme => ({
-    alignItems: 'center',
-    background: theme.palette.success.main,
-    borderRadius: theme.borderRadius.S,
-    color: theme.palette.white,
-    display: 'flex',
-    flex: 'none',
-    flexDirection: 'row',
-    fontSize: theme.typography.fontSize.S,
-    fontWeight: theme.typography.fontWeight.bold,
-    gap: `${theme.spacing(1)}px}`,
-    height: '20px',
-    justifyContent: 'center',
-    lineHeight: `${theme.spacing(2.5)} px`,
-    order: '0',
-    padding: `${theme.spacing(.5)} px`,
-    width: '81px'
-  }),
-  statusChipNotConnected: theme => ({
-    background: 'none',
-    color: theme.palette.secondary.main,
-    fontSize: theme.typography.fontSize.M,
-    fontWeight: theme.typography.fontWeight.bold,
-    lineHeight: `${theme.spacing(3)} px`
   })
 });
 
@@ -24905,7 +24520,7 @@ var _ref$1 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "111ty02-css",
   styles: "align-items:center;display:flex;label:css;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxpc3QtY2FycmllcnMtcm93LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQm9iIiwiZmlsZSI6Imxpc3QtY2FycmllcnMtcm93LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IF9fYXdhaXRlciB9IGZyb20gXCJ0c2xpYlwiO1xyXG5pbXBvcnQgeyBqc3ggYXMgX2pzeCwganN4cyBhcyBfanN4cyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdC9qc3gtcnVudGltZVwiO1xyXG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcclxuaW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcclxuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tIFwicmVhY3QtaTE4bmV4dFwiO1xyXG5pbXBvcnQgeyBCdXR0b24sIEJ1dHRvblZhcmlhbnQsIFR5cG9ncmFwaHkgfSBmcm9tIFwiQHBhY2tsaW5rL2dpZ2VyXCI7XHJcbmltcG9ydCB7IFRlbXBsYXRlcyB9IGZyb20gXCIuLi8uLi8uLi9jb21wb25lbnRzXCI7XHJcbmltcG9ydCB7IHN0eWxlcyB9IGZyb20gXCIuL2xpc3QtY2FycmllcnMtcm93LnN0eWxlc1wiO1xyXG5leHBvcnQgY29uc3QgTGlzdENhcnJpZXJzUm93ID0gKHsgY29ubmVjdGVkQ2FycmllcjogeyBjYXJyaWVyLCBpc0Nvbm5lY3RlZCB9LCByZWdpc3RlckNhcnJpZXIsIHJlZ2lzdGVyQ2FycmllckVycm9ycywgfSkgPT4ge1xyXG4gICAgY29uc3QgeyBuYW1lLCBsb2dvLCByZXF1aXJlZEZpZWxkcyB9ID0gY2FycmllcjtcclxuICAgIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oW1wibGlzdC1jYXJyaWVyc1wiXSk7XHJcbiAgICBjb25zdCBbc2hvd0Ryb3BEb3duLCBzZXRTaG93RHJvcERvd25dID0gdXNlU3RhdGUoZmFsc2UpO1xyXG4gICAgY29uc3QgW2lzU3VibWl0dGluZywgc2V0SXNTdWJtaXR0aW5nXSA9IHVzZVN0YXRlKGZhbHNlKTtcclxuICAgIGNvbnN0IGhhbmRsZVJlZ2lzdGVyID0gKHZhbHVlcykgPT4gX19hd2FpdGVyKHZvaWQgMCwgdm9pZCAwLCB2b2lkIDAsIGZ1bmN0aW9uKiAoKSB7XHJcbiAgICAgICAgc2V0SXNTdWJtaXR0aW5nKHRydWUpO1xyXG4gICAgICAgIHlpZWxkIHJlZ2lzdGVyQ2Fycmllcih2YWx1ZXMpO1xyXG4gICAgICAgIHNob3dEcm9wRG93biAmJiBzZXRTaG93RHJvcERvd24oZmFsc2UpO1xyXG4gICAgICAgIHNldElzU3VibWl0dGluZyhmYWxzZSk7XHJcbiAgICB9KTtcclxuICAgIHJldHVybiAoX2pzeHMoXCJkaXZcIiwgT2JqZWN0LmFzc2lnbih7IGNzczogc3R5bGVzLmNvbnRhaW5lciB9LCB7IGNoaWxkcmVuOiBbX2pzeHMoXCJkaXZcIiwgT2JqZWN0LmFzc2lnbih7IGNzczogc3R5bGVzLnJvd0NvbnRhaW5lciB9LCB7IGNoaWxkcmVuOiBbX2pzeHMoXCJkaXZcIiwgT2JqZWN0LmFzc2lnbih7IGNzczogc3R5bGVzLmxvZ29Db250YWluZXIgfSwgeyBjaGlsZHJlbjogW19qc3goXCJkaXZcIiwgeyBjaGlsZHJlbjogX2pzeChcImltZ1wiLCB7IGFsdDogYCR7bmFtZX0tbG9nb2AsIGhlaWdodDogNDgsIHNyYzogbG9nbywgd2lkdGg6IDQ4IH0pIH0pLCBfanN4KFR5cG9ncmFwaHksIE9iamVjdC5hc3NpZ24oeyB2YXJpYW50OiBcInN1YnRpdGxlMVwiIH0sIHsgY2hpbGRyZW46IG5hbWUgfSkpXSB9KSksIF9qc3goXCJkaXZcIiwgT2JqZWN0LmFzc2lnbih7IGNzczogY3NzKHsgYWxpZ25JdGVtczogXCJjZW50ZXJcIiwgZGlzcGxheTogXCJmbGV4XCIgfSkgfSwgeyBjaGlsZHJlbjogX2pzeChCdXR0b24sIE9iamVjdC5hc3NpZ24oeyBkaXNhYmxlZDogaXNDb25uZWN0ZWQgfHwgc2hvd0Ryb3BEb3duLCBpc0xvYWRpbmc6IGlzU3VibWl0dGluZywgb25DbGljazogKCkgPT4gX19hd2FpdGVyKHZvaWQgMCwgdm9pZCAwLCB2b2lkIDAsIGZ1bmN0aW9uKiAoKSB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYgKHJlcXVpcmVkRmllbGRzID09PSBudWxsIHx8IHJlcXVpcmVkRmllbGRzID09PSB2b2lkIDAgPyB2b2lkIDAgOiByZXF1aXJlZEZpZWxkcy5pbmNsdWRlcyhcImFkZHJlc3NcIikpXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNldFNob3dEcm9wRG93bih0cnVlKTtcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBlbHNlXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHlpZWxkIGhhbmRsZVJlZ2lzdGVyKCk7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9KSwgdmFyaWFudDogQnV0dG9uVmFyaWFudC5URVhUIH0sIHsgY2hpbGRyZW46IGlzQ29ubmVjdGVkXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPyB0KFwibGlzdC1jYXJyaWVyczphY3Rpb25zLnN0YXR1cy5jb25uZWN0ZWRcIilcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA6IHQoXCJsaXN0LWNhcnJpZXJzOmFjdGlvbnMuc3RhdHVzLm5vdENvbm5lY3RlZFwiKSB9KSkgfSkpXSB9KSksIHNob3dEcm9wRG93biAmJiAoX2pzeChUZW1wbGF0ZXMuQWRkQ2FycmllckZvcm0sIHsgY2FycmllclRlcm1zOiBjYXJyaWVyLnRlcm1zICYmIGNhcnJpZXIudGVybXMsIG9uQ2FuY2VsOiAoKSA9PiBzZXRTaG93RHJvcERvd24oZmFsc2UpLCBvblN1Ym1pdDogKHZhbHVlcykgPT4gaGFuZGxlUmVnaXN0ZXIodmFsdWVzKSwgcmVnaXN0ZXJDYXJyaWVyRXJyb3JzOiByZWdpc3RlckNhcnJpZXJFcnJvcnMgfSkpXSB9KSkpO1xyXG59O1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1saXN0LWNhcnJpZXJzLXJvdy5qcy5tYXAiXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxpc3QtY2FycmllcnMtcm93LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQmllIiwiZmlsZSI6Imxpc3QtY2FycmllcnMtcm93LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IF9fYXdhaXRlciB9IGZyb20gXCJ0c2xpYlwiO1xyXG5pbXBvcnQgeyBqc3ggYXMgX2pzeCwganN4cyBhcyBfanN4cyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdC9qc3gtcnVudGltZVwiO1xyXG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcclxuaW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcclxuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tIFwicmVhY3QtaTE4bmV4dFwiO1xyXG5pbXBvcnQgeyBCdXR0b24sIEJ1dHRvbkNvbG9yLCBCdXR0b25WYXJpYW50LCBUeXBvZ3JhcGh5IH0gZnJvbSBcIkBwYWNrbGluay9naWdlclwiO1xyXG5pbXBvcnQgeyBUZW1wbGF0ZXMgfSBmcm9tIFwiLi4vLi4vLi4vY29tcG9uZW50c1wiO1xyXG5pbXBvcnQgeyBnZXRTdHlsZXMgfSBmcm9tIFwiLi9saXN0LWNhcnJpZXJzLXJvdy5zdHlsZXNcIjtcclxuZXhwb3J0IGNvbnN0IExpc3RDYXJyaWVyc1JvdyA9ICh7IGNvbm5lY3RlZENhcnJpZXI6IHsgY2FycmllciwgaXNDb25uZWN0ZWQgfSwgcmVnaXN0ZXJDYXJyaWVyLCByZWdpc3RlckNhcnJpZXJFcnJvcnMsIH0pID0+IHtcclxuICAgIGNvbnN0IHsgc2hvcnRuYW1lOiBuYW1lLCBsb2dvLCByZXF1aXJlZEZpZWxkcyB9ID0gY2FycmllcjtcclxuICAgIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oW1wibGlzdC1jYXJyaWVyc1wiXSk7XHJcbiAgICBjb25zdCBbc2hvd0Ryb3BEb3duLCBzZXRTaG93RHJvcERvd25dID0gdXNlU3RhdGUoZmFsc2UpO1xyXG4gICAgY29uc3QgW2lzU3VibWl0dGluZywgc2V0SXNTdWJtaXR0aW5nXSA9IHVzZVN0YXRlKGZhbHNlKTtcclxuICAgIGNvbnN0IGhhbmRsZVJlZ2lzdGVyID0gKHZhbHVlcykgPT4gX19hd2FpdGVyKHZvaWQgMCwgdm9pZCAwLCB2b2lkIDAsIGZ1bmN0aW9uKiAoKSB7XHJcbiAgICAgICAgc2V0SXNTdWJtaXR0aW5nKHRydWUpO1xyXG4gICAgICAgIHlpZWxkIHJlZ2lzdGVyQ2Fycmllcih2YWx1ZXMpO1xyXG4gICAgICAgIHNob3dEcm9wRG93biAmJiBzZXRTaG93RHJvcERvd24oZmFsc2UpO1xyXG4gICAgICAgIHNldElzU3VibWl0dGluZyhmYWxzZSk7XHJcbiAgICB9KTtcclxuICAgIHJldHVybiAoX2pzeHMoXCJkaXZcIiwgT2JqZWN0LmFzc2lnbih7IGNzczogZ2V0U3R5bGVzKCkuY29udGFpbmVyLCBcImRhdGEtdGVzdGlkXCI6IFwiY2Fycmllci1yb3dcIiB9LCB7IGNoaWxkcmVuOiBbX2pzeHMoXCJkaXZcIiwgT2JqZWN0LmFzc2lnbih7IGNzczogZ2V0U3R5bGVzKCkucm93Q29udGFpbmVyIH0sIHsgY2hpbGRyZW46IFtfanN4cyhcImRpdlwiLCBPYmplY3QuYXNzaWduKHsgY3NzOiBnZXRTdHlsZXMoKS5sb2dvQ29udGFpbmVyIH0sIHsgY2hpbGRyZW46IFtfanN4KFwiZGl2XCIsIHsgY2hpbGRyZW46IF9qc3goXCJpbWdcIiwgeyBhbHQ6IGAke25hbWV9LWxvZ29gLCBoZWlnaHQ6IDQwLCBzcmM6IGxvZ28sIHdpZHRoOiA0MCB9KSB9KSwgX2pzeChUeXBvZ3JhcGh5LCBPYmplY3QuYXNzaWduKHsgdmFyaWFudDogXCJzdWJ0aXRsZTFcIiB9LCB7IGNoaWxkcmVuOiBuYW1lIH0pKV0gfSkpLCBfanN4KFwiZGl2XCIsIE9iamVjdC5hc3NpZ24oeyBjc3M6IGNzcyh7IGFsaWduSXRlbXM6IFwiY2VudGVyXCIsIGRpc3BsYXk6IFwiZmxleFwiIH0pIH0sIHsgY2hpbGRyZW46IF9qc3goQnV0dG9uLCBPYmplY3QuYXNzaWduKHsgY29sb3I6IEJ1dHRvbkNvbG9yLlNFQ09OREFSWSwgY3NzOiBnZXRTdHlsZXMoaXNDb25uZWN0ZWQpLmNvbm5lY3RCdXR0b24sIGRpc2FibGVkOiBpc0Nvbm5lY3RlZCB8fCBzaG93RHJvcERvd24sIGlzTG9hZGluZzogaXNTdWJtaXR0aW5nLCBvbkNsaWNrOiAoKSA9PiBfX2F3YWl0ZXIodm9pZCAwLCB2b2lkIDAsIHZvaWQgMCwgZnVuY3Rpb24qICgpIHtcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpZiAocmVxdWlyZWRGaWVsZHMgPT09IG51bGwgfHwgcmVxdWlyZWRGaWVsZHMgPT09IHZvaWQgMCA/IHZvaWQgMCA6IHJlcXVpcmVkRmllbGRzLmluY2x1ZGVzKFwiYWRkcmVzc1wiKSlcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgc2V0U2hvd0Ryb3BEb3duKHRydWUpO1xyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsc2VcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgeWllbGQgaGFuZGxlUmVnaXN0ZXIoKTtcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0pLCB2YXJpYW50OiBCdXR0b25WYXJpYW50LlRFWFQgfSwgeyBjaGlsZHJlbjogaXNDb25uZWN0ZWRcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA/IHQoXCJsaXN0LWNhcnJpZXJzOmFjdGlvbnMuc3RhdHVzLmNvbm5lY3RlZFwiKVxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDogdChcImxpc3QtY2FycmllcnM6YWN0aW9ucy5zdGF0dXMubm90Q29ubmVjdGVkXCIpIH0pKSB9KSldIH0pKSwgc2hvd0Ryb3BEb3duICYmIChfanN4KFRlbXBsYXRlcy5BZGRDYXJyaWVyRm9ybSwgeyBjYXJyaWVyVGVybXM6IGNhcnJpZXIudGVybXMgJiYgY2Fycmllci50ZXJtcywgb25DYW5jZWw6ICgpID0+IHNldFNob3dEcm9wRG93bihmYWxzZSksIG9uU3VibWl0OiAodmFsdWVzKSA9PiBoYW5kbGVSZWdpc3Rlcih2YWx1ZXMpLCByZWdpc3RlckNhcnJpZXJFcnJvcnM6IHJlZ2lzdGVyQ2FycmllckVycm9ycyB9KSldIH0pKSk7XHJcbn07XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPWxpc3QtY2FycmllcnMtcm93LmpzLm1hcCJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 };
 const ListCarriersRow = ({
@@ -24917,7 +24532,7 @@ const ListCarriersRow = ({
   registerCarrierErrors
 }) => {
   const {
-    name,
+    shortname: name,
     logo,
     requiredFields
   } = carrier;
@@ -24933,20 +24548,21 @@ const ListCarriersRow = ({
     setIsSubmitting(false);
   });
   return jsxs("div", Object.assign({
-    css: styles$5.container
+    css: getStyles$3().container,
+    "data-testid": "carrier-row"
   }, {
     children: [jsxs("div", Object.assign({
-      css: styles$5.rowContainer
+      css: getStyles$3().rowContainer
     }, {
       children: [jsxs("div", Object.assign({
-        css: styles$5.logoContainer
+        css: getStyles$3().logoContainer
       }, {
         children: [jsx("div", {
           children: jsx("img", {
             alt: `${name}-logo`,
-            height: 48,
+            height: 40,
             src: logo,
-            width: 48
+            width: 40
           })
         }), jsx(Typography, Object.assign({
           variant: "subtitle1"
@@ -24957,6 +24573,8 @@ const ListCarriersRow = ({
         css: _ref$1
       }, {
         children: jsx(Button, Object.assign({
+          color: ButtonColor.SECONDARY,
+          css: getStyles$3(isConnected).connectButton,
           disabled: isConnected || showDropDown,
           isLoading: isSubmitting,
           onClick: () => __awaiter(void 0, void 0, void 0, function* () {
@@ -24976,7 +24594,7 @@ const ListCarriersRow = ({
   }));
 };
 
-const styles$4 = createStyles({
+const styles$6 = createStyles({
   listContainer: theme => ({
     "& > li:not(:last-of-type)": {
       borderBottom: `1px solid ${theme.palette.gray.light}`
@@ -25023,7 +24641,7 @@ const ListCarriers$1 = ({
         children: t("list-carriers:headers.accountCarriers")
       }))
     }), jsx("ul", Object.assign({
-      css: styles$4.listContainer
+      css: styles$6.listContainer
     }, {
       children: isLoading ? jsxs(Fragment, {
         children: [jsx(LoadingSkeletonRow, {}), jsx(LoadingSkeletonRow, {}), jsx(LoadingSkeletonRow, {})]
@@ -25044,10 +24662,10 @@ const ListCarriers$1 = ({
 };
 const LoadingSkeletonRow = () => {
   return jsxs("div", Object.assign({
-    css: styles$4.skeletonRow
+    css: styles$6.skeletonRow
   }, {
     children: [jsxs("div", Object.assign({
-      css: styles$4.skeletonLogoContainer
+      css: styles$6.skeletonLogoContainer
     }, {
       children: [jsx(Skeleton, {
         animation: SkeletonAnimation.WAVE,
@@ -25071,7 +24689,7 @@ const LoadingSkeletonRow = () => {
   }));
 };
 
-const styles$3 = createStyles({
+const styles$5 = createStyles({
   body: theme => ({
     borderTop: `1px solid ${theme.palette.gray.light}`,
     color: theme.palette.black,
@@ -25122,14 +24740,14 @@ const SettingsCard = ({
   verticallyAligned
 }) => {
   return jsxs("div", Object.assign({
-    css: verticallyAligned ? styles$3.verticalContainer : styles$3.container,
+    css: verticallyAligned ? styles$5.verticalContainer : styles$5.container,
     "data-testid": "settingsCard"
   }, {
     children: [jsxs("div", Object.assign({
-      css: styles$3.header
+      css: styles$5.header
     }, {
       children: [jsxs("div", Object.assign({
-        css: styles$3.title
+        css: styles$5.title
       }, {
         children: [typeof title === "string" ? jsx(Typography, Object.assign({
           variant: "subtitle2"
@@ -25164,7 +24782,7 @@ const SettingsCard = ({
         }))
       }))]
     })), children && jsx("div", Object.assign({
-      css: styles$3.body
+      css: styles$5.body
     }, {
       children: jsxs("div", {
         children: [children, accessoryAction && jsx(ButtonGroup, Object.assign({
@@ -25281,7 +24899,7 @@ const warehouseSchema = z.discriminatedUnion("returnToAddressIsDifferent", [z.ob
   });
 });
 
-const styles$2 = createStyles({
+const styles$4 = createStyles({
   header: {
     textAlign: "center"
   },
@@ -25333,12 +24951,12 @@ const WarehouseForm = ({
     }
   }));
   return jsxs("div", Object.assign({
-    css: _isOnboarding ? styles$2.onboardingWell : styles$2.well,
+    css: _isOnboarding ? styles$4.onboardingWell : styles$4.well,
     "data-testid": "warehouse-form"
   }, {
     children: [_isOnboarding && jsxs(Fragment, {
       children: [jsxs("div", Object.assign({
-        css: styles$2.header
+        css: styles$4.header
       }, {
         children: [jsx(Typography, Object.assign({
           variant: "heading4"
@@ -26542,21 +26160,84 @@ $$3({ target: 'Promise', stat: true, forced: FORCED_PROMISE_CONSTRUCTOR }, {
   }
 });
 
-const BillingFields = ({
-  form
+const CompletionPage = ({
+  onContinue
 }) => {
   const {
     t
-  } = useTranslation();
-  const expirationMonthOptions = useExpirationMonthOptions();
-  return jsxs(Fragment, {
-    children: [jsx(GridChild, Object.assign({
-      colSpan: 12
+  } = useTranslation(["common", "onboarding"]);
+  return jsxs("div", Object.assign({
+    css: {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column"
+    },
+    "data-testid": "onboarding-complete"
+  }, {
+    children: [jsx(Typography, Object.assign({
+      variant: "heading4"
     }, {
-      children: jsx(TextInput, {
-        control: form.control,
-        label: t("billing.fields.name"),
-        labelWeight: "normal",
+      children: t("onboarding:success.title")
+    })), jsx(Spacer, {
+      multiplier: 2
+    }), jsx(Typography, Object.assign({
+      variant: "subtitle1"
+    }, {
+      children: t("onboarding:success.subtitle")
+    })), jsx(Spacer, {
+      multiplier: 10
+    }), jsxs("svg", Object.assign({
+      fill: "none",
+      height: "86",
+      viewBox: "0 0 86 86",
+      width: "86",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, {
+      children: [jsx("circle", {
+        cx: "43",
+        cy: "43.3379",
+        fill: "#E8F6FF",
+        r: "42.5"
+      }), jsx("path", {
+        d: "M56.6583 26.4724C57.2882 25.8425 58.3095 25.8425 58.9393 26.4724L64.1038 31.6369C64.7337 32.2668 64.7337 33.288 64.1038 33.9179L37.8303 60.1915L30.3848 52.746L56.6583 26.4724Z",
+        fill: "#006FBB"
+      }), jsx("path", {
+        d: "M21.4724 43.8446C20.8425 43.2147 20.8425 42.1935 21.4724 41.5636L26.4689 36.5671C27.0988 35.9372 28.12 35.9372 28.7499 36.5671L45.1032 52.9204L37.8257 60.1979L21.4724 43.8446Z",
+        fill: "#006FBB"
+      })]
+    })), jsx(Spacer, {
+      multiplier: 10
+    }), jsx(ButtonGroup, Object.assign({
+      justify: "center"
+    }, {
+      children: jsx(Button, Object.assign({
+        bold: false,
+        color: ButtonColor.PRIMARY,
+        onClick: onContinue,
+        type: "button",
+        variant: ButtonVariant.FILLED
+      }, {
+        children: t("onboarding:success.action")
+      }))
+    }))]
+  }));
+};
+
+const BillingFields = ({
+  form
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const expirationMonthOptions = useExpirationMonthOptions();
+  return jsxs(Fragment, {
+    children: [jsx(GridChild, Object.assign({
+      colSpan: 12
+    }, {
+      children: jsx(TextInput, {
+        control: form.control,
+        label: t("billing.fields.name"),
+        labelWeight: "normal",
         name: "creditCard.name",
         nativeLabel: true
       })
@@ -26727,7 +26408,7 @@ const EditWalletAddressForm = ({
   }));
 };
 
-const styles$1 = createStyles({
+const styles$3 = createStyles({
   grid: theme => ({
     margin: theme.spacing(4)
   }),
@@ -26775,21 +26456,21 @@ const WalletForm = ({
     onSubmit: formLogger.capture(handleSubmit)
   }, {
     children: jsxs(Grid, Object.assign({
-      css: styles$1.grid,
+      css: styles$3.grid,
       noPadding: true
     }, {
       children: [jsx(GridChild, Object.assign({
         colSpan: 12
       }, {
         children: jsx(Typography, Object.assign({
-          css: styles$1.heading,
+          css: styles$3.heading,
           variant: "heading4"
         }, {
           children: t("register-wallet:sections.billing.title")
         }))
       })), jsx(GridChild, Object.assign({
         colSpan: 12,
-        css: styles$1.subtitle
+        css: styles$3.subtitle
       }, {
         children: jsx(Typography, Object.assign({
           variant: "subtitle1"
@@ -26811,7 +26492,7 @@ const WalletForm = ({
         colSpan: 12
       }, {
         children: jsx(Typography, Object.assign({
-          css: styles$1.subtitle,
+          css: styles$3.subtitle,
           variant: "subtitle1"
         }, {
           children: t("register-wallet:sections.billing.addressSubTitle")
@@ -26878,7 +26559,7 @@ const WalletForm = ({
   }));
 };
 
-const styles = createStyles({
+const styles$2 = createStyles({
   lastStep: {
     "& > span::first-of-type": {
       "::after": {
@@ -26983,40 +26664,9 @@ const Onboarding$1 = ({
     var _a;
     // Step 5: Onboarding Complete
     if (hasCompletedOnboarding) {
-      return jsxs("div", Object.assign({
-        css: {
-          alignItems: "center",
-          display: "flex",
-          flexDirection: "column"
-        },
-        "data-testid": "onboarding-complete"
-      }, {
-        children: [jsx(Typography, Object.assign({
-          variant: "heading4"
-        }, {
-          children: t("onboarding:success.title")
-        })), jsx(Spacer, {
-          multiplier: 2
-        }), jsx(Typography, Object.assign({
-          variant: "subtitle1"
-        }, {
-          children: t("onboarding:success.subtitle")
-        })), jsx(Spacer, {
-          multiplier: 48
-        }), jsx(ButtonGroup, Object.assign({
-          justify: "center"
-        }, {
-          children: jsx(Button, Object.assign({
-            bold: false,
-            color: ButtonColor.PRIMARY,
-            onClick: onCompleteOnboarding,
-            type: "button",
-            variant: ButtonVariant.FILLED
-          }, {
-            children: t("onboarding:success.action")
-          }))
-        }))]
-      }));
+      return jsx(CompletionPage, {
+        onContinue: onCompleteOnboarding
+      });
     }
     // Step 1: Landing Page
     if (!email) return jsx(LandingPage, {
@@ -27092,16 +26742,16 @@ const Onboarding$1 = ({
       currentStep: currentStep
     }, {
       children: [jsx(Step, {
-        css: styles.step,
+        css: styles$2.step,
         label: t("onboarding:steps.login")
       }), jsx(Step, {
-        css: styles.step,
+        css: styles$2.step,
         label: t("onboarding:steps.carriers")
       }), jsx(Step, {
-        css: styles.step,
+        css: styles$2.step,
         label: t("onboarding:steps.addresses")
       }), jsx(Step, {
-        css: styles.lastStep,
+        css: styles$2.lastStep,
         label: t("onboarding:steps.payment")
       })]
     })), renderStep()]
@@ -27155,24 +26805,567 @@ const Cube = _a => {
   }, props, {
     role: "status"
   }, {
-    children: jsx("svg", Object.assign({
-      css: styles.content,
-      height: "100%",
-      viewBox: "0 0 489 489",
-      width: "100%"
+    children: jsx("svg", Object.assign({
+      css: styles.content,
+      height: "100%",
+      viewBox: "0 0 489 489",
+      width: "100%"
+    }, {
+      children: jsx("g", {
+        children: jsx("g", {
+          children: jsx("path", {
+            d: "M483.674,101.836C483.61,101.604 483.506,101.396 483.418,101.18C483.242,100.724 483.05,100.284 482.794,99.868C482.65,99.636 482.498,99.428 482.33,99.212C482.058,98.844 481.754,98.508 481.41,98.196C481.21,98.004 481.01,97.828 480.786,97.66C480.658,97.564 480.562,97.444 480.434,97.356C480.138,97.156 479.81,97.044 479.498,96.884C479.338,96.804 479.218,96.684 479.05,96.612L247.05,0.612C245.082,-0.204 242.89,-0.204 240.922,0.612L8.922,96.612C8.754,96.684 8.626,96.804 8.466,96.884C8.154,97.036 7.834,97.156 7.546,97.348C7.418,97.436 7.322,97.556 7.194,97.652C6.97,97.82 6.778,98.004 6.578,98.188C6.242,98.5 5.938,98.836 5.658,99.204C5.49,99.42 5.338,99.628 5.194,99.86C4.938,100.276 4.746,100.716 4.57,101.172C4.482,101.396 4.378,101.596 4.314,101.828C4.13,102.532 4.002,103.26 4.002,104.004L4.002,384.004C4.002,387.244 5.954,390.164 8.938,391.396L240.938,487.396C241.042,487.436 241.154,487.42 241.258,487.46C242.146,487.788 243.058,488.004 244.002,488.004C244.946,488.004 245.858,487.788 246.746,487.46C246.85,487.42 246.962,487.436 247.066,487.396L479.066,391.396C482.05,390.164 484.002,387.244 484.002,384.004L484.002,104.004C484.002,103.26 483.874,102.532 483.674,101.836ZM236.002,468.028L20.002,378.66L20.002,115.972L236.002,205.348L236.002,468.028ZM244.002,191.348L32.922,104.004L244.002,16.66L455.082,104.004L244.002,191.348ZM468.002,378.66L252.002,468.036L252.002,205.348L468.002,115.972L468.002,378.66Z",
+            fill: theme.palette.primary.main
+          })
+        })
+      })
+    }))
+  }));
+};
+
+/**
+ * A drop-in replacement for the `<form>` tag that allows nested forms.
+ *
+ * Via portals, the <form> tag is mounted as a sibling of the app root. The form's
+ * interface is then mounted back at the point of use.
+ */
+const FormPortal = ({
+  css,
+  children,
+  id,
+  onSubmit,
+  variant
+}) => {
+  const rootTarget = useRootPortal();
+  const [interfaceTarget, setInterfaceTarget] = useState(null);
+  const onMountInterfaceTarget = useCallback(element => {
+    if (element) setInterfaceTarget(element);
+  }, []);
+  const formStyle = [variant === "well" && (theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
+    padding: theme.spacing(2)
+  })), css];
+  return jsxs(Fragment, {
+    children: [jsx(Portal, Object.assign({
+      target: rootTarget
+    }, {
+      children: jsx("form", Object.assign({
+        id: id,
+        onSubmit: onSubmit
+      }, {
+        children: jsx(Portal, Object.assign({
+          target: interfaceTarget
+        }, {
+          children: children
+        }))
+      }))
+    })), jsx("section", {
+      css: formStyle,
+      id: id + "-interface",
+      ref: onMountInterfaceTarget
+    })]
+  });
+};
+
+const Loader = props => {
+  return jsx("div", Object.assign({
+    css: {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      justifyContent: "center",
+      textAlign: "center",
+      width: "100%"
+    }
+  }, {
+    children: jsx(Spinner, Object.assign({}, props, {
+      size: SpinnerSize.SIZE_LARGE
+    }))
+  }));
+};
+
+const getStyles$2 = ({
+  isDisabled,
+  isSelected
+} = {}) => createStyles({
+  chip: theme => [isSelected ? {
+    backgroundColor: theme.palette.secondary.ultraLight,
+    color: theme.palette.secondary.main
+  } : {
+    backgroundColor: theme.palette.white,
+    color: theme.palette.gray.main
+  },
+  // TODO [LMNT-663] - Giger's Chip component needs support added for an isDisabled prop
+  isDisabled && {
+    backgroundColor: theme.palette.gray.light,
+    cursor: "none",
+    pointerEvents: "none"
+  }],
+  chipList: theme => ({
+    gap: theme.spacing(1)
+  }),
+  fundsInput: theme => ({
+    maxWidth: theme.spacing(24)
+  })
+});
+
+const getAddFundsSchema = (minimumAmount = 10) => z.object({
+  funds: moneySchema.extend({
+    amount: z.number().min(minimumAmount)
+  })
+}).transform(data => data.funds);
+
+/**
+ * Form for adding funds to a carrier's account.
+ *
+ * If a render child is provided, external control is assumed and the cancel / submit buttons are hidden.
+ */
+const AddFundsForm = ({
+  carrierId,
+  children,
+  onCancel,
+  onSuccess,
+  minimumAmount: _minimumAmount = 0
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const addFunds = useAddFunds(carrierId);
+  const carrier = useGetCarrierById(carrierId);
+  const chips = [{
+    label: "$20",
+    value: 20
+  }, {
+    label: "$50",
+    value: 50
+  }, {
+    label: "$100",
+    value: 100
+  }, {
+    label: t("manage-funding:addFunds.custom"),
+    value: "custom"
+  }];
+  const [selectedChip, setSelectedChip] = useState(_minimumAmount > 0 ? chips[3] : chips[0]);
+  _minimumAmount = Math.max(_minimumAmount, 10);
+  const form = useForm({
+    defaultValues: {
+      funds: {
+        amount: selectedChip.value === "custom" ? _minimumAmount : selectedChip.value,
+        currency: SE.Currency.USD
+      }
+    },
+    resolver: validationResolver(getAddFundsSchema(_minimumAmount))
+  });
+  const {
+    isSubmitted,
+    isValid
+  } = form.formState;
+  const watchAmount = form.watch("funds").amount;
+  const formId = "add-funds-form";
+  const handleSubmit = formLogger.capture(form.handleSubmit(values => {
+    const payload = values;
+    addFunds.mutate(payload, {
+      onSuccess: () => onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess()
+    });
+  }));
+  if (carrier.isLoading) return jsx(Loader, {
+    message: t("loading.carrier")
+  });
+  if (!carrier.data) throw new Error("errorMessages.unableToLoad.carrier");
+  const balance = carrier.data.balance;
+  if (balance === undefined) return jsx(InlineNotification, Object.assign({
+    type: NotificationType.ERROR
+  }, {
+    children: t("manage-funding:errors.unableToFindBalance")
+  }));
+  return jsxs(Fragment, {
+    children: [jsxs(FormPortal, Object.assign({
+      id: formId,
+      onSubmit: handleSubmit,
+      variant: "well"
+    }, {
+      children: [jsx(Typography, Object.assign({
+        bold: true
+      }, {
+        children: t("manage-funding:actions.addFunds")
+      })), jsx(Spacer, {
+        multiplier: 2
+      }), jsx(ChipList, Object.assign({
+        css: getStyles$2().chipList,
+        onChange: idx => {
+          const chip = chips[idx];
+          setSelectedChip(chip);
+          if (chip.value !== "custom") {
+            form.reset({
+              funds: {
+                amount: chip.value,
+                currency: SE.Currency.USD
+              }
+            });
+          }
+        }
+      }, {
+        children: chips.map(chip => jsx(Chip, Object.assign({
+          css: getStyles$2({
+            isDisabled: chip.value < _minimumAmount,
+            isSelected: chip.value === selectedChip.value
+          }).chip,
+          isSelected: chip.value === selectedChip.value
+        }, {
+          children: jsx(Typography, Object.assign({
+            variant: "small"
+          }, {
+            children: chip.label
+          }))
+        }), chip.label))
+      })), selectedChip.value === "custom" && jsxs(Fragment, {
+        children: [jsx(Spacer, {
+          multiplier: 1
+        }), jsx(MoneyInput, {
+          control: form.control,
+          css: getStyles$2().fundsInput,
+          defaultValue: {
+            amount: undefined,
+            currency: SE.Currency.USD
+          },
+          form: formId,
+          hint: t("manage-funding:addFunds.minimumPurchaseAmount"),
+          label: t("manage-funding:addFunds.labels.amount"),
+          name: "funds",
+          nativeLabel: true,
+          showCurrencySymbol: true
+        })]
+      }), !children && jsxs(Fragment, {
+        children: [jsx(Spacer, {
+          multiplier: selectedChip.value !== "custom" ? 1.5 : 1
+        }), jsxs(ButtonGroup, Object.assign({
+          justify: "end"
+        }, {
+          children: [onCancel && jsx(Button, Object.assign({
+            onClick: onCancel,
+            variant: ButtonVariant.TEXT
+          }, {
+            children: t("actions.cancel")
+          })), jsx(SubmitButton, Object.assign({
+            control: form.control,
+            form: formId,
+            isLoading: addFunds.isLoading,
+            variant: ButtonVariant.OUTLINED
+          }, {
+            children: t("manage-funding:actions.addNow")
+          }))]
+        }))]
+      })]
+    })), addFunds.error && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 1
+      }), jsx(InlineNotification, Object.assign({
+        title: t("manage-funding:addFunds.error.title"),
+        type: NotificationType.ERROR
+      }, {
+        children: addFunds.error[0].message
+      }))]
+    }), children === null || children === void 0 ? void 0 : children({
+      isCustomAmount: selectedChip.value === "custom",
+      isSubmitted,
+      isSubmitting: addFunds.isLoading,
+      isValid,
+      selectedAmount: watchAmount,
+      submit: handleSubmit
+    })]
+  });
+};
+
+const InlineLabel = ({
+  children,
+  label
+}) => jsxs("div", Object.assign({
+  css: theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: theme.spacing(1)
+  })
+}, {
+  children: [jsx(Typography, {
+    children: label
+  }), children]
+}));
+
+const getStyles$1 = balance => createStyles({
+  balanceText: theme => ({
+    color: balance === undefined ? theme.palette.alert.main : balance >= 0 ? theme.palette.secondary.dark : theme.palette.error.main
+  })
+});
+
+const CarrierBalance = ({
+  carrierId
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    data: carrier,
+    isLoading: isLoadingCarrier,
+    isRefetching: isRefetchingCarrier
+  } = useGetCarrierById(carrierId);
+  const balance = carrier === null || carrier === void 0 ? void 0 : carrier.balance;
+  return jsx(InlineLabel, Object.assign({
+    label: t("manage-funding:currentBalance")
+  }, {
+    children: isLoadingCarrier || isRefetchingCarrier ? jsx(Spinner, {}) : jsx(Typography, Object.assign({
+      bold: true,
+      css: getStyles$1(balance).balanceText
+    }, {
+      children: balance === undefined ? t("manage-funding:errors.balanceUnknown") : formatMoney({
+        amount: balance,
+        currency: SE.Currency.USD
+      })
+    }))
+  }));
+};
+
+const icons = {
+  add: IconNames.ADD,
+  download: IconNames.DOWNLOAD
+};
+const LinkAction = _a => {
+  var {
+      css,
+      icon,
+      isDisabled,
+      isLoading,
+      title
+    } = _a,
+    props = __rest(_a, ["css", "icon", "isDisabled", "isLoading", "title"]);
+  return jsx(Link, Object.assign({}, props, {
+    bold: true,
+    css: theme => [{
+      alignItems: "center",
+      display: "flex",
+      gap: theme.spacing(1)
+    },
+    // TODO [LMNT-663] - Giger's Link component does not render isDisabled state unless isButton is true
+    (isDisabled || isLoading) && {
+      color: theme.palette.gray.main,
+      cursor: "none",
+      pointerEvents: "none"
+    }, css],
+    isDisabled: isDisabled,
+    size: ButtonSize.MEDIUM
+  }, {
+    children: isLoading ? jsx(Spinner, {}) : jsxs(Fragment, {
+      children: [title, icon && jsx(Icon, {
+        name: icons[icon],
+        size: IconSize.SIZE_MEDIUM,
+        title: title
+      })]
+    })
+  }));
+};
+
+const Spread = ({
+  children
+}) => jsx("div", Object.assign({
+  css: theme => ({
+    display: "flex",
+    gap: theme.spacing(2),
+    justifyContent: "space-between"
+  })
+}, {
+  children: children
+}));
+
+const getStyles = isCustomAmount => createStyles({
+  balanceText: theme => ({
+    color: theme.palette.secondary.dark
+  }),
+  container: theme => ({
+    padding: theme.spacing(3)
+  }),
+  formExtension: theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(1),
+    // Negative margin is to compensate for the padding on AddFundsForm, since we want this
+    // section to seemlessly extend the form's well.
+    marginTop: theme.spacing(isCustomAmount ? -1.5 : -1),
+    padding: theme.spacing(2),
+    paddingTop: 0
+  }),
+  saveRateButton: {
+    whiteSpace: "nowrap"
+  }
+});
+
+/**
+ * Fund and Purchase handles the label purchase submission UX, ensuring that a user
+ * has the necessary funds available and can add them if not. It allows a single button
+ * to submit the funding form followed by the purchase form.
+ */
+const FundAndPurchase = ({
+  carrierId,
+  className,
+  disabled,
+  isFundingRequired,
+  onSave,
+  purchaseAmount,
+  onPurchase
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const [isAddFundsFormOpen, setIsAddFundsFormOpen] = useState(false);
+  const {
+    data: carrier,
+    isLoading: isLoadingCarrier
+  } = useGetCarrierById(carrierId);
+  const isAddingFunds = !!useIsMutating({
+    mutationKey: ["useAddFunds"]
+  });
+  const isCreatingLabel = !!useIsMutating({
+    mutationKey: ["useCreateLabel"]
+  });
+  const [isSavingRate, setIsSavingRate] = useState(false);
+  const handleSaveRate = () => __awaiter(void 0, void 0, void 0, function* () {
+    setIsSavingRate(true);
+    yield onSave();
+    setIsSavingRate(false);
+  });
+  // Automatically open the Add Funds form if the carrier's balance is insufficient.
+  useEffect(() => {
+    if (isFundingRequired && (carrier === null || carrier === void 0 ? void 0 : carrier.balance) !== undefined && carrier.balance < purchaseAmount) setIsAddFundsFormOpen(true);
+  }, [carrier === null || carrier === void 0 ? void 0 : carrier.balance, isFundingRequired, purchaseAmount]);
+  const renderActionButtons = (addFundsForm = {}) => jsxs(ButtonGroup, Object.assign({
+    justify: "end"
+  }, {
+    children: [jsx(Button, Object.assign({
+      bold: false,
+      css: getStyles().saveRateButton,
+      disabled: disabled || !carrierId || isAddingFunds || isCreatingLabel,
+      isLoading: isSavingRate,
+      onClick: handleSaveRate,
+      variant: ButtonVariant.OUTLINED
+    }, {
+      children: t("purchase-label:actions.saveRate")
+    })), jsx(Button, Object.assign({
+      "data-testid": "submit-fund-and-purchase",
+      disabled: disabled || !carrierId || isFundingRequired && isAddFundsFormOpen && addFundsForm.isSubmitted && !addFundsForm.isValid,
+      isLoading: addFundsForm.isSubmitting || isAddingFunds || isCreatingLabel,
+      onClick: isAddFundsFormOpen ? addFundsForm.submit : onPurchase
+    }, {
+      children: isAddFundsFormOpen ? t("manage-funding:actions.addFundsAndPurchase") : t("purchase-label:actions.purchaseNow")
+    }))]
+  }));
+  if (!isFundingRequired) return jsx("div", Object.assign({
+    className: className,
+    css: getStyles().container
+  }, {
+    children: renderActionButtons()
+  }));
+  if (isLoadingCarrier) return jsx(Loader, {
+    message: t("loading.carrier")
+  });
+  if (!carrier || !carrierId) throw new Error("errorMessages.unableToLoad.carrier");
+  const balance = carrier.balance;
+  const handleAddFundsSuccess = () => {
+    setIsAddFundsFormOpen(false);
+    onPurchase();
+  };
+  return jsxs("div", Object.assign({
+    className: className,
+    css: getStyles().container
+  }, {
+    children: [jsxs(Spread, {
+      children: [jsx(CarrierBalance, {
+        carrierId: carrierId
+      }), jsx(LinkAction, {
+        icon: "add",
+        isDisabled: isAddFundsFormOpen || isAddingFunds || isCreatingLabel,
+        onClick: () => setIsAddFundsFormOpen(true),
+        title: t("manage-funding:actions.addFunds")
+      })]
+    }), jsx(Spacer, {
+      multiplier: 2
+    }), balance < purchaseAmount && jsxs(Fragment, {
+      children: [jsx(InlineNotification, Object.assign({
+        title: t(`manage-funding:fundAndPurchase.${balance < 0 ? "negativeBalanceTitle" : "insufficientFundsTitle"}`),
+        type: NotificationType.ALERT
+      }, {
+        children: t(`manage-funding:fundAndPurchase.${balance < 0 ? "negativeBalance" : "insufficientFunds"}`)
+      })), jsx(Spacer, {
+        multiplier: 2
+      })]
+    }), isAddFundsFormOpen ? jsx(AddFundsForm, Object.assign({
+      carrierId: carrierId,
+      minimumAmount: purchaseAmount - balance,
+      onSuccess: handleAddFundsSuccess
     }, {
-      children: jsx("g", {
-        children: jsx("g", {
-          children: jsx("path", {
-            d: "M483.674,101.836C483.61,101.604 483.506,101.396 483.418,101.18C483.242,100.724 483.05,100.284 482.794,99.868C482.65,99.636 482.498,99.428 482.33,99.212C482.058,98.844 481.754,98.508 481.41,98.196C481.21,98.004 481.01,97.828 480.786,97.66C480.658,97.564 480.562,97.444 480.434,97.356C480.138,97.156 479.81,97.044 479.498,96.884C479.338,96.804 479.218,96.684 479.05,96.612L247.05,0.612C245.082,-0.204 242.89,-0.204 240.922,0.612L8.922,96.612C8.754,96.684 8.626,96.804 8.466,96.884C8.154,97.036 7.834,97.156 7.546,97.348C7.418,97.436 7.322,97.556 7.194,97.652C6.97,97.82 6.778,98.004 6.578,98.188C6.242,98.5 5.938,98.836 5.658,99.204C5.49,99.42 5.338,99.628 5.194,99.86C4.938,100.276 4.746,100.716 4.57,101.172C4.482,101.396 4.378,101.596 4.314,101.828C4.13,102.532 4.002,103.26 4.002,104.004L4.002,384.004C4.002,387.244 5.954,390.164 8.938,391.396L240.938,487.396C241.042,487.436 241.154,487.42 241.258,487.46C242.146,487.788 243.058,488.004 244.002,488.004C244.946,488.004 245.858,487.788 246.746,487.46C246.85,487.42 246.962,487.436 247.066,487.396L479.066,391.396C482.05,390.164 484.002,387.244 484.002,384.004L484.002,104.004C484.002,103.26 483.874,102.532 483.674,101.836ZM236.002,468.028L20.002,378.66L20.002,115.972L236.002,205.348L236.002,468.028ZM244.002,191.348L32.922,104.004L244.002,16.66L455.082,104.004L244.002,191.348ZM468.002,378.66L252.002,468.036L252.002,205.348L468.002,115.972L468.002,378.66Z",
-            fill: theme.palette.primary.main
-          })
-        })
-      })
-    }))
+      children: addFundsForm => {
+        var _a, _b;
+        return jsxs(Fragment, {
+          children: [jsxs("section", Object.assign({
+            css: getStyles(addFundsForm.isCustomAmount).formExtension
+          }, {
+            children: [jsx(InlineLabel, Object.assign({
+              label: t("manage-funding:fundAndPurchase.newBalance")
+            }, {
+              children: jsx(Typography, Object.assign({
+                css: getStyles().balanceText
+              }, {
+                children: formatMoney({
+                  amount: balance + ((_a = addFundsForm.selectedAmount) !== null && _a !== void 0 ? _a : 0),
+                  currency: SE.Currency.USD
+                })
+              }))
+            })), jsx(InlineLabel, Object.assign({
+              label: t("manage-funding:fundAndPurchase.finalBalance")
+            }, {
+              children: jsx(Typography, Object.assign({
+                css: getStyles().balanceText
+              }, {
+                children: formatMoney({
+                  amount: balance + ((_b = addFundsForm.selectedAmount) !== null && _b !== void 0 ? _b : 0) - purchaseAmount,
+                  currency: SE.Currency.USD
+                })
+              }))
+            })), balance >= purchaseAmount && jsx(ButtonGroup, Object.assign({
+              justify: "end"
+            }, {
+              children: jsx(Button, Object.assign({
+                onClick: () => setIsAddFundsFormOpen(false),
+                variant: ButtonVariant.TEXT
+              }, {
+                children: t("actions.cancel")
+              }))
+            }))]
+          })), jsx(Spacer, {
+            multiplier: 2
+          }), renderActionButtons(addFundsForm)]
+        });
+      }
+    })) : renderActionButtons()]
   }));
 };
 
+const styles$1 = createStyles({
+  fundAndPurchase: theme => ({
+    borderTop: `1px solid ${theme.palette.gray.ultraLight}`
+  }),
+  ratesInterstitial: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    textAlign: "center"
+  },
+  showMoreOrLessRatesButton: {
+    alignItems: "center",
+    display: "flex"
+  }
+});
+
 const rateSchema = z.object({
   rate: z.object({
     isAcknowledged: z.boolean().refine(v => v === true, "purchase-label:schemaErrors.needToAcknowledge"),
@@ -27201,7 +27394,7 @@ const RateForm = ({
   }, features !== null && features !== void 0 ? features : {});
   const {
     t
-  } = useTranslation(["common", "purchase-label"]);
+  } = useTranslation();
   const rateFormScrollToRef = useRef(null);
   const [showHiddenRates, setShowHiddenRates] = useState(false);
   const form = useForm({
@@ -27214,16 +27407,13 @@ const RateForm = ({
     mode: "onChange",
     resolver: validationResolver(rateSchema)
   });
-  const {
-    isDirty
-  } = form.formState;
   const {
     rateId: selectedRateId
   } = form.watch("rate");
-  const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
+  const handleSubmit = formLogger.capture(form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
     const rateId = values;
     yield onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(rateId);
-  }));
+  })));
   const rateOptions = useRateOptions(rates, carriers, shipment, features.enableGlobalPostFiltering
   // TODO: LMNT-677: fix RecommendedRate logic
   // {
@@ -27245,13 +27435,10 @@ const RateForm = ({
   );
 
   const selectedRate = useMemo(() => rateOptions === null || rateOptions === void 0 ? void 0 : rateOptions.find(r => r.rateId === selectedRateId), [rateOptions, selectedRateId]);
-  const [isRateSaving, setIsRateSaving] = useState(false);
   const handleSaveRate = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
     const isValid = yield form.trigger();
     if (!isValid) return;
-    setIsRateSaving(true);
     if (selectedRate) yield onSave === null || onSave === void 0 ? void 0 : onSave(selectedRate);
-    setIsRateSaving(false);
     // sets the form to not be dirty, so that Save is disabled
     form.reset(form.getValues());
   }), [form, onSave, selectedRate]);
@@ -27280,15 +27467,6 @@ const RateForm = ({
       }, 0);
     }
   }, [form, rateOptions, errors === null || errors === void 0 ? void 0 : errors.length]);
-  const formatFundingAmount = selectedRate => {
-    var _a;
-    const totalRateAmount = getTotalRateAmount(selectedRate);
-    const walletBalance = (_a = selectedRate.balance) !== null && _a !== void 0 ? _a : 0;
-    return formatMoney({
-      amount: Math.max(totalRateAmount - walletBalance, 0),
-      currency: SE.Currency.USD
-    });
-  };
   return jsxs("form", Object.assign({
     id: "rate-form",
     onSubmit: handleSubmit,
@@ -27310,10 +27488,7 @@ const RateForm = ({
           onClick: onSelectRate,
           options: showHiddenRates ? rateOptions : filteredRateOptions
         }), rateOptions.some(option => option.requiresAcknowledgement) && rateOptions.length > 5 && jsx(Link, Object.assign({
-          css: {
-            alignItems: "center",
-            display: "flex"
-          },
+          css: styles$1.showMoreOrLessRatesButton,
           onClick: () => {
             var _a;
             setShowHiddenRates(!showHiddenRates);
@@ -27334,13 +27509,7 @@ const RateForm = ({
           }))
         }))]
       }) : !isLoading && errors && !!errors.length ? null : jsxs("article", Object.assign({
-        css: {
-          alignItems: "center",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center"
-        },
+        css: styles$1.ratesInterstitial,
         role: "presentation"
       }, {
         children: [jsx(Cube, {
@@ -27358,63 +27527,19 @@ const RateForm = ({
           }))]
         }))]
       })]
-    })), jsxs(BottomSheet, Object.assign({
-      alwaysVisible: true,
-      css: theme => ({
-        borderTop: `1px solid ${theme.palette.gray.ultraLight}`,
-        boxShadow: "none",
-        position: "static"
-      })
-    }, {
-      children: [typeof (selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.balance) === "number" && selectedRate.requiresFundedAmount && jsxs(Fragment, {
-        children: [jsx(Typography, Object.assign({
-          variant: "body1"
-        }, {
-          children: t("purchase-label:balance.currentBalance")
-        })), jsx(Typography, Object.assign({
-          color: selectedRate.balance < 0 ? "error.main" : undefined
-        }, {
-          children: ` ${formatMoney({
-            amount: selectedRate.balance,
-            currency: SE.Currency.USD
-          })}`
-        })), jsx(Spacer, {
-          multiplier: 2
-        })]
-      }), jsx("div", Object.assign({
-        "data-testid": "actions"
-      }, {
-        children: jsxs(ButtonGroup, Object.assign({
-          "data-testid": "actions"
-        }, {
-          children: [(features === null || features === void 0 ? void 0 : features.saveRate) && jsx(Button, Object.assign({
-            bold: false,
-            css: {
-              whiteSpace: "nowrap"
-            },
-            disabled: !isDirty || disabled,
-            isLoading: isRateSaving,
-            onClick: handleSaveRate,
-            variant: ButtonVariant.OUTLINED
-          }, {
-            children: t("purchase-label:actions.saveRate")
-          })), jsx(SubmitButton, Object.assign({
-            alwaysRequireValidity: true,
-            control: form.control,
-            "data-testid": "purchaseLabel",
-            disabled: !selectedRate || disabled,
-            form: "rate-form",
-            isFullWidth: true
-          }, {
-            children: (selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.balance) ? `${t("purchase-label:actions.purchaseNow")} - ${formatFundingAmount(selectedRate)}` : t("purchase-label:actions.purchaseNow")
-          }))]
-        }))
-      }))]
-    }))]
+    })), jsx(FundAndPurchase, {
+      carrierId: selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.carrierId,
+      css: styles$1.fundAndPurchase,
+      disabled: disabled,
+      isFundingRequired: (selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.balance) !== undefined && !!selectedRate.requiresFundedAmount,
+      onPurchase: handleSubmit,
+      onSave: handleSaveRate,
+      purchaseAmount: getTotalRateAmount(selectedRate)
+    })]
   }));
 };
 
-const SalesOrder$1 = ({
+const SuspendSalesOrder = ({
   children,
   errors,
   isLoading,
@@ -27459,17 +27584,20 @@ const getTableWrapperStyles = theme => /*#__PURE__*/css$1({
   }
 }, process.env.NODE_ENV === "production" ? "" : ";label:getTableWrapperStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIml0ZW1zLWJyZWFrZG93bi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dEIiwiZmlsZSI6Iml0ZW1zLWJyZWFrZG93bi5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcclxuZXhwb3J0IGNvbnN0IGdldE51bWVyaWNDZWxsU3R5bGUgPSAodGhlbWUpID0+IGNzcyh7XHJcbiAgICB0ZXh0QWxpZ246IFwicmlnaHRcIixcclxuICAgIHdpZHRoOiBcIjEwMHB4XCIsXHJcbn0pO1xyXG5leHBvcnQgY29uc3QgZ2V0VGFibGVXcmFwcGVyU3R5bGVzID0gKHRoZW1lKSA9PiBjc3Moe1xyXG4gICAgXCImJiA+IGRpdlwiOiB7XHJcbiAgICAgICAgYm94U2hhZG93OiBcIm5vbmVcIixcclxuICAgIH0sXHJcbiAgICBcIiYmID4gZGl2IHRhYmxlIHRoZWFkIHRoXCI6IHtcclxuICAgICAgICBmb250U3R5bGU6IFwiaXRhbGljXCIsXHJcbiAgICAgICAgZm9udFdlaWdodDogdGhlbWUudHlwb2dyYXBoeS5mb250V2VpZ2h0Lm5vcm1hbCxcclxuICAgIH0sXHJcbn0pO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1pdGVtcy1icmVha2Rvd24uc3R5bGVzLmpzLm1hcCJdfQ== */");
 
-const ItemsBreakdownTableHeader = () => jsx(TableHeader, {
+const ItemsBreakdownTableHeader = ({
+  hasValue,
+  hasTotal
+}) => jsx(TableHeader, {
   children: jsxs(TableBaseRow, {
     children: [jsx(TableHeaderCell, {}), jsx(TableHeaderCell, Object.assign({
       css: getNumericCellStyle
     }, {
       children: "Qty"
-    })), jsx(TableHeaderCell, Object.assign({
+    })), hasValue && jsx(TableHeaderCell, Object.assign({
       css: getNumericCellStyle
     }, {
       children: "$/ea"
-    })), jsx(TableHeaderCell, Object.assign({
+    })), hasTotal && jsx(TableHeaderCell, Object.assign({
       css: getNumericCellStyle
     }, {
       children: "$ Total"
@@ -27479,11 +27607,16 @@ const ItemsBreakdownTableHeader = () => jsx(TableHeader, {
 const ItemsBreakdown = ({
   items
 }) => {
+  const hasValue = items.some(item => item.value !== undefined);
+  const hasTotal = items.some(item => item.totalValue !== undefined);
   return jsx("div", Object.assign({
     css: getTableWrapperStyles
   }, {
     children: jsx(Table, Object.assign({
-      header: jsx(ItemsBreakdownTableHeader, {})
+      header: jsx(ItemsBreakdownTableHeader, {
+        hasTotal: hasTotal,
+        hasValue: hasValue
+      })
     }, {
       children: jsx(TableBody, {
         children: items.map(({
@@ -27503,11 +27636,11 @@ const ItemsBreakdown = ({
             css: getNumericCellStyle
           }, {
             children: quantity
-          })), jsx(TableBodyCell, Object.assign({
+          })), hasValue && jsx(TableBodyCell, Object.assign({
             css: getNumericCellStyle
           }, {
-            children: formatMoney(value)
-          })), jsx(TableBodyCell, Object.assign({
+            children: value && formatMoney(value)
+          })), hasTotal && jsx(TableBodyCell, Object.assign({
             css: getNumericCellStyle
           }, {
             children: totalValue && formatMoney(totalValue)
@@ -27920,7 +28053,7 @@ const ShipmentForm = ({
   warehouseId,
   warehouses
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   features = Object.assign({
     browseRates: true,
     includeShipsuranceInsurance: true,
@@ -28093,8 +28226,8 @@ const ShipmentForm = ({
     }
   }, [form]);
   const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
-    const _e = values,
-      payload = __rest(_e, ["__mode"]);
+    const _f = values,
+      payload = __rest(_f, ["__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
@@ -28208,6 +28341,10 @@ const ShipmentForm = ({
     } = form.getValues();
     form.setValue("__mode", (features === null || features === void 0 ? void 0 : features.selectService) ? __mode : "browse_rates");
   }, [form, features === null || features === void 0 ? void 0 : features.selectService]);
+  const salesOrderItems = useMemo(() => getSalesOrderItemsFromSalesOrderOrShipment({
+    salesOrder,
+    shipment
+  }), [salesOrder, shipment]);
   if (isLoading) return jsx(Loader, {
     message: t("loading.shipment")
   });
@@ -28270,7 +28407,7 @@ const ShipmentForm = ({
       }), jsx(Spacer, {
         displayOn: isEditShipFormToOpen ? "tablet" : undefined,
         multiplier: 2
-      }), editShipToForm, jsxs(FieldLabel, Object.assign({
+      }), editShipToForm, (salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.orderDate) && jsxs(FieldLabel, Object.assign({
         label: t("purchase-label:fields.orderDate")
       }, {
         children: [jsx(Typography, Object.assign({
@@ -28278,7 +28415,7 @@ const ShipmentForm = ({
         }, {
           children: formatDate(salesOrder.orderDate)
         })), jsx(Spacer, {})]
-      })), jsxs(FieldLabel, Object.assign({
+      })), ((_b = salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.paymentDetails) === null || _b === void 0 ? void 0 : _b.grandTotal) && jsxs(FieldLabel, Object.assign({
         label: t("purchase-label:fields.orderValue")
       }, {
         children: [jsx(Typography, Object.assign({
@@ -28294,7 +28431,7 @@ const ShipmentForm = ({
         }, {
           children: requestedServices.length > 1 ? t("purchase-label:multipleShippingServices") : requestedServices[0].toString()
         })), jsx(Spacer, {})]
-      })), salesOrder.paymentDetails.estimatedShipping.amount > 0 && jsxs(FieldLabel, Object.assign({
+      })), salesOrder && salesOrder.paymentDetails.estimatedShipping.amount > 0 && jsxs(FieldLabel, Object.assign({
         label: t("purchase-label:fields.estimatedShipping")
       }, {
         children: [jsx(Typography, Object.assign({
@@ -28302,7 +28439,7 @@ const ShipmentForm = ({
         }, {
           children: formatMoney(salesOrder.paymentDetails.estimatedShipping)
         })), jsx(Spacer, {})]
-      })), salesOrder && salesOrder.salesOrderItems.length > 0 && jsx(FieldLabel, Object.assign({
+      })), salesOrderItems.length > 0 && jsx(FieldLabel, Object.assign({
         label: t("purchase-label:fields.items")
       }, {
         children: jsxs("div", Object.assign({
@@ -28314,7 +28451,7 @@ const ShipmentForm = ({
           children: [jsx(Typography, Object.assign({
             variant: "body2"
           }, {
-            children: salesOrder.salesOrderItems.reduce((total, i) => i.quantity + total, 0).toString()
+            children: salesOrderItems.length.toString()
           })), jsxs(Link, Object.assign({
             css: theme => ({
               alignItems: "center",
@@ -28333,15 +28470,7 @@ const ShipmentForm = ({
           }))]
         }))
       })), showItems && jsx(ItemsBreakdown, {
-        items: salesOrder.salesOrderItems.map(item => ({
-          detail: `SKU ${item.lineItemDetails.sku}`,
-          name: item.lineItemDetails.name,
-          quantity: item.quantity,
-          subDetail: item.requestedShippingOptions.shippingService,
-          subDetailValue: item.priceSummary.estimatedShipping,
-          totalValue: item.priceSummary.total,
-          value: item.priceSummary.unitPrice
-        }))
+        items: salesOrderItems
       })]
     })), jsx("div", {
       ref: customsItemErrorScrollToRef
@@ -28365,7 +28494,7 @@ const ShipmentForm = ({
       }), jsx(CustomsItemsDisplay, {
         onUpdate: handleUpdateCustomsItems,
         shipment: shipment
-      }), ((_b = customsErrors === null || customsErrors === void 0 ? void 0 : customsErrors.customsItems) === null || _b === void 0 ? void 0 : _b.type) === "too_small" && jsxs(Fragment, {
+      }), ((_c = customsErrors === null || customsErrors === void 0 ? void 0 : customsErrors.customsItems) === null || _c === void 0 ? void 0 : _c.type) === "too_small" && jsxs(Fragment, {
         children: [jsx(Spacer, {}), jsx(InlineNotification, {
           title: t("purchase-label:errorMessages.customsItemsRequired"),
           type: NotificationType.ERROR
@@ -28525,7 +28654,7 @@ const ShipmentForm = ({
         label: "purchase-label:fields.addOns"
       }, {
         children: [jsx(Switch, Object.assign({
-          defaultChecked: ((_c = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _c !== void 0 ? _c : "none") !== "none",
+          defaultChecked: ((_d = shipment === null || shipment === void 0 ? void 0 : shipment.confirmation) !== null && _d !== void 0 ? _d : "none") !== "none",
           label: t("purchase-label:fields.confirmation"),
           name: "confirmationEnabled",
           shouldUnmount: true,
@@ -28541,7 +28670,7 @@ const ShipmentForm = ({
             shouldUnregister: true
           })
         })), jsxs(Switch, Object.assign({
-          defaultChecked: ((_d = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _d !== void 0 ? _d : "none") !== "none",
+          defaultChecked: ((_e = shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) !== null && _e !== void 0 ? _e : "none") !== "none",
           label: t("purchase-label:fields.insurance"),
           name: "insuranceEnabled",
           onChange: () => setInsuranceEnabled(true),
@@ -28830,6 +28959,30 @@ const Shipment$1 = ({
   });
 };
 
+const SuspendShipment = ({
+  children,
+  errors,
+  isLoading,
+  shipment
+}) => {
+  const {
+    t
+  } = useTranslation(["common", "purchase-label"]);
+  if (isLoading) return jsx(Loader, {
+    message: t("loading.shipment")
+  });
+  if (errors) throw new Error(errors.map(e => e.message).join(", "));
+  if (!shipment) throw new Error("errorMessages.unableToLoad.shipment");
+  return jsx("div", Object.assign({
+    css: {
+      height: "100%",
+      width: "100%"
+    }
+  }, {
+    children: children
+  }));
+};
+
 const VoidLabel$1 = ({
   onComplete,
   onSubmit,
@@ -28960,26 +29113,155 @@ var index$1 = /*#__PURE__*/Object.freeze({
 	CarrierTermsForm: CarrierTermsForm,
 	CustomsItemForm: CustomsItemForm,
 	getCustomsItemFormSchema: getCustomsItemFormSchema,
-	FundingMethods: FundingMethods,
 	Label: Label,
 	LandingPage: LandingPage,
 	ListCarriers: ListCarriers$1,
 	ManageWarehouses: ManageWarehouses$1,
 	Onboarding: Onboarding$1,
 	RateForm: RateForm,
-	SalesOrder: SalesOrder$1,
+	SuspendSalesOrder: SuspendSalesOrder,
 	ShipmentForm: ShipmentForm,
 	schedulePickupForCarrier: schedulePickupForCarrier,
 	Shipment: Shipment$1,
+	SuspendShipment: SuspendShipment,
 	WarehouseForm: WarehouseForm,
 	VoidLabel: VoidLabel$1,
 	WalletForm: WalletForm,
-	styles: styles$1,
+	styles: styles$3,
 	billingAddressSchema: billingAddressSchema,
 	walletSchema: walletSchema,
 	BillingFields: BillingFields
 });
 
+const styles = createStyles({
+  form: theme => ({
+    backgroundColor: theme.palette.gray.megaLight,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(2),
+    padding: theme.spacing(2)
+  })
+});
+
+const autoFundingSchema = z.object({
+  isEnabled: z.boolean(),
+  lowBalancePurchaseThreshold: moneySchema.extend({
+    amount: z.number().min(25)
+  }),
+  maximumPurchasesPerDay: z.number().min(1),
+  purchaseAmount: moneySchema.extend({
+    amount: z.number().min(10).max(10000)
+  })
+});
+
+/**
+ * This form that allows users to enable or disable auto funding, and
+ * configure auto funding settings in ShipEngine API.
+ */
+const AutoFundingForm = ({
+  carrierId
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const updateAutoFunding = useUpdateAutoFunding(carrierId);
+  const autoFundingConfiguration = useGetAutoFundingConfiguration();
+  const form = useForm({
+    // TODO - [LMNT-663] We should probably make a hydration effect for autoFundingConfiguration.data
+    defaultValues: autoFundingConfiguration.data,
+    resolver: validationResolver(autoFundingSchema)
+  });
+  const {
+    isDirty
+  } = form.formState;
+  const watchIsEnabled = form.watch("isEnabled");
+  const handleSubmit = formLogger.capture(form.handleSubmit(values => {
+    const payload = values;
+    updateAutoFunding.mutate(payload, {
+      onSuccess: () => autoFundingConfiguration.refetch()
+    });
+  }));
+  const handleToggle = isEnabled => {
+    form.reset(values => Object.assign(Object.assign({}, values), {
+      isEnabled
+    }));
+    if (autoFundingConfiguration.data) {
+      updateAutoFunding.mutate(Object.assign(Object.assign({}, autoFundingConfiguration.data), {
+        isEnabled
+      }), {
+        onSuccess: x => autoFundingConfiguration.refetch()
+      });
+    } else {
+      // TODO - [LMNT-663] Should this throw?
+      logger.error("Toggling auto-funding failed because autoFundingData is undefined.");
+    }
+  };
+  if (autoFundingConfiguration.isLoading) return jsx(Loader, {
+    message: t("manage-funding:autoFunding.isLoading")
+  });
+  return jsxs(Fragment, {
+    children: [jsx(Switch, {
+      defaultChecked: false,
+      // defaultChecked={autoFundingConfiguration.data?.isEnabled}
+      label: t("manage-funding:autoFunding.addFundsAutomatically"),
+      name: "isEnabled",
+      onChange: e => handleToggle(e.target.checked),
+      value: true
+    }), watchIsEnabled && jsxs("form", Object.assign({
+      css: styles.form,
+      id: "auto-funding-form",
+      onSubmit: handleSubmit
+    }, {
+      children: [jsx(MoneyInput, {
+        control: form.control,
+        disabled: !watchIsEnabled,
+        label: t("manage-funding:autoFunding.purchaseAmount"),
+        name: "purchaseAmount",
+        showCurrencySymbol: true
+      }), jsx(MoneyInput, {
+        control: form.control,
+        disabled: !watchIsEnabled,
+        label: t("manage-funding:autoFunding.lowBalancePurchaseThreshold"),
+        name: "lowBalancePurchaseThreshold",
+        showCurrencySymbol: true
+      }), jsx(NumberInput, {
+        control: form.control,
+        disabled: !watchIsEnabled,
+        isInteger: true,
+        label: t("manage-funding:autoFunding.maximumPurchasesPerDay"),
+        name: "maximumPurchasesPerDay"
+      }), jsxs(ButtonGroup, Object.assign({
+        justify: "end"
+      }, {
+        children: [jsx(Button, Object.assign({
+          disabled: !isDirty,
+          onClick: () => form.reset(),
+          variant: ButtonVariant.TEXT
+        }, {
+          children: t("actions.cancel")
+        })), jsx(SubmitButton, Object.assign({
+          control: form.control,
+          "data-testid": "submit-auto-funding",
+          disabled: !watchIsEnabled,
+          requireDirty: true,
+          variant: ButtonVariant.OUTLINED
+        }, {
+          children: t("manage-funding:actions.saveRule")
+        }))]
+      }))]
+    })), autoFundingConfiguration.error && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 1
+      }), jsx(InlineNotification, Object.assign({
+        title: t("manage-funding:autoFunding.error.title"),
+        type: NotificationType.ERROR
+      }, {
+        children: autoFundingConfiguration.error[0].message
+      }))]
+    })]
+  });
+};
+
 /**
  * Captures errors thrown within an Element, logs them and displays a fallback component
  *
@@ -29043,49 +29325,82 @@ class ErrorBoundary extends React.Component {
   }
 }
 
+const ManageFunding = ({
+  carrierId
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    isLoading: isLoadingCarrier
+  } = useGetCarrierById(carrierId);
+  const [isAddFundsFormOpen, setIsAddFundsFormOpen] = useState(false);
+  if (isLoadingCarrier) return jsx(Loader, {
+    message: t("loading.carrier")
+  });
+  return jsxs("section", {
+    children: [jsxs(Spread, {
+      children: [jsx(CarrierBalance, {
+        carrierId: carrierId
+      }), jsx(LinkAction, {
+        icon: "add",
+        isDisabled: isAddFundsFormOpen,
+        onClick: () => setIsAddFundsFormOpen(true),
+        title: t("manage-funding:actions.addFunds")
+      })]
+    }), isAddFundsFormOpen && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 2
+      }), jsx(AddFundsForm, {
+        carrierId: carrierId,
+        onCancel: () => setIsAddFundsFormOpen(false)
+      })]
+    }), jsx(Spacer, {
+      multiplier: 2
+    })]
+  });
+};
+
 /**
- * A drop-in replacement for the `<form>` tag that allows nested forms.
+ * For relevant notes about Storybook stories
  *
- * Via portals, the <form> tag is mounted as a sibling of the app root. The form's
- * interface is then mounted back at the point of use.
+ * Stopgap until we setup https://storybook.js.org/addons/@storybook/addon-docs
  */
-const FormPortal = ({
-  css,
+const StoryNotes = ({
   children,
-  id,
-  onSubmit,
-  variant
-}) => {
-  const rootTarget = useRootPortal();
-  const [interfaceTarget, setInterfaceTarget] = useState(null);
-  const onMountInterfaceTarget = useCallback(element => {
-    if (element) setInterfaceTarget(element);
-  }, []);
-  const formStyle = [variant === "well" && (theme => ({
-    backgroundColor: theme.palette.gray.megaLight,
-    padding: theme.spacing(2)
-  })), css];
-  return jsxs(Fragment, {
-    children: [jsx(Portal, Object.assign({
-      target: rootTarget
+  notes
+}) => jsxs(Fragment, {
+  children: [jsxs("div", Object.assign({
+    css: () => ({
+      backgroundColor: "lightsteelblue",
+      marginBottom: "16px",
+      padding: "16px",
+      paddingLeft: "32px"
+    })
+  }, {
+    children: [jsx(Typography, Object.assign({
+      variant: "heading5"
     }, {
-      children: jsx("form", Object.assign({
-        id: id,
-        onSubmit: onSubmit
-      }, {
-        children: jsx(Portal, Object.assign({
-          target: interfaceTarget
-        }, {
-          children: children
-        }))
-      }))
-    })), jsx("section", {
-      css: formStyle,
-      id: id + "-interface",
-      ref: onMountInterfaceTarget
-    })]
-  });
-};
+      children: "Story notes:"
+    })), jsx("ul", Object.assign({
+      css: theme => ({
+        "> li": {
+          marginTop: theme.spacing(1)
+        }
+      })
+    }, {
+      children: notes.map(n => jsx("li", {
+        children: n
+      }, n))
+    }))]
+  })), jsx("hr", {
+    css: () => ({
+      backgroundColor: "transparent",
+      borderTop: "1px dotted lightgrey",
+      marginBottom: "16px"
+    })
+  }), children]
+});
 
 var $$2 = _export;
 var uncurryThis = functionUncurryThisClause;
@@ -30092,6 +30407,7 @@ var common = {
 		invalidNameOrCompany: "Recipient name and company name (if provided) must have two characters in first and last name.",
 		noWarehouses: "You must have an active warehouse in order to use this feature",
 		unableToLoad: {
+			carrier: "Unable to load carrier",
 			carriers: "Unable to load carriers",
 			salesOrder: "Unable to load order",
 			shipment: "Unable to load shipment",
@@ -30118,6 +30434,7 @@ var common = {
 		thirdParty: "Third Party"
 	},
 	loading: {
+		carrier: "Loading carrier...",
 		carriers: "Loading carriers...",
 		data: "Loading...",
 		importingSalesOrder: "Importing order...",
@@ -30214,11 +30531,11 @@ var listCarriers = {
 var manageFunding = {
 	"manage-funding": {
 	actions: {
+		addFunds: "Add Funds",
+		addFundsAndPurchase: "Add Funds & Purchase",
 		addNow: "Add Now",
-		saveRule: "Save Rule",
-		other: "Other..."
+		saveRule: "Save Rule"
 	},
-	addFunds: "Add Funds",
 	autoFunding: {
 		addFundsAutomatically: "Add Funds Automatically",
 		error: {
@@ -30231,20 +30548,31 @@ var manageFunding = {
 		maximumPurchasesPerDay: "Maximum Purchases Per Day",
 		purchaseAmount: "Purchase Amount"
 	},
-	currentBalance: "Current Balance: ",
-	otp: {
+	addFunds: {
+		custom: "Custom...",
 		error: {
 			title: "Manual-Funding Error",
 			message: "An error occurred while trying add funds to your ShipEngine wallet."
 		},
 		isLoading: "Adding funds to your ShipEngine wallet...",
 		labels: {
-			amount: "Amount",
-			currentBalance: "Current Balance",
-			resultingBalance: "Resulting Balance"
+			amount: "Amount"
 		},
 		minimumPurchaseAmount: "Minimum Purchase $10.00"
 	},
+	fundAndPurchase: {
+		finalBalance: "Final balance after payment:",
+		insufficientFunds: "Add funds below to purchase label.",
+		insufficientFundsTitle: "Not enough money in your account",
+		negativeBalance: "You will be charged this amount in addition to the label cost.",
+		negativeBalanceTitle: "Negative balance (due to adjustments)",
+		newBalance: "New balance after adding funds:"
+	},
+	errors: {
+		balanceUnknown: "Unknown",
+		unableToFindBalance: "There was a problem retrieving your balance. Please try again later."
+	},
+	currentBalance: "Current balance:",
 	maximumBalanceAmount: "Balance may not exceed $10,000.00"
 }
 };
@@ -30762,7 +31090,75 @@ const ListCarriers = () => {
   });
 };
 
-const Element$6 = registerElement("list-carriers", ListCarriers);
+const Element$5 = registerElement("list-carriers", ListCarriers);
+
+const ManageWarehouses = () => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    data: warehouses,
+    error: listWarehouseErrors,
+    isLoading: isLoadingWarehouses,
+    refetch: refreshListWarehouses
+  } = useListWarehouses();
+  const {
+    error: updateWarehouseErrors,
+    mutateAsync: updateWarehouse
+  } = useUpdateWarehouse();
+  const {
+    error: createWarehouseErrors,
+    mutateAsync: createWarehouse
+  } = useCreateWarehouse();
+  const {
+    error: deleteWarehouseErrors,
+    mutateAsync: deleteWarehouse
+  } = useDeleteWarehouse();
+  const handleDeleteWarehouse = warehouseId => __awaiter(void 0, void 0, void 0, function* () {
+    yield deleteWarehouse({
+      warehouseId
+    });
+    void refreshListWarehouses();
+  });
+  const handleSubmitAddNewWarehouse = payload => __awaiter(void 0, void 0, void 0, function* () {
+    const result = yield createWarehouse(payload);
+    if (result) void refreshListWarehouses();
+  });
+  const handleSubmitEditWarehouse = (payload, warehouseId) => __awaiter(void 0, void 0, void 0, function* () {
+    yield updateWarehouse({
+      name: payload.name,
+      originAddress: payload.originAddress,
+      returnAddress: payload.returnAddress,
+      warehouseId: warehouseId
+    });
+    void refreshListWarehouses();
+  });
+  const handleSetDefault = (payload, warehouseId) => __awaiter(void 0, void 0, void 0, function* () {
+    yield updateWarehouse(Object.assign(Object.assign({}, payload), {
+      isDefault: true,
+      warehouseId
+    }));
+    void refreshListWarehouses();
+  });
+  if (isLoadingWarehouses) return jsx(Loader, {
+    message: t("loading.warehouses")
+  });
+  if (!warehouses) {
+    if (listWarehouseErrors) throw new Error(listWarehouseErrors.map(e => e.message).join(", "));
+    throw new Error("errorMessages.unableToLoad.warehouses");
+  }
+  const errors = [...(updateWarehouseErrors !== null && updateWarehouseErrors !== void 0 ? updateWarehouseErrors : []), ...(createWarehouseErrors !== null && createWarehouseErrors !== void 0 ? createWarehouseErrors : []), ...(deleteWarehouseErrors !== null && deleteWarehouseErrors !== void 0 ? deleteWarehouseErrors : [])];
+  return jsx(ManageWarehouses$1, {
+    errors: errors,
+    onAdd: handleSubmitAddNewWarehouse,
+    onDelete: handleDeleteWarehouse,
+    onEdit: handleSubmitEditWarehouse,
+    onSetDefault: handleSetDefault,
+    warehouses: warehouses
+  });
+};
+
+const Element$4 = registerElement("manage-warehouses", ManageWarehouses);
 
 const useAddress = ({
   compatibleCountryCodes,
@@ -30888,7 +31284,7 @@ const useAddress = ({
   }), [handleValidateAddress, onChange, shipment, updateShipment]);
   useEffect(() => {
     if (!addressPreference && (shipment === null || shipment === void 0 ? void 0 : shipment.shipTo)) {
-      handleValidateAddress(shipment === null || shipment === void 0 ? void 0 : shipment.shipTo, salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.shipTo);
+      void handleValidateAddress(shipment === null || shipment === void 0 ? void 0 : shipment.shipTo, salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.shipTo);
     }
   }, [addressPreference, handleValidateAddress, salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.shipTo, shipment === null || shipment === void 0 ? void 0 : shipment.shipTo]);
   const charsetWarning = useMemo(() => Object.keys((addressPreference === null || addressPreference === void 0 ? void 0 : addressPreference.selection) || {}).reduce((warning, key) => {
@@ -31368,135 +31764,6 @@ const ConfigureShipment = _a => {
   });
 };
 
-const ManageFunding = ({
-  carrierId,
-  fundingMethod,
-  requiredAmount
-}) => {
-  // const { data: carriersData, loading, error } = useListCarriers();
-  var _a, _b;
-  const {
-    data: addFundsData,
-    error: addFundsErrors,
-    mutateAsync: addFunds,
-    isLoading: isAddFundsLoading,
-    reset: addFundsRefresh
-  } = useAddFunds();
-  const {
-    data: autoFundingData,
-    error: autoFundingErrors,
-    isLoading: isAutoFundingLoading,
-    refetch: refreshAutoFundingConfiguration
-  } = useGetAutoFundingConfiguration();
-  const {
-    mutateAsync: configureAutoFunding
-  } = useUpdateAutoFunding();
-  const handleSubmitManualFunding = payload => __awaiter(void 0, void 0, void 0, function* () {
-    const result = yield addFunds({
-      amount: payload.funds,
-      carrierId
-    });
-    if (result) void addFundsRefresh();
-  });
-  const handleSubmitAutoFunding = payload => __awaiter(void 0, void 0, void 0, function* () {
-    const result = yield configureAutoFunding(Object.assign({
-      carrierId
-    }, payload));
-    if (result) void refreshAutoFundingConfiguration();
-  });
-  const handleToggleAutoFunding = isEnabled => __awaiter(void 0, void 0, void 0, function* () {
-    if (autoFundingData) {
-      const result = yield configureAutoFunding(Object.assign(Object.assign({}, autoFundingData), {
-        carrierId,
-        isEnabled
-      }));
-      if (result) void refreshAutoFundingConfiguration();
-    } else {
-      console.error("Toggling auto-funding failed because autoFundingData is undefined.");
-    }
-  });
-  return jsx(FundingMethods, {
-    autoFundingData: autoFundingData,
-    autoFundingErrorMessage: autoFundingErrors ? (_a = autoFundingErrors[0]) === null || _a === void 0 ? void 0 : _a.message : undefined,
-    fundingMethod: fundingMethod !== null && fundingMethod !== void 0 ? fundingMethod : "both",
-    hasAutoFundingError: !!(autoFundingErrors === null || autoFundingErrors === void 0 ? void 0 : autoFundingErrors.length),
-    hasManualFundingError: !!(addFundsErrors === null || addFundsErrors === void 0 ? void 0 : addFundsErrors.length),
-    isAutoFundingLoading: isAutoFundingLoading,
-    isManualFundingLoading: isAddFundsLoading,
-    manualFundingCurrentBalance: (_b = addFundsData === null || addFundsData === void 0 ? void 0 : addFundsData.balance.amount) !== null && _b !== void 0 ? _b : 0,
-    manualFundingRequiredAmount: requiredAmount,
-    onSubmitAutoFunding: handleSubmitAutoFunding,
-    onSubmitManualFunding: handleSubmitManualFunding,
-    onToggleAutoFunding: handleToggleAutoFunding
-  });
-};
-
-const ManageWarehouses = () => {
-  const {
-    t
-  } = useTranslation();
-  const {
-    data: warehouses,
-    error: listWarehouseErrors,
-    isLoading: isLoadingWarehouses,
-    refetch: refreshListWarehouses
-  } = useListWarehouses();
-  const {
-    error: updateWarehouseErrors,
-    mutateAsync: updateWarehouse
-  } = useUpdateWarehouse();
-  const {
-    error: createWarehouseErrors,
-    mutateAsync: createWarehouse
-  } = useCreateWarehouse();
-  const {
-    error: deleteWarehouseErrors,
-    mutateAsync: deleteWarehouse
-  } = useDeleteWarehouse();
-  const handleDeleteWarehouse = warehouseId => __awaiter(void 0, void 0, void 0, function* () {
-    yield deleteWarehouse({
-      warehouseId
-    });
-    void refreshListWarehouses();
-  });
-  const handleSubmitAddNewWarehouse = payload => __awaiter(void 0, void 0, void 0, function* () {
-    const result = yield createWarehouse(payload);
-    if (result) void refreshListWarehouses();
-  });
-  const handleSubmitEditWarehouse = (payload, warehouseId) => __awaiter(void 0, void 0, void 0, function* () {
-    yield updateWarehouse({
-      name: payload.name,
-      originAddress: payload.originAddress,
-      returnAddress: payload.returnAddress,
-      warehouseId: warehouseId
-    });
-    void refreshListWarehouses();
-  });
-  const handleSetDefault = (payload, warehouseId) => __awaiter(void 0, void 0, void 0, function* () {
-    yield updateWarehouse(Object.assign(Object.assign({}, payload), {
-      isDefault: true,
-      warehouseId
-    }));
-    void refreshListWarehouses();
-  });
-  if (isLoadingWarehouses) return jsx(Loader, {
-    message: t("loading.warehouses")
-  });
-  if (!warehouses) {
-    if (listWarehouseErrors) throw new Error(listWarehouseErrors.map(e => e.message).join(", "));
-    throw new Error("errorMessages.unableToLoad.warehouses");
-  }
-  const errors = [...(updateWarehouseErrors !== null && updateWarehouseErrors !== void 0 ? updateWarehouseErrors : []), ...(createWarehouseErrors !== null && createWarehouseErrors !== void 0 ? createWarehouseErrors : []), ...(deleteWarehouseErrors !== null && deleteWarehouseErrors !== void 0 ? deleteWarehouseErrors : [])];
-  return jsx(ManageWarehouses$1, {
-    errors: errors,
-    onAdd: handleSubmitAddNewWarehouse,
-    onDelete: handleDeleteWarehouse,
-    onEdit: handleSubmitEditWarehouse,
-    onSetDefault: handleSetDefault,
-    warehouses: warehouses
-  });
-};
-
 const Onboarding = ({
   onCompleteOnboarding
 }) => {
@@ -31629,7 +31896,8 @@ const useConfigureShipment = ({
   onLoad,
   onShipmentUpdated,
   salesOrder,
-  warehouseId
+  warehouseId,
+  printLabelLayout
 }) => {
   var _a, _b;
   const {
@@ -31646,12 +31914,12 @@ const useConfigureShipment = ({
     yield reloadPendingShipment();
     yield onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(shipment);
   }), [onShipmentUpdated, reloadPendingShipment]);
-  const printLabelLayout = (_b = (_a = useGetAccountSettings().data) === null || _a === void 0 ? void 0 : _a.defaultLabelLayout) !== null && _b !== void 0 ? _b : "4x6";
+  const labelLayoutSetting = (_b = (_a = useGetAccountSettings().data) === null || _a === void 0 ? void 0 : _a.defaultLabelLayout) !== null && _b !== void 0 ? _b : "4x6";
   return {
     errors: pendingShipmentErrors,
     isLoading: isPendingShipmentLoading,
     onShipmentUpdated: handleShipmentUpdated,
-    printLabelLayout,
+    printLabelLayout: printLabelLayout ? printLabelLayout : labelLayoutSetting,
     shipment: pendingShipment,
     warehouseId
   };
@@ -31710,7 +31978,7 @@ const useImportSalesOrder = ({
   };
 };
 
-const SalesOrder = _a => {
+const PurchaseLabelBySalesOrder = _a => {
   var {
       features,
       externalOrderId,
@@ -31740,7 +32008,7 @@ const SalesOrder = _a => {
     salesOrder,
     warehouseId
   });
-  return jsx(SalesOrder$1, Object.assign({
+  return jsx(SuspendSalesOrder, Object.assign({
     salesOrder: salesOrder
   }, salesOrderProps, {
     children: salesOrder && jsx(ConfigureShipment, Object.assign({
@@ -31750,6 +32018,79 @@ const SalesOrder = _a => {
   }));
 };
 
+const useLoadShipment = ({
+  shipmentId
+}) => {
+  const {
+    data: shipment,
+    error: loadShipmentErrors,
+    refetch: refetchShipment,
+    isLoading
+  } = useGetShipment(shipmentId);
+  const errors = [...(loadShipmentErrors !== null && loadShipmentErrors !== void 0 ? loadShipmentErrors : [])];
+  return {
+    errors: errors.length > 0 ? errors : undefined,
+    isLoading: isLoading,
+    refetchShipment,
+    shipment
+  };
+};
+
+const PurchaseLabelByShipment = _a => {
+  var {
+      shipmentId,
+      onLoad,
+      onShipmentUpdated,
+      features
+    } = _a,
+    props = __rest(_a, ["shipmentId", "onLoad", "onShipmentUpdated", "features"]);
+  const _b = useLoadShipment({
+      shipmentId
+    }),
+    {
+      shipment
+    } = _b,
+    shipmentProps = __rest(_b, ["shipment"]);
+  return jsx(SuspendShipment, Object.assign({
+    shipment: shipment
+  }, shipmentProps, {
+    children: shipment && jsx(ConfigureShipment, Object.assign({
+      errors: shipmentProps.errors,
+      features: features,
+      isLoading: shipmentProps.isLoading,
+      onAddressValidation: props.onAddressValidation,
+      onApplyPreset: props.onApplyPreset,
+      onBeforeLabelCreate: props.onBeforeLabelCreate,
+      onChangeAddress: props.onChangeAddress,
+      onChangeShipmentFormMode: props.onChangeShipmentFormMode,
+      onLabelCreateFailure: props.onLabelCreateFailure,
+      onLabelCreateSuccess: props.onLabelCreateSuccess,
+      onRateSaved: props.onRateSaved,
+      onRatesCalculated: props.onRatesCalculated,
+      onShipmentUpdated: onShipmentUpdated,
+      onToggleAddressPreferenceDisclosure: props.onToggleAddressPreferenceDisclosure,
+      printLabelLayout: props.printLabelLayout,
+      shipment: shipment,
+      shippingPresets: props.shippingPresets,
+      warehouseId: props.warehouseId
+    }, props))
+  }));
+};
+
+const PurchaseLabel = _a => {
+  var {
+      shipmentId
+    } = _a,
+    props = __rest(_a, ["shipmentId"]);
+  if (shipmentId) {
+    return jsx(PurchaseLabelByShipment, Object.assign({
+      shipmentId: shipmentId
+    }, props));
+  } else {
+    return jsx(PurchaseLabelBySalesOrder, Object.assign({}, props));
+  }
+};
+
 const Shipment = ({
   features,
   onClickPrintLabel,
@@ -31818,11 +32159,7 @@ const VoidLabel = ({
   });
 };
 
-const Element$5 = registerElement("manage-funding", ManageFunding);
-
-const Element$4 = registerElement("manage-warehouses", ManageWarehouses);
-
-const Element$3 = registerElement("purchase-label", SalesOrder);
+const Element$3 = registerElement("purchase-label", PurchaseLabel);
 
 const Element$2 = registerElement("onboarding", Onboarding);
 
@@ -32512,5 +32849,35 @@ const renderWithProviders = component => {
     })
   });
 };
+/**
+ * Wraps the test with all of the usual Shipengine / Giger / i18 / etc providers that a full, registered "Element" would have.
+ * This allows components to simulate usage in an Element via `decorators: [withAllProviders]`
+ **/
+const renderWithAllProviders = component => {
+  const theme = createTheme(BrandName.FALLBACK);
+  return render(component, {
+    wrapper: ({
+      children
+    }) => jsx(ShipEngineProvider, Object.assign({
+      baseURL: "/api",
+      getToken: () => {
+        var _a;
+        return (_a = process.env.STORYBOOK_TOKEN) !== null && _a !== void 0 ? _a : "none";
+      }
+    }, {
+      children: jsx(RootPortalProvider, {
+        children: jsx(GigerConfigProvider, Object.assign({
+          resolveIcon: name => `<svg>${name}</svg>`
+        }, {
+          children: jsx(ThemeProvider, Object.assign({
+            theme: deserialize(theme)
+          }, {
+            children: children
+          }))
+        }))
+      })
+    }))
+  });
+};
 
-export { Accordion, ButtonGroup, Country, Cube, ElementsContext, ElementsProvider, ErrorBoundary, ErrorFallback, fields as Field, FieldLabel, FormPortal, GigerProvider, ItemsBreakdown, Element$6 as ListCarriers, Loader, Element$5 as ManageFunding, Element$4 as ManageWarehouses, Element$2 as Onboarding, PageLayoutProvider, Portal, Element$3 as PurchaseLabel, RootPortalProvider, Spacer, index$1 as Templates, UsState, UsaCity, Element$1 as ViewShipment, Element as VoidLabel, addressFactory, addressPreferenceFactory, addressValidationFactory, calculateTotal, capitalizeFirstLetter, carrierFactory, carrierOptionFactory, convertDimensions, convertWeight, countries, countryCodes, createCodedErrors, createDictionary, createStyles, currencySymbol, customsItemFactory, daysAfter, downloadFactory, errorMap, euCountryCodes, extendZod, formLogger, formatCreditCardNumber, formatDate, formatFractionalWeight, formatMoney, fractionalWeightFactory, getCustomsFromSalesOrder, getExpirationYears, getIsCustomsRequiredForSalesOrder, getIsCustomsRequiredForShipment, getIsInternationalShipment, getPendingShipment, getRateRequiresAcknowledgement, getRequestedServices, getTotalRateAmount, isDomesticAddress, isFlatRatePackageCode, isMilitaryAddress, isNowOrInTheFuture, isPoBox, isPoBoxAddress, isString, isUnitedStatesTerritory, isUspsCarrier, labelFactory, linkedResourceFactory, moneyFactory, moneySchema, mostRecent, nextDayCutoff, omitTime, orderSourceFactory, orderSourceRefreshInfoFactory, packageFactory, phoneSchema, phoneSchemaUnvalidated, postalCodeRegex$3 as postalCodeRegex, randomDeliveryConfirmation, randomFulfillmentStatus, randomInsuranceProvider, randomOrderSourceCode, randomPaymentStatus, randomShipengineId, randomShipengineSlug, randomWeightUnit, registerElement, renderWithProviders, salesOrderFactory, salesOrderItemFactory, salesOrderShipmentFactory, serviceFactory, shipmentFactory, shipmentItemFactory, shipmentPackageFactory, sortByCreationDate, tristateValue, usCities, usStateCodes, usStates, useCarrierMetadata, useConfirmationOptions, useCountryCodeOptions, useCustomsContentsOptions, useCustomsNonDeliveryOptions, useElements, useExpirationMonthOptions, useInsuranceProviderOptions, useNestedForm, usePackageOptions, usePageLayout, useRateOptions, useRootPortal, useRunOnceOnTrue, useServiceCodeOptions, useShippingPresetsOptions, useStateCodeOptions, useToggle, useWarehouseOptions, validationResolver, warehouseFactory, weightFactory, weightWithUnitFactory };
+export { Accordion, AddFundsForm, AutoFundingForm, ButtonGroup, CarrierBalance, Country, Cube, ElementsContext, ElementsProvider, ErrorBoundary, ErrorFallback, fields as Field, FieldLabel, FormPortal, FundAndPurchase, GigerProvider, InlineLabel, ItemsBreakdown, LinkAction, Element$5 as ListCarriers, Loader, ManageFunding, Element$4 as ManageWarehouses, Element$2 as Onboarding, PageLayoutProvider, Portal, Element$3 as PurchaseLabel, RootPortalProvider, Spacer, Spread, StoryNotes, index$1 as Templates, UsState, UsaCity, Element$1 as ViewShipment, Element as VoidLabel, addressFactory, addressPreferenceFactory, addressValidationFactory, autoFundingSchema, calculateTotal, capitalizeFirstLetter, carrierFactory, carrierOptionFactory, convertDimensions, convertWeight, countries, countryCodes, createCodedErrors, createDictionary, createStyles, currencySymbol, customsItemFactory, daysAfter, downloadFactory, errorMap, euCountryCodes, extendZod, formLogger, formatCreditCardNumber, formatDate, formatFractionalWeight, formatMoney, fractionalWeightFactory, getAddFundsSchema, getCustomsFromSalesOrder, getExpirationYears, getIsCustomsRequiredForSalesOrder, getIsCustomsRequiredForShipment, getIsInternationalShipment, getPendingShipment, getRateRequiresAcknowledgement, getRequestedServices, getSalesOrderItemsFromSalesOrderOrShipment, getTotalRateAmount, isDomesticAddress, isFlatRatePackageCode, isMilitaryAddress, isNowOrInTheFuture, isPoBox, isPoBoxAddress, isString, isUnitedStatesTerritory, isUspsCarrier, labelFactory, linkedResourceFactory, moneyFactory, moneySchema, mostRecent, nextDayCutoff, omitTime, orderSourceFactory, orderSourceRefreshInfoFactory, packageFactory, phoneSchema, phoneSchemaUnvalidated, postalCodeRegex$3 as postalCodeRegex, randomDeliveryConfirmation, randomFulfillmentStatus, randomInsuranceProvider, randomOrderSourceCode, randomPaymentStatus, randomShipengineId, randomShipengineSlug, randomWeightUnit, registerElement, renderWithAllProviders, renderWithProviders, salesOrderFactory, salesOrderItemFactory, salesOrderShipmentFactory, serviceFactory, shipmentFactory, shipmentItemFactory, shipmentPackageFactory, sortByCreationDate, tristateValue, usCities, usStateCodes, usStates, useCarrierMetadata, useConfirmationOptions, useCountryCodeOptions, useCustomsContentsOptions, useCustomsNonDeliveryOptions, useElements, useExpirationMonthOptions, useInsuranceProviderOptions, useNestedForm, usePackageOptions, usePageLayout, useRateOptions, useRootPortal, useRunOnceOnTrue, useServiceCodeOptions, useShippingPresetsOptions, useStateCodeOptions, useToggle, useWarehouseOptions, validationResolver, warehouseFactory, weightFactory, weightWithUnitFactory };