@shipengine/elements 0.16.0 → 0.16.1

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;
 
@@ -3361,6 +3362,7 @@ const createFieldController = (options = {}) => function FieldController(_a) {
       displayErrors = true,
       displayLabel = true,
       errors: errorsProp,
+      hint,
       inputOnly,
       isOptional,
       label,
@@ -3371,7 +3373,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 +3449,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 +22006,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 +22023,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, {
@@ -24220,390 +24226,6 @@ 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 {
-    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")
-  });
-  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: [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: t("actions.cancel")
-        })), jsxRuntime.jsx(SubmitButton, Object.assign({
-          control: form.control,
-          "data-testid": "autoFunding.submit",
-          disabled: !watchIsEnabled,
-          requireDirty: true,
-          variant: giger.ButtonVariant.OUTLINED
-        }, {
-          children: t("manage-funding:actions.saveRule")
-        }))]
-      }))]
-    })), 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 ManualFundingForm = ({
-  currentBalance,
-  errorMessage,
-  formId,
-  hasError,
-  isLoading,
-  onCancel,
-  onSubmit,
-  portalRef,
-  requiredAmount
-}) => {
-  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
-      }
-    },
-    resolver: validationResolver(manualFundingSchema)
-  });
-  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)
-    })
-  }, {
-    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: 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, {
-        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,
@@ -24743,7 +24365,7 @@ const LandingPageForm = ({
   }));
 };
 
-const styles$6 = createStyles({
+const styles$8 = createStyles({
   container: theme => ({
     padding: theme.spacing(2)
   }),
@@ -24764,11 +24386,11 @@ const LandingPage = ({
     t
   } = reactI18next.useTranslation();
   return jsxRuntime.jsxs("div", Object.assign({
-    css: styles$6.container,
+    css: styles$8.container,
     "data-testid": "landing-page"
   }, {
     children: [jsxRuntime.jsxs("div", Object.assign({
-      css: styles$6.header
+      css: styles$8.header
     }, {
       children: [jsxRuntime.jsx(giger.Typography, Object.assign({
         variant: "heading4"
@@ -24786,7 +24408,7 @@ const LandingPage = ({
     })), jsxRuntime.jsx(LandingPageForm, {
       onSubmit: onSubmit
     }), jsxRuntime.jsxs("div", Object.assign({
-      css: styles$6.header
+      css: styles$8.header
     }, {
       children: [jsxRuntime.jsx(Spacer, {
         multiplier: 6
@@ -24797,7 +24419,7 @@ const LandingPage = ({
       })), jsxRuntime.jsx(Spacer, {
         multiplier: 2
       }), jsxRuntime.jsx(giger.Typography, Object.assign({
-        css: styles$6.description,
+        css: styles$8.description,
         variant: "body1"
       }, {
         children: t("onboarding:landing.description")
@@ -24878,7 +24500,7 @@ const Accordion = _a => {
   });
 };
 
-const styles$5 = createStyles({
+const styles$7 = createStyles({
   carrierTypography: theme => ({
     color: theme.palette.black
   }),
@@ -24963,13 +24585,13 @@ const ListCarriersRow = ({
     setIsSubmitting(false);
   });
   return jsxRuntime.jsxs("div", Object.assign({
-    css: styles$5.container
+    css: styles$7.container
   }, {
     children: [jsxRuntime.jsxs("div", Object.assign({
-      css: styles$5.rowContainer
+      css: styles$7.rowContainer
     }, {
       children: [jsxRuntime.jsxs("div", Object.assign({
-        css: styles$5.logoContainer
+        css: styles$7.logoContainer
       }, {
         children: [jsxRuntime.jsx("div", {
           children: jsxRuntime.jsx("img", {
@@ -25006,7 +24628,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 +24675,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 +24696,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 +24723,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 +24774,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 +24816,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 +24933,7 @@ const warehouseSchema = zod.z.discriminatedUnion("returnToAddressIsDifferent", [
   });
 });
 
-const styles$2 = createStyles({
+const styles$4 = createStyles({
   header: {
     textAlign: "center"
   },
@@ -25363,12 +24985,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"
@@ -26757,7 +26379,7 @@ const EditWalletAddressForm = ({
   }));
 };
 
-const styles$1 = createStyles({
+const styles$3 = createStyles({
   grid: theme => ({
     margin: theme.spacing(4)
   }),
@@ -26805,21 +26427,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 +26463,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 +26530,7 @@ const WalletForm = ({
   }));
 };
 
-const styles = createStyles({
+const styles$2 = createStyles({
   lastStep: {
     "& > span::first-of-type": {
       "::after": {
@@ -27122,16 +26744,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()]
@@ -27203,6 +26825,549 @@ const Cube = _a => {
   }));
 };
 
+/**
+ * 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: 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 +27396,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 +27409,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 +27437,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 +27469,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 +27490,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);
@@ -27361,86 +27508,36 @@ const RateForm = ({
             variant: "body1"
           }, {
             children: showHiddenRates ? t("purchase-label:actions.showFewerRates") : t("purchase-label:actions.showMoreRates")
-          }))
-        }))]
-      }) : !isLoading && errors && !!errors.length ? null : jsxRuntime.jsxs("article", Object.assign({
-        css: {
-          alignItems: "center",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center"
-        },
-        role: "presentation"
-      }, {
-        children: [jsxRuntime.jsx(Cube, {
-          animate: isLoading
-        }), jsxRuntime.jsx(Spacer, {}), isLoading ? t("purchase-label:loading.calculatingRates") : t("purchase-label:cta.addPackageDetails")]
-      })), !isLoading && (errors && !!errors.length && rateOptions.length === 0 || !!(labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length)) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(Spacer, {}), jsxRuntime.jsxs(giger.InlineNotification, Object.assign({
-          title: t("errorTypes.rateInvalid"),
-          type: giger.NotificationType.ERROR
-        }, {
-          children: [errors === null || errors === void 0 ? void 0 : errors.map(e => t(jsBase64.encode(e.message), {
-            defaultValue: e.message.includes("No rates are available for service_codes") ? t("common:errorMessages.noRatesAvailable") : e.message
-          })).join(" "), labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.map(e => t(jsBase64.encode(e.message), {
-            defaultValue: e.message.replace(/Exception with code [\w\d]+; module [\d]+, category [\d]+, item [\d]+/g, "")
-          }))]
-        }))]
-      })]
-    })), 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"
+          }))
+        }))]
+      }) : !isLoading && errors && !!errors.length ? null : jsxRuntime.jsxs("article", Object.assign({
+        css: styles$1.ratesInterstitial,
+        role: "presentation"
       }, {
-        children: jsxRuntime.jsxs(ButtonGroup, Object.assign({
-          "data-testid": "actions"
+        children: [jsxRuntime.jsx(Cube, {
+          animate: isLoading
+        }), jsxRuntime.jsx(Spacer, {}), isLoading ? t("purchase-label:loading.calculatingRates") : t("purchase-label:cta.addPackageDetails")]
+      })), !isLoading && (errors && !!errors.length && rateOptions.length === 0 || !!(labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length)) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(Spacer, {}), jsxRuntime.jsxs(giger.InlineNotification, Object.assign({
+          title: t("errorTypes.rateInvalid"),
+          type: giger.NotificationType.ERROR
         }, {
-          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")
+          children: [errors === null || errors === void 0 ? void 0 : errors.map(e => t(jsBase64.encode(e.message), {
+            defaultValue: e.message.includes("No rates are available for service_codes") ? t("common:errorMessages.noRatesAvailable") : e.message
+          })).join(" "), labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.map(e => t(jsBase64.encode(e.message), {
+            defaultValue: e.message.replace(/Exception with code [\w\d]+; module [\d]+, category [\d]+, item [\d]+/g, "")
           }))]
-        }))
-      }))]
-    }))]
+        }))]
+      })]
+    })), 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)
+    })]
   }));
 };
 
@@ -28990,7 +29087,6 @@ var index$1 = /*#__PURE__*/Object.freeze({
 	CarrierTermsForm: CarrierTermsForm,
 	CustomsItemForm: CustomsItemForm,
 	getCustomsItemFormSchema: getCustomsItemFormSchema,
-	FundingMethods: FundingMethods,
 	Label: Label,
 	LandingPage: LandingPage,
 	ListCarriers: ListCarriers$1,
@@ -29004,12 +29100,141 @@ var index$1 = /*#__PURE__*/Object.freeze({
 	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 +29298,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 +30380,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 +30407,7 @@ var common = {
 		thirdParty: "Third Party"
 	},
 	loading: {
+		carrier: "Loading carrier...",
 		carriers: "Loading carriers...",
 		data: "Loading...",
 		importingSalesOrder: "Importing order...",
@@ -30244,11 +30504,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 +30521,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"
 }
 };
@@ -30783,16 +31054,84 @@ const ListCarriers = () => {
     }
     yield refetchCarriers();
   });
-  // TODO: How to pass two sets of errors and isLoading, possible example is to join errors like in RateForm and ShipmentForm.
-  return jsxRuntime.jsx(ListCarriers$1, {
-    carriers: carriersConnectedStatus,
-    isLoading: isLoading,
-    onRegisterCarrier: handleRegistration,
-    registerCarrierErrors: registerCarrierErrors
+  // TODO: How to pass two sets of errors and isLoading, possible example is to join errors like in RateForm and ShipmentForm.
+  return jsxRuntime.jsx(ListCarriers$1, {
+    carriers: carriersConnectedStatus,
+    isLoading: isLoading,
+    onRegisterCarrier: handleRegistration,
+    registerCarrierErrors: registerCarrierErrors
+  });
+};
+
+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$6 = registerElement("list-carriers", ListCarriers);
+const Element$4 = registerElement("manage-warehouses", ManageWarehouses);
 
 const useAddress = ({
   compatibleCountryCodes,
@@ -31398,196 +31737,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
-}) => {
-  const {
-    t
-  } = reactI18next.useTranslation(["common", "register-wallet"]);
-  const {
-    data: warehouses,
-    refetch: refetchWarehouses
-  } = react.useListWarehouses();
-  const {
-    mutateAsync: createWarehouse
-  } = react.useCreateWarehouse();
-  const {
-    data: carriers,
-    refetch: refetchCarriers
-  } = react.useListCarriers();
-  const {
-    error: registerStampsCarrierErrors,
-    mutateAsync: registerStampsCarrier
-  } = react.useConnectCarrier();
-  const {
-    error: registerUpsCarrierErrors,
-    mutateAsync: registerUpsCarrier,
-    isLoading: isLoadingUps
-  } = react.useConnectCarrier();
-  const {
-    error: registerDhlCarrierErrors,
-    mutateAsync: registerDhlCarrier,
-    isLoading: isLoadingDhl
-  } = react.useConnectCarrier();
-  const onWarehouseCreated = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-    yield refetchWarehouses();
-  }), [refetchWarehouses]);
-  const onCarrierCreated = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-    yield refetchCarriers();
-  }), [refetchCarriers]);
-  if (!carriers) return jsxRuntime.jsx(Loader, {
-    message: t("loading.carriers")
-  });
-  if (!warehouses) return jsxRuntime.jsx(Loader, {
-    message: t("loading.warehouses")
-  });
-  return jsxRuntime.jsx(Onboarding$1, {
-    carriers: carriers,
-    createWarehouse: createWarehouse,
-    isLoadingDhl: isLoadingDhl,
-    isLoadingUps: isLoadingUps,
-    onCarrierCreated: onCarrierCreated,
-    onCompleteOnboarding: onCompleteOnboarding,
-    onWarehouseCreated: onWarehouseCreated,
-    registerDhlCarrier: registerDhlCarrier,
-    registerDhlCarrierErrors: registerDhlCarrierErrors,
-    registerStampsCarrier: registerStampsCarrier,
-    registerStampsCarrierErrors: registerStampsCarrierErrors,
-    registerUpsCarrier: registerUpsCarrier,
-    registerUpsCarrierErrors: registerUpsCarrierErrors,
-    warehouses: warehouses
-  });
-};
-
 const usePendingShipment = ({
   onLoad,
   salesOrder,
@@ -31780,6 +31929,69 @@ const SalesOrder = _a => {
   }));
 };
 
+const Element$3 = registerElement("purchase-label", SalesOrder);
+
+const Onboarding = ({
+  onCompleteOnboarding
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "register-wallet"]);
+  const {
+    data: warehouses,
+    refetch: refetchWarehouses
+  } = react.useListWarehouses();
+  const {
+    mutateAsync: createWarehouse
+  } = react.useCreateWarehouse();
+  const {
+    data: carriers,
+    refetch: refetchCarriers
+  } = react.useListCarriers();
+  const {
+    error: registerStampsCarrierErrors,
+    mutateAsync: registerStampsCarrier
+  } = react.useConnectCarrier();
+  const {
+    error: registerUpsCarrierErrors,
+    mutateAsync: registerUpsCarrier,
+    isLoading: isLoadingUps
+  } = react.useConnectCarrier();
+  const {
+    error: registerDhlCarrierErrors,
+    mutateAsync: registerDhlCarrier,
+    isLoading: isLoadingDhl
+  } = react.useConnectCarrier();
+  const onWarehouseCreated = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    yield refetchWarehouses();
+  }), [refetchWarehouses]);
+  const onCarrierCreated = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    yield refetchCarriers();
+  }), [refetchCarriers]);
+  if (!carriers) return jsxRuntime.jsx(Loader, {
+    message: t("loading.carriers")
+  });
+  if (!warehouses) return jsxRuntime.jsx(Loader, {
+    message: t("loading.warehouses")
+  });
+  return jsxRuntime.jsx(Onboarding$1, {
+    carriers: carriers,
+    createWarehouse: createWarehouse,
+    isLoadingDhl: isLoadingDhl,
+    isLoadingUps: isLoadingUps,
+    onCarrierCreated: onCarrierCreated,
+    onCompleteOnboarding: onCompleteOnboarding,
+    onWarehouseCreated: onWarehouseCreated,
+    registerDhlCarrier: registerDhlCarrier,
+    registerDhlCarrierErrors: registerDhlCarrierErrors,
+    registerStampsCarrier: registerStampsCarrier,
+    registerStampsCarrierErrors: registerStampsCarrierErrors,
+    registerUpsCarrier: registerUpsCarrier,
+    registerUpsCarrierErrors: registerUpsCarrierErrors,
+    warehouses: warehouses
+  });
+};
+
 const Shipment = ({
   features,
   onClickPrintLabel,
@@ -31848,12 +32060,6 @@ 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$2 = registerElement("onboarding", Onboarding);
 
 const Element$1 = registerElement("view-shipment", Shipment);
@@ -32542,9 +32748,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 +32793,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 +32808,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 +32818,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 +32843,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;
@@ -32638,6 +32884,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;