@shipengine/elements 0.16.0 → 0.17.2

package/index.cjs

@@ -21,6 +21,7 @@ var reactDom = require('react-dom');
 var min$4 = require('libphonenumber-js/min');
 var cardValidator = require('card-validator');
 var jsBase64 = require('js-base64');
+var reactQuery = require('react-query');
 var stylis = require('stylis');
 var i18n = require('i18next');
 var languageDetector = require('i18next-browser-languagedetector');
@@ -2039,7 +2040,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;
 
@@ -2531,6 +2532,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;
 
@@ -3327,8 +3347,8 @@ const FieldLabel = ({
   }, {
     children: [label && jsxRuntime.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: [jsxRuntime.jsx(giger.Typography, Object.assign({
@@ -3361,6 +3381,7 @@ const createFieldController = (options = {}) => function FieldController(_a) {
       displayErrors = true,
       displayLabel = true,
       errors: errorsProp,
+      hint,
       inputOnly,
       isOptional,
       label,
@@ -3371,7 +3392,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
@@ -3447,6 +3468,9 @@ const createFieldController = (options = {}) => function FieldController(_a) {
       message: displayErrors && mergedErrorMessages.length > 0 ? {
         content: mergedErrorMessages.join(", "),
         type: giger.FieldMessageType.ERROR
+      } : hint ? {
+        content: hint,
+        type: giger.FieldMessageType.HINT
       } : undefined
     }, {
       children: input
@@ -22001,9 +22025,10 @@ const SubmitButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(func
       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,
@@ -22017,7 +22042,7 @@ const SubmitButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(func
     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, {
@@ -23148,7 +23173,7 @@ const AddressForm = ({
   }));
 };
 
-const styles$b = createStyles({
+const styles$a = createStyles({
   agreement: {
     alignItems: "center",
     display: "flex",
@@ -23218,10 +23243,10 @@ const DisplayCarrierTerms = c => {
   const listCarrierLinks = () => {
     return c.carrierTerms.links.map((term, index) => {
       return jsxRuntime.jsx("li", Object.assign({
-        css: styles$b.listItems
+        css: styles$a.listItems
       }, {
         children: jsxRuntime.jsx(giger.Link, Object.assign({
-          css: styles$b.link,
+          css: styles$a.link,
           href: term.url,
           isExternal: true,
           target: "_blank"
@@ -23237,18 +23262,18 @@ const DisplayCarrierTerms = c => {
   };
   const listCarrierTerms = () => {
     return jsxRuntime.jsxs("div", Object.assign({
-      css: styles$b.terms
+      css: styles$a.terms
     }, {
       children: [jsxRuntime.jsx(giger.Typography, Object.assign({
         variant: "subtitle1"
       }, {
         children: c.carrierTerms.title
       })), jsxRuntime.jsx("div", Object.assign({
-        css: styles$b.terms
+        css: styles$a.terms
       }, {
         children: listCarrierContent()
       })), jsxRuntime.jsx("ul", Object.assign({
-        css: styles$b.links
+        css: styles$a.links
       }, {
         children: listCarrierLinks()
       }))]
@@ -23478,7 +23503,7 @@ const AddressDisplay = ({
   }));
 };
 
-const styles$a = createStyles({
+const styles$9 = createStyles({
   container: theme => ({
     display: "flex",
     gap: theme.spacing()
@@ -23516,13 +23541,13 @@ const Disclosure = ({
   }, [open]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs("div", Object.assign({
-      css: styles$a.container
+      css: styles$9.container
     }, {
       children: [jsxRuntime.jsx("div", {
         children: label
       }), _showToggle && jsxRuntime.jsx("button", Object.assign({
         "aria-expanded": isOpen,
-        css: styles$a.toggle,
+        css: styles$9.toggle,
         onClick: () => {
           setIsOpen(!isOpen);
           onToggle(!isOpen);
@@ -23530,12 +23555,12 @@ const Disclosure = ({
         type: "button"
       }, {
         children: jsxRuntime.jsx(giger.Icon, {
-          css: styles$a.icon,
+          css: styles$9.icon,
           name: isOpen ? brands.IconNames.CHEVRON_TOP : brands.IconNames.CHEVRON_BOTTOM
         })
       }))]
     })), isOpen && jsxRuntime.jsx("div", Object.assign({
-      css: styles$a.content
+      css: styles$9.content
     }, {
       children: typeof children === "function" ? children(() => setIsOpen(!isOpen)) : children
     }))]
@@ -23675,7 +23700,7 @@ const getCarrierRecoverySchema = requiresAddress => zod.z.object({
   address: requiresAddress ? baseSchema : baseSchema.optional()
 });
 
-const styles$9 = createStyles({
+const styles$8 = createStyles({
   grid: theme => ({
     margin: theme.spacing(4)
   }),
@@ -23718,7 +23743,7 @@ const CarrierRecoveryForm = ({
     onSubmit: formLogger.capture(handleSubmit)
   }, {
     children: jsxRuntime.jsxs(giger.Grid, Object.assign({
-      css: styles$9.grid,
+      css: styles$8.grid,
       noPadding: true
     }, {
       children: [jsxRuntime.jsx(giger.GridChild, Object.assign({
@@ -23739,14 +23764,14 @@ const CarrierRecoveryForm = ({
           colSpan: 12
         }, {
           children: jsxRuntime.jsx(giger.Typography, Object.assign({
-            css: styles$9.heading,
+            css: styles$8.heading,
             variant: "heading4"
           }, {
             children: t("register-wallet:sections.carriers.title")
           }))
         })), jsxRuntime.jsx(giger.GridChild, Object.assign({
           colSpan: 12,
-          css: styles$9.subtitle
+          css: styles$8.subtitle
         }, {
           children: jsxRuntime.jsx(giger.Typography, Object.assign({
             variant: "subtitle1"
@@ -23826,7 +23851,7 @@ const CarrierTerms = ({
   switch (carrierCode) {
     case "ups":
       return jsxRuntime.jsxs("div", Object.assign({
-        css: styles$b.terms
+        css: styles$a.terms
       }, {
         children: [jsxRuntime.jsx(giger.Typography, Object.assign({
           variant: "subtitle1"
@@ -23849,7 +23874,7 @@ const CarrierTerms = ({
             text,
             url
           }, idx) => jsxRuntime.jsx("li", Object.assign({
-            css: styles$b.listItems
+            css: styles$a.listItems
           }, {
             children: jsxRuntime.jsx(giger.Link, Object.assign({
               href: url,
@@ -23897,7 +23922,7 @@ const CarrierTermsForm = ({
     onSubmit(payload.agreement);
   }));
   return jsxRuntime.jsxs("div", Object.assign({
-    css: styles$b.termsForm,
+    css: styles$a.termsForm,
     "data-testid": "carrier-terms-form"
   }, {
     children: [jsxRuntime.jsx(giger.Typography, Object.assign({
@@ -23913,7 +23938,7 @@ const CarrierTermsForm = ({
     })), jsxRuntime.jsx(Spacer, {
       multiplier: 1
     }), jsxRuntime.jsx("div", Object.assign({
-      css: styles$b.carrierLogos
+      css: styles$a.carrierLogos
     }, {
       children: metadatas.map(({
         name,
@@ -23929,7 +23954,7 @@ const CarrierTermsForm = ({
         onSubmit: formLogger.capture(handleSubmit)
       }, {
         children: jsxRuntime.jsxs("div", Object.assign({
-          css: styles$b.agreement
+          css: styles$a.agreement
         }, {
           children: [jsxRuntime.jsx("div", {
             children: jsxRuntime.jsx(CheckboxInput, {
@@ -23956,10 +23981,10 @@ const CarrierTermsForm = ({
               name: "agreement"
             })
           }), showTerms && jsxRuntime.jsxs("div", Object.assign({
-            css: styles$b.well
+            css: styles$a.well
           }, {
             children: [jsxRuntime.jsxs("div", Object.assign({
-              css: styles$b.terms
+              css: styles$a.terms
             }, {
               children: [jsxRuntime.jsx(giger.Typography, Object.assign({
                 variant: "heading5"
@@ -23971,7 +23996,7 @@ const CarrierTermsForm = ({
                 carrierCode: carrierCode
               }, carrierCode))]
             })), jsxRuntime.jsx("div", Object.assign({
-              css: styles$b.close
+              css: styles$a.close
             }, {
               children: jsxRuntime.jsx(giger.Button, Object.assign({
                 onClick: () => setShowTerms(false),
@@ -24220,522 +24245,138 @@ const CustomsItemForm = ({
   }));
 };
 
-const Loader = props => {
-  return jsxRuntime.jsx("div", Object.assign({
-    css: {
-      alignItems: "center",
-      display: "flex",
-      flexDirection: "column",
-      height: "100%",
-      justifyContent: "center",
-      textAlign: "center",
-      width: "100%"
-    }
-  }, {
-    children: jsxRuntime.jsx(giger.Spinner, Object.assign({}, props, {
-      size: giger.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 = zod.z.object({
-  isEnabled: zod.z.boolean(),
-  lowBalancePurchaseThreshold: moneySchema.extend({
-    amount: zod.z.number().min(25)
-  }),
-  maximumPurchasesPerDay: zod.z.number().min(1),
-  purchaseAmount: moneySchema.extend({
-    amount: zod.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
-  } = reactI18next.useTranslation();
-  // const [showForm, toggleShowForm] = useReducer((n) => !n, false); May still need this in a subsequent PR
-  const form = reactHookForm.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 jsxRuntime.jsx(Loader, {
-    message: t("manage-funding:autoFunding.isLoading")
-  });
+  } = reactI18next.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.${humps.camelize(label.deliveryConfirmation)}`)
+    }));
+  }
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.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 && jsxRuntime.jsxs("form", Object.assign({
-      css: styles$8.form,
-      id: "auto-funding-form",
-      onSubmit: formLogger.capture(handleSubmit)
+    children: [["processing", "completed"].includes(label.status) ? jsxRuntime.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: [jsxRuntime.jsx(MoneyInput, {
-        control: form.control,
-        disabled: !watchIsEnabled,
-        label: t("manage-funding:autoFunding.purchaseAmount"),
-        name: "purchaseAmount",
-        showCurrencySymbol: true
-      }), jsxRuntime.jsx(MoneyInput, {
-        control: form.control,
-        disabled: !watchIsEnabled,
-        label: t("manage-funding:autoFunding.lowBalancePurchaseThreshold"),
-        name: "lowBalancePurchaseThreshold",
-        showCurrencySymbol: true
-      }), jsxRuntime.jsx(NumberInput, {
-        control: form.control,
-        disabled: !watchIsEnabled,
-        label: t("manage-funding:autoFunding.maximumPurchasesPerDay"),
-        name: "maximumPurchasesPerDay"
-      }), jsxRuntime.jsxs(ButtonGroup, Object.assign({
-        justify: "end"
-      }, {
-        children: [jsxRuntime.jsx(giger.Button, Object.assign({
-          disabled: !isDirty,
-          onClick: () => form.reset(),
-          variant: giger.ButtonVariant.TEXT
+      children: label.trackingNumber && jsxRuntime.jsx("div", {
+        children: label.trackingNumber.toString()
+      })
+    })) : jsxRuntime.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" && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(Spacer, {
+        multiplier: 2
+      }), jsxRuntime.jsxs(ButtonGroup, {
+        children: [onClickVoid && label.status === "completed" && jsxRuntime.jsx(giger.Button, Object.assign({
+          bold: false,
+          css: {
+            whiteSpace: "nowrap"
+          },
+          onClick: () => onClickVoid(label),
+          type: "submit",
+          variant: giger.ButtonVariant.OUTLINED
         }, {
-          children: t("actions.cancel")
-        })), jsxRuntime.jsx(SubmitButton, Object.assign({
-          control: form.control,
-          "data-testid": "autoFunding.submit",
-          disabled: !watchIsEnabled,
-          requireDirty: true,
+          children: t("view-shipment:actions.void")
+        })), label.formDownload && jsxRuntime.jsx(giger.Button, Object.assign({
+          bold: false,
+          css: {
+            whiteSpace: "nowrap"
+          },
+          onClick: () => {
+            window.open(label.formDownload.href, "_blank", "noopener, noreferrer");
+          },
           variant: giger.ButtonVariant.OUTLINED
         }, {
-          children: t("manage-funding:actions.saveRule")
+          children: t("view-shipment:actions.printForms")
+        })), jsxRuntime.jsx(giger.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 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx(Spacer, {}), jsxRuntime.jsx(giger.InlineNotification, Object.assign({
-        title: t("manage-funding:autoFunding.error.title"),
-        type: giger.NotificationType.ERROR
-      }, {
-        children: errorMessage
-      })), jsxRuntime.jsx(Spacer, {})]
+      })]
     })]
   });
 };
 
-const manualFundingSchema = zod.z.object({
-  funds: moneySchema.extend({
-    amount: zod.z.number().min(10)
-  })
+const landingPageFormSchema = zod.z.object({
+  email: zod.z.string().trim().email()
 });
 
-const ManualFundingForm = ({
-  currentBalance,
-  errorMessage,
-  formId,
-  hasError,
-  isLoading,
-  onCancel,
-  onSubmit,
-  portalRef,
-  requiredAmount
+const LandingPageForm = ({
+  onSubmit
 }) => {
-  var _a;
   const {
     t
   } = reactI18next.useTranslation();
-  const fundingRecommendations = React.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] = React.useState(requiredAmount ? 3 : 0);
-  const [showFormInput, toggleShowFormInput] = useToggle(!!requiredAmount);
-  const getSelectedFundingValue = value => {
-    return Number(value.replace(/[^0-9.-]+/g, ""));
-  };
   const form = reactHookForm.useForm({
     defaultValues: {
-      funds: {
-        amount: suggestedAmount,
-        currency: api.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 = jsxRuntime.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 jsxRuntime.jsxs("form", Object.assign({
+    id: "landing-page-form",
+    onSubmit: formLogger.capture(handleSubmit)
   }, {
-    children: [jsxRuntime.jsx(giger.Typography, Object.assign({
-      bold: true
-    }, {
-      children: t("manage-funding:addFunds")
-    })), jsxRuntime.jsx(Spacer, {
-      multiplier: 2
-    }), jsxRuntime.jsx(giger.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: api.SE.Currency.USD
-            }
-          });
-        }
-      }
+    children: [jsxRuntime.jsx(TextInput, {
+      control: form.control,
+      "data-testid": "fields.email",
+      form: "landing-page-form",
+      label: t("address.fields.email"),
+      labelWeight: "normal",
+      name: "email",
+      nativeLabel: true
+    }), jsxRuntime.jsx(Spacer, {
+      multiplier: 4
+    }), jsxRuntime.jsx(ButtonGroup, Object.assign({
+      justify: "center"
     }, {
-      children: fundingRecommendations.map((item, idx) => jsxRuntime.jsx(giger.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))
-    })), jsxRuntime.jsx(Spacer, {
-      multiplier: 1
-    }), showFormInput && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx(MoneyInput, {
+      children: jsxRuntime.jsx(SubmitButton, Object.assign({
+        alwaysRequireValidity: true,
         control: form.control,
-        defaultValue: {
-          amount: undefined,
-          currency: api.SE.Currency.USD
-        },
-        label: t("manage-funding:otp.labels.amount"),
-        name: "funds",
-        placeholder: "Amount",
-        showCurrencySymbol: true,
-        subLabel: "Minimum purchase $10.00"
-      }), jsxRuntime.jsxs(FieldLabel, Object.assign({
-        label: t("manage-funding:otp.labels.resultingBalance")
-      }, {
-        children: [jsxRuntime.jsx(giger.Typography, Object.assign({
-          variant: "body1"
-        }, {
-          children: formatMoney({
-            amount: resultingBalance,
-            currency: api.SE.Currency.USD
-          })
-        })), jsxRuntime.jsx(Spacer, {})]
-      }))]
-    }), jsxRuntime.jsxs(ButtonGroup, Object.assign({
-      justify: "end"
-    }, {
-      children: [jsxRuntime.jsx(giger.Button, Object.assign({
-        onClick: onCancel,
-        variant: giger.ButtonVariant.TEXT
-      }, {
-        children: t("actions.cancel")
-      })), jsxRuntime.jsx(SubmitButton, Object.assign({
-        control: form.control,
-        form: formId,
-        variant: giger.ButtonVariant.OUTLINED
-      }, {
-        children: t(formId ? "actions.purchase" : "manage-funding:actions.addNow")
-      }))]
-    }))]
-  }));
-  if (isLoading) return jsxRuntime.jsx(Loader, {
-    message: t("manage-funding:otp.isLoading")
-  });
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx("form", Object.assign({
-      id: formId,
-      onSubmit: formLogger.capture(form.handleSubmit(onSubmit))
-    }, {
-      children: portalRef !== undefined ?
-      // Nested form in a well
-      jsxRuntime.jsx(Portal, Object.assign({
-        target: portalRef
-      }, {
-        children: jsxRuntime.jsx("section", Object.assign({
-          css: theme => ({
-            backgroundColor: theme.palette.gray.megaLight,
-            padding: theme.spacing(2)
-          })
-        }, {
-          children: formInterface
-        }))
-      })) :
-      // Standalone form
-      formInterface
-    })), hasError && errorMessage && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx(Spacer, {}), jsxRuntime.jsx(giger.InlineNotification, Object.assign({
-        title: t("manage-funding:otp.error.title"),
-        type: giger.NotificationType.ERROR
-      }, {
-        children: errorMessage
-      })), jsxRuntime.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
-  } = reactI18next.useTranslation();
-  const [showFundingMethods, toggleShowFundingMethods] = useToggle(false);
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsxs("div", Object.assign({
-      css: styles$7.header
-    }, {
-      children: [jsxRuntime.jsxs("div", {
-        children: [jsxRuntime.jsx(giger.Typography, Object.assign({
-          variant: "body1"
-        }, {
-          children: t("manage-funding:currentBalance")
-        })), jsxRuntime.jsx(giger.Typography, Object.assign({
-          bold: true,
-          css: manualFundingCurrentBalance >= 0 ? styles$7.balanceText : styles$7.negativeBalanceText,
-          variant: "body1"
-        }, {
-          children: formatMoney({
-            amount: manualFundingCurrentBalance,
-            currency: api.SE.Currency.USD
-          })
-        }))]
-      }), jsxRuntime.jsxs(giger.Link, Object.assign({
-        bold: true,
-        css: styles$7.addFundsButton,
-        onClick: toggleShowFundingMethods,
-        size: giger.ButtonSize.MEDIUM
-      }, {
-        children: [t("manage-funding:addFunds"), jsxRuntime.jsx(giger.Icon, {
-          name: brands.IconNames.ADD,
-          size: giger.IconSize.SIZE_MEDIUM,
-          title: "Add Funds"
-        })]
-      }))]
-    })), jsxRuntime.jsx(Spacer, {}), jsxRuntime.jsx("div", Object.assign({
-      css: theme => Object.assign(Object.assign({}, !showFundingMethods && {
-        display: "none"
-      }), {
-        marginBottom: theme.spacing(2)
-      })
-    }, {
-      children: ["manual", "both"].includes(fundingMethod) && jsxRuntime.jsx(ManualFundingForm, {
-        currentBalance: manualFundingCurrentBalance,
-        errorMessage: addFundsErrorMessage,
-        hasError: hasManualFundingError,
-        isLoading: isManualFundingLoading,
-        onCancel: toggleShowFundingMethods,
-        onSubmit: onSubmitManualFunding,
-        requiredAmount: manualFundingRequiredAmount
-      })
-    })), ["auto", "both"].includes(fundingMethod) && jsxRuntime.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
-  } = reactI18next.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.${humps.camelize(label.deliveryConfirmation)}`)
-    }));
-  }
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [["processing", "completed"].includes(label.status) ? jsxRuntime.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 && jsxRuntime.jsx("div", {
-        children: label.trackingNumber.toString()
-      })
-    })) : jsxRuntime.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" && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx(Spacer, {
-        multiplier: 2
-      }), jsxRuntime.jsxs(ButtonGroup, {
-        children: [onClickVoid && label.status === "completed" && jsxRuntime.jsx(giger.Button, Object.assign({
-          bold: false,
-          css: {
-            whiteSpace: "nowrap"
-          },
-          onClick: () => onClickVoid(label),
-          type: "submit",
-          variant: giger.ButtonVariant.OUTLINED
-        }, {
-          children: t("view-shipment:actions.void")
-        })), label.formDownload && jsxRuntime.jsx(giger.Button, Object.assign({
-          bold: false,
-          css: {
-            whiteSpace: "nowrap"
-          },
-          onClick: () => {
-            window.open(label.formDownload.href, "_blank", "noopener, noreferrer");
-          },
-          variant: giger.ButtonVariant.OUTLINED
-        }, {
-          children: t("view-shipment:actions.printForms")
-        })), jsxRuntime.jsx(giger.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 = zod.z.object({
-  email: zod.z.string().trim().email()
-});
-
-const LandingPageForm = ({
-  onSubmit
-}) => {
-  const {
-    t
-  } = reactI18next.useTranslation();
-  const form = reactHookForm.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 jsxRuntime.jsxs("form", Object.assign({
-    id: "landing-page-form",
-    onSubmit: formLogger.capture(handleSubmit)
-  }, {
-    children: [jsxRuntime.jsx(TextInput, {
-      control: form.control,
-      "data-testid": "fields.email",
-      form: "landing-page-form",
-      label: t("address.fields.email"),
-      labelWeight: "normal",
-      name: "email",
-      nativeLabel: true
-    }), jsxRuntime.jsx(Spacer, {
-      multiplier: 4
-    }), jsxRuntime.jsx(ButtonGroup, Object.assign({
-      justify: "center"
-    }, {
-      children: jsxRuntime.jsx(SubmitButton, Object.assign({
-        alwaysRequireValidity: true,
-        control: form.control,
-        "data-testid": "onboarding:landing.action",
-        form: "landing-page-form",
-        variant: giger.ButtonVariant.FILLED
+        "data-testid": "onboarding:landing.action",
+        form: "landing-page-form",
+        variant: giger.ButtonVariant.FILLED
       }, {
         children: t("onboarding:landing.action")
       }))
@@ -24743,7 +24384,7 @@ const LandingPageForm = ({
   }));
 };
 
-const styles$6 = createStyles({
+const styles$7 = createStyles({
   container: theme => ({
     padding: theme.spacing(2)
   }),
@@ -24764,11 +24405,11 @@ const LandingPage = ({
     t
   } = reactI18next.useTranslation();
   return jsxRuntime.jsxs("div", Object.assign({
-    css: styles$6.container,
+    css: styles$7.container,
     "data-testid": "landing-page"
   }, {
     children: [jsxRuntime.jsxs("div", Object.assign({
-      css: styles$6.header
+      css: styles$7.header
     }, {
       children: [jsxRuntime.jsx(giger.Typography, Object.assign({
         variant: "heading4"
@@ -24786,7 +24427,7 @@ const LandingPage = ({
     })), jsxRuntime.jsx(LandingPageForm, {
       onSubmit: onSubmit
     }), jsxRuntime.jsxs("div", Object.assign({
-      css: styles$6.header
+      css: styles$7.header
     }, {
       children: [jsxRuntime.jsx(Spacer, {
         multiplier: 6
@@ -24797,7 +24438,7 @@ const LandingPage = ({
       })), jsxRuntime.jsx(Spacer, {
         multiplier: 2
       }), jsxRuntime.jsx(giger.Typography, Object.assign({
-        css: styles$6.description,
+        css: styles$7.description,
         variant: "body1"
       }, {
         children: t("onboarding:landing.description")
@@ -24878,18 +24519,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`,
@@ -24900,31 +24540,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`
   })
 });
 
@@ -24935,7 +24550,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 = ({
@@ -24947,7 +24562,7 @@ const ListCarriersRow = ({
   registerCarrierErrors
 }) => {
   const {
-    name,
+    shortname: name,
     logo,
     requiredFields
   } = carrier;
@@ -24963,20 +24578,21 @@ const ListCarriersRow = ({
     setIsSubmitting(false);
   });
   return jsxRuntime.jsxs("div", Object.assign({
-    css: styles$5.container
+    css: getStyles$3().container,
+    "data-testid": "carrier-row"
   }, {
     children: [jsxRuntime.jsxs("div", Object.assign({
-      css: styles$5.rowContainer
+      css: getStyles$3().rowContainer
     }, {
       children: [jsxRuntime.jsxs("div", Object.assign({
-        css: styles$5.logoContainer
+        css: getStyles$3().logoContainer
       }, {
         children: [jsxRuntime.jsx("div", {
           children: jsxRuntime.jsx("img", {
             alt: `${name}-logo`,
-            height: 48,
+            height: 40,
             src: logo,
-            width: 48
+            width: 40
           })
         }), jsxRuntime.jsx(giger.Typography, Object.assign({
           variant: "subtitle1"
@@ -24987,6 +24603,8 @@ const ListCarriersRow = ({
         css: _ref$1
       }, {
         children: jsxRuntime.jsx(giger.Button, Object.assign({
+          color: giger.ButtonColor.SECONDARY,
+          css: getStyles$3(isConnected).connectButton,
           disabled: isConnected || showDropDown,
           isLoading: isSubmitting,
           onClick: () => __awaiter(void 0, void 0, void 0, function* () {
@@ -25006,7 +24624,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}`
@@ -25053,7 +24671,7 @@ const ListCarriers$1 = ({
         children: t("list-carriers:headers.accountCarriers")
       }))
     }), jsxRuntime.jsx("ul", Object.assign({
-      css: styles$4.listContainer
+      css: styles$6.listContainer
     }, {
       children: isLoading ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [jsxRuntime.jsx(LoadingSkeletonRow, {}), jsxRuntime.jsx(LoadingSkeletonRow, {}), jsxRuntime.jsx(LoadingSkeletonRow, {})]
@@ -25074,10 +24692,10 @@ const ListCarriers$1 = ({
 };
 const LoadingSkeletonRow = () => {
   return jsxRuntime.jsxs("div", Object.assign({
-    css: styles$4.skeletonRow
+    css: styles$6.skeletonRow
   }, {
     children: [jsxRuntime.jsxs("div", Object.assign({
-      css: styles$4.skeletonLogoContainer
+      css: styles$6.skeletonLogoContainer
     }, {
       children: [jsxRuntime.jsx(giger.Skeleton, {
         animation: giger.SkeletonAnimation.WAVE,
@@ -25101,7 +24719,7 @@ const LoadingSkeletonRow = () => {
   }));
 };
 
-const styles$3 = createStyles({
+const styles$5 = createStyles({
   body: theme => ({
     borderTop: `1px solid ${theme.palette.gray.light}`,
     color: theme.palette.black,
@@ -25152,14 +24770,14 @@ const SettingsCard = ({
   verticallyAligned
 }) => {
   return jsxRuntime.jsxs("div", Object.assign({
-    css: verticallyAligned ? styles$3.verticalContainer : styles$3.container,
+    css: verticallyAligned ? styles$5.verticalContainer : styles$5.container,
     "data-testid": "settingsCard"
   }, {
     children: [jsxRuntime.jsxs("div", Object.assign({
-      css: styles$3.header
+      css: styles$5.header
     }, {
       children: [jsxRuntime.jsxs("div", Object.assign({
-        css: styles$3.title
+        css: styles$5.title
       }, {
         children: [typeof title === "string" ? jsxRuntime.jsx(giger.Typography, Object.assign({
           variant: "subtitle2"
@@ -25194,7 +24812,7 @@ const SettingsCard = ({
         }))
       }))]
     })), children && jsxRuntime.jsx("div", Object.assign({
-      css: styles$3.body
+      css: styles$5.body
     }, {
       children: jsxRuntime.jsxs("div", {
         children: [children, accessoryAction && jsxRuntime.jsx(ButtonGroup, Object.assign({
@@ -25311,7 +24929,7 @@ const warehouseSchema = zod.z.discriminatedUnion("returnToAddressIsDifferent", [
   });
 });
 
-const styles$2 = createStyles({
+const styles$4 = createStyles({
   header: {
     textAlign: "center"
   },
@@ -25363,12 +24981,12 @@ const WarehouseForm = ({
     }
   }));
   return jsxRuntime.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 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsxs("div", Object.assign({
-        css: styles$2.header
+        css: styles$4.header
       }, {
         children: [jsxRuntime.jsx(giger.Typography, Object.assign({
           variant: "heading4"
@@ -26572,21 +26190,84 @@ $$3({ target: 'Promise', stat: true, forced: FORCED_PROMISE_CONSTRUCTOR }, {
   }
 });
 
-const BillingFields = ({
-  form
+const CompletionPage = ({
+  onContinue
 }) => {
   const {
     t
-  } = reactI18next.useTranslation();
-  const expirationMonthOptions = useExpirationMonthOptions();
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(giger.GridChild, Object.assign({
-      colSpan: 12
+  } = reactI18next.useTranslation(["common", "onboarding"]);
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column"
+    },
+    "data-testid": "onboarding-complete"
+  }, {
+    children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+      variant: "heading4"
     }, {
-      children: jsxRuntime.jsx(TextInput, {
-        control: form.control,
-        label: t("billing.fields.name"),
-        labelWeight: "normal",
+      children: t("onboarding:success.title")
+    })), jsxRuntime.jsx(Spacer, {
+      multiplier: 2
+    }), jsxRuntime.jsx(giger.Typography, Object.assign({
+      variant: "subtitle1"
+    }, {
+      children: t("onboarding:success.subtitle")
+    })), jsxRuntime.jsx(Spacer, {
+      multiplier: 10
+    }), jsxRuntime.jsxs("svg", Object.assign({
+      fill: "none",
+      height: "86",
+      viewBox: "0 0 86 86",
+      width: "86",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, {
+      children: [jsxRuntime.jsx("circle", {
+        cx: "43",
+        cy: "43.3379",
+        fill: "#E8F6FF",
+        r: "42.5"
+      }), jsxRuntime.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"
+      }), jsxRuntime.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"
+      })]
+    })), jsxRuntime.jsx(Spacer, {
+      multiplier: 10
+    }), jsxRuntime.jsx(ButtonGroup, Object.assign({
+      justify: "center"
+    }, {
+      children: jsxRuntime.jsx(giger.Button, Object.assign({
+        bold: false,
+        color: giger.ButtonColor.PRIMARY,
+        onClick: onContinue,
+        type: "button",
+        variant: giger.ButtonVariant.FILLED
+      }, {
+        children: t("onboarding:success.action")
+      }))
+    }))]
+  }));
+};
+
+const BillingFields = ({
+  form
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const expirationMonthOptions = useExpirationMonthOptions();
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(giger.GridChild, Object.assign({
+      colSpan: 12
+    }, {
+      children: jsxRuntime.jsx(TextInput, {
+        control: form.control,
+        label: t("billing.fields.name"),
+        labelWeight: "normal",
         name: "creditCard.name",
         nativeLabel: true
       })
@@ -26757,7 +26438,7 @@ const EditWalletAddressForm = ({
   }));
 };
 
-const styles$1 = createStyles({
+const styles$3 = createStyles({
   grid: theme => ({
     margin: theme.spacing(4)
   }),
@@ -26805,21 +26486,21 @@ const WalletForm = ({
     onSubmit: formLogger.capture(handleSubmit)
   }, {
     children: jsxRuntime.jsxs(giger.Grid, Object.assign({
-      css: styles$1.grid,
+      css: styles$3.grid,
       noPadding: true
     }, {
       children: [jsxRuntime.jsx(giger.GridChild, Object.assign({
         colSpan: 12
       }, {
         children: jsxRuntime.jsx(giger.Typography, Object.assign({
-          css: styles$1.heading,
+          css: styles$3.heading,
           variant: "heading4"
         }, {
           children: t("register-wallet:sections.billing.title")
         }))
       })), jsxRuntime.jsx(giger.GridChild, Object.assign({
         colSpan: 12,
-        css: styles$1.subtitle
+        css: styles$3.subtitle
       }, {
         children: jsxRuntime.jsx(giger.Typography, Object.assign({
           variant: "subtitle1"
@@ -26841,7 +26522,7 @@ const WalletForm = ({
         colSpan: 12
       }, {
         children: jsxRuntime.jsx(giger.Typography, Object.assign({
-          css: styles$1.subtitle,
+          css: styles$3.subtitle,
           variant: "subtitle1"
         }, {
           children: t("register-wallet:sections.billing.addressSubTitle")
@@ -26908,7 +26589,7 @@ const WalletForm = ({
   }));
 };
 
-const styles = createStyles({
+const styles$2 = createStyles({
   lastStep: {
     "& > span::first-of-type": {
       "::after": {
@@ -27013,40 +26694,9 @@ const Onboarding$1 = ({
     var _a;
     // Step 5: Onboarding Complete
     if (hasCompletedOnboarding) {
-      return jsxRuntime.jsxs("div", Object.assign({
-        css: {
-          alignItems: "center",
-          display: "flex",
-          flexDirection: "column"
-        },
-        "data-testid": "onboarding-complete"
-      }, {
-        children: [jsxRuntime.jsx(giger.Typography, Object.assign({
-          variant: "heading4"
-        }, {
-          children: t("onboarding:success.title")
-        })), jsxRuntime.jsx(Spacer, {
-          multiplier: 2
-        }), jsxRuntime.jsx(giger.Typography, Object.assign({
-          variant: "subtitle1"
-        }, {
-          children: t("onboarding:success.subtitle")
-        })), jsxRuntime.jsx(Spacer, {
-          multiplier: 48
-        }), jsxRuntime.jsx(ButtonGroup, Object.assign({
-          justify: "center"
-        }, {
-          children: jsxRuntime.jsx(giger.Button, Object.assign({
-            bold: false,
-            color: giger.ButtonColor.PRIMARY,
-            onClick: onCompleteOnboarding,
-            type: "button",
-            variant: giger.ButtonVariant.FILLED
-          }, {
-            children: t("onboarding:success.action")
-          }))
-        }))]
-      }));
+      return jsxRuntime.jsx(CompletionPage, {
+        onContinue: onCompleteOnboarding
+      });
     }
     // Step 1: Landing Page
     if (!email) return jsxRuntime.jsx(LandingPage, {
@@ -27122,16 +26772,16 @@ const Onboarding$1 = ({
       currentStep: currentStep
     }, {
       children: [jsxRuntime.jsx(giger.Step, {
-        css: styles.step,
+        css: styles$2.step,
         label: t("onboarding:steps.login")
       }), jsxRuntime.jsx(giger.Step, {
-        css: styles.step,
+        css: styles$2.step,
         label: t("onboarding:steps.carriers")
       }), jsxRuntime.jsx(giger.Step, {
-        css: styles.step,
+        css: styles$2.step,
         label: t("onboarding:steps.addresses")
       }), jsxRuntime.jsx(giger.Step, {
-        css: styles.lastStep,
+        css: styles$2.lastStep,
         label: t("onboarding:steps.payment")
       })]
     })), renderStep()]
@@ -27185,24 +26835,567 @@ const Cube = _a => {
   }, props, {
     role: "status"
   }, {
-    children: jsxRuntime.jsx("svg", Object.assign({
-      css: styles.content,
-      height: "100%",
-      viewBox: "0 0 489 489",
-      width: "100%"
+    children: jsxRuntime.jsx("svg", Object.assign({
+      css: styles.content,
+      height: "100%",
+      viewBox: "0 0 489 489",
+      width: "100%"
+    }, {
+      children: jsxRuntime.jsx("g", {
+        children: jsxRuntime.jsx("g", {
+          children: jsxRuntime.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] = React.useState(null);
+  const onMountInterfaceTarget = React.useCallback(element => {
+    if (element) setInterfaceTarget(element);
+  }, []);
+  const formStyle = [variant === "well" && (theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
+    padding: theme.spacing(2)
+  })), css];
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(Portal, Object.assign({
+      target: rootTarget
+    }, {
+      children: jsxRuntime.jsx("form", Object.assign({
+        id: id,
+        onSubmit: onSubmit
+      }, {
+        children: jsxRuntime.jsx(Portal, Object.assign({
+          target: interfaceTarget
+        }, {
+          children: children
+        }))
+      }))
+    })), jsxRuntime.jsx("section", {
+      css: formStyle,
+      id: id + "-interface",
+      ref: onMountInterfaceTarget
+    })]
+  });
+};
+
+const Loader = props => {
+  return jsxRuntime.jsx("div", Object.assign({
+    css: {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      justifyContent: "center",
+      textAlign: "center",
+      width: "100%"
+    }
+  }, {
+    children: jsxRuntime.jsx(giger.Spinner, Object.assign({}, props, {
+      size: giger.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) => zod.z.object({
+  funds: moneySchema.extend({
+    amount: zod.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
+  } = reactI18next.useTranslation();
+  const addFunds = react.useAddFunds(carrierId);
+  const carrier = react.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] = React.useState(_minimumAmount > 0 ? chips[3] : chips[0]);
+  _minimumAmount = Math.max(_minimumAmount, 10);
+  const form = reactHookForm.useForm({
+    defaultValues: {
+      funds: {
+        amount: selectedChip.value === "custom" ? _minimumAmount : selectedChip.value,
+        currency: api.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 jsxRuntime.jsx(Loader, {
+    message: t("loading.carrier")
+  });
+  if (!carrier.data) throw new Error("errorMessages.unableToLoad.carrier");
+  const balance = carrier.data.balance;
+  if (balance === undefined) return jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+    type: giger.NotificationType.ERROR
+  }, {
+    children: t("manage-funding:errors.unableToFindBalance")
+  }));
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs(FormPortal, Object.assign({
+      id: formId,
+      onSubmit: handleSubmit,
+      variant: "well"
+    }, {
+      children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+        bold: true
+      }, {
+        children: t("manage-funding:actions.addFunds")
+      })), jsxRuntime.jsx(Spacer, {
+        multiplier: 2
+      }), jsxRuntime.jsx(giger.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: api.SE.Currency.USD
+              }
+            });
+          }
+        }
+      }, {
+        children: chips.map(chip => jsxRuntime.jsx(giger.Chip, Object.assign({
+          css: getStyles$2({
+            isDisabled: chip.value < _minimumAmount,
+            isSelected: chip.value === selectedChip.value
+          }).chip,
+          isSelected: chip.value === selectedChip.value
+        }, {
+          children: jsxRuntime.jsx(giger.Typography, Object.assign({
+            variant: "small"
+          }, {
+            children: chip.label
+          }))
+        }), chip.label))
+      })), selectedChip.value === "custom" && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(Spacer, {
+          multiplier: 1
+        }), jsxRuntime.jsx(MoneyInput, {
+          control: form.control,
+          css: getStyles$2().fundsInput,
+          defaultValue: {
+            amount: undefined,
+            currency: api.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 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(Spacer, {
+          multiplier: selectedChip.value !== "custom" ? 1.5 : 1
+        }), jsxRuntime.jsxs(ButtonGroup, Object.assign({
+          justify: "end"
+        }, {
+          children: [onCancel && jsxRuntime.jsx(giger.Button, Object.assign({
+            onClick: onCancel,
+            variant: giger.ButtonVariant.TEXT
+          }, {
+            children: t("actions.cancel")
+          })), jsxRuntime.jsx(SubmitButton, Object.assign({
+            control: form.control,
+            form: formId,
+            isLoading: addFunds.isLoading,
+            variant: giger.ButtonVariant.OUTLINED
+          }, {
+            children: t("manage-funding:actions.addNow")
+          }))]
+        }))]
+      })]
+    })), addFunds.error && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(Spacer, {
+        multiplier: 1
+      }), jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+        title: t("manage-funding:addFunds.error.title"),
+        type: giger.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
+}) => jsxRuntime.jsxs("div", Object.assign({
+  css: theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: theme.spacing(1)
+  })
+}, {
+  children: [jsxRuntime.jsx(giger.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
+  } = reactI18next.useTranslation();
+  const {
+    data: carrier,
+    isLoading: isLoadingCarrier,
+    isRefetching: isRefetchingCarrier
+  } = react.useGetCarrierById(carrierId);
+  const balance = carrier === null || carrier === void 0 ? void 0 : carrier.balance;
+  return jsxRuntime.jsx(InlineLabel, Object.assign({
+    label: t("manage-funding:currentBalance")
+  }, {
+    children: isLoadingCarrier || isRefetchingCarrier ? jsxRuntime.jsx(giger.Spinner, {}) : jsxRuntime.jsx(giger.Typography, Object.assign({
+      bold: true,
+      css: getStyles$1(balance).balanceText
+    }, {
+      children: balance === undefined ? t("manage-funding:errors.balanceUnknown") : formatMoney({
+        amount: balance,
+        currency: api.SE.Currency.USD
+      })
+    }))
+  }));
+};
+
+const icons = {
+  add: brands.IconNames.ADD,
+  download: brands.IconNames.DOWNLOAD
+};
+const LinkAction = _a => {
+  var {
+      css,
+      icon,
+      isDisabled,
+      isLoading,
+      title
+    } = _a,
+    props = __rest(_a, ["css", "icon", "isDisabled", "isLoading", "title"]);
+  return jsxRuntime.jsx(giger.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: giger.ButtonSize.MEDIUM
+  }, {
+    children: isLoading ? jsxRuntime.jsx(giger.Spinner, {}) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [title, icon && jsxRuntime.jsx(giger.Icon, {
+        name: icons[icon],
+        size: giger.IconSize.SIZE_MEDIUM,
+        title: title
+      })]
+    })
+  }));
+};
+
+const Spread = ({
+  children
+}) => jsxRuntime.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
+  } = reactI18next.useTranslation();
+  const [isAddFundsFormOpen, setIsAddFundsFormOpen] = React.useState(false);
+  const {
+    data: carrier,
+    isLoading: isLoadingCarrier
+  } = react.useGetCarrierById(carrierId);
+  const isAddingFunds = !!reactQuery.useIsMutating({
+    mutationKey: ["useAddFunds"]
+  });
+  const isCreatingLabel = !!reactQuery.useIsMutating({
+    mutationKey: ["useCreateLabel"]
+  });
+  const [isSavingRate, setIsSavingRate] = React.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.
+  React.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 = {}) => jsxRuntime.jsxs(ButtonGroup, Object.assign({
+    justify: "end"
+  }, {
+    children: [jsxRuntime.jsx(giger.Button, Object.assign({
+      bold: false,
+      css: getStyles().saveRateButton,
+      disabled: disabled || !carrierId || isAddingFunds || isCreatingLabel,
+      isLoading: isSavingRate,
+      onClick: handleSaveRate,
+      variant: giger.ButtonVariant.OUTLINED
+    }, {
+      children: t("purchase-label:actions.saveRate")
+    })), jsxRuntime.jsx(giger.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 jsxRuntime.jsx("div", Object.assign({
+    className: className,
+    css: getStyles().container
+  }, {
+    children: renderActionButtons()
+  }));
+  if (isLoadingCarrier) return jsxRuntime.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 jsxRuntime.jsxs("div", Object.assign({
+    className: className,
+    css: getStyles().container
+  }, {
+    children: [jsxRuntime.jsxs(Spread, {
+      children: [jsxRuntime.jsx(CarrierBalance, {
+        carrierId: carrierId
+      }), jsxRuntime.jsx(LinkAction, {
+        icon: "add",
+        isDisabled: isAddFundsFormOpen || isAddingFunds || isCreatingLabel,
+        onClick: () => setIsAddFundsFormOpen(true),
+        title: t("manage-funding:actions.addFunds")
+      })]
+    }), jsxRuntime.jsx(Spacer, {
+      multiplier: 2
+    }), balance < purchaseAmount && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+        title: t(`manage-funding:fundAndPurchase.${balance < 0 ? "negativeBalanceTitle" : "insufficientFundsTitle"}`),
+        type: giger.NotificationType.ALERT
+      }, {
+        children: t(`manage-funding:fundAndPurchase.${balance < 0 ? "negativeBalance" : "insufficientFunds"}`)
+      })), jsxRuntime.jsx(Spacer, {
+        multiplier: 2
+      })]
+    }), isAddFundsFormOpen ? jsxRuntime.jsx(AddFundsForm, Object.assign({
+      carrierId: carrierId,
+      minimumAmount: purchaseAmount - balance,
+      onSuccess: handleAddFundsSuccess
     }, {
-      children: jsxRuntime.jsx("g", {
-        children: jsxRuntime.jsx("g", {
-          children: jsxRuntime.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 jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsxs("section", Object.assign({
+            css: getStyles(addFundsForm.isCustomAmount).formExtension
+          }, {
+            children: [jsxRuntime.jsx(InlineLabel, Object.assign({
+              label: t("manage-funding:fundAndPurchase.newBalance")
+            }, {
+              children: jsxRuntime.jsx(giger.Typography, Object.assign({
+                css: getStyles().balanceText
+              }, {
+                children: formatMoney({
+                  amount: balance + ((_a = addFundsForm.selectedAmount) !== null && _a !== void 0 ? _a : 0),
+                  currency: api.SE.Currency.USD
+                })
+              }))
+            })), jsxRuntime.jsx(InlineLabel, Object.assign({
+              label: t("manage-funding:fundAndPurchase.finalBalance")
+            }, {
+              children: jsxRuntime.jsx(giger.Typography, Object.assign({
+                css: getStyles().balanceText
+              }, {
+                children: formatMoney({
+                  amount: balance + ((_b = addFundsForm.selectedAmount) !== null && _b !== void 0 ? _b : 0) - purchaseAmount,
+                  currency: api.SE.Currency.USD
+                })
+              }))
+            })), balance >= purchaseAmount && jsxRuntime.jsx(ButtonGroup, Object.assign({
+              justify: "end"
+            }, {
+              children: jsxRuntime.jsx(giger.Button, Object.assign({
+                onClick: () => setIsAddFundsFormOpen(false),
+                variant: giger.ButtonVariant.TEXT
+              }, {
+                children: t("actions.cancel")
+              }))
+            }))]
+          })), jsxRuntime.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 = zod.z.object({
   rate: zod.z.object({
     isAcknowledged: zod.z.boolean().refine(v => v === true, "purchase-label:schemaErrors.needToAcknowledge"),
@@ -27231,7 +27424,7 @@ const RateForm = ({
   }, features !== null && features !== void 0 ? features : {});
   const {
     t
-  } = reactI18next.useTranslation(["common", "purchase-label"]);
+  } = reactI18next.useTranslation();
   const rateFormScrollToRef = React.useRef(null);
   const [showHiddenRates, setShowHiddenRates] = React.useState(false);
   const form = reactHookForm.useForm({
@@ -27244,16 +27437,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
   // {
@@ -27275,13 +27465,10 @@ const RateForm = ({
   );
 
   const selectedRate = React.useMemo(() => rateOptions === null || rateOptions === void 0 ? void 0 : rateOptions.find(r => r.rateId === selectedRateId), [rateOptions, selectedRateId]);
-  const [isRateSaving, setIsRateSaving] = React.useState(false);
   const handleSaveRate = React.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]);
@@ -27310,15 +27497,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: api.SE.Currency.USD
-    });
-  };
   return jsxRuntime.jsxs("form", Object.assign({
     id: "rate-form",
     onSubmit: handleSubmit,
@@ -27340,10 +27518,7 @@ const RateForm = ({
           onClick: onSelectRate,
           options: showHiddenRates ? rateOptions : filteredRateOptions
         }), rateOptions.some(option => option.requiresAcknowledgement) && rateOptions.length > 5 && jsxRuntime.jsx(giger.Link, Object.assign({
-          css: {
-            alignItems: "center",
-            display: "flex"
-          },
+          css: styles$1.showMoreOrLessRatesButton,
           onClick: () => {
             var _a;
             setShowHiddenRates(!showHiddenRates);
@@ -27364,13 +27539,7 @@ const RateForm = ({
           }))
         }))]
       }) : !isLoading && errors && !!errors.length ? null : jsxRuntime.jsxs("article", Object.assign({
-        css: {
-          alignItems: "center",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center"
-        },
+        css: styles$1.ratesInterstitial,
         role: "presentation"
       }, {
         children: [jsxRuntime.jsx(Cube, {
@@ -27388,63 +27557,19 @@ const RateForm = ({
           }))]
         }))]
       })]
-    })), jsxRuntime.jsxs(giger.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 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(giger.Typography, Object.assign({
-          variant: "body1"
-        }, {
-          children: t("purchase-label:balance.currentBalance")
-        })), jsxRuntime.jsx(giger.Typography, Object.assign({
-          color: selectedRate.balance < 0 ? "error.main" : undefined
-        }, {
-          children: ` ${formatMoney({
-            amount: selectedRate.balance,
-            currency: api.SE.Currency.USD
-          })}`
-        })), jsxRuntime.jsx(Spacer, {
-          multiplier: 2
-        })]
-      }), jsxRuntime.jsx("div", Object.assign({
-        "data-testid": "actions"
-      }, {
-        children: jsxRuntime.jsxs(ButtonGroup, Object.assign({
-          "data-testid": "actions"
-        }, {
-          children: [(features === null || features === void 0 ? void 0 : features.saveRate) && jsxRuntime.jsx(giger.Button, Object.assign({
-            bold: false,
-            css: {
-              whiteSpace: "nowrap"
-            },
-            disabled: !isDirty || disabled,
-            isLoading: isRateSaving,
-            onClick: handleSaveRate,
-            variant: giger.ButtonVariant.OUTLINED
-          }, {
-            children: t("purchase-label:actions.saveRate")
-          })), jsxRuntime.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")
-          }))]
-        }))
-      }))]
-    }))]
+    })), jsxRuntime.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,
@@ -27489,17 +27614,20 @@ const getTableWrapperStyles = theme => /*#__PURE__*/react$1.css({
   }
 }, 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 = () => jsxRuntime.jsx(giger.TableHeader, {
+const ItemsBreakdownTableHeader = ({
+  hasValue,
+  hasTotal
+}) => jsxRuntime.jsx(giger.TableHeader, {
   children: jsxRuntime.jsxs(giger.TableBaseRow, {
     children: [jsxRuntime.jsx(giger.TableHeaderCell, {}), jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
       css: getNumericCellStyle
     }, {
       children: "Qty"
-    })), jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
+    })), hasValue && jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
       css: getNumericCellStyle
     }, {
       children: "$/ea"
-    })), jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
+    })), hasTotal && jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
       css: getNumericCellStyle
     }, {
       children: "$ Total"
@@ -27509,11 +27637,16 @@ const ItemsBreakdownTableHeader = () => jsxRuntime.jsx(giger.TableHeader, {
 const ItemsBreakdown = ({
   items
 }) => {
+  const hasValue = items.some(item => item.value !== undefined);
+  const hasTotal = items.some(item => item.totalValue !== undefined);
   return jsxRuntime.jsx("div", Object.assign({
     css: getTableWrapperStyles
   }, {
     children: jsxRuntime.jsx(giger.Table, Object.assign({
-      header: jsxRuntime.jsx(ItemsBreakdownTableHeader, {})
+      header: jsxRuntime.jsx(ItemsBreakdownTableHeader, {
+        hasTotal: hasTotal,
+        hasValue: hasValue
+      })
     }, {
       children: jsxRuntime.jsx(giger.TableBody, {
         children: items.map(({
@@ -27533,11 +27666,11 @@ const ItemsBreakdown = ({
             css: getNumericCellStyle
           }, {
             children: quantity
-          })), jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+          })), hasValue && jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
             css: getNumericCellStyle
           }, {
-            children: formatMoney(value)
-          })), jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+            children: value && formatMoney(value)
+          })), hasTotal && jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
             css: getNumericCellStyle
           }, {
             children: totalValue && formatMoney(totalValue)
@@ -27950,7 +28083,7 @@ const ShipmentForm = ({
   warehouseId,
   warehouses
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   features = Object.assign({
     browseRates: true,
     includeShipsuranceInsurance: true,
@@ -28123,8 +28256,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
@@ -28238,6 +28371,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 = React.useMemo(() => getSalesOrderItemsFromSalesOrderOrShipment({
+    salesOrder,
+    shipment
+  }), [salesOrder, shipment]);
   if (isLoading) return jsxRuntime.jsx(Loader, {
     message: t("loading.shipment")
   });
@@ -28300,7 +28437,7 @@ const ShipmentForm = ({
       }), jsxRuntime.jsx(Spacer, {
         displayOn: isEditShipFormToOpen ? "tablet" : undefined,
         multiplier: 2
-      }), editShipToForm, jsxRuntime.jsxs(FieldLabel, Object.assign({
+      }), editShipToForm, (salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.orderDate) && jsxRuntime.jsxs(FieldLabel, Object.assign({
         label: t("purchase-label:fields.orderDate")
       }, {
         children: [jsxRuntime.jsx(giger.Typography, Object.assign({
@@ -28308,7 +28445,7 @@ const ShipmentForm = ({
         }, {
           children: formatDate(salesOrder.orderDate)
         })), jsxRuntime.jsx(Spacer, {})]
-      })), jsxRuntime.jsxs(FieldLabel, Object.assign({
+      })), ((_b = salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.paymentDetails) === null || _b === void 0 ? void 0 : _b.grandTotal) && jsxRuntime.jsxs(FieldLabel, Object.assign({
         label: t("purchase-label:fields.orderValue")
       }, {
         children: [jsxRuntime.jsx(giger.Typography, Object.assign({
@@ -28324,7 +28461,7 @@ const ShipmentForm = ({
         }, {
           children: requestedServices.length > 1 ? t("purchase-label:multipleShippingServices") : requestedServices[0].toString()
         })), jsxRuntime.jsx(Spacer, {})]
-      })), salesOrder.paymentDetails.estimatedShipping.amount > 0 && jsxRuntime.jsxs(FieldLabel, Object.assign({
+      })), salesOrder && salesOrder.paymentDetails.estimatedShipping.amount > 0 && jsxRuntime.jsxs(FieldLabel, Object.assign({
         label: t("purchase-label:fields.estimatedShipping")
       }, {
         children: [jsxRuntime.jsx(giger.Typography, Object.assign({
@@ -28332,7 +28469,7 @@ const ShipmentForm = ({
         }, {
           children: formatMoney(salesOrder.paymentDetails.estimatedShipping)
         })), jsxRuntime.jsx(Spacer, {})]
-      })), salesOrder && salesOrder.salesOrderItems.length > 0 && jsxRuntime.jsx(FieldLabel, Object.assign({
+      })), salesOrderItems.length > 0 && jsxRuntime.jsx(FieldLabel, Object.assign({
         label: t("purchase-label:fields.items")
       }, {
         children: jsxRuntime.jsxs("div", Object.assign({
@@ -28344,7 +28481,7 @@ const ShipmentForm = ({
           children: [jsxRuntime.jsx(giger.Typography, Object.assign({
             variant: "body2"
           }, {
-            children: salesOrder.salesOrderItems.reduce((total, i) => i.quantity + total, 0).toString()
+            children: salesOrderItems.length.toString()
           })), jsxRuntime.jsxs(giger.Link, Object.assign({
             css: theme => ({
               alignItems: "center",
@@ -28363,15 +28500,7 @@ const ShipmentForm = ({
           }))]
         }))
       })), showItems && jsxRuntime.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
       })]
     })), jsxRuntime.jsx("div", {
       ref: customsItemErrorScrollToRef
@@ -28395,7 +28524,7 @@ const ShipmentForm = ({
       }), jsxRuntime.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" && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      }), ((_c = customsErrors === null || customsErrors === void 0 ? void 0 : customsErrors.customsItems) === null || _c === void 0 ? void 0 : _c.type) === "too_small" && jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [jsxRuntime.jsx(Spacer, {}), jsxRuntime.jsx(giger.InlineNotification, {
           title: t("purchase-label:errorMessages.customsItemsRequired"),
           type: giger.NotificationType.ERROR
@@ -28555,7 +28684,7 @@ const ShipmentForm = ({
         label: "purchase-label:fields.addOns"
       }, {
         children: [jsxRuntime.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,
@@ -28571,7 +28700,7 @@ const ShipmentForm = ({
             shouldUnregister: true
           })
         })), jsxRuntime.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),
@@ -28860,6 +28989,30 @@ const Shipment$1 = ({
   });
 };
 
+const SuspendShipment = ({
+  children,
+  errors,
+  isLoading,
+  shipment
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "purchase-label"]);
+  if (isLoading) return jsxRuntime.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 jsxRuntime.jsx("div", Object.assign({
+    css: {
+      height: "100%",
+      width: "100%"
+    }
+  }, {
+    children: children
+  }));
+};
+
 const VoidLabel$1 = ({
   onComplete,
   onSubmit,
@@ -28990,26 +29143,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 = zod.z.object({
+  isEnabled: zod.z.boolean(),
+  lowBalancePurchaseThreshold: moneySchema.extend({
+    amount: zod.z.number().min(25)
+  }),
+  maximumPurchasesPerDay: zod.z.number().min(1),
+  purchaseAmount: moneySchema.extend({
+    amount: zod.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
+  } = reactI18next.useTranslation();
+  const updateAutoFunding = react.useUpdateAutoFunding(carrierId);
+  const autoFundingConfiguration = react.useGetAutoFundingConfiguration();
+  const form = reactHookForm.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?
+      react.logger.error("Toggling auto-funding failed because autoFundingData is undefined.");
+    }
+  };
+  if (autoFundingConfiguration.isLoading) return jsxRuntime.jsx(Loader, {
+    message: t("manage-funding:autoFunding.isLoading")
+  });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.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 && jsxRuntime.jsxs("form", Object.assign({
+      css: styles.form,
+      id: "auto-funding-form",
+      onSubmit: handleSubmit
+    }, {
+      children: [jsxRuntime.jsx(MoneyInput, {
+        control: form.control,
+        disabled: !watchIsEnabled,
+        label: t("manage-funding:autoFunding.purchaseAmount"),
+        name: "purchaseAmount",
+        showCurrencySymbol: true
+      }), jsxRuntime.jsx(MoneyInput, {
+        control: form.control,
+        disabled: !watchIsEnabled,
+        label: t("manage-funding:autoFunding.lowBalancePurchaseThreshold"),
+        name: "lowBalancePurchaseThreshold",
+        showCurrencySymbol: true
+      }), jsxRuntime.jsx(NumberInput, {
+        control: form.control,
+        disabled: !watchIsEnabled,
+        isInteger: true,
+        label: t("manage-funding:autoFunding.maximumPurchasesPerDay"),
+        name: "maximumPurchasesPerDay"
+      }), jsxRuntime.jsxs(ButtonGroup, Object.assign({
+        justify: "end"
+      }, {
+        children: [jsxRuntime.jsx(giger.Button, Object.assign({
+          disabled: !isDirty,
+          onClick: () => form.reset(),
+          variant: giger.ButtonVariant.TEXT
+        }, {
+          children: t("actions.cancel")
+        })), jsxRuntime.jsx(SubmitButton, Object.assign({
+          control: form.control,
+          "data-testid": "submit-auto-funding",
+          disabled: !watchIsEnabled,
+          requireDirty: true,
+          variant: giger.ButtonVariant.OUTLINED
+        }, {
+          children: t("manage-funding:actions.saveRule")
+        }))]
+      }))]
+    })), autoFundingConfiguration.error && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(Spacer, {
+        multiplier: 1
+      }), jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+        title: t("manage-funding:autoFunding.error.title"),
+        type: giger.NotificationType.ERROR
+      }, {
+        children: autoFundingConfiguration.error[0].message
+      }))]
+    })]
+  });
+};
+
 /**
  * Captures errors thrown within an Element, logs them and displays a fallback component
  *
@@ -29073,49 +29355,82 @@ class ErrorBoundary extends React__namespace.Component {
   }
 }
 
+const ManageFunding = ({
+  carrierId
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const {
+    isLoading: isLoadingCarrier
+  } = react.useGetCarrierById(carrierId);
+  const [isAddFundsFormOpen, setIsAddFundsFormOpen] = React.useState(false);
+  if (isLoadingCarrier) return jsxRuntime.jsx(Loader, {
+    message: t("loading.carrier")
+  });
+  return jsxRuntime.jsxs("section", {
+    children: [jsxRuntime.jsxs(Spread, {
+      children: [jsxRuntime.jsx(CarrierBalance, {
+        carrierId: carrierId
+      }), jsxRuntime.jsx(LinkAction, {
+        icon: "add",
+        isDisabled: isAddFundsFormOpen,
+        onClick: () => setIsAddFundsFormOpen(true),
+        title: t("manage-funding:actions.addFunds")
+      })]
+    }), isAddFundsFormOpen && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(Spacer, {
+        multiplier: 2
+      }), jsxRuntime.jsx(AddFundsForm, {
+        carrierId: carrierId,
+        onCancel: () => setIsAddFundsFormOpen(false)
+      })]
+    }), jsxRuntime.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] = React.useState(null);
-  const onMountInterfaceTarget = React.useCallback(element => {
-    if (element) setInterfaceTarget(element);
-  }, []);
-  const formStyle = [variant === "well" && (theme => ({
-    backgroundColor: theme.palette.gray.megaLight,
-    padding: theme.spacing(2)
-  })), css];
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(Portal, Object.assign({
-      target: rootTarget
+  notes
+}) => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  children: [jsxRuntime.jsxs("div", Object.assign({
+    css: () => ({
+      backgroundColor: "lightsteelblue",
+      marginBottom: "16px",
+      padding: "16px",
+      paddingLeft: "32px"
+    })
+  }, {
+    children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+      variant: "heading5"
     }, {
-      children: jsxRuntime.jsx("form", Object.assign({
-        id: id,
-        onSubmit: onSubmit
-      }, {
-        children: jsxRuntime.jsx(Portal, Object.assign({
-          target: interfaceTarget
-        }, {
-          children: children
-        }))
-      }))
-    })), jsxRuntime.jsx("section", {
-      css: formStyle,
-      id: id + "-interface",
-      ref: onMountInterfaceTarget
-    })]
-  });
-};
+      children: "Story notes:"
+    })), jsxRuntime.jsx("ul", Object.assign({
+      css: theme => ({
+        "> li": {
+          marginTop: theme.spacing(1)
+        }
+      })
+    }, {
+      children: notes.map(n => jsxRuntime.jsx("li", {
+        children: n
+      }, n))
+    }))]
+  })), jsxRuntime.jsx("hr", {
+    css: () => ({
+      backgroundColor: "transparent",
+      borderTop: "1px dotted lightgrey",
+      marginBottom: "16px"
+    })
+  }), children]
+});
 
 var $$2 = _export;
 var uncurryThis = functionUncurryThisClause;
@@ -30122,6 +30437,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",
@@ -30148,6 +30464,7 @@ var common = {
 		thirdParty: "Third Party"
 	},
 	loading: {
+		carrier: "Loading carrier...",
 		carriers: "Loading carriers...",
 		data: "Loading...",
 		importingSalesOrder: "Importing order...",
@@ -30244,11 +30561,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: {
@@ -30261,20 +30578,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"
 }
 };
@@ -30792,7 +31120,75 @@ const ListCarriers = () => {
   });
 };
 
-const Element$6 = registerElement("list-carriers", ListCarriers);
+const Element$5 = registerElement("list-carriers", ListCarriers);
+
+const ManageWarehouses = () => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const {
+    data: warehouses,
+    error: listWarehouseErrors,
+    isLoading: isLoadingWarehouses,
+    refetch: refreshListWarehouses
+  } = react.useListWarehouses();
+  const {
+    error: updateWarehouseErrors,
+    mutateAsync: updateWarehouse
+  } = react.useUpdateWarehouse();
+  const {
+    error: createWarehouseErrors,
+    mutateAsync: createWarehouse
+  } = react.useCreateWarehouse();
+  const {
+    error: deleteWarehouseErrors,
+    mutateAsync: deleteWarehouse
+  } = react.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 jsxRuntime.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 jsxRuntime.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,
@@ -30918,7 +31314,7 @@ const useAddress = ({
   }), [handleValidateAddress, onChange, shipment, updateShipment]);
   React.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 = React.useMemo(() => Object.keys((addressPreference === null || addressPreference === void 0 ? void 0 : addressPreference.selection) || {}).reduce((warning, key) => {
@@ -31398,135 +31794,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
-  } = react.useAddFunds();
-  const {
-    data: autoFundingData,
-    error: autoFundingErrors,
-    isLoading: isAutoFundingLoading,
-    refetch: refreshAutoFundingConfiguration
-  } = react.useGetAutoFundingConfiguration();
-  const {
-    mutateAsync: configureAutoFunding
-  } = react.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 jsxRuntime.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
-  } = reactI18next.useTranslation();
-  const {
-    data: warehouses,
-    error: listWarehouseErrors,
-    isLoading: isLoadingWarehouses,
-    refetch: refreshListWarehouses
-  } = react.useListWarehouses();
-  const {
-    error: updateWarehouseErrors,
-    mutateAsync: updateWarehouse
-  } = react.useUpdateWarehouse();
-  const {
-    error: createWarehouseErrors,
-    mutateAsync: createWarehouse
-  } = react.useCreateWarehouse();
-  const {
-    error: deleteWarehouseErrors,
-    mutateAsync: deleteWarehouse
-  } = react.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 jsxRuntime.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 jsxRuntime.jsx(ManageWarehouses$1, {
-    errors: errors,
-    onAdd: handleSubmitAddNewWarehouse,
-    onDelete: handleDeleteWarehouse,
-    onEdit: handleSubmitEditWarehouse,
-    onSetDefault: handleSetDefault,
-    warehouses: warehouses
-  });
-};
-
 const Onboarding = ({
   onCompleteOnboarding
 }) => {
@@ -31659,7 +31926,8 @@ const useConfigureShipment = ({
   onLoad,
   onShipmentUpdated,
   salesOrder,
-  warehouseId
+  warehouseId,
+  printLabelLayout
 }) => {
   var _a, _b;
   const {
@@ -31676,12 +31944,12 @@ const useConfigureShipment = ({
     yield reloadPendingShipment();
     yield onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(shipment);
   }), [onShipmentUpdated, reloadPendingShipment]);
-  const printLabelLayout = (_b = (_a = react.useGetAccountSettings().data) === null || _a === void 0 ? void 0 : _a.defaultLabelLayout) !== null && _b !== void 0 ? _b : "4x6";
+  const labelLayoutSetting = (_b = (_a = react.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
   };
@@ -31740,7 +32008,7 @@ const useImportSalesOrder = ({
   };
 };
 
-const SalesOrder = _a => {
+const PurchaseLabelBySalesOrder = _a => {
   var {
       features,
       externalOrderId,
@@ -31770,7 +32038,7 @@ const SalesOrder = _a => {
     salesOrder,
     warehouseId
   });
-  return jsxRuntime.jsx(SalesOrder$1, Object.assign({
+  return jsxRuntime.jsx(SuspendSalesOrder, Object.assign({
     salesOrder: salesOrder
   }, salesOrderProps, {
     children: salesOrder && jsxRuntime.jsx(ConfigureShipment, Object.assign({
@@ -31780,6 +32048,79 @@ const SalesOrder = _a => {
   }));
 };
 
+const useLoadShipment = ({
+  shipmentId
+}) => {
+  const {
+    data: shipment,
+    error: loadShipmentErrors,
+    refetch: refetchShipment,
+    isLoading
+  } = react.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 jsxRuntime.jsx(SuspendShipment, Object.assign({
+    shipment: shipment
+  }, shipmentProps, {
+    children: shipment && jsxRuntime.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 jsxRuntime.jsx(PurchaseLabelByShipment, Object.assign({
+      shipmentId: shipmentId
+    }, props));
+  } else {
+    return jsxRuntime.jsx(PurchaseLabelBySalesOrder, Object.assign({}, props));
+  }
+};
+
 const Shipment = ({
   features,
   onClickPrintLabel,
@@ -31848,11 +32189,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);
 
@@ -32542,9 +32879,42 @@ 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 = brands.createTheme(brands.BrandName.FALLBACK);
+  return react$2.render(component, {
+    wrapper: ({
+      children
+    }) => jsxRuntime.jsx(react.ShipEngineProvider, Object.assign({
+      baseURL: "/api",
+      getToken: () => {
+        var _a;
+        return (_a = process.env.STORYBOOK_TOKEN) !== null && _a !== void 0 ? _a : "none";
+      }
+    }, {
+      children: jsxRuntime.jsx(RootPortalProvider, {
+        children: jsxRuntime.jsx(giger.GigerConfigProvider, Object.assign({
+          resolveIcon: name => `<svg>${name}</svg>`
+        }, {
+          children: jsxRuntime.jsx(react$1.ThemeProvider, Object.assign({
+            theme: brands.deserialize(theme)
+          }, {
+            children: children
+          }))
+        }))
+      })
+    }))
+  });
+};
 
 exports.Accordion = Accordion;
+exports.AddFundsForm = AddFundsForm;
+exports.AutoFundingForm = AutoFundingForm;
 exports.ButtonGroup = ButtonGroup;
+exports.CarrierBalance = CarrierBalance;
 exports.Country = Country;
 exports.Cube = Cube;
 exports.ElementsContext = ElementsContext;
@@ -32554,11 +32924,14 @@ exports.ErrorFallback = ErrorFallback;
 exports.Field = fields;
 exports.FieldLabel = FieldLabel;
 exports.FormPortal = FormPortal;
+exports.FundAndPurchase = FundAndPurchase;
 exports.GigerProvider = GigerProvider;
+exports.InlineLabel = InlineLabel;
 exports.ItemsBreakdown = ItemsBreakdown;
-exports.ListCarriers = Element$6;
+exports.LinkAction = LinkAction;
+exports.ListCarriers = Element$5;
 exports.Loader = Loader;
-exports.ManageFunding = Element$5;
+exports.ManageFunding = ManageFunding;
 exports.ManageWarehouses = Element$4;
 exports.Onboarding = Element$2;
 exports.PageLayoutProvider = PageLayoutProvider;
@@ -32566,6 +32939,8 @@ exports.Portal = Portal;
 exports.PurchaseLabel = Element$3;
 exports.RootPortalProvider = RootPortalProvider;
 exports.Spacer = Spacer;
+exports.Spread = Spread;
+exports.StoryNotes = StoryNotes;
 exports.Templates = index$1;
 exports.UsState = UsState;
 exports.UsaCity = UsaCity;
@@ -32574,6 +32949,7 @@ exports.VoidLabel = Element;
 exports.addressFactory = addressFactory;
 exports.addressPreferenceFactory = addressPreferenceFactory;
 exports.addressValidationFactory = addressValidationFactory;
+exports.autoFundingSchema = autoFundingSchema;
 exports.calculateTotal = calculateTotal;
 exports.capitalizeFirstLetter = capitalizeFirstLetter;
 exports.carrierFactory = carrierFactory;
@@ -32598,6 +32974,7 @@ exports.formatDate = formatDate;
 exports.formatFractionalWeight = formatFractionalWeight;
 exports.formatMoney = formatMoney;
 exports.fractionalWeightFactory = fractionalWeightFactory;
+exports.getAddFundsSchema = getAddFundsSchema;
 exports.getCustomsFromSalesOrder = getCustomsFromSalesOrder;
 exports.getExpirationYears = getExpirationYears;
 exports.getIsCustomsRequiredForSalesOrder = getIsCustomsRequiredForSalesOrder;
@@ -32606,6 +32983,7 @@ exports.getIsInternationalShipment = getIsInternationalShipment;
 exports.getPendingShipment = getPendingShipment;
 exports.getRateRequiresAcknowledgement = getRateRequiresAcknowledgement;
 exports.getRequestedServices = getRequestedServices;
+exports.getSalesOrderItemsFromSalesOrderOrShipment = getSalesOrderItemsFromSalesOrderOrShipment;
 exports.getTotalRateAmount = getTotalRateAmount;
 exports.isDomesticAddress = isDomesticAddress;
 exports.isFlatRatePackageCode = isFlatRatePackageCode;
@@ -32638,6 +33016,7 @@ exports.randomShipengineId = randomShipengineId;
 exports.randomShipengineSlug = randomShipengineSlug;
 exports.randomWeightUnit = randomWeightUnit;
 exports.registerElement = registerElement;
+exports.renderWithAllProviders = renderWithAllProviders;
 exports.renderWithProviders = renderWithProviders;
 exports.salesOrderFactory = salesOrderFactory;
 exports.salesOrderItemFactory = salesOrderItemFactory;