@shipengine/elements 0.18.0 → 0.19.0

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, 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 { 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, Pagination, BottomSheet, GigerConfigProvider, EmotionReset, FontsLoader } from '@packlink/giger';
 import axios from 'axios';
-import { logger, ShipEngineProvider, useValidateAddresses, useAddFunds, useGetCarrierById, useUpdateAutoFunding, useGetAutoFundingConfiguration, useListCarriers, useConnectCarrier, useListWarehouses, useUpdateWarehouse, useCreateWarehouse, useDeleteWarehouse, useUpdateSalesOrderShipment, useParseAddress, useListCustomPackageTypes, useCalculateRates, useCreateLabel, useListSalesOrderShipments, useCreateSalesOrderShipment, useGetAccountSettings, useListSalesOrders, useGetSalesOrder, useListOrderSources, useRefreshOrderSource, useGetShipment, useGetSalesOrderShipment, useListLabels, useGetLabel, useVoidLabel } from '@shipengine/react';
+import { logger, ShipEngineProvider, useValidateAddresses, useAddFunds, useGetCarrierById, useUpdateAutoFunding, useGetAutoFundingConfiguration, useListCarriers, useConnectCarrier, useListWarehouses, useUpdateWarehouse, useCreateWarehouse, useDeleteWarehouse, useUpdateSalesOrderShipment, useParseAddress, useListCustomPackageTypes, useCalculateRates, useCreateLabel, useListSalesOrderShipments, useCreateSalesOrderShipment, useGetAccountSettings, useListSalesOrders, useGetSalesOrder, useListOrderSources, useRefreshOrderSource, useGetShipment, useGetSalesOrderShipment, useListLabels, useGetWalletTransactionHistory, useGetLabel, useVoidLabel } from '@shipengine/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import * as React from 'react';
@@ -23068,7 +23068,7 @@ const AddressParser = ({
   }));
 };
 
-const styles$a = createStyles({
+const styles$b = createStyles({
   grow: {
     flexGrow: 1
   },
@@ -23167,13 +23167,13 @@ const AddressFields = ({
       },
       options: countryCodeOptions
     }), jsxs("div", Object.assign({
-      css: styles$a.stateZipWrapper
+      css: styles$b.stateZipWrapper
     }, {
       children: [jsx("div", Object.assign({
-        css: styles$a.stateWrapper
+        css: styles$b.stateWrapper
       }, {
         children: jsx("div", Object.assign({
-          css: styles$a.grow
+          css: styles$b.grow
         }, {
           children: watchCountryCode === "US" ?
           // Domestic States
@@ -23197,10 +23197,10 @@ const AddressFields = ({
           })
         }))
       })), jsx("div", Object.assign({
-        css: styles$a.zipWrapper
+        css: styles$b.zipWrapper
       }, {
         children: jsx("div", Object.assign({
-          css: styles$a.grow
+          css: styles$b.grow
         }, {
           children: jsx(TextInput, {
             control: form.control,
@@ -23428,7 +23428,7 @@ const AddressForm = ({
   }));
 };
 
-const styles$9 = createStyles({
+const styles$a = createStyles({
   agreement: {
     alignItems: "center",
     display: "flex",
@@ -23498,10 +23498,10 @@ const DisplayCarrierTerms = c => {
   const listCarrierLinks = () => {
     return c.carrierTerms.links.map((term, index) => {
       return jsx("li", Object.assign({
-        css: styles$9.listItems
+        css: styles$a.listItems
       }, {
         children: jsx(Link, Object.assign({
-          css: styles$9.link,
+          css: styles$a.link,
           href: term.url,
           isExternal: true,
           target: "_blank"
@@ -23517,18 +23517,18 @@ const DisplayCarrierTerms = c => {
   };
   const listCarrierTerms = () => {
     return jsxs("div", Object.assign({
-      css: styles$9.terms
+      css: styles$a.terms
     }, {
       children: [jsx(Typography, Object.assign({
         variant: "subtitle1"
       }, {
         children: c.carrierTerms.title
       })), jsx("div", Object.assign({
-        css: styles$9.terms
+        css: styles$a.terms
       }, {
         children: listCarrierContent()
       })), jsx("ul", Object.assign({
-        css: styles$9.links
+        css: styles$a.links
       }, {
         children: listCarrierLinks()
       }))]
@@ -23758,7 +23758,7 @@ const AddressDisplay = ({
   }));
 };
 
-const styles$8 = createStyles({
+const styles$9 = createStyles({
   container: theme => ({
     display: "flex",
     gap: theme.spacing()
@@ -23796,13 +23796,13 @@ const Disclosure = ({
   }, [open]);
   return jsxs(Fragment, {
     children: [jsxs("div", Object.assign({
-      css: styles$8.container
+      css: styles$9.container
     }, {
       children: [jsx("div", {
         children: label
       }), _showToggle && jsx("button", Object.assign({
         "aria-expanded": isOpen,
-        css: styles$8.toggle,
+        css: styles$9.toggle,
         onClick: () => {
           setIsOpen(!isOpen);
           onToggle(!isOpen);
@@ -23810,12 +23810,12 @@ const Disclosure = ({
         type: "button"
       }, {
         children: jsx(Icon, {
-          css: styles$8.icon,
+          css: styles$9.icon,
           name: isOpen ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM
         })
       }))]
     })), isOpen && jsx("div", Object.assign({
-      css: styles$8.content
+      css: styles$9.content
     }, {
       children: typeof children === "function" ? children(() => setIsOpen(!isOpen)) : children
     }))]
@@ -23955,7 +23955,7 @@ const getCarrierRecoverySchema = requiresAddress => z.object({
   address: requiresAddress ? baseSchema : baseSchema.optional()
 });
 
-const styles$7 = createStyles({
+const styles$8 = createStyles({
   grid: theme => ({
     margin: theme.spacing(4)
   }),
@@ -23998,7 +23998,7 @@ const CarrierRecoveryForm = ({
     onSubmit: formLogger.capture(handleSubmit)
   }, {
     children: jsxs(Grid, Object.assign({
-      css: styles$7.grid,
+      css: styles$8.grid,
       noPadding: true
     }, {
       children: [requiresAddress && jsxs(Fragment, {
@@ -24006,14 +24006,14 @@ const CarrierRecoveryForm = ({
           colSpan: 12
         }, {
           children: jsx(Typography, Object.assign({
-            css: styles$7.heading,
+            css: styles$8.heading,
             variant: "heading4"
           }, {
             children: t("register-wallet:sections.carriers.title")
           }))
         })), jsx(GridChild, Object.assign({
           colSpan: 12,
-          css: styles$7.subtitle
+          css: styles$8.subtitle
         }, {
           children: jsx(Typography, Object.assign({
             variant: "subtitle1"
@@ -24099,7 +24099,7 @@ const CarrierTermsForm = ({
     onSubmit(payload.agreement);
   }));
   return jsxs("div", Object.assign({
-    css: styles$9.termsForm,
+    css: styles$a.termsForm,
     "data-testid": "carrier-terms-form"
   }, {
     children: [jsx(Typography, Object.assign({
@@ -24115,7 +24115,7 @@ const CarrierTermsForm = ({
     })), jsx(Spacer, {
       multiplier: 1
     }), jsx("div", Object.assign({
-      css: styles$9.carrierLogos
+      css: styles$a.carrierLogos
     }, {
       children: metadatas.map(({
         name,
@@ -24131,7 +24131,7 @@ const CarrierTermsForm = ({
         onSubmit: formLogger.capture(handleSubmit)
       }, {
         children: jsxs("div", Object.assign({
-          css: styles$9.agreement
+          css: styles$a.agreement
         }, {
           children: [jsx("div", {
             children: jsx(CheckboxInput, {
@@ -24158,12 +24158,12 @@ const CarrierTermsForm = ({
               name: "agreement"
             })
           }), showTerms && jsxs("div", Object.assign({
-            css: styles$9.well
+            css: styles$a.well
           }, {
             children: [terms.map((t, idx) => jsx(DisplayCarrierTerms, {
               carrierTerms: t
             }, idx)), jsx("div", Object.assign({
-              css: styles$9.close
+              css: styles$a.close
             }, {
               children: jsx(Button, Object.assign({
                 onClick: () => setShowTerms(false),
@@ -24551,7 +24551,7 @@ const LandingPageForm = ({
   }));
 };
 
-const styles$6 = createStyles({
+const styles$7 = createStyles({
   container: theme => ({
     padding: theme.spacing(2)
   }),
@@ -24573,11 +24573,11 @@ const LandingPage = ({
     t
   } = useTranslation();
   return jsxs("div", Object.assign({
-    css: styles$6.container,
+    css: styles$7.container,
     "data-testid": "landing-page"
   }, {
     children: [jsxs("div", Object.assign({
-      css: styles$6.header
+      css: styles$7.header
     }, {
       children: [jsx(Typography, Object.assign({
         variant: "heading4"
@@ -24595,7 +24595,7 @@ const LandingPage = ({
     })), jsx(LandingPageForm, {
       onSubmit: onSubmit
     }), jsxs("div", Object.assign({
-      css: styles$6.header
+      css: styles$7.header
     }, {
       children: [jsx(Spacer, {
         multiplier: 6
@@ -24606,7 +24606,7 @@ const LandingPage = ({
       })), jsx(Spacer, {
         multiplier: 2
       }), jsx(Typography, Object.assign({
-        css: styles$6.description,
+        css: styles$7.description,
         variant: "body1"
       }, {
         children: t("onboarding:landing.description")
@@ -24790,7 +24790,7 @@ const ListCarriersRow = ({
   }));
 };
 
-const styles$5 = createStyles({
+const styles$6 = createStyles({
   listContainer: theme => ({
     "& > li:not(:last-of-type)": {
       borderBottom: `1px solid ${theme.palette.gray.light}`
@@ -24837,7 +24837,7 @@ const ListCarriers$1 = ({
         children: t("list-carriers:headers.accountCarriers")
       }))
     }), jsx("ul", Object.assign({
-      css: styles$5.listContainer
+      css: styles$6.listContainer
     }, {
       children: isLoading ? jsxs(Fragment, {
         children: [jsx(LoadingSkeletonRow, {}), jsx(LoadingSkeletonRow, {}), jsx(LoadingSkeletonRow, {})]
@@ -24858,10 +24858,10 @@ const ListCarriers$1 = ({
 };
 const LoadingSkeletonRow = () => {
   return jsxs("div", Object.assign({
-    css: styles$5.skeletonRow
+    css: styles$6.skeletonRow
   }, {
     children: [jsxs("div", Object.assign({
-      css: styles$5.skeletonLogoContainer
+      css: styles$6.skeletonLogoContainer
     }, {
       children: [jsx(Skeleton, {
         animation: SkeletonAnimation.WAVE,
@@ -24885,7 +24885,7 @@ const LoadingSkeletonRow = () => {
   }));
 };
 
-const styles$4 = createStyles({
+const styles$5 = createStyles({
   body: theme => ({
     borderTop: `1px solid ${theme.palette.gray.light}`,
     color: theme.palette.black,
@@ -24936,14 +24936,14 @@ const SettingsCard = ({
   verticallyAligned
 }) => {
   return jsxs("div", Object.assign({
-    css: verticallyAligned ? styles$4.verticalContainer : styles$4.container,
+    css: verticallyAligned ? styles$5.verticalContainer : styles$5.container,
     "data-testid": "settingsCard"
   }, {
     children: [jsxs("div", Object.assign({
-      css: styles$4.header
+      css: styles$5.header
     }, {
       children: [jsxs("div", Object.assign({
-        css: styles$4.title
+        css: styles$5.title
       }, {
         children: [typeof title === "string" ? jsx(Typography, Object.assign({
           variant: "subtitle2"
@@ -24978,7 +24978,7 @@ const SettingsCard = ({
         }))
       }))]
     })), children && jsx("div", Object.assign({
-      css: styles$4.body
+      css: styles$5.body
     }, {
       children: jsxs("div", {
         children: [children, accessoryAction && jsx(ButtonGroup, Object.assign({
@@ -25055,7 +25055,9 @@ const WarehouseDisplay = ({
 
 const postalCodeRegex$1 = /(^\d{5}$)|(^\d{5}-\d{4}$)/;
 const warehouseAddressSchema = addressSchema.extend({
-  addressResidentialIndicator: z.preprocess(v => v === "yes" ? true : false, z.boolean().default(false).transform(value => value ? "yes" : "no"))
+  addressResidentialIndicator: z.preprocess(v => v === "yes" ? true : false, z.boolean().default(false).transform(value => value ? "yes" : "no")),
+  companyName: z.string().trim().min(1),
+  phone: z.string().trim().min(1)
 }).refine(schema => !schema.phone || isValidPhoneNumber(schema.phone, schema.countryCode), {
   message: "schemaErrors.notAValidPhoneNumber",
   path: ["phone"]
@@ -25136,7 +25138,8 @@ const WarehouseForm = ({
       nativeLabel: true
     }), jsx(AddressFields, {
       form: form,
-      formatFieldName: fieldName => `originAddress.${fieldName}`
+      formatFieldName: fieldName => `originAddress.${fieldName}`,
+      optionalFields: ["addressLine2"]
     }), jsx(CheckboxInput, {
       checkboxLabel: t("manage-warehouses:residentialAddress"),
       control: form.control,
@@ -25161,6 +25164,7 @@ const WarehouseForm = ({
           form.reset(formValues => Object.assign(Object.assign({}, formValues), {
             returnAddress: Object.assign(Object.assign({}, {}), {
               addressResidentialIndicator: false,
+              companyName: "",
               countryCode: "US"
             }),
             returnToAddressIsDifferent: true
@@ -25172,7 +25176,8 @@ const WarehouseForm = ({
     }), form.watch("returnToAddressIsDifferent") && jsxs(Fragment, {
       children: [jsx(AddressFields, {
         form: form,
-        formatFieldName: fieldName => `returnAddress.${fieldName}`
+        formatFieldName: fieldName => `returnAddress.${fieldName}`,
+        optionalFields: ["addressLine2"]
       }), jsx(CheckboxInput, {
         checkboxLabel: t("manage-warehouses:residentialAddress"),
         control: form.control,
@@ -25457,7 +25462,7 @@ const WarehousePreferenceWizard = ({
   }));
 };
 
-const styles$3 = createStyles({
+const styles$4 = createStyles({
   cardSpacing: theme => ({
     display: "flex",
     flexDirection: "column",
@@ -25490,9 +25495,9 @@ const ManageWarehouses$1 = ({
   const [showAddNewWarehouseForm, toggleShowAddNewWarehouseForm] = useToggle(false);
   return jsxs(Fragment, {
     children: [showAddNewWarehouseForm ? jsx(WarehousePreferenceWizard, {
-      css: styles$3.well,
+      css: styles$4.well,
       formHeader: jsxs("div", Object.assign({
-        css: styles$3.header
+        css: styles$4.header
       }, {
         children: [jsx(Typography, Object.assign({
           variant: "subtitle1"
@@ -25529,7 +25534,7 @@ const ManageWarehouses$1 = ({
         })]
       }))
     })), jsx("div", Object.assign({
-      css: styles$3.cardSpacing
+      css: styles$4.cardSpacing
     }, {
       children: warehouses.sort((a, b) => {
         if (b.isDefault) return 1;
@@ -25537,9 +25542,9 @@ const ManageWarehouses$1 = ({
       }).map(warehouse => {
         if (editWarehouseId && editWarehouseId === warehouse.warehouseId) {
           return jsx(WarehousePreferenceWizard, {
-            css: styles$3.well,
+            css: styles$4.well,
             formHeader: jsxs("div", Object.assign({
-              css: styles$3.header
+              css: styles$4.header
             }, {
               children: [jsx(Typography, Object.assign({
                 variant: "subtitle1"
@@ -26706,7 +26711,7 @@ const EditWalletAddressForm = ({
   }));
 };
 
-const styles$2 = createStyles({
+const styles$3 = createStyles({
   grid: theme => ({
     margin: theme.spacing(4)
   }),
@@ -26758,21 +26763,21 @@ const WalletForm = ({
     onSubmit: formLogger.capture(handleSubmit)
   }, {
     children: jsxs(Grid, Object.assign({
-      css: styles$2.grid,
+      css: styles$3.grid,
       noPadding: true
     }, {
       children: [jsx(GridChild, Object.assign({
         colSpan: 12
       }, {
         children: jsx(Typography, Object.assign({
-          css: styles$2.heading,
+          css: styles$3.heading,
           variant: "heading4"
         }, {
           children: t("register-wallet:sections.billing.title")
         }))
       })), jsx(GridChild, Object.assign({
         colSpan: 12,
-        css: styles$2.subtitle
+        css: styles$3.subtitle
       }, {
         children: jsx(Typography, Object.assign({
           variant: "subtitle1"
@@ -26805,7 +26810,7 @@ const WalletForm = ({
         colSpan: 12
       }, {
         children: jsx(Typography, Object.assign({
-          css: styles$2.subtitle,
+          css: styles$3.subtitle,
           variant: "subtitle1"
         }, {
           children: t("register-wallet:sections.billing.addressSubTitle")
@@ -26861,7 +26866,7 @@ const WalletForm = ({
   }));
 };
 
-const styles$1 = createStyles({
+const styles$2 = createStyles({
   step: {
     "& > span:last-child": {
       position: "static"
@@ -26879,6 +26884,9 @@ const Onboarding$1 = ({
   createWarehouse,
   onCarrierCreated,
   onWarehouseCreated,
+  onValidateWarehouse,
+  warehousePreference,
+  setWarehousePreference,
   onCompleteOnboarding,
   registerDhlCarrier,
   registerDhlCarrierErrors,
@@ -26886,7 +26894,8 @@ const Onboarding$1 = ({
   registerStampsCarrierErrors,
   registerUpsCarrier,
   registerUpsCarrierErrors,
-  warehouses
+  warehouses,
+  validationErrors
 }) => {
   const {
     t
@@ -26939,6 +26948,7 @@ const Onboarding$1 = ({
   const handleCreateWarehouse = payload => __awaiter(void 0, void 0, void 0, function* () {
     const result = yield createWarehouse(payload);
     if (result) yield onWarehouseCreated();
+    setHasValidAddress(true);
   });
   const handleWalletRegistration = ({
     address,
@@ -26984,14 +26994,34 @@ const Onboarding$1 = ({
     }
     if (agreedToTerms && !warehouses.length && !hasValidAddress) {
       // Step 3: Add Ship From (Warehouse) Address
-      return jsx(WarehouseForm, {
+      return jsx(WarehousePreferenceWizard, {
+        formHeader: jsxs("div", Object.assign({
+          css: {
+            textAlign: "center"
+          }
+        }, {
+          children: [jsx(Typography, Object.assign({
+            variant: "heading4"
+          }, {
+            children: t("onboarding:warehouse.title")
+          })), jsx(Spacer, {
+            multiplier: 2
+          }), jsx(Typography, Object.assign({
+            variant: "subtitle1"
+          }, {
+            children: t("onboarding:warehouse.subtitle")
+          })), jsx(Spacer, {
+            multiplier: 1
+          })]
+        })),
         isOnboarding: true,
         onSubmit: payload => {
           handleCreateWarehouse(payload);
-          setHasValidAddress(true);
-          // Step 3.1: TODO: LMNT-815 Validate Address
+          setWarehousePreference(undefined);
         },
-        submitButtonTitle: t("actions.continue")
+        onValidate: onValidateWarehouse,
+        submitButtonTitle: t("actions.continue"),
+        warehousePreference: warehousePreference
       });
     }
     // Step 4: Register Stamps Wallet, UPS, DHL
@@ -27031,22 +27061,22 @@ const Onboarding$1 = ({
     return jsx(Loader, {});
   };
   return jsxs("div", Object.assign({
-    css: styles$1.wrapper
+    css: styles$2.wrapper
   }, {
     children: [jsxs(Stepper, Object.assign({
       currentStep: currentStep
     }, {
       children: [jsx(Step, {
-        css: styles$1.step,
+        css: styles$2.step,
         label: t("onboarding:steps.login")
       }), jsx(Step, {
-        css: styles$1.step,
+        css: styles$2.step,
         label: t("onboarding:steps.carriers")
       }), jsx(Step, {
-        css: styles$1.step,
+        css: styles$2.step,
         label: t("onboarding:steps.addresses")
       }), jsx(Step, {
-        css: styles$1.step,
+        css: styles$2.step,
         label: t("onboarding:steps.payment")
       })]
     })), renderStep()]
@@ -27666,7 +27696,7 @@ const FundAndPurchase = ({
   }));
 };
 
-const styles = createStyles({
+const styles$1 = createStyles({
   fundAndPurchase: theme => ({
     borderTop: `1px solid ${theme.palette.gray.ultraLight}`
   }),
@@ -27817,7 +27847,7 @@ const RateForm = ({
           onClick: onSelectRate,
           options: showHiddenRates ? rateOptions : filteredRateOptions
         }), rateOptions.some(option => option.requiresAcknowledgement) && rateOptions.length > 5 && jsx(Link, Object.assign({
-          css: styles.showMoreOrLessRatesButton,
+          css: styles$1.showMoreOrLessRatesButton,
           onClick: () => {
             var _a;
             setShowHiddenRates(!showHiddenRates);
@@ -27838,7 +27868,7 @@ const RateForm = ({
           }))
         }))]
       }) : !isLoading && errors && !!errors.length ? null : jsxs("article", Object.assign({
-        css: styles.ratesInterstitial,
+        css: styles$1.ratesInterstitial,
         role: "presentation"
       }, {
         children: [jsx(Cube, {
@@ -27859,7 +27889,7 @@ const RateForm = ({
     })), jsx(FundAndPurchase, {
       carrierId: selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.carrierId,
       control: form.control,
-      css: styles.fundAndPurchase,
+      css: styles$1.fundAndPurchase,
       disabled: disabled,
       isFundingEnabled: features === null || features === void 0 ? void 0 : features.enableFunding,
       isFundingRequired: (selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.balance) !== undefined && !!selectedRate.requiresFundedAmount,
@@ -29315,6 +29345,110 @@ const SuspendShipment = ({
   }));
 };
 
+const styles = createStyles({
+  dateRangeInput: theme => ({
+    width: theme.spacing(30)
+  })
+});
+
+const HistoryActions = () => {
+  const {
+    t
+  } = useTranslation();
+  const selectOptions = useMemo(() => [{
+    label: t("wallet-history:historyOptions.custom"),
+    value: t("wallet-history:historyOptions.custom")
+  }, {
+    label: t("wallet-history:historyOptions.last30days"),
+    value: t("wallet-history:historyOptions.last30days")
+  }, {
+    label: t("wallet-history:historyOptions.thisMonth"),
+    value: t("wallet-history:historyOptions.thisMonth")
+  }, {
+    label: t("wallet-history:historyOptions.lastMonth"),
+    value: t("wallet-history:historyOptions.lastMonth")
+  }], [t]);
+  const [selectValue, setSelectValue] = useState();
+  return jsxs(Spread, {
+    children: [jsx(Select$1, Object.assign({
+      css: styles.dateRangeInput,
+      label: "Date range",
+      leftContent: jsx(Icon, {
+        name: IconNames.FILTER
+      }),
+      name: "date-range-select",
+      onChange: newValue => setSelectValue(newValue),
+      onClear: c => console.log("SELECT ON CLEAR CALLBACK:", c)
+    }, {
+      children: selectOptions.map(item => jsx(Option, Object.assign({
+        value: item.value
+      }, {
+        children: item.label
+      }), item.value))
+    })), jsx(LinkAction, {
+      onClick: x => console.log("Downloaded a CSV!", x),
+      title: t("wallet-history:actions.downloadCsv")
+    })]
+  });
+};
+
+const HistoryRow = ({
+  key,
+  rowItem
+}) => jsx("div", {
+  children: "History Row Component"
+});
+
+/**
+ * This component is the list of events that represent the history of a
+ * specific entity. The events are displayed in reverse chronological order.
+ *
+ * @param historyData The history data to display.
+ */
+const HistoryList = ({
+  historyData
+}) => {
+  console.table(historyData);
+  return jsx(Fragment, {
+    children: [1, 2, 3].map((item, idx) => {
+      return jsx(HistoryRow, {
+        rowItem: item
+      }, idx);
+    })
+  });
+};
+
+const HistoryBody = ({
+  historyData
+}) => {
+  const [page, setPage] = useState(1);
+  return jsxs(Fragment, {
+    children: [jsx(HistoryActions, {}), jsx(HistoryList, {
+      historyData: historyData
+    }), jsxs(Fragment, {
+      children: [jsxs("p", {
+        children: ["Page ", jsx("strong", {
+          children: page
+        }), " selected."]
+      }), jsx(Pagination, {
+        boundaryPagesToShow: 7,
+        currentPage: page,
+        onPageChange: selectedPage => setPage(selectedPage),
+        siblingCount: 2,
+        totalPages: 20
+      })]
+    })]
+  });
+};
+
+const WalletHistory$1 = ({
+  historyData
+}) => {
+  return jsx(HistoryBody, {
+    historyData: historyData
+  });
+};
+
 const VoidLabel$1 = ({
   onComplete,
   onSubmit,
@@ -29456,10 +29590,11 @@ var index$1 = /*#__PURE__*/Object.freeze({
 	schedulePickupForCarrier: schedulePickupForCarrier,
 	Shipment: Shipment$1,
 	SuspendShipment: SuspendShipment,
+	WalletHistory: WalletHistory$1,
 	WarehouseForm: WarehouseForm,
 	VoidLabel: VoidLabel$1,
 	WalletForm: WalletForm,
-	styles: styles$2,
+	styles: styles$3,
 	billingAddressSchema: billingAddressSchema,
 	walletSchema: walletSchema,
 	BillingFields: BillingFields,
@@ -31245,7 +31380,21 @@ var voidLabel = {
 }
 };
 
-var index = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, common$1), listCarriers), manageFunding), manageWarehouses), onboarding$1), purchaseLabel), registerCarrier), registerWallet), viewShipment), voidLabel);
+var walletHistory = {
+	"wallet-history": {
+	actions: {
+		downloadCsv: "Download a CSV"
+	},
+	historyOptions: {
+		custom: "Custom",
+		last30days: "Last 30 days",
+		thisMonth: "This month",
+		lastMonth: "Last month"
+	}
+}
+};
+
+var index = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, common$1), listCarriers), manageFunding), manageWarehouses), onboarding$1), purchaseLabel), registerCarrier), registerWallet), viewShipment), voidLabel), walletHistory);
 
 var resources = /*#__PURE__*/Object.freeze({
 	__proto__: null,
@@ -31515,7 +31664,7 @@ const ListCarriers = () => {
   });
 };
 
-const Element$5 = registerElement("list-carriers", ListCarriers);
+const Element$6 = registerElement("list-carriers", ListCarriers);
 
 const ManageWarehouses = ({
   onWarehouseAddressValidation
@@ -31594,7 +31743,7 @@ const ManageWarehouses = ({
   });
 };
 
-const Element$4 = registerElement("manage-warehouses", ManageWarehouses);
+const Element$5 = registerElement("manage-warehouses", ManageWarehouses);
 
 const useAddress = ({
   compatibleCountryCodes,
@@ -32227,6 +32376,12 @@ const Onboarding = ({
   const onWarehouseCreated = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
     yield refetchWarehouses();
   }), [refetchWarehouses]);
+  const {
+    errors: validateWarehouseErrors,
+    validate: validateWarehouse,
+    warehousePreference,
+    setWarehousePreference
+  } = useWarehouseValidation();
   const onCarrierCreated = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
     yield refetchCarriers();
   }), [refetchCarriers]);
@@ -32237,6 +32392,7 @@ const Onboarding = ({
     createWarehouse: createWarehouse,
     onCarrierCreated: onCarrierCreated,
     onCompleteOnboarding: onCompleteOnboarding,
+    onValidateWarehouse: validateWarehouse,
     onWarehouseCreated: onWarehouseCreated,
     registerDhlCarrier: registerDhlCarrier,
     registerDhlCarrierErrors: registerDhlCarrierErrors,
@@ -32244,6 +32400,9 @@ const Onboarding = ({
     registerStampsCarrierErrors: registerStampsCarrierErrors,
     registerUpsCarrier: registerUpsCarrier,
     registerUpsCarrierErrors: registerUpsCarrierErrors,
+    setWarehousePreference: setWarehousePreference,
+    validationErrors: validateWarehouseErrors,
+    warehousePreference: warehousePreference,
     warehouses: warehouses
   });
 };
@@ -32369,7 +32528,7 @@ const useImportSalesOrder = ({
     error: getSalesOrderErrors,
     refetch: refetchSalesOrder,
     isFetching: isFetchingSalesOrder
-  } = useGetSalesOrder(salesOrderId !== null && salesOrderId !== void 0 ? salesOrderId : salesOrders === null || salesOrders === void 0 ? void 0 : salesOrders[0].salesOrderId);
+  } = useGetSalesOrder(salesOrderId !== null && salesOrderId !== void 0 ? salesOrderId : salesOrders && salesOrders[0] ? salesOrders[0].salesOrderId : undefined);
   const {
     data: orderSources,
     error: listOrderSourcesErrors
@@ -32377,6 +32536,7 @@ const useImportSalesOrder = ({
   const {
     data: refreshedOrderSource,
     error: refreshOrderSourceErrors,
+    isLoading: isRefreshingOrderSource,
     mutateAsync: refreshOrderSource
   } = useRefreshOrderSource();
   useEffect(() => {
@@ -32396,7 +32556,7 @@ const useImportSalesOrder = ({
   const errors = [...(listOrderSourcesErrors !== null && listOrderSourcesErrors !== void 0 ? listOrderSourcesErrors : []), ...(listSalesOrdersErrors !== null && listSalesOrdersErrors !== void 0 ? listSalesOrdersErrors : []), ...(getSalesOrderErrors !== null && getSalesOrderErrors !== void 0 ? getSalesOrderErrors : []), ...(refreshOrderSourceErrors !== null && refreshOrderSourceErrors !== void 0 ? refreshOrderSourceErrors : [])];
   return {
     errors: errors.length > 0 ? errors : undefined,
-    isLoading: !salesOrder && !hasRefreshedOrderSource && errors.length === 0,
+    isLoading: isFetchingSalesOrder || isFetchingSalesOrders || isRefreshingOrderSource || !hasRefreshedOrderSource && !salesOrder && (salesOrders === null || salesOrders === void 0 ? void 0 : salesOrders.length) === 0 && errors.length === 0,
     salesOrder
   };
 };
@@ -32554,6 +32714,13 @@ const Shipment = ({
   });
 };
 
+const WalletHistory = () => {
+  const walletHistory = useGetWalletTransactionHistory(); // Mock data for now. Real implementation coming in a subsequent PR [LMNT-842] https://auctane.atlassian.net/browse/LMNT-842
+  return jsx(WalletHistory$1, {
+    historyData: walletHistory
+  });
+};
+
 const VoidLabel = ({
   labelId,
   onComplete,
@@ -32582,12 +32749,14 @@ const VoidLabel = ({
   });
 };
 
-const Element$3 = registerElement("purchase-label", PurchaseLabel);
+const Element$4 = registerElement("purchase-label", PurchaseLabel);
+
+const Element$3 = registerElement("onboarding", Onboarding);
 
-const Element$2 = registerElement("onboarding", Onboarding);
+const Element$2 = registerElement("wallet-history", WalletHistory);
 
 const Element$1 = registerElement("view-shipment", Shipment);
 
 const Element = registerElement("void-label", VoidLabel);
 
-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, autoFundingSchema, calculateTotal, capitalizeFirstLetter, convertDimensions, convertWeight, countries, countryCodes, createCodedErrors, createDictionary, createStyles, currencySymbol, daysAfter, errorMap, euCountryCodes, extendZod, formLogger, formatCreditCardNumber, formatDate, formatExpiration, formatFractionalWeight, formatMoney, getAddFundsSchema, getCustomsFromSalesOrder, getExpirationYears, getIsCustomsRequiredForSalesOrder, getIsCustomsRequiredForShipment, getIsInternationalShipment, getPendingShipment, getRateRequiresAcknowledgement, getRequestedServices, getSalesOrderItemsFromSalesOrderOrShipment, getTotalRateAmount, isDomesticAddress, isFlatRatePackageCode, isMilitaryAddress, isNowOrInTheFuture, isPoBox, isPoBoxAddress, isString, isUnitedStatesTerritory, isUspsCarrier, moneySchema, mostRecent, nextDayCutoff, omitTime, phoneSchema, phoneSchemaUnvalidated, postalCodeRegex$3 as postalCodeRegex, registerElement, sortByCreationDate, usCities, usStateCodes, usStates, useCarrierMetadata, useConfirmationOptions, useCountryCodeOptions, useCustomsContentsOptions, useCustomsNonDeliveryOptions, useElements, useExpirationMonthOptions, useInsuranceProviderOptions, useNestedForm, usePackageOptions, usePageLayout, useRateOptions, useRootPortal, useRunOnceOnTrue, useServiceCodeOptions, useShippingPresetsOptions, useStateCodeOptions, useToggle, useWarehouseOptions, useWarehouseValidation, validationResolver };
+export { Accordion, AddFundsForm, AutoFundingForm, ButtonGroup, CarrierBalance, Country, Cube, ElementsContext, ElementsProvider, ErrorBoundary, ErrorFallback, fields as Field, FieldLabel, FormPortal, FundAndPurchase, GigerProvider, InlineLabel, ItemsBreakdown, LinkAction, Element$6 as ListCarriers, Loader, ManageFunding, Element$5 as ManageWarehouses, Element$3 as Onboarding, PageLayoutProvider, Portal, Element$4 as PurchaseLabel, RootPortalProvider, Spacer, Spread, StoryNotes, index$1 as Templates, UsState, UsaCity, Element$1 as ViewShipment, Element as VoidLabel, Element$2 as WalletHistory, autoFundingSchema, calculateTotal, capitalizeFirstLetter, convertDimensions, convertWeight, countries, countryCodes, createCodedErrors, createDictionary, createStyles, currencySymbol, daysAfter, errorMap, euCountryCodes, extendZod, formLogger, formatCreditCardNumber, formatDate, formatExpiration, formatFractionalWeight, formatMoney, getAddFundsSchema, getCustomsFromSalesOrder, getExpirationYears, getIsCustomsRequiredForSalesOrder, getIsCustomsRequiredForShipment, getIsInternationalShipment, getPendingShipment, getRateRequiresAcknowledgement, getRequestedServices, getSalesOrderItemsFromSalesOrderOrShipment, getTotalRateAmount, isDomesticAddress, isFlatRatePackageCode, isMilitaryAddress, isNowOrInTheFuture, isPoBox, isPoBoxAddress, isString, isUnitedStatesTerritory, isUspsCarrier, moneySchema, mostRecent, nextDayCutoff, omitTime, phoneSchema, phoneSchemaUnvalidated, postalCodeRegex$3 as postalCodeRegex, registerElement, sortByCreationDate, usCities, usStateCodes, usStates, useCarrierMetadata, useConfirmationOptions, useCountryCodeOptions, useCustomsContentsOptions, useCustomsNonDeliveryOptions, useElements, useExpirationMonthOptions, useInsuranceProviderOptions, useNestedForm, usePackageOptions, usePageLayout, useRateOptions, useRootPortal, useRunOnceOnTrue, useServiceCodeOptions, useShippingPresetsOptions, useStateCodeOptions, useToggle, useWarehouseOptions, useWarehouseValidation, validationResolver };