@shipengine/elements 0.16.0 → 0.16.1

package/index.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { useController, get as get$1, set as set$2, useWatch, useFormState, useForm } from 'react-hook-form';
 import { useTranslation, Trans, initReactI18next, I18nextProvider } from 'react-i18next';
-import { Typography, FormField, FieldMessageType, Input, Checkbox, Icon, Divider, Link, Select as Select$1, Next, Option, Button, Switch as Switch$1, Textarea, ButtonVariant, InlineNotification, NotificationType, ButtonColor, Grid, GridChild, Tag, TagColor, Spinner, SpinnerSize, ChipList, Chip, ButtonSize, IconSize, Skeleton, SkeletonAnimation, SkeletonVariant, SkeletonBackgroundColor, Stepper, Step, BottomSheet, Table, TableBody, TableBaseRow, TableBodyCell, TableHeader, TableHeaderCell, useToggle as useToggle$1, Popover, DropdownOptionList, GigerConfigProvider, EmotionReset, FontsLoader } from '@packlink/giger';
+import { Typography, FormField, FieldMessageType, Input, Checkbox, Icon, Divider, Link, Select as Select$1, Next, Option, Button, Switch as Switch$1, Textarea, ButtonVariant, InlineNotification, NotificationType, ButtonColor, Grid, GridChild, Tag, TagColor, Skeleton, SkeletonAnimation, SkeletonVariant, SkeletonBackgroundColor, IconSize, Stepper, Step, Spinner, SpinnerSize, ChipList, Chip, ButtonSize, Table, TableBody, TableBaseRow, TableBodyCell, TableHeader, TableHeaderCell, useToggle as useToggle$1, Popover, DropdownOptionList, BottomSheet, GigerConfigProvider, EmotionReset, FontsLoader } from '@packlink/giger';
 import axios from 'axios';
-import { logger, ShipEngineProvider, useListCarriers, useConnectCarrier, useValidateAddresses, useUpdateSalesOrderShipment, useParseAddress, useListCustomPackageTypes, useCalculateRates, useCreateLabel, useListWarehouses, useAddFunds, useGetAutoFundingConfiguration, useUpdateAutoFunding, useUpdateWarehouse, useCreateWarehouse, useDeleteWarehouse, useListSalesOrderShipments, useCreateSalesOrderShipment, useGetAccountSettings, useListSalesOrders, useGetSalesOrder, useListOrderSources, useRefreshOrderSource, useGetSalesOrderShipment, useListLabels, useGetLabel, useVoidLabel } from '@shipengine/react';
+import { logger, ShipEngineProvider, useAddFunds, useGetCarrierById, useUpdateAutoFunding, useGetAutoFundingConfiguration, useListCarriers, useConnectCarrier, useListWarehouses, useUpdateWarehouse, useCreateWarehouse, useDeleteWarehouse, useValidateAddresses, useUpdateSalesOrderShipment, useParseAddress, useListCustomPackageTypes, useCalculateRates, useCreateLabel, useListSalesOrderShipments, useCreateSalesOrderShipment, useGetAccountSettings, useListSalesOrders, useGetSalesOrder, useListOrderSources, useRefreshOrderSource, useGetSalesOrderShipment, useListLabels, useGetLabel, useVoidLabel } from '@shipengine/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import * as React from 'react';
@@ -18,6 +18,7 @@ import { createPortal } from 'react-dom';
 import { isValidPhoneNumber } from 'libphonenumber-js/min';
 import cardValidator from 'card-validator';
 import { encode } from 'js-base64';
+import { useIsMutating } from 'react-query';
 import { stringify, COMMENT, rulesheet, middleware, RULESET, combine, match as match$1, serialize, copy, replace as replace$4, WEBKIT as WEBKIT$1, MOZ, MS, KEYFRAMES, DECLARATION, compile, dealloc, alloc, hash, charat, strlen, indexof, next, token, from, peek, delimit, slice, position, prefixer as prefixer$1 } from 'stylis';
 import i18n from 'i18next';
 import languageDetector from 'i18next-browser-languagedetector';
@@ -2009,7 +2010,7 @@ const getRateRequiresAcknowledgement = serviceCode => {
       return false;
   }
 };
-const getTotalRateAmount = rateCosts => calculateTotal(...Object.values(rateCosts));
+const getTotalRateAmount = (rateCosts = {}) => calculateTotal(...Object.values(rateCosts));
 
 var anObject$9 = anObject$f;
 
@@ -3331,6 +3332,7 @@ const createFieldController = (options = {}) => function FieldController(_a) {
       displayErrors = true,
       displayLabel = true,
       errors: errorsProp,
+      hint,
       inputOnly,
       isOptional,
       label,
@@ -3341,7 +3343,7 @@ const createFieldController = (options = {}) => function FieldController(_a) {
       shouldUnregister,
       subLabel
     } = _a,
-    formInputProps = __rest(_a, ["children", "control", "defaultValue", "displayErrors", "displayLabel", "errors", "inputOnly", "isOptional", "label", "labelWeight", "name", "nativeLabel", "rules", "shouldUnregister", "subLabel"]);
+    formInputProps = __rest(_a, ["children", "control", "defaultValue", "displayErrors", "displayLabel", "errors", "hint", "inputOnly", "isOptional", "label", "labelWeight", "name", "nativeLabel", "rules", "shouldUnregister", "subLabel"]);
   const {
     field,
     fieldState
@@ -3417,6 +3419,9 @@ const createFieldController = (options = {}) => function FieldController(_a) {
       message: displayErrors && mergedErrorMessages.length > 0 ? {
         content: mergedErrorMessages.join(", "),
         type: FieldMessageType.ERROR
+      } : hint ? {
+        content: hint,
+        type: FieldMessageType.HINT
       } : undefined
     }, {
       children: input
@@ -21971,9 +21976,10 @@ const SubmitButton = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function SubmitB
       children,
       control,
       disabled,
+      isLoading,
       requireDirty
     } = _a,
-    props = __rest(_a, ["alwaysRequireValidity", "children", "control", "disabled", "requireDirty"]);
+    props = __rest(_a, ["alwaysRequireValidity", "children", "control", "disabled", "isLoading", "requireDirty"]);
   const {
     isDirty,
     isValid,
@@ -21987,7 +21993,7 @@ const SubmitButton = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function SubmitB
     disabled: disabled || !isDirty && requireDirty || !isValid && (alwaysRequireValidity || isSubmitted) || isSubmitting,
     formNoValidate // Bypass all browser validations on form inputs
     : true,
-    isLoading: isSubmitting,
+    isLoading: isLoading || isSubmitting,
     ref: forwardedRef,
     type: "submit"
   }, props, {
@@ -24190,390 +24196,6 @@ const CustomsItemForm = ({
   }));
 };
 
-const Loader = props => {
-  return jsx("div", Object.assign({
-    css: {
-      alignItems: "center",
-      display: "flex",
-      flexDirection: "column",
-      height: "100%",
-      justifyContent: "center",
-      textAlign: "center",
-      width: "100%"
-    }
-  }, {
-    children: jsx(Spinner, Object.assign({}, props, {
-      size: SpinnerSize.SIZE_LARGE
-    }))
-  }));
-};
-
-const styles$8 = createStyles({
-  form: theme => ({
-    backgroundColor: theme.palette.gray.megaLight,
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.spacing(2),
-    padding: theme.spacing(2)
-  })
-});
-
-const autoFundingSchema = z.object({
-  isEnabled: z.boolean(),
-  lowBalancePurchaseThreshold: moneySchema.extend({
-    amount: z.number().min(25)
-  }),
-  maximumPurchasesPerDay: z.number().min(1),
-  purchaseAmount: moneySchema.extend({
-    amount: z.number().min(10).max(10000)
-  })
-});
-
-/**
- * This form that allows users to enable or disable auto funding, and
- * configure auto funding settings in ShipEngine API.
- */
-const AutoFundingForm = ({
-  defaultValues,
-  errorMessage,
-  hasError,
-  isInteger,
-  isLoading,
-  onSubmit,
-  onToggle
-}) => {
-  const {
-    t
-  } = useTranslation();
-  // const [showForm, toggleShowForm] = useReducer((n) => !n, false); May still need this in a subsequent PR
-  const form = useForm({
-    defaultValues: defaultValues,
-    resolver: validationResolver(autoFundingSchema)
-  });
-  const {
-    isDirty
-  } = form.formState;
-  const watchIsEnabled = form.watch("isEnabled");
-  const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
-    yield onSubmit(values);
-  }));
-  if (isLoading) return jsx(Loader, {
-    message: t("manage-funding:autoFunding.isLoading")
-  });
-  return jsxs(Fragment, {
-    children: [jsx(Switch, {
-      defaultChecked: defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.isEnabled,
-      label: t("manage-funding:autoFunding.addFundsAutomatically"),
-      name: "isEnabled",
-      onChange: evt => {
-        form.reset(Object.assign(Object.assign({}, form.getValues()), {
-          isEnabled: evt.target.checked
-        }));
-        onToggle(evt.target.checked);
-      },
-      value: true
-    }), watchIsEnabled && jsxs("form", Object.assign({
-      css: styles$8.form,
-      id: "auto-funding-form",
-      onSubmit: formLogger.capture(handleSubmit)
-    }, {
-      children: [jsx(MoneyInput, {
-        control: form.control,
-        disabled: !watchIsEnabled,
-        label: t("manage-funding:autoFunding.purchaseAmount"),
-        name: "purchaseAmount",
-        showCurrencySymbol: true
-      }), jsx(MoneyInput, {
-        control: form.control,
-        disabled: !watchIsEnabled,
-        label: t("manage-funding:autoFunding.lowBalancePurchaseThreshold"),
-        name: "lowBalancePurchaseThreshold",
-        showCurrencySymbol: true
-      }), jsx(NumberInput, {
-        control: form.control,
-        disabled: !watchIsEnabled,
-        label: t("manage-funding:autoFunding.maximumPurchasesPerDay"),
-        name: "maximumPurchasesPerDay"
-      }), jsxs(ButtonGroup, Object.assign({
-        justify: "end"
-      }, {
-        children: [jsx(Button, Object.assign({
-          disabled: !isDirty,
-          onClick: () => form.reset(),
-          variant: ButtonVariant.TEXT
-        }, {
-          children: t("actions.cancel")
-        })), jsx(SubmitButton, Object.assign({
-          control: form.control,
-          "data-testid": "autoFunding.submit",
-          disabled: !watchIsEnabled,
-          requireDirty: true,
-          variant: ButtonVariant.OUTLINED
-        }, {
-          children: t("manage-funding:actions.saveRule")
-        }))]
-      }))]
-    })), hasError && errorMessage && jsxs(Fragment, {
-      children: [jsx(Spacer, {}), jsx(InlineNotification, Object.assign({
-        title: t("manage-funding:autoFunding.error.title"),
-        type: NotificationType.ERROR
-      }, {
-        children: errorMessage
-      })), jsx(Spacer, {})]
-    })]
-  });
-};
-
-const manualFundingSchema = z.object({
-  funds: moneySchema.extend({
-    amount: z.number().min(10)
-  })
-});
-
-const ManualFundingForm = ({
-  currentBalance,
-  errorMessage,
-  formId,
-  hasError,
-  isLoading,
-  onCancel,
-  onSubmit,
-  portalRef,
-  requiredAmount
-}) => {
-  var _a;
-  const {
-    t
-  } = useTranslation();
-  const fundingRecommendations = useMemo(() => ["$20", "$50", "$100", t("manage-funding:actions.other")], [t]);
-  const suggestedAmount = Math.max(requiredAmount !== null && requiredAmount !== void 0 ? requiredAmount : 0, 10);
-  const [selectedFundingAmountIndex, setSelectedFundingAmountIndex] = useState(requiredAmount ? 3 : 0);
-  const [showFormInput, toggleShowFormInput] = useToggle(!!requiredAmount);
-  const getSelectedFundingValue = value => {
-    return Number(value.replace(/[^0-9.-]+/g, ""));
-  };
-  const form = useForm({
-    defaultValues: {
-      funds: {
-        amount: suggestedAmount,
-        currency: SE.Currency.USD
-      }
-    },
-    resolver: validationResolver(manualFundingSchema)
-  });
-  const resultingBalance = currentBalance + ((_a = form.watch("funds").amount) !== null && _a !== void 0 ? _a : 0);
-  const formInterface = jsxs("section", Object.assign({
-    css: theme => ({
-      backgroundColor: theme.palette.gray.megaLight,
-      padding: theme.spacing(2)
-    })
-  }, {
-    children: [jsx(Typography, Object.assign({
-      bold: true
-    }, {
-      children: t("manage-funding:addFunds")
-    })), jsx(Spacer, {
-      multiplier: 2
-    }), jsx(ChipList, Object.assign({
-      onChange: idx => {
-        setSelectedFundingAmountIndex(idx);
-        if (idx === fundingRecommendations.length - 1) {
-          toggleShowFormInput(true);
-          return;
-        } else {
-          toggleShowFormInput(false);
-          form.reset({
-            funds: {
-              amount: getSelectedFundingValue(fundingRecommendations[idx]),
-              currency: SE.Currency.USD
-            }
-          });
-        }
-      }
-    }, {
-      children: fundingRecommendations.map((item, idx) => jsx(Chip, Object.assign({
-        css: theme => ({
-          backgroundColor: idx !== selectedFundingAmountIndex ? theme.palette.white : theme.palette.primary.main,
-          color: idx !== selectedFundingAmountIndex ? theme.palette.gray.main : theme.palette.white
-        }),
-        isSelected: idx === selectedFundingAmountIndex
-      }, {
-        children: item
-      }), idx))
-    })), jsx(Spacer, {
-      multiplier: 1
-    }), showFormInput && jsxs(Fragment, {
-      children: [jsx(MoneyInput, {
-        control: form.control,
-        defaultValue: {
-          amount: undefined,
-          currency: SE.Currency.USD
-        },
-        label: t("manage-funding:otp.labels.amount"),
-        name: "funds",
-        placeholder: "Amount",
-        showCurrencySymbol: true,
-        subLabel: "Minimum purchase $10.00"
-      }), jsxs(FieldLabel, Object.assign({
-        label: t("manage-funding:otp.labels.resultingBalance")
-      }, {
-        children: [jsx(Typography, Object.assign({
-          variant: "body1"
-        }, {
-          children: formatMoney({
-            amount: resultingBalance,
-            currency: SE.Currency.USD
-          })
-        })), jsx(Spacer, {})]
-      }))]
-    }), jsxs(ButtonGroup, Object.assign({
-      justify: "end"
-    }, {
-      children: [jsx(Button, Object.assign({
-        onClick: onCancel,
-        variant: ButtonVariant.TEXT
-      }, {
-        children: t("actions.cancel")
-      })), jsx(SubmitButton, Object.assign({
-        control: form.control,
-        form: formId,
-        variant: ButtonVariant.OUTLINED
-      }, {
-        children: t(formId ? "actions.purchase" : "manage-funding:actions.addNow")
-      }))]
-    }))]
-  }));
-  if (isLoading) return jsx(Loader, {
-    message: t("manage-funding:otp.isLoading")
-  });
-  return jsxs(Fragment, {
-    children: [jsx("form", Object.assign({
-      id: formId,
-      onSubmit: formLogger.capture(form.handleSubmit(onSubmit))
-    }, {
-      children: portalRef !== undefined ?
-      // Nested form in a well
-      jsx(Portal, Object.assign({
-        target: portalRef
-      }, {
-        children: jsx("section", Object.assign({
-          css: theme => ({
-            backgroundColor: theme.palette.gray.megaLight,
-            padding: theme.spacing(2)
-          })
-        }, {
-          children: formInterface
-        }))
-      })) :
-      // Standalone form
-      formInterface
-    })), hasError && errorMessage && jsxs(Fragment, {
-      children: [jsx(Spacer, {}), jsx(InlineNotification, Object.assign({
-        title: t("manage-funding:otp.error.title"),
-        type: NotificationType.ERROR
-      }, {
-        children: errorMessage
-      })), jsx(Spacer, {})]
-    })]
-  });
-};
-
-const styles$7 = createStyles({
-  addFundsButton: theme => ({
-    alignItems: "center",
-    display: "flex",
-    gap: theme.spacing(1)
-  }),
-  balanceText: theme => ({
-    color: theme.palette.success.main
-  }),
-  header: theme => ({
-    display: "flex",
-    gap: theme.spacing(2),
-    justifyContent: "space-between"
-  }),
-  negativeBalanceText: theme => ({
-    color: theme.palette.error.main
-  })
-});
-
-const FundingMethods = ({
-  addFundsErrorMessage,
-  autoFundingData,
-  autoFundingErrorMessage,
-  fundingMethod,
-  hasAutoFundingError,
-  hasManualFundingError,
-  isAutoFundingLoading,
-  isManualFundingLoading,
-  manualFundingCurrentBalance,
-  manualFundingRequiredAmount,
-  onSubmitAutoFunding,
-  onSubmitManualFunding,
-  onToggleAutoFunding
-}) => {
-  const {
-    t
-  } = useTranslation();
-  const [showFundingMethods, toggleShowFundingMethods] = useToggle(false);
-  return jsxs(Fragment, {
-    children: [jsxs("div", Object.assign({
-      css: styles$7.header
-    }, {
-      children: [jsxs("div", {
-        children: [jsx(Typography, Object.assign({
-          variant: "body1"
-        }, {
-          children: t("manage-funding:currentBalance")
-        })), jsx(Typography, Object.assign({
-          bold: true,
-          css: manualFundingCurrentBalance >= 0 ? styles$7.balanceText : styles$7.negativeBalanceText,
-          variant: "body1"
-        }, {
-          children: formatMoney({
-            amount: manualFundingCurrentBalance,
-            currency: SE.Currency.USD
-          })
-        }))]
-      }), jsxs(Link, Object.assign({
-        bold: true,
-        css: styles$7.addFundsButton,
-        onClick: toggleShowFundingMethods,
-        size: ButtonSize.MEDIUM
-      }, {
-        children: [t("manage-funding:addFunds"), jsx(Icon, {
-          name: IconNames.ADD,
-          size: IconSize.SIZE_MEDIUM,
-          title: "Add Funds"
-        })]
-      }))]
-    })), jsx(Spacer, {}), jsx("div", Object.assign({
-      css: theme => Object.assign(Object.assign({}, !showFundingMethods && {
-        display: "none"
-      }), {
-        marginBottom: theme.spacing(2)
-      })
-    }, {
-      children: ["manual", "both"].includes(fundingMethod) && jsx(ManualFundingForm, {
-        currentBalance: manualFundingCurrentBalance,
-        errorMessage: addFundsErrorMessage,
-        hasError: hasManualFundingError,
-        isLoading: isManualFundingLoading,
-        onCancel: toggleShowFundingMethods,
-        onSubmit: onSubmitManualFunding,
-        requiredAmount: manualFundingRequiredAmount
-      })
-    })), ["auto", "both"].includes(fundingMethod) && jsx(AutoFundingForm, {
-      defaultValues: autoFundingData,
-      errorMessage: autoFundingErrorMessage,
-      hasError: hasAutoFundingError,
-      isLoading: isAutoFundingLoading,
-      onSubmit: onSubmitAutoFunding,
-      onToggle: onToggleAutoFunding
-    })]
-  });
-};
-
 const Label = ({
   label,
   onClickVoid,
@@ -24713,7 +24335,7 @@ const LandingPageForm = ({
   }));
 };
 
-const styles$6 = createStyles({
+const styles$8 = createStyles({
   container: theme => ({
     padding: theme.spacing(2)
   }),
@@ -24734,11 +24356,11 @@ const LandingPage = ({
     t
   } = useTranslation();
   return jsxs("div", Object.assign({
-    css: styles$6.container,
+    css: styles$8.container,
     "data-testid": "landing-page"
   }, {
     children: [jsxs("div", Object.assign({
-      css: styles$6.header
+      css: styles$8.header
     }, {
       children: [jsx(Typography, Object.assign({
         variant: "heading4"
@@ -24756,7 +24378,7 @@ const LandingPage = ({
     })), jsx(LandingPageForm, {
       onSubmit: onSubmit
     }), jsxs("div", Object.assign({
-      css: styles$6.header
+      css: styles$8.header
     }, {
       children: [jsx(Spacer, {
         multiplier: 6
@@ -24767,7 +24389,7 @@ const LandingPage = ({
       })), jsx(Spacer, {
         multiplier: 2
       }), jsx(Typography, Object.assign({
-        css: styles$6.description,
+        css: styles$8.description,
         variant: "body1"
       }, {
         children: t("onboarding:landing.description")
@@ -24848,7 +24470,7 @@ const Accordion = _a => {
   });
 };
 
-const styles$5 = createStyles({
+const styles$7 = createStyles({
   carrierTypography: theme => ({
     color: theme.palette.black
   }),
@@ -24933,13 +24555,13 @@ const ListCarriersRow = ({
     setIsSubmitting(false);
   });
   return jsxs("div", Object.assign({
-    css: styles$5.container
+    css: styles$7.container
   }, {
     children: [jsxs("div", Object.assign({
-      css: styles$5.rowContainer
+      css: styles$7.rowContainer
     }, {
       children: [jsxs("div", Object.assign({
-        css: styles$5.logoContainer
+        css: styles$7.logoContainer
       }, {
         children: [jsx("div", {
           children: jsx("img", {
@@ -24976,7 +24598,7 @@ const ListCarriersRow = ({
   }));
 };
 
-const styles$4 = createStyles({
+const styles$6 = createStyles({
   listContainer: theme => ({
     "& > li:not(:last-of-type)": {
       borderBottom: `1px solid ${theme.palette.gray.light}`
@@ -25023,7 +24645,7 @@ const ListCarriers$1 = ({
         children: t("list-carriers:headers.accountCarriers")
       }))
     }), jsx("ul", Object.assign({
-      css: styles$4.listContainer
+      css: styles$6.listContainer
     }, {
       children: isLoading ? jsxs(Fragment, {
         children: [jsx(LoadingSkeletonRow, {}), jsx(LoadingSkeletonRow, {}), jsx(LoadingSkeletonRow, {})]
@@ -25044,10 +24666,10 @@ const ListCarriers$1 = ({
 };
 const LoadingSkeletonRow = () => {
   return jsxs("div", Object.assign({
-    css: styles$4.skeletonRow
+    css: styles$6.skeletonRow
   }, {
     children: [jsxs("div", Object.assign({
-      css: styles$4.skeletonLogoContainer
+      css: styles$6.skeletonLogoContainer
     }, {
       children: [jsx(Skeleton, {
         animation: SkeletonAnimation.WAVE,
@@ -25071,7 +24693,7 @@ const LoadingSkeletonRow = () => {
   }));
 };
 
-const styles$3 = createStyles({
+const styles$5 = createStyles({
   body: theme => ({
     borderTop: `1px solid ${theme.palette.gray.light}`,
     color: theme.palette.black,
@@ -25122,14 +24744,14 @@ const SettingsCard = ({
   verticallyAligned
 }) => {
   return jsxs("div", Object.assign({
-    css: verticallyAligned ? styles$3.verticalContainer : styles$3.container,
+    css: verticallyAligned ? styles$5.verticalContainer : styles$5.container,
     "data-testid": "settingsCard"
   }, {
     children: [jsxs("div", Object.assign({
-      css: styles$3.header
+      css: styles$5.header
     }, {
       children: [jsxs("div", Object.assign({
-        css: styles$3.title
+        css: styles$5.title
       }, {
         children: [typeof title === "string" ? jsx(Typography, Object.assign({
           variant: "subtitle2"
@@ -25164,7 +24786,7 @@ const SettingsCard = ({
         }))
       }))]
     })), children && jsx("div", Object.assign({
-      css: styles$3.body
+      css: styles$5.body
     }, {
       children: jsxs("div", {
         children: [children, accessoryAction && jsx(ButtonGroup, Object.assign({
@@ -25281,7 +24903,7 @@ const warehouseSchema = z.discriminatedUnion("returnToAddressIsDifferent", [z.ob
   });
 });
 
-const styles$2 = createStyles({
+const styles$4 = createStyles({
   header: {
     textAlign: "center"
   },
@@ -25333,12 +24955,12 @@ const WarehouseForm = ({
     }
   }));
   return jsxs("div", Object.assign({
-    css: _isOnboarding ? styles$2.onboardingWell : styles$2.well,
+    css: _isOnboarding ? styles$4.onboardingWell : styles$4.well,
     "data-testid": "warehouse-form"
   }, {
     children: [_isOnboarding && jsxs(Fragment, {
       children: [jsxs("div", Object.assign({
-        css: styles$2.header
+        css: styles$4.header
       }, {
         children: [jsx(Typography, Object.assign({
           variant: "heading4"
@@ -26727,7 +26349,7 @@ const EditWalletAddressForm = ({
   }));
 };
 
-const styles$1 = createStyles({
+const styles$3 = createStyles({
   grid: theme => ({
     margin: theme.spacing(4)
   }),
@@ -26775,21 +26397,21 @@ const WalletForm = ({
     onSubmit: formLogger.capture(handleSubmit)
   }, {
     children: jsxs(Grid, Object.assign({
-      css: styles$1.grid,
+      css: styles$3.grid,
       noPadding: true
     }, {
       children: [jsx(GridChild, Object.assign({
         colSpan: 12
       }, {
         children: jsx(Typography, Object.assign({
-          css: styles$1.heading,
+          css: styles$3.heading,
           variant: "heading4"
         }, {
           children: t("register-wallet:sections.billing.title")
         }))
       })), jsx(GridChild, Object.assign({
         colSpan: 12,
-        css: styles$1.subtitle
+        css: styles$3.subtitle
       }, {
         children: jsx(Typography, Object.assign({
           variant: "subtitle1"
@@ -26811,7 +26433,7 @@ const WalletForm = ({
         colSpan: 12
       }, {
         children: jsx(Typography, Object.assign({
-          css: styles$1.subtitle,
+          css: styles$3.subtitle,
           variant: "subtitle1"
         }, {
           children: t("register-wallet:sections.billing.addressSubTitle")
@@ -26878,7 +26500,7 @@ const WalletForm = ({
   }));
 };
 
-const styles = createStyles({
+const styles$2 = createStyles({
   lastStep: {
     "& > span::first-of-type": {
       "::after": {
@@ -27092,16 +26714,16 @@ const Onboarding$1 = ({
       currentStep: currentStep
     }, {
       children: [jsx(Step, {
-        css: styles.step,
+        css: styles$2.step,
         label: t("onboarding:steps.login")
       }), jsx(Step, {
-        css: styles.step,
+        css: styles$2.step,
         label: t("onboarding:steps.carriers")
       }), jsx(Step, {
-        css: styles.step,
+        css: styles$2.step,
         label: t("onboarding:steps.addresses")
       }), jsx(Step, {
-        css: styles.lastStep,
+        css: styles$2.lastStep,
         label: t("onboarding:steps.payment")
       })]
     })), renderStep()]
@@ -27173,6 +26795,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] = useState(null);
+  const onMountInterfaceTarget = useCallback(element => {
+    if (element) setInterfaceTarget(element);
+  }, []);
+  const formStyle = [variant === "well" && (theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
+    padding: theme.spacing(2)
+  })), css];
+  return jsxs(Fragment, {
+    children: [jsx(Portal, Object.assign({
+      target: rootTarget
+    }, {
+      children: jsx("form", Object.assign({
+        id: id,
+        onSubmit: onSubmit
+      }, {
+        children: jsx(Portal, Object.assign({
+          target: interfaceTarget
+        }, {
+          children: children
+        }))
+      }))
+    })), jsx("section", {
+      css: formStyle,
+      id: id + "-interface",
+      ref: onMountInterfaceTarget
+    })]
+  });
+};
+
+const Loader = props => {
+  return jsx("div", Object.assign({
+    css: {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      justifyContent: "center",
+      textAlign: "center",
+      width: "100%"
+    }
+  }, {
+    children: jsx(Spinner, Object.assign({}, props, {
+      size: SpinnerSize.SIZE_LARGE
+    }))
+  }));
+};
+
+const getStyles$2 = ({
+  isDisabled,
+  isSelected
+} = {}) => createStyles({
+  chip: theme => [isSelected ? {
+    backgroundColor: theme.palette.secondary.ultraLight,
+    color: theme.palette.secondary.main
+  } : {
+    backgroundColor: theme.palette.white,
+    color: theme.palette.gray.main
+  },
+  // TODO [LMNT-663] - Giger's Chip component needs support added for an isDisabled prop
+  isDisabled && {
+    backgroundColor: theme.palette.gray.light,
+    cursor: "none",
+    pointerEvents: "none"
+  }],
+  chipList: theme => ({
+    gap: theme.spacing(1)
+  }),
+  fundsInput: theme => ({
+    maxWidth: theme.spacing(24)
+  })
+});
+
+const getAddFundsSchema = (minimumAmount = 10) => z.object({
+  funds: moneySchema.extend({
+    amount: z.number().min(minimumAmount)
+  })
+}).transform(data => data.funds);
+
+/**
+ * Form for adding funds to a carrier's account.
+ *
+ * If a render child is provided, external control is assumed and the cancel / submit buttons are hidden.
+ */
+const AddFundsForm = ({
+  carrierId,
+  children,
+  onCancel,
+  onSuccess,
+  minimumAmount: _minimumAmount = 0
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const addFunds = useAddFunds(carrierId);
+  const carrier = useGetCarrierById(carrierId);
+  const chips = [{
+    label: "$20",
+    value: 20
+  }, {
+    label: "$50",
+    value: 50
+  }, {
+    label: "$100",
+    value: 100
+  }, {
+    label: t("manage-funding:addFunds.custom"),
+    value: "custom"
+  }];
+  const [selectedChip, setSelectedChip] = useState(_minimumAmount > 0 ? chips[3] : chips[0]);
+  _minimumAmount = Math.max(_minimumAmount, 10);
+  const form = useForm({
+    defaultValues: {
+      funds: {
+        amount: selectedChip.value === "custom" ? _minimumAmount : selectedChip.value,
+        currency: SE.Currency.USD
+      }
+    },
+    resolver: validationResolver(getAddFundsSchema(_minimumAmount))
+  });
+  const {
+    isSubmitted,
+    isValid
+  } = form.formState;
+  const watchAmount = form.watch("funds").amount;
+  const formId = "add-funds-form";
+  const handleSubmit = formLogger.capture(form.handleSubmit(values => {
+    const payload = values;
+    addFunds.mutate(payload, {
+      onSuccess: () => onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess()
+    });
+  }));
+  if (carrier.isLoading) return jsx(Loader, {
+    message: t("loading.carrier")
+  });
+  if (!carrier.data) throw new Error("errorMessages.unableToLoad.carrier");
+  const balance = carrier.data.balance;
+  if (balance === undefined) return jsx(InlineNotification, Object.assign({
+    type: NotificationType.ERROR
+  }, {
+    children: t("manage-funding:errors.unableToFindBalance")
+  }));
+  return jsxs(Fragment, {
+    children: [jsxs(FormPortal, Object.assign({
+      id: formId,
+      onSubmit: handleSubmit,
+      variant: "well"
+    }, {
+      children: [jsx(Typography, Object.assign({
+        bold: true
+      }, {
+        children: t("manage-funding:actions.addFunds")
+      })), jsx(Spacer, {
+        multiplier: 2
+      }), jsx(ChipList, Object.assign({
+        css: getStyles$2().chipList,
+        onChange: idx => {
+          const chip = chips[idx];
+          setSelectedChip(chip);
+          if (chip.value !== "custom") {
+            form.reset({
+              funds: {
+                amount: chip.value,
+                currency: SE.Currency.USD
+              }
+            });
+          }
+        }
+      }, {
+        children: chips.map(chip => jsx(Chip, Object.assign({
+          css: getStyles$2({
+            isDisabled: chip.value < _minimumAmount,
+            isSelected: chip.value === selectedChip.value
+          }).chip,
+          isSelected: chip.value === selectedChip.value
+        }, {
+          children: jsx(Typography, Object.assign({
+            variant: "small"
+          }, {
+            children: chip.label
+          }))
+        }), chip.label))
+      })), selectedChip.value === "custom" && jsxs(Fragment, {
+        children: [jsx(Spacer, {
+          multiplier: 1
+        }), jsx(MoneyInput, {
+          control: form.control,
+          css: getStyles$2().fundsInput,
+          defaultValue: {
+            amount: undefined,
+            currency: SE.Currency.USD
+          },
+          form: formId,
+          hint: t("manage-funding:addFunds.minimumPurchaseAmount"),
+          label: t("manage-funding:addFunds.labels.amount"),
+          name: "funds",
+          nativeLabel: true,
+          showCurrencySymbol: true
+        })]
+      }), !children && jsxs(Fragment, {
+        children: [jsx(Spacer, {
+          multiplier: selectedChip.value !== "custom" ? 1.5 : 1
+        }), jsxs(ButtonGroup, Object.assign({
+          justify: "end"
+        }, {
+          children: [onCancel && jsx(Button, Object.assign({
+            onClick: onCancel,
+            variant: ButtonVariant.TEXT
+          }, {
+            children: t("actions.cancel")
+          })), jsx(SubmitButton, Object.assign({
+            control: form.control,
+            form: formId,
+            isLoading: addFunds.isLoading,
+            variant: ButtonVariant.OUTLINED
+          }, {
+            children: t("manage-funding:actions.addNow")
+          }))]
+        }))]
+      })]
+    })), addFunds.error && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 1
+      }), jsx(InlineNotification, Object.assign({
+        title: t("manage-funding:addFunds.error.title"),
+        type: NotificationType.ERROR
+      }, {
+        children: addFunds.error[0].message
+      }))]
+    }), children === null || children === void 0 ? void 0 : children({
+      isCustomAmount: selectedChip.value === "custom",
+      isSubmitted,
+      isSubmitting: addFunds.isLoading,
+      isValid,
+      selectedAmount: watchAmount,
+      submit: handleSubmit
+    })]
+  });
+};
+
+const InlineLabel = ({
+  children,
+  label
+}) => jsxs("div", Object.assign({
+  css: theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: theme.spacing(1)
+  })
+}, {
+  children: [jsx(Typography, {
+    children: label
+  }), children]
+}));
+
+const getStyles$1 = balance => createStyles({
+  balanceText: theme => ({
+    color: balance === undefined ? theme.palette.alert.main : balance >= 0 ? theme.palette.secondary.dark : theme.palette.error.main
+  })
+});
+
+const CarrierBalance = ({
+  carrierId
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    data: carrier,
+    isLoading: isLoadingCarrier,
+    isRefetching: isRefetchingCarrier
+  } = useGetCarrierById(carrierId);
+  const balance = carrier === null || carrier === void 0 ? void 0 : carrier.balance;
+  return jsx(InlineLabel, Object.assign({
+    label: t("manage-funding:currentBalance")
+  }, {
+    children: isLoadingCarrier || isRefetchingCarrier ? jsx(Spinner, {}) : jsx(Typography, Object.assign({
+      bold: true,
+      css: getStyles$1(balance).balanceText
+    }, {
+      children: balance === undefined ? t("manage-funding:errors.balanceUnknown") : formatMoney({
+        amount: balance,
+        currency: SE.Currency.USD
+      })
+    }))
+  }));
+};
+
+const icons = {
+  add: IconNames.ADD,
+  download: IconNames.DOWNLOAD
+};
+const LinkAction = _a => {
+  var {
+      css,
+      icon,
+      isDisabled,
+      isLoading,
+      title
+    } = _a,
+    props = __rest(_a, ["css", "icon", "isDisabled", "isLoading", "title"]);
+  return jsx(Link, Object.assign({}, props, {
+    bold: true,
+    css: theme => [{
+      alignItems: "center",
+      display: "flex",
+      gap: theme.spacing(1)
+    },
+    // TODO [LMNT-663] - Giger's Link component does not render isDisabled state unless isButton is true
+    (isDisabled || isLoading) && {
+      color: theme.palette.gray.main,
+      cursor: "none",
+      pointerEvents: "none"
+    }, css],
+    isDisabled: isDisabled,
+    size: ButtonSize.MEDIUM
+  }, {
+    children: isLoading ? jsx(Spinner, {}) : jsxs(Fragment, {
+      children: [title, icon && jsx(Icon, {
+        name: icons[icon],
+        size: IconSize.SIZE_MEDIUM,
+        title: title
+      })]
+    })
+  }));
+};
+
+const Spread = ({
+  children
+}) => jsx("div", Object.assign({
+  css: theme => ({
+    display: "flex",
+    gap: theme.spacing(2),
+    justifyContent: "space-between"
+  })
+}, {
+  children: children
+}));
+
+const getStyles = isCustomAmount => createStyles({
+  balanceText: theme => ({
+    color: theme.palette.secondary.dark
+  }),
+  container: theme => ({
+    padding: theme.spacing(3)
+  }),
+  formExtension: theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(1),
+    // Negative margin is to compensate for the padding on AddFundsForm, since we want this
+    // section to seemlessly extend the form's well.
+    marginTop: theme.spacing(isCustomAmount ? -1.5 : -1),
+    padding: theme.spacing(2),
+    paddingTop: 0
+  }),
+  saveRateButton: {
+    whiteSpace: "nowrap"
+  }
+});
+
+/**
+ * Fund and Purchase handles the label purchase submission UX, ensuring that a user
+ * has the necessary funds available and can add them if not. It allows a single button
+ * to submit the funding form followed by the purchase form.
+ */
+const FundAndPurchase = ({
+  carrierId,
+  className,
+  disabled,
+  isFundingRequired,
+  onSave,
+  purchaseAmount,
+  onPurchase
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const [isAddFundsFormOpen, setIsAddFundsFormOpen] = useState(false);
+  const {
+    data: carrier,
+    isLoading: isLoadingCarrier
+  } = useGetCarrierById(carrierId);
+  const isAddingFunds = !!useIsMutating({
+    mutationKey: ["useAddFunds"]
+  });
+  const isCreatingLabel = !!useIsMutating({
+    mutationKey: ["useCreateLabel"]
+  });
+  const [isSavingRate, setIsSavingRate] = useState(false);
+  const handleSaveRate = () => __awaiter(void 0, void 0, void 0, function* () {
+    setIsSavingRate(true);
+    yield onSave();
+    setIsSavingRate(false);
+  });
+  // Automatically open the Add Funds form if the carrier's balance is insufficient.
+  useEffect(() => {
+    if (isFundingRequired && (carrier === null || carrier === void 0 ? void 0 : carrier.balance) !== undefined && carrier.balance < purchaseAmount) setIsAddFundsFormOpen(true);
+  }, [carrier === null || carrier === void 0 ? void 0 : carrier.balance, isFundingRequired, purchaseAmount]);
+  const renderActionButtons = (addFundsForm = {}) => jsxs(ButtonGroup, Object.assign({
+    justify: "end"
+  }, {
+    children: [jsx(Button, Object.assign({
+      bold: false,
+      css: getStyles().saveRateButton,
+      disabled: disabled || !carrierId || isAddingFunds || isCreatingLabel,
+      isLoading: isSavingRate,
+      onClick: handleSaveRate,
+      variant: ButtonVariant.OUTLINED
+    }, {
+      children: t("purchase-label:actions.saveRate")
+    })), jsx(Button, Object.assign({
+      "data-testid": "submit-fund-and-purchase",
+      disabled: disabled || !carrierId || isFundingRequired && isAddFundsFormOpen && addFundsForm.isSubmitted && !addFundsForm.isValid,
+      isLoading: addFundsForm.isSubmitting || isAddingFunds || isCreatingLabel,
+      onClick: isAddFundsFormOpen ? addFundsForm.submit : onPurchase
+    }, {
+      children: isAddFundsFormOpen ? t("manage-funding:actions.addFundsAndPurchase") : t("purchase-label:actions.purchaseNow")
+    }))]
+  }));
+  if (!isFundingRequired) return jsx("div", Object.assign({
+    className: className,
+    css: getStyles().container
+  }, {
+    children: renderActionButtons()
+  }));
+  if (isLoadingCarrier) return jsx(Loader, {
+    message: t("loading.carrier")
+  });
+  if (!carrier || !carrierId) throw new Error("errorMessages.unableToLoad.carrier");
+  const balance = carrier.balance;
+  const handleAddFundsSuccess = () => {
+    setIsAddFundsFormOpen(false);
+    onPurchase();
+  };
+  return jsxs("div", Object.assign({
+    className: className,
+    css: getStyles().container
+  }, {
+    children: [jsxs(Spread, {
+      children: [jsx(CarrierBalance, {
+        carrierId: carrierId
+      }), jsx(LinkAction, {
+        icon: "add",
+        isDisabled: isAddFundsFormOpen || isAddingFunds || isCreatingLabel,
+        onClick: () => setIsAddFundsFormOpen(true),
+        title: t("manage-funding:actions.addFunds")
+      })]
+    }), jsx(Spacer, {
+      multiplier: 2
+    }), balance < purchaseAmount && jsxs(Fragment, {
+      children: [jsx(InlineNotification, Object.assign({
+        title: t(`manage-funding:fundAndPurchase.${balance < 0 ? "negativeBalanceTitle" : "insufficientFundsTitle"}`),
+        type: NotificationType.ALERT
+      }, {
+        children: t(`manage-funding:fundAndPurchase.${balance < 0 ? "negativeBalance" : "insufficientFunds"}`)
+      })), jsx(Spacer, {
+        multiplier: 2
+      })]
+    }), isAddFundsFormOpen ? jsx(AddFundsForm, Object.assign({
+      carrierId: carrierId,
+      minimumAmount: purchaseAmount - balance,
+      onSuccess: handleAddFundsSuccess
+    }, {
+      children: addFundsForm => {
+        var _a, _b;
+        return jsxs(Fragment, {
+          children: [jsxs("section", Object.assign({
+            css: getStyles(addFundsForm.isCustomAmount).formExtension
+          }, {
+            children: [jsx(InlineLabel, Object.assign({
+              label: t("manage-funding:fundAndPurchase.newBalance")
+            }, {
+              children: jsx(Typography, Object.assign({
+                css: getStyles().balanceText
+              }, {
+                children: formatMoney({
+                  amount: balance + ((_a = addFundsForm.selectedAmount) !== null && _a !== void 0 ? _a : 0),
+                  currency: SE.Currency.USD
+                })
+              }))
+            })), jsx(InlineLabel, Object.assign({
+              label: t("manage-funding:fundAndPurchase.finalBalance")
+            }, {
+              children: jsx(Typography, Object.assign({
+                css: getStyles().balanceText
+              }, {
+                children: formatMoney({
+                  amount: balance + ((_b = addFundsForm.selectedAmount) !== null && _b !== void 0 ? _b : 0) - purchaseAmount,
+                  currency: SE.Currency.USD
+                })
+              }))
+            })), balance >= purchaseAmount && jsx(ButtonGroup, Object.assign({
+              justify: "end"
+            }, {
+              children: jsx(Button, Object.assign({
+                onClick: () => setIsAddFundsFormOpen(false),
+                variant: ButtonVariant.TEXT
+              }, {
+                children: t("actions.cancel")
+              }))
+            }))]
+          })), jsx(Spacer, {
+            multiplier: 2
+          }), renderActionButtons(addFundsForm)]
+        });
+      }
+    })) : renderActionButtons()]
+  }));
+};
+
+const styles$1 = createStyles({
+  fundAndPurchase: theme => ({
+    borderTop: `1px solid ${theme.palette.gray.ultraLight}`
+  }),
+  ratesInterstitial: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    textAlign: "center"
+  },
+  showMoreOrLessRatesButton: {
+    alignItems: "center",
+    display: "flex"
+  }
+});
+
 const rateSchema = z.object({
   rate: z.object({
     isAcknowledged: z.boolean().refine(v => v === true, "purchase-label:schemaErrors.needToAcknowledge"),
@@ -27201,7 +27366,7 @@ const RateForm = ({
   }, features !== null && features !== void 0 ? features : {});
   const {
     t
-  } = useTranslation(["common", "purchase-label"]);
+  } = useTranslation();
   const rateFormScrollToRef = useRef(null);
   const [showHiddenRates, setShowHiddenRates] = useState(false);
   const form = useForm({
@@ -27214,16 +27379,13 @@ const RateForm = ({
     mode: "onChange",
     resolver: validationResolver(rateSchema)
   });
-  const {
-    isDirty
-  } = form.formState;
   const {
     rateId: selectedRateId
   } = form.watch("rate");
-  const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
+  const handleSubmit = formLogger.capture(form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
     const rateId = values;
     yield onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(rateId);
-  }));
+  })));
   const rateOptions = useRateOptions(rates, carriers, shipment, features.enableGlobalPostFiltering
   // TODO: LMNT-677: fix RecommendedRate logic
   // {
@@ -27245,13 +27407,10 @@ const RateForm = ({
   );
 
   const selectedRate = useMemo(() => rateOptions === null || rateOptions === void 0 ? void 0 : rateOptions.find(r => r.rateId === selectedRateId), [rateOptions, selectedRateId]);
-  const [isRateSaving, setIsRateSaving] = useState(false);
   const handleSaveRate = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
     const isValid = yield form.trigger();
     if (!isValid) return;
-    setIsRateSaving(true);
     if (selectedRate) yield onSave === null || onSave === void 0 ? void 0 : onSave(selectedRate);
-    setIsRateSaving(false);
     // sets the form to not be dirty, so that Save is disabled
     form.reset(form.getValues());
   }), [form, onSave, selectedRate]);
@@ -27280,15 +27439,6 @@ const RateForm = ({
       }, 0);
     }
   }, [form, rateOptions, errors === null || errors === void 0 ? void 0 : errors.length]);
-  const formatFundingAmount = selectedRate => {
-    var _a;
-    const totalRateAmount = getTotalRateAmount(selectedRate);
-    const walletBalance = (_a = selectedRate.balance) !== null && _a !== void 0 ? _a : 0;
-    return formatMoney({
-      amount: Math.max(totalRateAmount - walletBalance, 0),
-      currency: SE.Currency.USD
-    });
-  };
   return jsxs("form", Object.assign({
     id: "rate-form",
     onSubmit: handleSubmit,
@@ -27310,10 +27460,7 @@ const RateForm = ({
           onClick: onSelectRate,
           options: showHiddenRates ? rateOptions : filteredRateOptions
         }), rateOptions.some(option => option.requiresAcknowledgement) && rateOptions.length > 5 && jsx(Link, Object.assign({
-          css: {
-            alignItems: "center",
-            display: "flex"
-          },
+          css: styles$1.showMoreOrLessRatesButton,
           onClick: () => {
             var _a;
             setShowHiddenRates(!showHiddenRates);
@@ -27331,86 +27478,36 @@ const RateForm = ({
             variant: "body1"
           }, {
             children: showHiddenRates ? t("purchase-label:actions.showFewerRates") : t("purchase-label:actions.showMoreRates")
-          }))
-        }))]
-      }) : !isLoading && errors && !!errors.length ? null : jsxs("article", Object.assign({
-        css: {
-          alignItems: "center",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          textAlign: "center"
-        },
-        role: "presentation"
-      }, {
-        children: [jsx(Cube, {
-          animate: isLoading
-        }), 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)) && jsxs(Fragment, {
-        children: [jsx(Spacer, {}), jsxs(InlineNotification, Object.assign({
-          title: t("errorTypes.rateInvalid"),
-          type: NotificationType.ERROR
-        }, {
-          children: [errors === null || errors === void 0 ? void 0 : errors.map(e => t(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(encode(e.message), {
-            defaultValue: e.message.replace(/Exception with code [\w\d]+; module [\d]+, category [\d]+, item [\d]+/g, "")
-          }))]
-        }))]
-      })]
-    })), jsxs(BottomSheet, Object.assign({
-      alwaysVisible: true,
-      css: theme => ({
-        borderTop: `1px solid ${theme.palette.gray.ultraLight}`,
-        boxShadow: "none",
-        position: "static"
-      })
-    }, {
-      children: [typeof (selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.balance) === "number" && selectedRate.requiresFundedAmount && jsxs(Fragment, {
-        children: [jsx(Typography, Object.assign({
-          variant: "body1"
-        }, {
-          children: t("purchase-label:balance.currentBalance")
-        })), jsx(Typography, Object.assign({
-          color: selectedRate.balance < 0 ? "error.main" : undefined
-        }, {
-          children: ` ${formatMoney({
-            amount: selectedRate.balance,
-            currency: SE.Currency.USD
-          })}`
-        })), jsx(Spacer, {
-          multiplier: 2
-        })]
-      }), jsx("div", Object.assign({
-        "data-testid": "actions"
+          }))
+        }))]
+      }) : !isLoading && errors && !!errors.length ? null : jsxs("article", Object.assign({
+        css: styles$1.ratesInterstitial,
+        role: "presentation"
       }, {
-        children: jsxs(ButtonGroup, Object.assign({
-          "data-testid": "actions"
+        children: [jsx(Cube, {
+          animate: isLoading
+        }), 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)) && jsxs(Fragment, {
+        children: [jsx(Spacer, {}), jsxs(InlineNotification, Object.assign({
+          title: t("errorTypes.rateInvalid"),
+          type: NotificationType.ERROR
         }, {
-          children: [(features === null || features === void 0 ? void 0 : features.saveRate) && jsx(Button, Object.assign({
-            bold: false,
-            css: {
-              whiteSpace: "nowrap"
-            },
-            disabled: !isDirty || disabled,
-            isLoading: isRateSaving,
-            onClick: handleSaveRate,
-            variant: ButtonVariant.OUTLINED
-          }, {
-            children: t("purchase-label:actions.saveRate")
-          })), jsx(SubmitButton, Object.assign({
-            alwaysRequireValidity: true,
-            control: form.control,
-            "data-testid": "purchaseLabel",
-            disabled: !selectedRate || disabled,
-            form: "rate-form",
-            isFullWidth: true
-          }, {
-            children: (selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.balance) ? `${t("purchase-label:actions.purchaseNow")} - ${formatFundingAmount(selectedRate)}` : t("purchase-label:actions.purchaseNow")
+          children: [errors === null || errors === void 0 ? void 0 : errors.map(e => t(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(encode(e.message), {
+            defaultValue: e.message.replace(/Exception with code [\w\d]+; module [\d]+, category [\d]+, item [\d]+/g, "")
           }))]
-        }))
-      }))]
-    }))]
+        }))]
+      })]
+    })), 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)
+    })]
   }));
 };
 
@@ -28960,7 +29057,6 @@ var index$1 = /*#__PURE__*/Object.freeze({
 	CarrierTermsForm: CarrierTermsForm,
 	CustomsItemForm: CustomsItemForm,
 	getCustomsItemFormSchema: getCustomsItemFormSchema,
-	FundingMethods: FundingMethods,
 	Label: Label,
 	LandingPage: LandingPage,
 	ListCarriers: ListCarriers$1,
@@ -28974,12 +29070,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 = z.object({
+  isEnabled: z.boolean(),
+  lowBalancePurchaseThreshold: moneySchema.extend({
+    amount: z.number().min(25)
+  }),
+  maximumPurchasesPerDay: z.number().min(1),
+  purchaseAmount: moneySchema.extend({
+    amount: z.number().min(10).max(10000)
+  })
+});
+
+/**
+ * This form that allows users to enable or disable auto funding, and
+ * configure auto funding settings in ShipEngine API.
+ */
+const AutoFundingForm = ({
+  carrierId
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const updateAutoFunding = useUpdateAutoFunding(carrierId);
+  const autoFundingConfiguration = useGetAutoFundingConfiguration();
+  const form = useForm({
+    // TODO - [LMNT-663] We should probably make a hydration effect for autoFundingConfiguration.data
+    defaultValues: autoFundingConfiguration.data,
+    resolver: validationResolver(autoFundingSchema)
+  });
+  const {
+    isDirty
+  } = form.formState;
+  const watchIsEnabled = form.watch("isEnabled");
+  const handleSubmit = formLogger.capture(form.handleSubmit(values => {
+    const payload = values;
+    updateAutoFunding.mutate(payload, {
+      onSuccess: () => autoFundingConfiguration.refetch()
+    });
+  }));
+  const handleToggle = isEnabled => {
+    form.reset(values => Object.assign(Object.assign({}, values), {
+      isEnabled
+    }));
+    if (autoFundingConfiguration.data) {
+      updateAutoFunding.mutate(Object.assign(Object.assign({}, autoFundingConfiguration.data), {
+        isEnabled
+      }), {
+        onSuccess: x => autoFundingConfiguration.refetch()
+      });
+    } else {
+      // TODO - [LMNT-663] Should this throw?
+      logger.error("Toggling auto-funding failed because autoFundingData is undefined.");
+    }
+  };
+  if (autoFundingConfiguration.isLoading) return jsx(Loader, {
+    message: t("manage-funding:autoFunding.isLoading")
+  });
+  return jsxs(Fragment, {
+    children: [jsx(Switch, {
+      defaultChecked: false,
+      // defaultChecked={autoFundingConfiguration.data?.isEnabled}
+      label: t("manage-funding:autoFunding.addFundsAutomatically"),
+      name: "isEnabled",
+      onChange: e => handleToggle(e.target.checked),
+      value: true
+    }), watchIsEnabled && jsxs("form", Object.assign({
+      css: styles.form,
+      id: "auto-funding-form",
+      onSubmit: handleSubmit
+    }, {
+      children: [jsx(MoneyInput, {
+        control: form.control,
+        disabled: !watchIsEnabled,
+        label: t("manage-funding:autoFunding.purchaseAmount"),
+        name: "purchaseAmount",
+        showCurrencySymbol: true
+      }), jsx(MoneyInput, {
+        control: form.control,
+        disabled: !watchIsEnabled,
+        label: t("manage-funding:autoFunding.lowBalancePurchaseThreshold"),
+        name: "lowBalancePurchaseThreshold",
+        showCurrencySymbol: true
+      }), jsx(NumberInput, {
+        control: form.control,
+        disabled: !watchIsEnabled,
+        isInteger: true,
+        label: t("manage-funding:autoFunding.maximumPurchasesPerDay"),
+        name: "maximumPurchasesPerDay"
+      }), jsxs(ButtonGroup, Object.assign({
+        justify: "end"
+      }, {
+        children: [jsx(Button, Object.assign({
+          disabled: !isDirty,
+          onClick: () => form.reset(),
+          variant: ButtonVariant.TEXT
+        }, {
+          children: t("actions.cancel")
+        })), jsx(SubmitButton, Object.assign({
+          control: form.control,
+          "data-testid": "submit-auto-funding",
+          disabled: !watchIsEnabled,
+          requireDirty: true,
+          variant: ButtonVariant.OUTLINED
+        }, {
+          children: t("manage-funding:actions.saveRule")
+        }))]
+      }))]
+    })), autoFundingConfiguration.error && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 1
+      }), jsx(InlineNotification, Object.assign({
+        title: t("manage-funding:autoFunding.error.title"),
+        type: NotificationType.ERROR
+      }, {
+        children: autoFundingConfiguration.error[0].message
+      }))]
+    })]
+  });
+};
+
 /**
  * Captures errors thrown within an Element, logs them and displays a fallback component
  *
@@ -29043,49 +29268,82 @@ class ErrorBoundary extends React.Component {
   }
 }
 
+const ManageFunding = ({
+  carrierId
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    isLoading: isLoadingCarrier
+  } = useGetCarrierById(carrierId);
+  const [isAddFundsFormOpen, setIsAddFundsFormOpen] = useState(false);
+  if (isLoadingCarrier) return jsx(Loader, {
+    message: t("loading.carrier")
+  });
+  return jsxs("section", {
+    children: [jsxs(Spread, {
+      children: [jsx(CarrierBalance, {
+        carrierId: carrierId
+      }), jsx(LinkAction, {
+        icon: "add",
+        isDisabled: isAddFundsFormOpen,
+        onClick: () => setIsAddFundsFormOpen(true),
+        title: t("manage-funding:actions.addFunds")
+      })]
+    }), isAddFundsFormOpen && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 2
+      }), jsx(AddFundsForm, {
+        carrierId: carrierId,
+        onCancel: () => setIsAddFundsFormOpen(false)
+      })]
+    }), jsx(Spacer, {
+      multiplier: 2
+    })]
+  });
+};
+
 /**
- * A drop-in replacement for the `<form>` tag that allows nested forms.
+ * For relevant notes about Storybook stories
  *
- * Via portals, the <form> tag is mounted as a sibling of the app root. The form's
- * interface is then mounted back at the point of use.
+ * Stopgap until we setup https://storybook.js.org/addons/@storybook/addon-docs
  */
-const FormPortal = ({
-  css,
+const StoryNotes = ({
   children,
-  id,
-  onSubmit,
-  variant
-}) => {
-  const rootTarget = useRootPortal();
-  const [interfaceTarget, setInterfaceTarget] = useState(null);
-  const onMountInterfaceTarget = useCallback(element => {
-    if (element) setInterfaceTarget(element);
-  }, []);
-  const formStyle = [variant === "well" && (theme => ({
-    backgroundColor: theme.palette.gray.megaLight,
-    padding: theme.spacing(2)
-  })), css];
-  return jsxs(Fragment, {
-    children: [jsx(Portal, Object.assign({
-      target: rootTarget
+  notes
+}) => jsxs(Fragment, {
+  children: [jsxs("div", Object.assign({
+    css: () => ({
+      backgroundColor: "lightsteelblue",
+      marginBottom: "16px",
+      padding: "16px",
+      paddingLeft: "32px"
+    })
+  }, {
+    children: [jsx(Typography, Object.assign({
+      variant: "heading5"
     }, {
-      children: jsx("form", Object.assign({
-        id: id,
-        onSubmit: onSubmit
-      }, {
-        children: jsx(Portal, Object.assign({
-          target: interfaceTarget
-        }, {
-          children: children
-        }))
-      }))
-    })), jsx("section", {
-      css: formStyle,
-      id: id + "-interface",
-      ref: onMountInterfaceTarget
-    })]
-  });
-};
+      children: "Story notes:"
+    })), jsx("ul", Object.assign({
+      css: theme => ({
+        "> li": {
+          marginTop: theme.spacing(1)
+        }
+      })
+    }, {
+      children: notes.map(n => jsx("li", {
+        children: n
+      }, n))
+    }))]
+  })), jsx("hr", {
+    css: () => ({
+      backgroundColor: "transparent",
+      borderTop: "1px dotted lightgrey",
+      marginBottom: "16px"
+    })
+  }), children]
+});
 
 var $$2 = _export;
 var uncurryThis = functionUncurryThisClause;
@@ -30092,6 +30350,7 @@ var common = {
 		invalidNameOrCompany: "Recipient name and company name (if provided) must have two characters in first and last name.",
 		noWarehouses: "You must have an active warehouse in order to use this feature",
 		unableToLoad: {
+			carrier: "Unable to load carrier",
 			carriers: "Unable to load carriers",
 			salesOrder: "Unable to load order",
 			shipment: "Unable to load shipment",
@@ -30118,6 +30377,7 @@ var common = {
 		thirdParty: "Third Party"
 	},
 	loading: {
+		carrier: "Loading carrier...",
 		carriers: "Loading carriers...",
 		data: "Loading...",
 		importingSalesOrder: "Importing order...",
@@ -30214,11 +30474,11 @@ var listCarriers = {
 var manageFunding = {
 	"manage-funding": {
 	actions: {
+		addFunds: "Add Funds",
+		addFundsAndPurchase: "Add Funds & Purchase",
 		addNow: "Add Now",
-		saveRule: "Save Rule",
-		other: "Other..."
+		saveRule: "Save Rule"
 	},
-	addFunds: "Add Funds",
 	autoFunding: {
 		addFundsAutomatically: "Add Funds Automatically",
 		error: {
@@ -30231,20 +30491,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"
 }
 };
@@ -30753,16 +31024,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 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 jsx(ListCarriers$1, {
+    carriers: carriersConnectedStatus,
+    isLoading: isLoading,
+    onRegisterCarrier: handleRegistration,
+    registerCarrierErrors: registerCarrierErrors
+  });
+};
+
+const Element$5 = registerElement("list-carriers", ListCarriers);
+
+const ManageWarehouses = () => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    data: warehouses,
+    error: listWarehouseErrors,
+    isLoading: isLoadingWarehouses,
+    refetch: refreshListWarehouses
+  } = useListWarehouses();
+  const {
+    error: updateWarehouseErrors,
+    mutateAsync: updateWarehouse
+  } = useUpdateWarehouse();
+  const {
+    error: createWarehouseErrors,
+    mutateAsync: createWarehouse
+  } = useCreateWarehouse();
+  const {
+    error: deleteWarehouseErrors,
+    mutateAsync: deleteWarehouse
+  } = useDeleteWarehouse();
+  const handleDeleteWarehouse = warehouseId => __awaiter(void 0, void 0, void 0, function* () {
+    yield deleteWarehouse({
+      warehouseId
+    });
+    void refreshListWarehouses();
+  });
+  const handleSubmitAddNewWarehouse = payload => __awaiter(void 0, void 0, void 0, function* () {
+    const result = yield createWarehouse(payload);
+    if (result) void refreshListWarehouses();
+  });
+  const handleSubmitEditWarehouse = (payload, warehouseId) => __awaiter(void 0, void 0, void 0, function* () {
+    yield updateWarehouse({
+      name: payload.name,
+      originAddress: payload.originAddress,
+      returnAddress: payload.returnAddress,
+      warehouseId: warehouseId
+    });
+    void refreshListWarehouses();
+  });
+  const handleSetDefault = (payload, warehouseId) => __awaiter(void 0, void 0, void 0, function* () {
+    yield updateWarehouse(Object.assign(Object.assign({}, payload), {
+      isDefault: true,
+      warehouseId
+    }));
+    void refreshListWarehouses();
+  });
+  if (isLoadingWarehouses) return jsx(Loader, {
+    message: t("loading.warehouses")
+  });
+  if (!warehouses) {
+    if (listWarehouseErrors) throw new Error(listWarehouseErrors.map(e => e.message).join(", "));
+    throw new Error("errorMessages.unableToLoad.warehouses");
+  }
+  const errors = [...(updateWarehouseErrors !== null && updateWarehouseErrors !== void 0 ? updateWarehouseErrors : []), ...(createWarehouseErrors !== null && createWarehouseErrors !== void 0 ? createWarehouseErrors : []), ...(deleteWarehouseErrors !== null && deleteWarehouseErrors !== void 0 ? deleteWarehouseErrors : [])];
+  return jsx(ManageWarehouses$1, {
+    errors: errors,
+    onAdd: handleSubmitAddNewWarehouse,
+    onDelete: handleDeleteWarehouse,
+    onEdit: handleSubmitEditWarehouse,
+    onSetDefault: handleSetDefault,
+    warehouses: warehouses
   });
 };
 
-const Element$6 = registerElement("list-carriers", ListCarriers);
+const Element$4 = registerElement("manage-warehouses", ManageWarehouses);
 
 const useAddress = ({
   compatibleCountryCodes,
@@ -31368,196 +31707,6 @@ const ConfigureShipment = _a => {
   });
 };
 
-const ManageFunding = ({
-  carrierId,
-  fundingMethod,
-  requiredAmount
-}) => {
-  // const { data: carriersData, loading, error } = useListCarriers();
-  var _a, _b;
-  const {
-    data: addFundsData,
-    error: addFundsErrors,
-    mutateAsync: addFunds,
-    isLoading: isAddFundsLoading,
-    reset: addFundsRefresh
-  } = useAddFunds();
-  const {
-    data: autoFundingData,
-    error: autoFundingErrors,
-    isLoading: isAutoFundingLoading,
-    refetch: refreshAutoFundingConfiguration
-  } = useGetAutoFundingConfiguration();
-  const {
-    mutateAsync: configureAutoFunding
-  } = useUpdateAutoFunding();
-  const handleSubmitManualFunding = payload => __awaiter(void 0, void 0, void 0, function* () {
-    const result = yield addFunds({
-      amount: payload.funds,
-      carrierId
-    });
-    if (result) void addFundsRefresh();
-  });
-  const handleSubmitAutoFunding = payload => __awaiter(void 0, void 0, void 0, function* () {
-    const result = yield configureAutoFunding(Object.assign({
-      carrierId
-    }, payload));
-    if (result) void refreshAutoFundingConfiguration();
-  });
-  const handleToggleAutoFunding = isEnabled => __awaiter(void 0, void 0, void 0, function* () {
-    if (autoFundingData) {
-      const result = yield configureAutoFunding(Object.assign(Object.assign({}, autoFundingData), {
-        carrierId,
-        isEnabled
-      }));
-      if (result) void refreshAutoFundingConfiguration();
-    } else {
-      console.error("Toggling auto-funding failed because autoFundingData is undefined.");
-    }
-  });
-  return jsx(FundingMethods, {
-    autoFundingData: autoFundingData,
-    autoFundingErrorMessage: autoFundingErrors ? (_a = autoFundingErrors[0]) === null || _a === void 0 ? void 0 : _a.message : undefined,
-    fundingMethod: fundingMethod !== null && fundingMethod !== void 0 ? fundingMethod : "both",
-    hasAutoFundingError: !!(autoFundingErrors === null || autoFundingErrors === void 0 ? void 0 : autoFundingErrors.length),
-    hasManualFundingError: !!(addFundsErrors === null || addFundsErrors === void 0 ? void 0 : addFundsErrors.length),
-    isAutoFundingLoading: isAutoFundingLoading,
-    isManualFundingLoading: isAddFundsLoading,
-    manualFundingCurrentBalance: (_b = addFundsData === null || addFundsData === void 0 ? void 0 : addFundsData.balance.amount) !== null && _b !== void 0 ? _b : 0,
-    manualFundingRequiredAmount: requiredAmount,
-    onSubmitAutoFunding: handleSubmitAutoFunding,
-    onSubmitManualFunding: handleSubmitManualFunding,
-    onToggleAutoFunding: handleToggleAutoFunding
-  });
-};
-
-const ManageWarehouses = () => {
-  const {
-    t
-  } = useTranslation();
-  const {
-    data: warehouses,
-    error: listWarehouseErrors,
-    isLoading: isLoadingWarehouses,
-    refetch: refreshListWarehouses
-  } = useListWarehouses();
-  const {
-    error: updateWarehouseErrors,
-    mutateAsync: updateWarehouse
-  } = useUpdateWarehouse();
-  const {
-    error: createWarehouseErrors,
-    mutateAsync: createWarehouse
-  } = useCreateWarehouse();
-  const {
-    error: deleteWarehouseErrors,
-    mutateAsync: deleteWarehouse
-  } = useDeleteWarehouse();
-  const handleDeleteWarehouse = warehouseId => __awaiter(void 0, void 0, void 0, function* () {
-    yield deleteWarehouse({
-      warehouseId
-    });
-    void refreshListWarehouses();
-  });
-  const handleSubmitAddNewWarehouse = payload => __awaiter(void 0, void 0, void 0, function* () {
-    const result = yield createWarehouse(payload);
-    if (result) void refreshListWarehouses();
-  });
-  const handleSubmitEditWarehouse = (payload, warehouseId) => __awaiter(void 0, void 0, void 0, function* () {
-    yield updateWarehouse({
-      name: payload.name,
-      originAddress: payload.originAddress,
-      returnAddress: payload.returnAddress,
-      warehouseId: warehouseId
-    });
-    void refreshListWarehouses();
-  });
-  const handleSetDefault = (payload, warehouseId) => __awaiter(void 0, void 0, void 0, function* () {
-    yield updateWarehouse(Object.assign(Object.assign({}, payload), {
-      isDefault: true,
-      warehouseId
-    }));
-    void refreshListWarehouses();
-  });
-  if (isLoadingWarehouses) return jsx(Loader, {
-    message: t("loading.warehouses")
-  });
-  if (!warehouses) {
-    if (listWarehouseErrors) throw new Error(listWarehouseErrors.map(e => e.message).join(", "));
-    throw new Error("errorMessages.unableToLoad.warehouses");
-  }
-  const errors = [...(updateWarehouseErrors !== null && updateWarehouseErrors !== void 0 ? updateWarehouseErrors : []), ...(createWarehouseErrors !== null && createWarehouseErrors !== void 0 ? createWarehouseErrors : []), ...(deleteWarehouseErrors !== null && deleteWarehouseErrors !== void 0 ? deleteWarehouseErrors : [])];
-  return jsx(ManageWarehouses$1, {
-    errors: errors,
-    onAdd: handleSubmitAddNewWarehouse,
-    onDelete: handleDeleteWarehouse,
-    onEdit: handleSubmitEditWarehouse,
-    onSetDefault: handleSetDefault,
-    warehouses: warehouses
-  });
-};
-
-const Onboarding = ({
-  onCompleteOnboarding
-}) => {
-  const {
-    t
-  } = useTranslation(["common", "register-wallet"]);
-  const {
-    data: warehouses,
-    refetch: refetchWarehouses
-  } = useListWarehouses();
-  const {
-    mutateAsync: createWarehouse
-  } = useCreateWarehouse();
-  const {
-    data: carriers,
-    refetch: refetchCarriers
-  } = useListCarriers();
-  const {
-    error: registerStampsCarrierErrors,
-    mutateAsync: registerStampsCarrier
-  } = useConnectCarrier();
-  const {
-    error: registerUpsCarrierErrors,
-    mutateAsync: registerUpsCarrier,
-    isLoading: isLoadingUps
-  } = useConnectCarrier();
-  const {
-    error: registerDhlCarrierErrors,
-    mutateAsync: registerDhlCarrier,
-    isLoading: isLoadingDhl
-  } = useConnectCarrier();
-  const onWarehouseCreated = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-    yield refetchWarehouses();
-  }), [refetchWarehouses]);
-  const onCarrierCreated = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-    yield refetchCarriers();
-  }), [refetchCarriers]);
-  if (!carriers) return jsx(Loader, {
-    message: t("loading.carriers")
-  });
-  if (!warehouses) return jsx(Loader, {
-    message: t("loading.warehouses")
-  });
-  return 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,
@@ -31750,6 +31899,69 @@ const SalesOrder = _a => {
   }));
 };
 
+const Element$3 = registerElement("purchase-label", SalesOrder);
+
+const Onboarding = ({
+  onCompleteOnboarding
+}) => {
+  const {
+    t
+  } = useTranslation(["common", "register-wallet"]);
+  const {
+    data: warehouses,
+    refetch: refetchWarehouses
+  } = useListWarehouses();
+  const {
+    mutateAsync: createWarehouse
+  } = useCreateWarehouse();
+  const {
+    data: carriers,
+    refetch: refetchCarriers
+  } = useListCarriers();
+  const {
+    error: registerStampsCarrierErrors,
+    mutateAsync: registerStampsCarrier
+  } = useConnectCarrier();
+  const {
+    error: registerUpsCarrierErrors,
+    mutateAsync: registerUpsCarrier,
+    isLoading: isLoadingUps
+  } = useConnectCarrier();
+  const {
+    error: registerDhlCarrierErrors,
+    mutateAsync: registerDhlCarrier,
+    isLoading: isLoadingDhl
+  } = useConnectCarrier();
+  const onWarehouseCreated = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    yield refetchWarehouses();
+  }), [refetchWarehouses]);
+  const onCarrierCreated = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    yield refetchCarriers();
+  }), [refetchCarriers]);
+  if (!carriers) return jsx(Loader, {
+    message: t("loading.carriers")
+  });
+  if (!warehouses) return jsx(Loader, {
+    message: t("loading.warehouses")
+  });
+  return 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,
@@ -31818,12 +32030,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);
@@ -32512,5 +32718,35 @@ const renderWithProviders = component => {
     })
   });
 };
+/**
+ * Wraps the test with all of the usual Shipengine / Giger / i18 / etc providers that a full, registered "Element" would have.
+ * This allows components to simulate usage in an Element via `decorators: [withAllProviders]`
+ **/
+const renderWithAllProviders = component => {
+  const theme = createTheme(BrandName.FALLBACK);
+  return render(component, {
+    wrapper: ({
+      children
+    }) => jsx(ShipEngineProvider, Object.assign({
+      baseURL: "/api",
+      getToken: () => {
+        var _a;
+        return (_a = process.env.STORYBOOK_TOKEN) !== null && _a !== void 0 ? _a : "none";
+      }
+    }, {
+      children: jsx(RootPortalProvider, {
+        children: jsx(GigerConfigProvider, Object.assign({
+          resolveIcon: name => `<svg>${name}</svg>`
+        }, {
+          children: jsx(ThemeProvider, Object.assign({
+            theme: deserialize(theme)
+          }, {
+            children: children
+          }))
+        }))
+      })
+    }))
+  });
+};
 
-export { Accordion, ButtonGroup, Country, Cube, ElementsContext, ElementsProvider, ErrorBoundary, ErrorFallback, fields as Field, FieldLabel, FormPortal, GigerProvider, ItemsBreakdown, Element$6 as ListCarriers, Loader, Element$5 as ManageFunding, Element$4 as ManageWarehouses, Element$2 as Onboarding, PageLayoutProvider, Portal, Element$3 as PurchaseLabel, RootPortalProvider, Spacer, index$1 as Templates, UsState, UsaCity, Element$1 as ViewShipment, Element as VoidLabel, addressFactory, addressPreferenceFactory, addressValidationFactory, calculateTotal, capitalizeFirstLetter, carrierFactory, carrierOptionFactory, convertDimensions, convertWeight, countries, countryCodes, createCodedErrors, createDictionary, createStyles, currencySymbol, customsItemFactory, daysAfter, downloadFactory, errorMap, euCountryCodes, extendZod, formLogger, formatCreditCardNumber, formatDate, formatFractionalWeight, formatMoney, fractionalWeightFactory, getCustomsFromSalesOrder, getExpirationYears, getIsCustomsRequiredForSalesOrder, getIsCustomsRequiredForShipment, getIsInternationalShipment, getPendingShipment, getRateRequiresAcknowledgement, getRequestedServices, getTotalRateAmount, isDomesticAddress, isFlatRatePackageCode, isMilitaryAddress, isNowOrInTheFuture, isPoBox, isPoBoxAddress, isString, isUnitedStatesTerritory, isUspsCarrier, labelFactory, linkedResourceFactory, moneyFactory, moneySchema, mostRecent, nextDayCutoff, omitTime, orderSourceFactory, orderSourceRefreshInfoFactory, packageFactory, phoneSchema, phoneSchemaUnvalidated, postalCodeRegex$3 as postalCodeRegex, randomDeliveryConfirmation, randomFulfillmentStatus, randomInsuranceProvider, randomOrderSourceCode, randomPaymentStatus, randomShipengineId, randomShipengineSlug, randomWeightUnit, registerElement, renderWithProviders, salesOrderFactory, salesOrderItemFactory, salesOrderShipmentFactory, serviceFactory, shipmentFactory, shipmentItemFactory, shipmentPackageFactory, sortByCreationDate, tristateValue, usCities, usStateCodes, usStates, useCarrierMetadata, useConfirmationOptions, useCountryCodeOptions, useCustomsContentsOptions, useCustomsNonDeliveryOptions, useElements, useExpirationMonthOptions, useInsuranceProviderOptions, useNestedForm, usePackageOptions, usePageLayout, useRateOptions, useRootPortal, useRunOnceOnTrue, useServiceCodeOptions, useShippingPresetsOptions, useStateCodeOptions, useToggle, useWarehouseOptions, validationResolver, warehouseFactory, weightFactory, weightWithUnitFactory };
+export { Accordion, AddFundsForm, AutoFundingForm, ButtonGroup, CarrierBalance, Country, Cube, ElementsContext, ElementsProvider, ErrorBoundary, ErrorFallback, fields as Field, FieldLabel, FormPortal, FundAndPurchase, GigerProvider, InlineLabel, ItemsBreakdown, LinkAction, Element$5 as ListCarriers, Loader, ManageFunding, Element$4 as ManageWarehouses, Element$2 as Onboarding, PageLayoutProvider, Portal, Element$3 as PurchaseLabel, RootPortalProvider, Spacer, Spread, StoryNotes, index$1 as Templates, UsState, UsaCity, Element$1 as ViewShipment, Element as VoidLabel, addressFactory, addressPreferenceFactory, addressValidationFactory, autoFundingSchema, calculateTotal, capitalizeFirstLetter, carrierFactory, carrierOptionFactory, convertDimensions, convertWeight, countries, countryCodes, createCodedErrors, createDictionary, createStyles, currencySymbol, customsItemFactory, daysAfter, downloadFactory, errorMap, euCountryCodes, extendZod, formLogger, formatCreditCardNumber, formatDate, formatFractionalWeight, formatMoney, fractionalWeightFactory, getAddFundsSchema, getCustomsFromSalesOrder, getExpirationYears, getIsCustomsRequiredForSalesOrder, getIsCustomsRequiredForShipment, getIsInternationalShipment, getPendingShipment, getRateRequiresAcknowledgement, getRequestedServices, getTotalRateAmount, isDomesticAddress, isFlatRatePackageCode, isMilitaryAddress, isNowOrInTheFuture, isPoBox, isPoBoxAddress, isString, isUnitedStatesTerritory, isUspsCarrier, labelFactory, linkedResourceFactory, moneyFactory, moneySchema, mostRecent, nextDayCutoff, omitTime, orderSourceFactory, orderSourceRefreshInfoFactory, packageFactory, phoneSchema, phoneSchemaUnvalidated, postalCodeRegex$3 as postalCodeRegex, randomDeliveryConfirmation, randomFulfillmentStatus, randomInsuranceProvider, randomOrderSourceCode, randomPaymentStatus, randomShipengineId, randomShipengineSlug, randomWeightUnit, registerElement, renderWithAllProviders, renderWithProviders, salesOrderFactory, salesOrderItemFactory, salesOrderShipmentFactory, serviceFactory, shipmentFactory, shipmentItemFactory, shipmentPackageFactory, sortByCreationDate, tristateValue, usCities, usStateCodes, usStates, useCarrierMetadata, useConfirmationOptions, useCountryCodeOptions, useCustomsContentsOptions, useCustomsNonDeliveryOptions, useElements, useExpirationMonthOptions, useInsuranceProviderOptions, useNestedForm, usePackageOptions, usePageLayout, useRateOptions, useRootPortal, useRunOnceOnTrue, useServiceCodeOptions, useShippingPresetsOptions, useStateCodeOptions, useToggle, useWarehouseOptions, validationResolver, warehouseFactory, weightFactory, weightWithUnitFactory };