@shipengine/elements 0.18.0 → 0.19.0

package/index.cjs

@@ -23098,7 +23098,7 @@ const AddressParser = ({
   }));
 };
 
-const styles$a = createStyles({
+const styles$b = createStyles({
   grow: {
     flexGrow: 1
   },
@@ -23197,13 +23197,13 @@ const AddressFields = ({
       },
       options: countryCodeOptions
     }), jsxRuntime.jsxs("div", Object.assign({
-      css: styles$a.stateZipWrapper
+      css: styles$b.stateZipWrapper
     }, {
       children: [jsxRuntime.jsx("div", Object.assign({
-        css: styles$a.stateWrapper
+        css: styles$b.stateWrapper
       }, {
         children: jsxRuntime.jsx("div", Object.assign({
-          css: styles$a.grow
+          css: styles$b.grow
         }, {
           children: watchCountryCode === "US" ?
           // Domestic States
@@ -23227,10 +23227,10 @@ const AddressFields = ({
           })
         }))
       })), jsxRuntime.jsx("div", Object.assign({
-        css: styles$a.zipWrapper
+        css: styles$b.zipWrapper
       }, {
         children: jsxRuntime.jsx("div", Object.assign({
-          css: styles$a.grow
+          css: styles$b.grow
         }, {
           children: jsxRuntime.jsx(TextInput, {
             control: form.control,
@@ -23458,7 +23458,7 @@ const AddressForm = ({
   }));
 };
 
-const styles$9 = createStyles({
+const styles$a = createStyles({
   agreement: {
     alignItems: "center",
     display: "flex",
@@ -23528,10 +23528,10 @@ const DisplayCarrierTerms = c => {
   const listCarrierLinks = () => {
     return c.carrierTerms.links.map((term, index) => {
       return jsxRuntime.jsx("li", Object.assign({
-        css: styles$9.listItems
+        css: styles$a.listItems
       }, {
         children: jsxRuntime.jsx(giger.Link, Object.assign({
-          css: styles$9.link,
+          css: styles$a.link,
           href: term.url,
           isExternal: true,
           target: "_blank"
@@ -23547,18 +23547,18 @@ const DisplayCarrierTerms = c => {
   };
   const listCarrierTerms = () => {
     return jsxRuntime.jsxs("div", Object.assign({
-      css: styles$9.terms
+      css: styles$a.terms
     }, {
       children: [jsxRuntime.jsx(giger.Typography, Object.assign({
         variant: "subtitle1"
       }, {
         children: c.carrierTerms.title
       })), jsxRuntime.jsx("div", Object.assign({
-        css: styles$9.terms
+        css: styles$a.terms
       }, {
         children: listCarrierContent()
       })), jsxRuntime.jsx("ul", Object.assign({
-        css: styles$9.links
+        css: styles$a.links
       }, {
         children: listCarrierLinks()
       }))]
@@ -23788,7 +23788,7 @@ const AddressDisplay = ({
   }));
 };
 
-const styles$8 = createStyles({
+const styles$9 = createStyles({
   container: theme => ({
     display: "flex",
     gap: theme.spacing()
@@ -23826,13 +23826,13 @@ const Disclosure = ({
   }, [open]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs("div", Object.assign({
-      css: styles$8.container
+      css: styles$9.container
     }, {
       children: [jsxRuntime.jsx("div", {
         children: label
       }), _showToggle && jsxRuntime.jsx("button", Object.assign({
         "aria-expanded": isOpen,
-        css: styles$8.toggle,
+        css: styles$9.toggle,
         onClick: () => {
           setIsOpen(!isOpen);
           onToggle(!isOpen);
@@ -23840,12 +23840,12 @@ const Disclosure = ({
         type: "button"
       }, {
         children: jsxRuntime.jsx(giger.Icon, {
-          css: styles$8.icon,
+          css: styles$9.icon,
           name: isOpen ? brands.IconNames.CHEVRON_TOP : brands.IconNames.CHEVRON_BOTTOM
         })
       }))]
     })), isOpen && jsxRuntime.jsx("div", Object.assign({
-      css: styles$8.content
+      css: styles$9.content
     }, {
       children: typeof children === "function" ? children(() => setIsOpen(!isOpen)) : children
     }))]
@@ -23985,7 +23985,7 @@ const getCarrierRecoverySchema = requiresAddress => zod.z.object({
   address: requiresAddress ? baseSchema : baseSchema.optional()
 });
 
-const styles$7 = createStyles({
+const styles$8 = createStyles({
   grid: theme => ({
     margin: theme.spacing(4)
   }),
@@ -24028,7 +24028,7 @@ const CarrierRecoveryForm = ({
     onSubmit: formLogger.capture(handleSubmit)
   }, {
     children: jsxRuntime.jsxs(giger.Grid, Object.assign({
-      css: styles$7.grid,
+      css: styles$8.grid,
       noPadding: true
     }, {
       children: [requiresAddress && jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -24036,14 +24036,14 @@ const CarrierRecoveryForm = ({
           colSpan: 12
         }, {
           children: jsxRuntime.jsx(giger.Typography, Object.assign({
-            css: styles$7.heading,
+            css: styles$8.heading,
             variant: "heading4"
           }, {
             children: t("register-wallet:sections.carriers.title")
           }))
         })), jsxRuntime.jsx(giger.GridChild, Object.assign({
           colSpan: 12,
-          css: styles$7.subtitle
+          css: styles$8.subtitle
         }, {
           children: jsxRuntime.jsx(giger.Typography, Object.assign({
             variant: "subtitle1"
@@ -24129,7 +24129,7 @@ const CarrierTermsForm = ({
     onSubmit(payload.agreement);
   }));
   return jsxRuntime.jsxs("div", Object.assign({
-    css: styles$9.termsForm,
+    css: styles$a.termsForm,
     "data-testid": "carrier-terms-form"
   }, {
     children: [jsxRuntime.jsx(giger.Typography, Object.assign({
@@ -24145,7 +24145,7 @@ const CarrierTermsForm = ({
     })), jsxRuntime.jsx(Spacer, {
       multiplier: 1
     }), jsxRuntime.jsx("div", Object.assign({
-      css: styles$9.carrierLogos
+      css: styles$a.carrierLogos
     }, {
       children: metadatas.map(({
         name,
@@ -24161,7 +24161,7 @@ const CarrierTermsForm = ({
         onSubmit: formLogger.capture(handleSubmit)
       }, {
         children: jsxRuntime.jsxs("div", Object.assign({
-          css: styles$9.agreement
+          css: styles$a.agreement
         }, {
           children: [jsxRuntime.jsx("div", {
             children: jsxRuntime.jsx(CheckboxInput, {
@@ -24188,12 +24188,12 @@ const CarrierTermsForm = ({
               name: "agreement"
             })
           }), showTerms && jsxRuntime.jsxs("div", Object.assign({
-            css: styles$9.well
+            css: styles$a.well
           }, {
             children: [terms.map((t, idx) => jsxRuntime.jsx(DisplayCarrierTerms, {
               carrierTerms: t
             }, idx)), jsxRuntime.jsx("div", Object.assign({
-              css: styles$9.close
+              css: styles$a.close
             }, {
               children: jsxRuntime.jsx(giger.Button, Object.assign({
                 onClick: () => setShowTerms(false),
@@ -24581,7 +24581,7 @@ const LandingPageForm = ({
   }));
 };
 
-const styles$6 = createStyles({
+const styles$7 = createStyles({
   container: theme => ({
     padding: theme.spacing(2)
   }),
@@ -24603,11 +24603,11 @@ const LandingPage = ({
     t
   } = reactI18next.useTranslation();
   return jsxRuntime.jsxs("div", Object.assign({
-    css: styles$6.container,
+    css: styles$7.container,
     "data-testid": "landing-page"
   }, {
     children: [jsxRuntime.jsxs("div", Object.assign({
-      css: styles$6.header
+      css: styles$7.header
     }, {
       children: [jsxRuntime.jsx(giger.Typography, Object.assign({
         variant: "heading4"
@@ -24625,7 +24625,7 @@ const LandingPage = ({
     })), jsxRuntime.jsx(LandingPageForm, {
       onSubmit: onSubmit
     }), jsxRuntime.jsxs("div", Object.assign({
-      css: styles$6.header
+      css: styles$7.header
     }, {
       children: [jsxRuntime.jsx(Spacer, {
         multiplier: 6
@@ -24636,7 +24636,7 @@ const LandingPage = ({
       })), jsxRuntime.jsx(Spacer, {
         multiplier: 2
       }), jsxRuntime.jsx(giger.Typography, Object.assign({
-        css: styles$6.description,
+        css: styles$7.description,
         variant: "body1"
       }, {
         children: t("onboarding:landing.description")
@@ -24820,7 +24820,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}`
@@ -24867,7 +24867,7 @@ const ListCarriers$1 = ({
         children: t("list-carriers:headers.accountCarriers")
       }))
     }), jsxRuntime.jsx("ul", Object.assign({
-      css: styles$5.listContainer
+      css: styles$6.listContainer
     }, {
       children: isLoading ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [jsxRuntime.jsx(LoadingSkeletonRow, {}), jsxRuntime.jsx(LoadingSkeletonRow, {}), jsxRuntime.jsx(LoadingSkeletonRow, {})]
@@ -24888,10 +24888,10 @@ const ListCarriers$1 = ({
 };
 const LoadingSkeletonRow = () => {
   return jsxRuntime.jsxs("div", Object.assign({
-    css: styles$5.skeletonRow
+    css: styles$6.skeletonRow
   }, {
     children: [jsxRuntime.jsxs("div", Object.assign({
-      css: styles$5.skeletonLogoContainer
+      css: styles$6.skeletonLogoContainer
     }, {
       children: [jsxRuntime.jsx(giger.Skeleton, {
         animation: giger.SkeletonAnimation.WAVE,
@@ -24915,7 +24915,7 @@ const LoadingSkeletonRow = () => {
   }));
 };
 
-const styles$4 = createStyles({
+const styles$5 = createStyles({
   body: theme => ({
     borderTop: `1px solid ${theme.palette.gray.light}`,
     color: theme.palette.black,
@@ -24966,14 +24966,14 @@ const SettingsCard = ({
   verticallyAligned
 }) => {
   return jsxRuntime.jsxs("div", Object.assign({
-    css: verticallyAligned ? styles$4.verticalContainer : styles$4.container,
+    css: verticallyAligned ? styles$5.verticalContainer : styles$5.container,
     "data-testid": "settingsCard"
   }, {
     children: [jsxRuntime.jsxs("div", Object.assign({
-      css: styles$4.header
+      css: styles$5.header
     }, {
       children: [jsxRuntime.jsxs("div", Object.assign({
-        css: styles$4.title
+        css: styles$5.title
       }, {
         children: [typeof title === "string" ? jsxRuntime.jsx(giger.Typography, Object.assign({
           variant: "subtitle2"
@@ -25008,7 +25008,7 @@ const SettingsCard = ({
         }))
       }))]
     })), children && jsxRuntime.jsx("div", Object.assign({
-      css: styles$4.body
+      css: styles$5.body
     }, {
       children: jsxRuntime.jsxs("div", {
         children: [children, accessoryAction && jsxRuntime.jsx(ButtonGroup, Object.assign({
@@ -25085,7 +25085,9 @@ const WarehouseDisplay = ({
 
 const postalCodeRegex$1 = /(^\d{5}$)|(^\d{5}-\d{4}$)/;
 const warehouseAddressSchema = addressSchema.extend({
-  addressResidentialIndicator: zod.z.preprocess(v => v === "yes" ? true : false, zod.z.boolean().default(false).transform(value => value ? "yes" : "no"))
+  addressResidentialIndicator: zod.z.preprocess(v => v === "yes" ? true : false, zod.z.boolean().default(false).transform(value => value ? "yes" : "no")),
+  companyName: zod.z.string().trim().min(1),
+  phone: zod.z.string().trim().min(1)
 }).refine(schema => !schema.phone || min$4.isValidPhoneNumber(schema.phone, schema.countryCode), {
   message: "schemaErrors.notAValidPhoneNumber",
   path: ["phone"]
@@ -25166,7 +25168,8 @@ const WarehouseForm = ({
       nativeLabel: true
     }), jsxRuntime.jsx(AddressFields, {
       form: form,
-      formatFieldName: fieldName => `originAddress.${fieldName}`
+      formatFieldName: fieldName => `originAddress.${fieldName}`,
+      optionalFields: ["addressLine2"]
     }), jsxRuntime.jsx(CheckboxInput, {
       checkboxLabel: t("manage-warehouses:residentialAddress"),
       control: form.control,
@@ -25191,6 +25194,7 @@ const WarehouseForm = ({
           form.reset(formValues => Object.assign(Object.assign({}, formValues), {
             returnAddress: Object.assign(Object.assign({}, {}), {
               addressResidentialIndicator: false,
+              companyName: "",
               countryCode: "US"
             }),
             returnToAddressIsDifferent: true
@@ -25202,7 +25206,8 @@ const WarehouseForm = ({
     }), form.watch("returnToAddressIsDifferent") && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(AddressFields, {
         form: form,
-        formatFieldName: fieldName => `returnAddress.${fieldName}`
+        formatFieldName: fieldName => `returnAddress.${fieldName}`,
+        optionalFields: ["addressLine2"]
       }), jsxRuntime.jsx(CheckboxInput, {
         checkboxLabel: t("manage-warehouses:residentialAddress"),
         control: form.control,
@@ -25487,7 +25492,7 @@ const WarehousePreferenceWizard = ({
   }));
 };
 
-const styles$3 = createStyles({
+const styles$4 = createStyles({
   cardSpacing: theme => ({
     display: "flex",
     flexDirection: "column",
@@ -25520,9 +25525,9 @@ const ManageWarehouses$1 = ({
   const [showAddNewWarehouseForm, toggleShowAddNewWarehouseForm] = useToggle(false);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [showAddNewWarehouseForm ? jsxRuntime.jsx(WarehousePreferenceWizard, {
-      css: styles$3.well,
+      css: styles$4.well,
       formHeader: jsxRuntime.jsxs("div", Object.assign({
-        css: styles$3.header
+        css: styles$4.header
       }, {
         children: [jsxRuntime.jsx(giger.Typography, Object.assign({
           variant: "subtitle1"
@@ -25559,7 +25564,7 @@ const ManageWarehouses$1 = ({
         })]
       }))
     })), jsxRuntime.jsx("div", Object.assign({
-      css: styles$3.cardSpacing
+      css: styles$4.cardSpacing
     }, {
       children: warehouses.sort((a, b) => {
         if (b.isDefault) return 1;
@@ -25567,9 +25572,9 @@ const ManageWarehouses$1 = ({
       }).map(warehouse => {
         if (editWarehouseId && editWarehouseId === warehouse.warehouseId) {
           return jsxRuntime.jsx(WarehousePreferenceWizard, {
-            css: styles$3.well,
+            css: styles$4.well,
             formHeader: jsxRuntime.jsxs("div", Object.assign({
-              css: styles$3.header
+              css: styles$4.header
             }, {
               children: [jsxRuntime.jsx(giger.Typography, Object.assign({
                 variant: "subtitle1"
@@ -26736,7 +26741,7 @@ const EditWalletAddressForm = ({
   }));
 };
 
-const styles$2 = createStyles({
+const styles$3 = createStyles({
   grid: theme => ({
     margin: theme.spacing(4)
   }),
@@ -26788,21 +26793,21 @@ const WalletForm = ({
     onSubmit: formLogger.capture(handleSubmit)
   }, {
     children: jsxRuntime.jsxs(giger.Grid, Object.assign({
-      css: styles$2.grid,
+      css: styles$3.grid,
       noPadding: true
     }, {
       children: [jsxRuntime.jsx(giger.GridChild, Object.assign({
         colSpan: 12
       }, {
         children: jsxRuntime.jsx(giger.Typography, Object.assign({
-          css: styles$2.heading,
+          css: styles$3.heading,
           variant: "heading4"
         }, {
           children: t("register-wallet:sections.billing.title")
         }))
       })), jsxRuntime.jsx(giger.GridChild, Object.assign({
         colSpan: 12,
-        css: styles$2.subtitle
+        css: styles$3.subtitle
       }, {
         children: jsxRuntime.jsx(giger.Typography, Object.assign({
           variant: "subtitle1"
@@ -26835,7 +26840,7 @@ const WalletForm = ({
         colSpan: 12
       }, {
         children: jsxRuntime.jsx(giger.Typography, Object.assign({
-          css: styles$2.subtitle,
+          css: styles$3.subtitle,
           variant: "subtitle1"
         }, {
           children: t("register-wallet:sections.billing.addressSubTitle")
@@ -26891,7 +26896,7 @@ const WalletForm = ({
   }));
 };
 
-const styles$1 = createStyles({
+const styles$2 = createStyles({
   step: {
     "& > span:last-child": {
       position: "static"
@@ -26909,6 +26914,9 @@ const Onboarding$1 = ({
   createWarehouse,
   onCarrierCreated,
   onWarehouseCreated,
+  onValidateWarehouse,
+  warehousePreference,
+  setWarehousePreference,
   onCompleteOnboarding,
   registerDhlCarrier,
   registerDhlCarrierErrors,
@@ -26916,7 +26924,8 @@ const Onboarding$1 = ({
   registerStampsCarrierErrors,
   registerUpsCarrier,
   registerUpsCarrierErrors,
-  warehouses
+  warehouses,
+  validationErrors
 }) => {
   const {
     t
@@ -26969,6 +26978,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,
@@ -27014,14 +27024,34 @@ const Onboarding$1 = ({
     }
     if (agreedToTerms && !warehouses.length && !hasValidAddress) {
       // Step 3: Add Ship From (Warehouse) Address
-      return jsxRuntime.jsx(WarehouseForm, {
+      return jsxRuntime.jsx(WarehousePreferenceWizard, {
+        formHeader: jsxRuntime.jsxs("div", Object.assign({
+          css: {
+            textAlign: "center"
+          }
+        }, {
+          children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+            variant: "heading4"
+          }, {
+            children: t("onboarding:warehouse.title")
+          })), jsxRuntime.jsx(Spacer, {
+            multiplier: 2
+          }), jsxRuntime.jsx(giger.Typography, Object.assign({
+            variant: "subtitle1"
+          }, {
+            children: t("onboarding:warehouse.subtitle")
+          })), jsxRuntime.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
@@ -27061,22 +27091,22 @@ const Onboarding$1 = ({
     return jsxRuntime.jsx(Loader, {});
   };
   return jsxRuntime.jsxs("div", Object.assign({
-    css: styles$1.wrapper
+    css: styles$2.wrapper
   }, {
     children: [jsxRuntime.jsxs(giger.Stepper, Object.assign({
       currentStep: currentStep
     }, {
       children: [jsxRuntime.jsx(giger.Step, {
-        css: styles$1.step,
+        css: styles$2.step,
         label: t("onboarding:steps.login")
       }), jsxRuntime.jsx(giger.Step, {
-        css: styles$1.step,
+        css: styles$2.step,
         label: t("onboarding:steps.carriers")
       }), jsxRuntime.jsx(giger.Step, {
-        css: styles$1.step,
+        css: styles$2.step,
         label: t("onboarding:steps.addresses")
       }), jsxRuntime.jsx(giger.Step, {
-        css: styles$1.step,
+        css: styles$2.step,
         label: t("onboarding:steps.payment")
       })]
     })), renderStep()]
@@ -27696,7 +27726,7 @@ const FundAndPurchase = ({
   }));
 };
 
-const styles = createStyles({
+const styles$1 = createStyles({
   fundAndPurchase: theme => ({
     borderTop: `1px solid ${theme.palette.gray.ultraLight}`
   }),
@@ -27847,7 +27877,7 @@ const RateForm = ({
           onClick: onSelectRate,
           options: showHiddenRates ? rateOptions : filteredRateOptions
         }), rateOptions.some(option => option.requiresAcknowledgement) && rateOptions.length > 5 && jsxRuntime.jsx(giger.Link, Object.assign({
-          css: styles.showMoreOrLessRatesButton,
+          css: styles$1.showMoreOrLessRatesButton,
           onClick: () => {
             var _a;
             setShowHiddenRates(!showHiddenRates);
@@ -27868,7 +27898,7 @@ const RateForm = ({
           }))
         }))]
       }) : !isLoading && errors && !!errors.length ? null : jsxRuntime.jsxs("article", Object.assign({
-        css: styles.ratesInterstitial,
+        css: styles$1.ratesInterstitial,
         role: "presentation"
       }, {
         children: [jsxRuntime.jsx(Cube, {
@@ -27889,7 +27919,7 @@ const RateForm = ({
     })), jsxRuntime.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,
@@ -29345,6 +29375,110 @@ const SuspendShipment = ({
   }));
 };
 
+const styles = createStyles({
+  dateRangeInput: theme => ({
+    width: theme.spacing(30)
+  })
+});
+
+const HistoryActions = () => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const selectOptions = React.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] = React.useState();
+  return jsxRuntime.jsxs(Spread, {
+    children: [jsxRuntime.jsx(giger.Select, Object.assign({
+      css: styles.dateRangeInput,
+      label: "Date range",
+      leftContent: jsxRuntime.jsx(giger.Icon, {
+        name: brands.IconNames.FILTER
+      }),
+      name: "date-range-select",
+      onChange: newValue => setSelectValue(newValue),
+      onClear: c => console.log("SELECT ON CLEAR CALLBACK:", c)
+    }, {
+      children: selectOptions.map(item => jsxRuntime.jsx(giger.Option, Object.assign({
+        value: item.value
+      }, {
+        children: item.label
+      }), item.value))
+    })), jsxRuntime.jsx(LinkAction, {
+      onClick: x => console.log("Downloaded a CSV!", x),
+      title: t("wallet-history:actions.downloadCsv")
+    })]
+  });
+};
+
+const HistoryRow = ({
+  key,
+  rowItem
+}) => jsxRuntime.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 jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: [1, 2, 3].map((item, idx) => {
+      return jsxRuntime.jsx(HistoryRow, {
+        rowItem: item
+      }, idx);
+    })
+  });
+};
+
+const HistoryBody = ({
+  historyData
+}) => {
+  const [page, setPage] = React.useState(1);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(HistoryActions, {}), jsxRuntime.jsx(HistoryList, {
+      historyData: historyData
+    }), jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsxs("p", {
+        children: ["Page ", jsxRuntime.jsx("strong", {
+          children: page
+        }), " selected."]
+      }), jsxRuntime.jsx(giger.Pagination, {
+        boundaryPagesToShow: 7,
+        currentPage: page,
+        onPageChange: selectedPage => setPage(selectedPage),
+        siblingCount: 2,
+        totalPages: 20
+      })]
+    })]
+  });
+};
+
+const WalletHistory$1 = ({
+  historyData
+}) => {
+  return jsxRuntime.jsx(HistoryBody, {
+    historyData: historyData
+  });
+};
+
 const VoidLabel$1 = ({
   onComplete,
   onSubmit,
@@ -29486,10 +29620,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,
@@ -31275,7 +31410,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,
@@ -31545,7 +31694,7 @@ const ListCarriers = () => {
   });
 };
 
-const Element$5 = registerElement("list-carriers", ListCarriers);
+const Element$6 = registerElement("list-carriers", ListCarriers);
 
 const ManageWarehouses = ({
   onWarehouseAddressValidation
@@ -31624,7 +31773,7 @@ const ManageWarehouses = ({
   });
 };
 
-const Element$4 = registerElement("manage-warehouses", ManageWarehouses);
+const Element$5 = registerElement("manage-warehouses", ManageWarehouses);
 
 const useAddress = ({
   compatibleCountryCodes,
@@ -32257,6 +32406,12 @@ const Onboarding = ({
   const onWarehouseCreated = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
     yield refetchWarehouses();
   }), [refetchWarehouses]);
+  const {
+    errors: validateWarehouseErrors,
+    validate: validateWarehouse,
+    warehousePreference,
+    setWarehousePreference
+  } = useWarehouseValidation();
   const onCarrierCreated = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
     yield refetchCarriers();
   }), [refetchCarriers]);
@@ -32267,6 +32422,7 @@ const Onboarding = ({
     createWarehouse: createWarehouse,
     onCarrierCreated: onCarrierCreated,
     onCompleteOnboarding: onCompleteOnboarding,
+    onValidateWarehouse: validateWarehouse,
     onWarehouseCreated: onWarehouseCreated,
     registerDhlCarrier: registerDhlCarrier,
     registerDhlCarrierErrors: registerDhlCarrierErrors,
@@ -32274,6 +32430,9 @@ const Onboarding = ({
     registerStampsCarrierErrors: registerStampsCarrierErrors,
     registerUpsCarrier: registerUpsCarrier,
     registerUpsCarrierErrors: registerUpsCarrierErrors,
+    setWarehousePreference: setWarehousePreference,
+    validationErrors: validateWarehouseErrors,
+    warehousePreference: warehousePreference,
     warehouses: warehouses
   });
 };
@@ -32399,7 +32558,7 @@ const useImportSalesOrder = ({
     error: getSalesOrderErrors,
     refetch: refetchSalesOrder,
     isFetching: isFetchingSalesOrder
-  } = react.useGetSalesOrder(salesOrderId !== null && salesOrderId !== void 0 ? salesOrderId : salesOrders === null || salesOrders === void 0 ? void 0 : salesOrders[0].salesOrderId);
+  } = react.useGetSalesOrder(salesOrderId !== null && salesOrderId !== void 0 ? salesOrderId : salesOrders && salesOrders[0] ? salesOrders[0].salesOrderId : undefined);
   const {
     data: orderSources,
     error: listOrderSourcesErrors
@@ -32407,6 +32566,7 @@ const useImportSalesOrder = ({
   const {
     data: refreshedOrderSource,
     error: refreshOrderSourceErrors,
+    isLoading: isRefreshingOrderSource,
     mutateAsync: refreshOrderSource
   } = react.useRefreshOrderSource();
   React.useEffect(() => {
@@ -32426,7 +32586,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
   };
 };
@@ -32584,6 +32744,13 @@ const Shipment = ({
   });
 };
 
+const WalletHistory = () => {
+  const walletHistory = react.useGetWalletTransactionHistory(); // Mock data for now. Real implementation coming in a subsequent PR [LMNT-842] https://auctane.atlassian.net/browse/LMNT-842
+  return jsxRuntime.jsx(WalletHistory$1, {
+    historyData: walletHistory
+  });
+};
+
 const VoidLabel = ({
   labelId,
   onComplete,
@@ -32612,9 +32779,11 @@ 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);
 
@@ -32639,14 +32808,14 @@ exports.GigerProvider = GigerProvider;
 exports.InlineLabel = InlineLabel;
 exports.ItemsBreakdown = ItemsBreakdown;
 exports.LinkAction = LinkAction;
-exports.ListCarriers = Element$5;
+exports.ListCarriers = Element$6;
 exports.Loader = Loader;
 exports.ManageFunding = ManageFunding;
-exports.ManageWarehouses = Element$4;
-exports.Onboarding = Element$2;
+exports.ManageWarehouses = Element$5;
+exports.Onboarding = Element$3;
 exports.PageLayoutProvider = PageLayoutProvider;
 exports.Portal = Portal;
-exports.PurchaseLabel = Element$3;
+exports.PurchaseLabel = Element$4;
 exports.RootPortalProvider = RootPortalProvider;
 exports.Spacer = Spacer;
 exports.Spread = Spread;
@@ -32656,6 +32825,7 @@ exports.UsState = UsState;
 exports.UsaCity = UsaCity;
 exports.ViewShipment = Element$1;
 exports.VoidLabel = Element;
+exports.WalletHistory = Element$2;
 exports.autoFundingSchema = autoFundingSchema;
 exports.calculateTotal = calculateTotal;
 exports.capitalizeFirstLetter = capitalizeFirstLetter;