@shipengine/elements 0.20.0 → 0.20.2

package/index.js

@@ -1,7 +1,7 @@
 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, OptionGroup, Option, Button, Switch as Switch$1, Textarea, ButtonVariant, InlineNotification, NotificationType, ButtonColor, Grid, GridChild, Tag, TagColor, Skeleton, SkeletonAnimation, SkeletonVariant, SkeletonBackgroundColor, RadioGroup, Radio, IconSize, Stepper, Step, Spinner, SpinnerSize, ChipList, Chip, ButtonSize, Table, TableBody, TableBaseRow, TableBodyCell, TableHeader, TableHeaderCell, Popover, DropdownOptionList, Pagination, BottomSheet, GigerConfigProvider, EmotionReset, FontsLoader } from '@packlink/giger';
+import { Typography, FormField, FieldMessageType, Input, Checkbox, Icon, Divider, Link, Select as Select$1, OptionGroup, Option, Button, Switch as Switch$1, Textarea, ButtonVariant, InlineNotification, NotificationType, ButtonColor, Grid, GridChild, Tag, TagColor, Skeleton, SkeletonAnimation, SkeletonVariant, SkeletonBackgroundColor, RadioGroup, Radio, IconSize, Stepper, Step, Spinner, SpinnerSize, ChipList, Chip, ButtonSize, Table, TableBody, TableBaseRow, TableBodyCell, TableHeader, TableHeaderCell, Popover, DropdownOptionList, DatePicker as DatePicker$1, 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, useGetWalletTransactionHistory, useGetLabel, useVoidLabel } from '@shipengine/react';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -1813,6 +1813,17 @@ const isNowOrInTheFuture = shipDate => {
   if (shipDate) return new Date(shipDate) >= new Date();
   return false;
 };
+const getRelativeDates = from => {
+  const origin = from !== null && from !== void 0 ? from : new Date();
+  return {
+    firstDayOfMonth: new Date(origin.getFullYear(), origin.getMonth(), 1),
+    lastDayOfTheMonth: new Date(origin.getFullYear(), origin.getMonth() + 1, 0),
+    origin,
+    previousMonthFirstDay: new Date(origin.getFullYear(), origin.getMonth() - 1, 1),
+    previousMonthLastDay: new Date(origin.getFullYear(), origin.getMonth() - 1 + 1, 0),
+    thirtyDaysAgo: new Date(new Date().setDate(origin.getDate() - 30))
+  };
+};
 
 /**
  * @category Utilities
@@ -4993,6 +5004,37 @@ const useCustomsNonDeliveryOptions = () => {
   })), [t]);
 };
 
+/**
+ * A curated list of date range options relative to the immediate date
+ */
+const useDateRangeOptions = () => {
+  const {
+    t
+  } = useTranslation();
+  const relativeDates = useMemo(() => getRelativeDates(), []);
+  const options = useMemo(() => [{
+    label: t("wallet-history:historyOptions.custom"),
+    range: undefined,
+    value: "custom"
+  }, {
+    label: t("wallet-history:historyOptions.last30days"),
+    range: [relativeDates.thirtyDaysAgo, relativeDates.origin],
+    value: "last30days"
+  }, {
+    label: t("wallet-history:historyOptions.thisMonth"),
+    range: [relativeDates.firstDayOfMonth, relativeDates.lastDayOfTheMonth],
+    value: "thisMonth"
+  }, {
+    label: t("wallet-history:historyOptions.lastMonth"),
+    range: [relativeDates.previousMonthFirstDay, relativeDates.previousMonthLastDay],
+    value: "lastMonth"
+  }], [relativeDates, t]);
+  const optionsByValue = createDictionary(options, o => ({
+    [o.value]: o
+  }));
+  return [options, optionsByValue];
+};
+
 const useExpirationMonthOptions = () => {
   const {
     t
@@ -6087,14 +6129,15 @@ fixRegExpWellKnownSymbolLogic('match', function (MATCH, nativeMatch, maybeCallNa
 });
 
 extendZod();
-const refineName = n => n.match(/^[a-zA-Z]{2,} [a-zA-Z]{2,}/);
+const refineName = n => n.match(/^[a-zA-Z']{2,} [a-zA-Z']{2,}/);
 const addressLine1Schema = z.string().trim().min(1);
 const addressLine2Schema = z.string().trim().nullishDefault(undefined);
+const companyNameSchema = z.string().trim().min(2).max(40).nullishDefault(undefined).or(z.literal("")).transform(companyName => companyName || undefined);
 const addressSchema = z.object({
   addressLine1: addressLine1Schema,
   addressLine2: addressLine2Schema,
   cityLocality: z.string().trim().min(1),
-  companyName: z.string().trim().min(2).max(40).nullishDefault(undefined),
+  companyName: companyNameSchema,
   countryCode: z.enum(countryCodes),
   name: z.string().trim().min(1).refine(refineName, "schemaErrors.invalidAddressName"),
   phone: z.string().trim().nullishDefault(""),
@@ -7432,37 +7475,38 @@ const getAccordionSummaryStyles = theme => /*#__PURE__*/css$1({
   listStyle: "none",
   padding: `${theme.spacing()}px ${theme.spacing(4)}px`,
   width: "100%"
-}, process.env.NODE_ENV === "production" ? "" : ";label:getAccordionSummaryStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY29yZGlvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ29EIiwiZmlsZSI6ImFjY29yZGlvbi5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcclxuZXhwb3J0IGNvbnN0IGdldEFjY29yZGlvblN1bW1hcnlTdHlsZXMgPSAodGhlbWUpID0+IGNzcyh7XHJcbiAgICAvLyBOZWVkZWQgdG8gaGlkZSBtYXJrZXIgaW4gc2FmYXJpXHJcbiAgICBcIiY6Oi13ZWJraXQtZGV0YWlscy1tYXJrZXJcIjoge1xyXG4gICAgICAgIGRpc3BsYXk6IFwibm9uZVwiLFxyXG4gICAgfSxcclxuICAgIFwiJjo6bWFya2VyXCI6IHtcclxuICAgICAgICBjb250ZW50OiAnXCJcIicsXHJcbiAgICB9LFxyXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5wYWxldHRlLmdyYXkudWx0cmFMaWdodCxcclxuICAgIGJveFNpemluZzogXCJib3JkZXItYm94XCIsXHJcbiAgICBsaXN0U3R5bGU6IFwibm9uZVwiLFxyXG4gICAgcGFkZGluZzogYCR7dGhlbWUuc3BhY2luZygpfXB4ICR7dGhlbWUuc3BhY2luZyg0KX1weGAsXHJcbiAgICB3aWR0aDogXCIxMDAlXCIsXHJcbn0pO1xyXG5leHBvcnQgY29uc3QgZ2V0QWNjb3JkaW9uU3VtbWFyeVdyYXBwZXJTdHlsZXMgPSAodGhlbWUpID0+IGNzcyh7XHJcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxyXG4gICAgY29sb3I6IHRoZW1lLnBhbGV0dGUuYmxhY2ssXHJcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcclxuICAgIHdpZHRoOiBcIjEwMCVcIixcclxufSk7XHJcbmV4cG9ydCBjb25zdCBnZXRJY29uU3R5bGVzID0gKHRoZW1lKSA9PiBjc3Moe1xyXG4gICAgY29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxyXG4gICAgbWFyZ2luUmlnaHQ6IHRoZW1lLnNwYWNpbmcoMiksXHJcbn0pO1xyXG5leHBvcnQgY29uc3QgZ2V0U2VjdGlvblN0eWxlcyA9ICh0aGVtZSkgPT4gY3NzKHtcclxuICAgIGJveFNpemluZzogXCJib3JkZXItYm94XCIsXHJcbiAgICBwYWRkaW5nOiB0aGVtZS5zcGFjaW5nKDQpLFxyXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxyXG59KTtcclxuZXhwb3J0IGNvbnN0IGdldFJpZ2h0Q29udGVudFdyYXBwZXJTdHlsZXMgPSAoKSA9PiBjc3Moe1xyXG4gICAgbWFyZ2luTGVmdDogXCJhdXRvXCIsXHJcbn0pO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1hY2NvcmRpb24uc3R5bGVzLmpzLm1hcCJdfQ== */");
+}, process.env.NODE_ENV === "production" ? "" : ";label:getAccordionSummaryStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY29yZGlvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ29EIiwiZmlsZSI6ImFjY29yZGlvbi5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcclxuZXhwb3J0IGNvbnN0IGdldEFjY29yZGlvblN1bW1hcnlTdHlsZXMgPSAodGhlbWUpID0+IGNzcyh7XHJcbiAgICAvLyBOZWVkZWQgdG8gaGlkZSBtYXJrZXIgaW4gc2FmYXJpXHJcbiAgICBcIiY6Oi13ZWJraXQtZGV0YWlscy1tYXJrZXJcIjoge1xyXG4gICAgICAgIGRpc3BsYXk6IFwibm9uZVwiLFxyXG4gICAgfSxcclxuICAgIFwiJjo6bWFya2VyXCI6IHtcclxuICAgICAgICBjb250ZW50OiAnXCJcIicsXHJcbiAgICB9LFxyXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5wYWxldHRlLmdyYXkudWx0cmFMaWdodCxcclxuICAgIGJveFNpemluZzogXCJib3JkZXItYm94XCIsXHJcbiAgICBsaXN0U3R5bGU6IFwibm9uZVwiLFxyXG4gICAgcGFkZGluZzogYCR7dGhlbWUuc3BhY2luZygpfXB4ICR7dGhlbWUuc3BhY2luZyg0KX1weGAsXHJcbiAgICB3aWR0aDogXCIxMDAlXCIsXHJcbn0pO1xyXG5leHBvcnQgY29uc3QgZ2V0QWNjb3JkaW9uU3VtbWFyeVdyYXBwZXJTdHlsZXMgPSAodGhlbWUpID0+IGNzcyh7XHJcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxyXG4gICAgY29sb3I6IHRoZW1lLnBhbGV0dGUuYmxhY2ssXHJcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcclxuICAgIHdpZHRoOiBcIjEwMCVcIixcclxufSk7XHJcbmV4cG9ydCBjb25zdCBnZXRJY29uU3R5bGVzID0gKHRoZW1lKSA9PiBjc3Moe1xyXG4gICAgY29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxyXG4gICAgbWFyZ2luUmlnaHQ6IHRoZW1lLnNwYWNpbmcoMiksXHJcbn0pO1xyXG5leHBvcnQgY29uc3QgZ2V0U2VjdGlvblN0eWxlcyA9ICh0aGVtZSkgPT4gY3NzKHtcclxuICAgIGJveFNpemluZzogXCJib3JkZXItYm94XCIsXHJcbiAgICBwYWRkaW5nOiBgJHt0aGVtZS5zcGFjaW5nKDMpfXB4ICR7dGhlbWUuc3BhY2luZyg0KX1weGAsXHJcbiAgICB3aWR0aDogXCIxMDAlXCIsXHJcbn0pO1xyXG5leHBvcnQgY29uc3QgZ2V0UmlnaHRDb250ZW50V3JhcHBlclN0eWxlcyA9ICgpID0+IGNzcyh7XHJcbiAgICBtYXJnaW5MZWZ0OiBcImF1dG9cIixcclxufSk7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPWFjY29yZGlvbi5zdHlsZXMuanMubWFwIl19 */");
 const getAccordionSummaryWrapperStyles = theme => /*#__PURE__*/css$1({
   alignItems: "center",
   color: theme.palette.black,
   display: "flex",
   width: "100%"
-}, process.env.NODE_ENV === "production" ? "" : ";label:getAccordionSummaryWrapperStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY29yZGlvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZTJEIiwiZmlsZSI6ImFjY29yZGlvbi5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcclxuZXhwb3J0IGNvbnN0IGdldEFjY29yZGlvblN1bW1hcnlTdHlsZXMgPSAodGhlbWUpID0+IGNzcyh7XHJcbiAgICAvLyBOZWVkZWQgdG8gaGlkZSBtYXJrZXIgaW4gc2FmYXJpXHJcbiAgICBcIiY6Oi13ZWJraXQtZGV0YWlscy1tYXJrZXJcIjoge1xyXG4gICAgICAgIGRpc3BsYXk6IFwibm9uZVwiLFxyXG4gICAgfSxcclxuICAgIFwiJjo6bWFya2VyXCI6IHtcclxuICAgICAgICBjb250ZW50OiAnXCJcIicsXHJcbiAgICB9LFxyXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5wYWxldHRlLmdyYXkudWx0cmFMaWdodCxcclxuICAgIGJveFNpemluZzogXCJib3JkZXItYm94XCIsXHJcbiAgICBsaXN0U3R5bGU6IFwibm9uZVwiLFxyXG4gICAgcGFkZGluZzogYCR7dGhlbWUuc3BhY2luZygpfXB4ICR7dGhlbWUuc3BhY2luZyg0KX1weGAsXHJcbiAgICB3aWR0aDogXCIxMDAlXCIsXHJcbn0pO1xyXG5leHBvcnQgY29uc3QgZ2V0QWNjb3JkaW9uU3VtbWFyeVdyYXBwZXJTdHlsZXMgPSAodGhlbWUpID0+IGNzcyh7XHJcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxyXG4gICAgY29sb3I6IHRoZW1lLnBhbGV0dGUuYmxhY2ssXHJcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcclxuICAgIHdpZHRoOiBcIjEwMCVcIixcclxufSk7XHJcbmV4cG9ydCBjb25zdCBnZXRJY29uU3R5bGVzID0gKHRoZW1lKSA9PiBjc3Moe1xyXG4gICAgY29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxyXG4gICAgbWFyZ2luUmlnaHQ6IHRoZW1lLnNwYWNpbmcoMiksXHJcbn0pO1xyXG5leHBvcnQgY29uc3QgZ2V0U2VjdGlvblN0eWxlcyA9ICh0aGVtZSkgPT4gY3NzKHtcclxuICAgIGJveFNpemluZzogXCJib3JkZXItYm94XCIsXHJcbiAgICBwYWRkaW5nOiB0aGVtZS5zcGFjaW5nKDQpLFxyXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxyXG59KTtcclxuZXhwb3J0IGNvbnN0IGdldFJpZ2h0Q29udGVudFdyYXBwZXJTdHlsZXMgPSAoKSA9PiBjc3Moe1xyXG4gICAgbWFyZ2luTGVmdDogXCJhdXRvXCIsXHJcbn0pO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1hY2NvcmRpb24uc3R5bGVzLmpzLm1hcCJdfQ== */");
+}, process.env.NODE_ENV === "production" ? "" : ";label:getAccordionSummaryWrapperStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY29yZGlvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZTJEIiwiZmlsZSI6ImFjY29yZGlvbi5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcclxuZXhwb3J0IGNvbnN0IGdldEFjY29yZGlvblN1bW1hcnlTdHlsZXMgPSAodGhlbWUpID0+IGNzcyh7XHJcbiAgICAvLyBOZWVkZWQgdG8gaGlkZSBtYXJrZXIgaW4gc2FmYXJpXHJcbiAgICBcIiY6Oi13ZWJraXQtZGV0YWlscy1tYXJrZXJcIjoge1xyXG4gICAgICAgIGRpc3BsYXk6IFwibm9uZVwiLFxyXG4gICAgfSxcclxuICAgIFwiJjo6bWFya2VyXCI6IHtcclxuICAgICAgICBjb250ZW50OiAnXCJcIicsXHJcbiAgICB9LFxyXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5wYWxldHRlLmdyYXkudWx0cmFMaWdodCxcclxuICAgIGJveFNpemluZzogXCJib3JkZXItYm94XCIsXHJcbiAgICBsaXN0U3R5bGU6IFwibm9uZVwiLFxyXG4gICAgcGFkZGluZzogYCR7dGhlbWUuc3BhY2luZygpfXB4ICR7dGhlbWUuc3BhY2luZyg0KX1weGAsXHJcbiAgICB3aWR0aDogXCIxMDAlXCIsXHJcbn0pO1xyXG5leHBvcnQgY29uc3QgZ2V0QWNjb3JkaW9uU3VtbWFyeVdyYXBwZXJTdHlsZXMgPSAodGhlbWUpID0+IGNzcyh7XHJcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxyXG4gICAgY29sb3I6IHRoZW1lLnBhbGV0dGUuYmxhY2ssXHJcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcclxuICAgIHdpZHRoOiBcIjEwMCVcIixcclxufSk7XHJcbmV4cG9ydCBjb25zdCBnZXRJY29uU3R5bGVzID0gKHRoZW1lKSA9PiBjc3Moe1xyXG4gICAgY29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxyXG4gICAgbWFyZ2luUmlnaHQ6IHRoZW1lLnNwYWNpbmcoMiksXHJcbn0pO1xyXG5leHBvcnQgY29uc3QgZ2V0U2VjdGlvblN0eWxlcyA9ICh0aGVtZSkgPT4gY3NzKHtcclxuICAgIGJveFNpemluZzogXCJib3JkZXItYm94XCIsXHJcbiAgICBwYWRkaW5nOiBgJHt0aGVtZS5zcGFjaW5nKDMpfXB4ICR7dGhlbWUuc3BhY2luZyg0KX1weGAsXHJcbiAgICB3aWR0aDogXCIxMDAlXCIsXHJcbn0pO1xyXG5leHBvcnQgY29uc3QgZ2V0UmlnaHRDb250ZW50V3JhcHBlclN0eWxlcyA9ICgpID0+IGNzcyh7XHJcbiAgICBtYXJnaW5MZWZ0OiBcImF1dG9cIixcclxufSk7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPWFjY29yZGlvbi5zdHlsZXMuanMubWFwIl19 */");
 const getSectionStyles = theme => /*#__PURE__*/css$1({
   boxSizing: "border-box",
-  padding: theme.spacing(4),
+  padding: `${theme.spacing(3)}px ${theme.spacing(4)}px`,
   width: "100%"
-}, process.env.NODE_ENV === "production" ? "" : ";label:getSectionStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY29yZGlvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUIyQyIsImZpbGUiOiJhY2NvcmRpb24uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XHJcbmV4cG9ydCBjb25zdCBnZXRBY2NvcmRpb25TdW1tYXJ5U3R5bGVzID0gKHRoZW1lKSA9PiBjc3Moe1xyXG4gICAgLy8gTmVlZGVkIHRvIGhpZGUgbWFya2VyIGluIHNhZmFyaVxyXG4gICAgXCImOjotd2Via2l0LWRldGFpbHMtbWFya2VyXCI6IHtcclxuICAgICAgICBkaXNwbGF5OiBcIm5vbmVcIixcclxuICAgIH0sXHJcbiAgICBcIiY6Om1hcmtlclwiOiB7XHJcbiAgICAgICAgY29udGVudDogJ1wiXCInLFxyXG4gICAgfSxcclxuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUucGFsZXR0ZS5ncmF5LnVsdHJhTGlnaHQsXHJcbiAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxyXG4gICAgbGlzdFN0eWxlOiBcIm5vbmVcIixcclxuICAgIHBhZGRpbmc6IGAke3RoZW1lLnNwYWNpbmcoKX1weCAke3RoZW1lLnNwYWNpbmcoNCl9cHhgLFxyXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxyXG59KTtcclxuZXhwb3J0IGNvbnN0IGdldEFjY29yZGlvblN1bW1hcnlXcmFwcGVyU3R5bGVzID0gKHRoZW1lKSA9PiBjc3Moe1xyXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcclxuICAgIGNvbG9yOiB0aGVtZS5wYWxldHRlLmJsYWNrLFxyXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXHJcbiAgICB3aWR0aDogXCIxMDAlXCIsXHJcbn0pO1xyXG5leHBvcnQgY29uc3QgZ2V0SWNvblN0eWxlcyA9ICh0aGVtZSkgPT4gY3NzKHtcclxuICAgIGNvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcclxuICAgIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjaW5nKDIpLFxyXG59KTtcclxuZXhwb3J0IGNvbnN0IGdldFNlY3Rpb25TdHlsZXMgPSAodGhlbWUpID0+IGNzcyh7XHJcbiAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxyXG4gICAgcGFkZGluZzogdGhlbWUuc3BhY2luZyg0KSxcclxuICAgIHdpZHRoOiBcIjEwMCVcIixcclxufSk7XHJcbmV4cG9ydCBjb25zdCBnZXRSaWdodENvbnRlbnRXcmFwcGVyU3R5bGVzID0gKCkgPT4gY3NzKHtcclxuICAgIG1hcmdpbkxlZnQ6IFwiYXV0b1wiLFxyXG59KTtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9YWNjb3JkaW9uLnN0eWxlcy5qcy5tYXAiXX0= */");
+}, process.env.NODE_ENV === "production" ? "" : ";label:getSectionStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY29yZGlvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUIyQyIsImZpbGUiOiJhY2NvcmRpb24uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XHJcbmV4cG9ydCBjb25zdCBnZXRBY2NvcmRpb25TdW1tYXJ5U3R5bGVzID0gKHRoZW1lKSA9PiBjc3Moe1xyXG4gICAgLy8gTmVlZGVkIHRvIGhpZGUgbWFya2VyIGluIHNhZmFyaVxyXG4gICAgXCImOjotd2Via2l0LWRldGFpbHMtbWFya2VyXCI6IHtcclxuICAgICAgICBkaXNwbGF5OiBcIm5vbmVcIixcclxuICAgIH0sXHJcbiAgICBcIiY6Om1hcmtlclwiOiB7XHJcbiAgICAgICAgY29udGVudDogJ1wiXCInLFxyXG4gICAgfSxcclxuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUucGFsZXR0ZS5ncmF5LnVsdHJhTGlnaHQsXHJcbiAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxyXG4gICAgbGlzdFN0eWxlOiBcIm5vbmVcIixcclxuICAgIHBhZGRpbmc6IGAke3RoZW1lLnNwYWNpbmcoKX1weCAke3RoZW1lLnNwYWNpbmcoNCl9cHhgLFxyXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxyXG59KTtcclxuZXhwb3J0IGNvbnN0IGdldEFjY29yZGlvblN1bW1hcnlXcmFwcGVyU3R5bGVzID0gKHRoZW1lKSA9PiBjc3Moe1xyXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcclxuICAgIGNvbG9yOiB0aGVtZS5wYWxldHRlLmJsYWNrLFxyXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXHJcbiAgICB3aWR0aDogXCIxMDAlXCIsXHJcbn0pO1xyXG5leHBvcnQgY29uc3QgZ2V0SWNvblN0eWxlcyA9ICh0aGVtZSkgPT4gY3NzKHtcclxuICAgIGNvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcclxuICAgIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjaW5nKDIpLFxyXG59KTtcclxuZXhwb3J0IGNvbnN0IGdldFNlY3Rpb25TdHlsZXMgPSAodGhlbWUpID0+IGNzcyh7XHJcbiAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxyXG4gICAgcGFkZGluZzogYCR7dGhlbWUuc3BhY2luZygzKX1weCAke3RoZW1lLnNwYWNpbmcoNCl9cHhgLFxyXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxyXG59KTtcclxuZXhwb3J0IGNvbnN0IGdldFJpZ2h0Q29udGVudFdyYXBwZXJTdHlsZXMgPSAoKSA9PiBjc3Moe1xyXG4gICAgbWFyZ2luTGVmdDogXCJhdXRvXCIsXHJcbn0pO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1hY2NvcmRpb24uc3R5bGVzLmpzLm1hcCJdfQ== */");
 var _ref$2 = process.env.NODE_ENV === "production" ? {
   name: "1o3nkn",
   styles: "margin-left:auto"
 } : {
   name: "14rm3c-getRightContentWrapperStyles",
   styles: "margin-left:auto;label:getRightContentWrapperStyles;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY29yZGlvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEJrRCIsImZpbGUiOiJhY2NvcmRpb24uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XHJcbmV4cG9ydCBjb25zdCBnZXRBY2NvcmRpb25TdW1tYXJ5U3R5bGVzID0gKHRoZW1lKSA9PiBjc3Moe1xyXG4gICAgLy8gTmVlZGVkIHRvIGhpZGUgbWFya2VyIGluIHNhZmFyaVxyXG4gICAgXCImOjotd2Via2l0LWRldGFpbHMtbWFya2VyXCI6IHtcclxuICAgICAgICBkaXNwbGF5OiBcIm5vbmVcIixcclxuICAgIH0sXHJcbiAgICBcIiY6Om1hcmtlclwiOiB7XHJcbiAgICAgICAgY29udGVudDogJ1wiXCInLFxyXG4gICAgfSxcclxuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUucGFsZXR0ZS5ncmF5LnVsdHJhTGlnaHQsXHJcbiAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxyXG4gICAgbGlzdFN0eWxlOiBcIm5vbmVcIixcclxuICAgIHBhZGRpbmc6IGAke3RoZW1lLnNwYWNpbmcoKX1weCAke3RoZW1lLnNwYWNpbmcoNCl9cHhgLFxyXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxyXG59KTtcclxuZXhwb3J0IGNvbnN0IGdldEFjY29yZGlvblN1bW1hcnlXcmFwcGVyU3R5bGVzID0gKHRoZW1lKSA9PiBjc3Moe1xyXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcclxuICAgIGNvbG9yOiB0aGVtZS5wYWxldHRlLmJsYWNrLFxyXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXHJcbiAgICB3aWR0aDogXCIxMDAlXCIsXHJcbn0pO1xyXG5leHBvcnQgY29uc3QgZ2V0SWNvblN0eWxlcyA9ICh0aGVtZSkgPT4gY3NzKHtcclxuICAgIGNvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcclxuICAgIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjaW5nKDIpLFxyXG59KTtcclxuZXhwb3J0IGNvbnN0IGdldFNlY3Rpb25TdHlsZXMgPSAodGhlbWUpID0+IGNzcyh7XHJcbiAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxyXG4gICAgcGFkZGluZzogdGhlbWUuc3BhY2luZyg0KSxcclxuICAgIHdpZHRoOiBcIjEwMCVcIixcclxufSk7XHJcbmV4cG9ydCBjb25zdCBnZXRSaWdodENvbnRlbnRXcmFwcGVyU3R5bGVzID0gKCkgPT4gY3NzKHtcclxuICAgIG1hcmdpbkxlZnQ6IFwiYXV0b1wiLFxyXG59KTtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9YWNjb3JkaW9uLnN0eWxlcy5qcy5tYXAiXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY29yZGlvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEJrRCIsImZpbGUiOiJhY2NvcmRpb24uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XHJcbmV4cG9ydCBjb25zdCBnZXRBY2NvcmRpb25TdW1tYXJ5U3R5bGVzID0gKHRoZW1lKSA9PiBjc3Moe1xyXG4gICAgLy8gTmVlZGVkIHRvIGhpZGUgbWFya2VyIGluIHNhZmFyaVxyXG4gICAgXCImOjotd2Via2l0LWRldGFpbHMtbWFya2VyXCI6IHtcclxuICAgICAgICBkaXNwbGF5OiBcIm5vbmVcIixcclxuICAgIH0sXHJcbiAgICBcIiY6Om1hcmtlclwiOiB7XHJcbiAgICAgICAgY29udGVudDogJ1wiXCInLFxyXG4gICAgfSxcclxuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUucGFsZXR0ZS5ncmF5LnVsdHJhTGlnaHQsXHJcbiAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxyXG4gICAgbGlzdFN0eWxlOiBcIm5vbmVcIixcclxuICAgIHBhZGRpbmc6IGAke3RoZW1lLnNwYWNpbmcoKX1weCAke3RoZW1lLnNwYWNpbmcoNCl9cHhgLFxyXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxyXG59KTtcclxuZXhwb3J0IGNvbnN0IGdldEFjY29yZGlvblN1bW1hcnlXcmFwcGVyU3R5bGVzID0gKHRoZW1lKSA9PiBjc3Moe1xyXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcclxuICAgIGNvbG9yOiB0aGVtZS5wYWxldHRlLmJsYWNrLFxyXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXHJcbiAgICB3aWR0aDogXCIxMDAlXCIsXHJcbn0pO1xyXG5leHBvcnQgY29uc3QgZ2V0SWNvblN0eWxlcyA9ICh0aGVtZSkgPT4gY3NzKHtcclxuICAgIGNvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcclxuICAgIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjaW5nKDIpLFxyXG59KTtcclxuZXhwb3J0IGNvbnN0IGdldFNlY3Rpb25TdHlsZXMgPSAodGhlbWUpID0+IGNzcyh7XHJcbiAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxyXG4gICAgcGFkZGluZzogYCR7dGhlbWUuc3BhY2luZygzKX1weCAke3RoZW1lLnNwYWNpbmcoNCl9cHhgLFxyXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxyXG59KTtcclxuZXhwb3J0IGNvbnN0IGdldFJpZ2h0Q29udGVudFdyYXBwZXJTdHlsZXMgPSAoKSA9PiBjc3Moe1xyXG4gICAgbWFyZ2luTGVmdDogXCJhdXRvXCIsXHJcbn0pO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1hY2NvcmRpb24uc3R5bGVzLmpzLm1hcCJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
 };
 const getRightContentWrapperStyles = () => _ref$2;
 
 const Accordion = _a => {
   var {
+      bold,
       initialExpanded,
       title,
       children,
       rightContent
     } = _a,
-    rest = __rest(_a, ["initialExpanded", "title", "children", "rightContent"]);
+    rest = __rest(_a, ["bold", "initialExpanded", "title", "children", "rightContent"]);
   return jsxs(Fragment, {
     children: [title && jsx("summary", Object.assign({
       css: getAccordionSummaryStyles
@@ -7471,6 +7515,7 @@ const Accordion = _a => {
         css: getAccordionSummaryWrapperStyles
       }, {
         children: [jsx(Typography, Object.assign({
+          bold: bold,
           variant: "heading5"
         }, {
           children: title
@@ -7488,7 +7533,7 @@ const Accordion = _a => {
   });
 };
 
-const getStyles$4 = (isConnected = false) => createStyles({
+const getStyles$5 = (isConnected = false) => createStyles({
   connectButton: theme => [{
     padding: `0 ${theme.spacing(.5)}px`
   }, isConnected && {
@@ -7548,14 +7593,14 @@ const ListCarriersRow = ({
     setIsSubmitting(false);
   });
   return jsxs("div", Object.assign({
-    css: getStyles$4().container,
+    css: getStyles$5().container,
     "data-testid": "carrier-row"
   }, {
     children: [jsxs("div", Object.assign({
-      css: getStyles$4().rowContainer
+      css: getStyles$5().rowContainer
     }, {
       children: [jsxs("div", Object.assign({
-        css: getStyles$4().logoContainer
+        css: getStyles$5().logoContainer
       }, {
         children: [jsx("div", {
           children: jsx("img", {
@@ -7573,7 +7618,7 @@ const ListCarriersRow = ({
         css: _ref$1
       }, {
         children: jsx(LinkAction, {
-          css: getStyles$4(isConnected).connectButton,
+          css: getStyles$5(isConnected).connectButton,
           isDisabled: isConnected || showDropDown,
           isLoading: isSubmitting,
           onClick: () => __awaiter(void 0, void 0, void 0, function* () {
@@ -10044,7 +10089,7 @@ const Loader = props => {
   }));
 };
 
-const getStyles$3 = ({
+const getStyles$4 = ({
   isDisabled,
   isSelected
 } = {}) => createStyles({
@@ -10155,7 +10200,7 @@ const AddFundsForm = ({
       })), jsx(Spacer, {
         multiplier: 2
       }), jsx(ChipList, Object.assign({
-        css: getStyles$3().chipList,
+        css: getStyles$4().chipList,
         onChange: idx => {
           const chip = chips[idx];
           setSelectedChip(chip);
@@ -10170,7 +10215,7 @@ const AddFundsForm = ({
         }
       }, {
         children: chips.map(chip => jsx(Chip, Object.assign({
-          css: getStyles$3({
+          css: getStyles$4({
             isDisabled: chip.value < _minimumAmount,
             isSelected: chip.value === selectedChip.value
           }).chip,
@@ -10187,7 +10232,7 @@ const AddFundsForm = ({
           multiplier: 1
         }), jsx(MoneyInput, {
           control: form.control,
-          css: getStyles$3().fundsInput,
+          css: getStyles$4().fundsInput,
           defaultValue: {
             amount: undefined,
             currency: SE.Currency.USD
@@ -10255,7 +10300,7 @@ const InlineLabel = ({
   }), children]
 }));
 
-const getStyles$2 = balance => createStyles({
+const getStyles$3 = balance => createStyles({
   balanceText: theme => ({
     color: balance === undefined ? theme.palette.alert.main : balance >= 0 ? theme.palette.secondary.dark : theme.palette.error.main
   })
@@ -10278,7 +10323,7 @@ const CarrierBalance = ({
   }, {
     children: isLoadingCarrier || isRefetchingCarrier ? jsx(Spinner, {}) : jsx(Typography, Object.assign({
       bold: true,
-      css: getStyles$2(balance).balanceText
+      css: getStyles$3(balance).balanceText
     }, {
       children: balance === undefined ? t("manage-funding:errors.balanceUnknown") : formatMoney({
         amount: balance,
@@ -10342,7 +10387,7 @@ const Spread = ({
   children: children
 }));
 
-const getStyles$1 = isCustomAmount => createStyles({
+const getStyles$2 = isCustomAmount => createStyles({
   balanceText: theme => ({
     color: theme.palette.secondary.dark
   }),
@@ -10410,7 +10455,7 @@ const FundAndPurchase = ({
   }, {
     children: [jsx(Button, Object.assign({
       bold: false,
-      css: getStyles$1().saveRateButton,
+      css: getStyles$2().saveRateButton,
       disabled: disabled || !carrierId || addFundsForm.isSubmitting || isRateFormSubmitting,
       isLoading: isSavingRate,
       onClick: handleSaveRate,
@@ -10430,7 +10475,7 @@ const FundAndPurchase = ({
   //         don't show balance or funding form
   if (!isFundingRequired) return jsx("div", Object.assign({
     className: className,
-    css: getStyles$1().container
+    css: getStyles$2().container
   }, {
     children: renderActionButtons()
   }));
@@ -10443,7 +10488,7 @@ const FundAndPurchase = ({
   //         show balance, but not the funding form.
   if (!isFundingEnabled) return jsxs("div", Object.assign({
     className: className,
-    css: getStyles$1().container
+    css: getStyles$2().container
   }, {
     children: [jsx(CarrierBalance, {
       carrierId: carrierId
@@ -10455,7 +10500,7 @@ const FundAndPurchase = ({
   //         show balance and funding form
   return jsxs("div", Object.assign({
     className: className,
-    css: getStyles$1().container
+    css: getStyles$2().container
   }, {
     children: [jsxs(Spread, {
       children: [jsx(CarrierBalance, {
@@ -10486,13 +10531,13 @@ const FundAndPurchase = ({
         var _a, _b;
         return jsxs(Fragment, {
           children: [jsxs("section", Object.assign({
-            css: getStyles$1(addFundsForm.isCustomAmount).formExtension
+            css: getStyles$2(addFundsForm.isCustomAmount).formExtension
           }, {
             children: [jsx(InlineLabel, Object.assign({
               label: t("manage-funding:fundAndPurchase.newBalance")
             }, {
               children: jsx(Typography, Object.assign({
-                css: getStyles$1().balanceText
+                css: getStyles$2().balanceText
               }, {
                 children: formatMoney({
                   amount: balance + ((_a = addFundsForm.selectedAmount) !== null && _a !== void 0 ? _a : 0),
@@ -10503,7 +10548,7 @@ const FundAndPurchase = ({
               label: t("manage-funding:fundAndPurchase.finalBalance")
             }, {
               children: jsx(Typography, Object.assign({
-                css: getStyles$1().balanceText
+                css: getStyles$2().balanceText
               }, {
                 children: formatMoney({
                   amount: balance + ((_b = addFundsForm.selectedAmount) !== null && _b !== void 0 ? _b : 0) - purchaseAmount,
@@ -12185,49 +12230,86 @@ const SuspendShipment = ({
   }));
 };
 
-const styles = createStyles({
-  dateRangeInput: theme => ({
-    width: theme.spacing(30)
+const getStyles$1 = fullWidth => createStyles({
+  dateRangeSelect: theme => ({
+    minWidth: theme.spacing(30),
+    position: "relative",
+    width: !fullWidth ? "auto" : theme.spacing(30)
   })
 });
 
-const HistoryActions = () => {
+const DateRangeSelect = ({
+  fullWidth,
+  onChange,
+  options,
+  value
+}) => {
   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")
+  const styles = getStyles$1(fullWidth);
+  const handleChange = (_name, nextOption) => {
+    if (!nextOption) throw new Error("DateRangeSelect requires non-null options");
+    onChange(nextOption);
+  };
+  return jsx(Select$1, Object.assign({
+    css: styles.dateRangeSelect,
+    "data-testid": "date-range-select",
+    label: t("wallet-history:dateRange"),
+    leftContent: jsx(Icon, {
+      name: IconNames$1.FILTER
+    }),
+    name: "date-range-select",
+    onChange: handleChange,
+    value: value
   }, {
-    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$1.FILTER
-      }),
-      name: "date-range-select",
-      onChange: newValue => setSelectValue(newValue),
-      onClear: c => console.log("SELECT ON CLEAR CALLBACK:", c)
+    children: options.map(option => jsx(Option, Object.assign({
+      selected: (value === null || value === void 0 ? void 0 : value.value) === option.value,
+      value: option
     }, {
-      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")
+      children: option.label
+    }), option.value))
+  }));
+};
+
+const DateRangeCombo = ({
+  children: renderChildren,
+  onChange,
+  options,
+  values: {
+    customRange,
+    selectedOption
+  }
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const handleChangeSelected = nextOption => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextOption, customRange);
+  };
+  const handleChangeCustomRange = nextCustomRange => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(selectedOption, nextCustomRange);
+  };
+  const dateRangeSelect = jsx(DateRangeSelect, {
+    fullWidth: !!renderChildren,
+    onChange: handleChangeSelected,
+    options: options,
+    value: selectedOption
+  });
+  return jsxs(Fragment, {
+    children: [renderChildren ? renderChildren(dateRangeSelect) : dateRangeSelect, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === "custom" && jsxs(Fragment, {
+      children: [jsx(Spacer, {
+        multiplier: 2
+      }), jsx(DatePicker$1, {
+        dateFormat: "MM/dd/yyyy",
+        // TODO - [LMNT-666] the X displayed from isClearable doesn't fire any prop callbacks
+        isClearable: true,
+        label: t("wallet-history:actions.chooseDate"),
+        onChange: dates => {
+          if (Array.isArray(dates) && dates.length === 2 && dates[1] !== null) handleChangeCustomRange(dates);
+        },
+        selectsRange: true
+      })]
     })]
   });
 };
@@ -12258,25 +12340,91 @@ const HistoryList = ({
   });
 };
 
+const styles = createStyles({
+  action: theme => ({
+    minWidth: theme.spacing(30),
+    placeContent: "center",
+    width: theme.spacing(30)
+  }),
+  gridContainer: theme => ({
+    display: "grid",
+    gap: theme.spacing(2),
+    gridTemplateColumns: "1fr 1fr 1fr",
+    gridTemplateRows: "1fr",
+    placeItems: "center"
+  }),
+  linkAction: theme => ({
+    minWidth: theme.spacing(30),
+    placeContent: "center",
+    width: theme.spacing(30)
+  }),
+  pagination: {
+    display: "grid",
+    placeItems: "center"
+  }
+});
+
 const HistoryBody = ({
   historyData
 }) => {
-  const [page, setPage] = useState(1);
+  const {
+    t
+  } = useTranslation();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [dateRangeOptions, {
+    last30days
+  }] = useDateRangeOptions();
+  const [selectedOption, setSelectedOption] = useState(last30days);
+  const [customRange, setCustomRange] = useState();
+  useMemo(() => (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === "custom" ? customRange : selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.range, [customRange, selectedOption]);
+  // const { data: walletHistory } = useGetWalletHistory({
+  //   enabled: !!queryRange,
+  //   page: currentPage,
+  //   range: queryRange
+  // })
   return jsxs(Fragment, {
-    children: [jsx(HistoryActions, {}), jsx(HistoryList, {
+    children: [jsx(DateRangeCombo, Object.assign({
+      onChange: (nextOption, nextCustomRange) => {
+        setCurrentPage(1);
+        setSelectedOption(nextOption);
+        setCustomRange(nextCustomRange);
+      },
+      options: dateRangeOptions,
+      values: {
+        customRange,
+        selectedOption
+      }
+    }, {
+      children: renderedSelect => jsxs(Grid, Object.assign({
+        css: styles.gridContainer,
+        noPadding: true
+      }, {
+        children: [jsx(GridChild, {
+          children: renderedSelect
+        }), jsx(GridChild, {}), jsx(GridChild, {
+          children: jsx(LinkAction, {
+            css: styles.linkAction,
+            icon: "download",
+            onClick: () => alert("Download a CSV from HistoryBody! - a link will go here once we have a data hook"),
+            title: t("wallet-history:actions.downloadCsv")
+          })
+        })]
+      }))
+    })), jsx(Spacer, {
+      multiplier: 2
+    }), 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
-      })]
+    }), jsxs("p", {
+      children: ["Page ", jsx("strong", {
+        children: currentPage
+      }), " selected."]
+    }), jsx(Pagination, {
+      boundaryPagesToShow: 7,
+      css: styles.pagination,
+      currentPage: currentPage,
+      onPageChange: selectedPage => setCurrentPage(selectedPage),
+      siblingCount: 2,
+      totalPages: 20
     })]
   });
 };
@@ -12410,6 +12558,7 @@ var index$1 = /*#__PURE__*/Object.freeze({
 	AddressFields: AddressFields,
 	addressLine1Schema: addressLine1Schema,
 	addressLine2Schema: addressLine2Schema,
+	companyNameSchema: companyNameSchema,
 	addressSchema: addressSchema,
 	AddressParser: AddressParser,
 	addressParserSchema: addressParserSchema,
@@ -13106,20 +13255,34 @@ var listCarriers = {
 
 var manageDefaults = {
 	"manage-defaults": {
-	label: {
-		purchase: {
-			title: "Set for all labels",
-			description: "This setting applies to all future labels and can be changed in your Account Settings."
+	units: {
+		title: "Units of Measure",
+		dimensions: {
+			title: "Dimensions",
+			standard: "Inches",
+			metric: "Centimeters"
 		},
-		title: "Shipping Label Layout",
+		weight: {
+			title: "Weight",
+			standard: "Pounds & Ounces",
+			g: "Grams",
+			kg: "Kilograms"
+		}
+	},
+	label: {
 		letter: {
 			title: "Letter (8.5 x 11 inch)",
 			description: "For desktop printers"
 		},
+		purchase: {
+			title: "Set for all labels",
+			description: "This setting applies to all future labels and can be changed in your Account Settings."
+		},
 		thermal: {
 			title: "Thermal (4 x 6 inch)",
 			description: "For label printers"
-		}
+		},
+		title: "Shipping Label Layout"
 	}
 }
 };
@@ -13425,8 +13588,10 @@ var voidLabel = {
 var walletHistory = {
 	"wallet-history": {
 	actions: {
-		downloadCsv: "Download a CSV"
+		downloadCsv: "Download a CSV",
+		chooseDate: "Choose a date"
 	},
+	dateRange: "Date range",
 	historyOptions: {
 		custom: "Custom",
 		last30days: "Last 30 days",
@@ -13436,7 +13601,7 @@ var walletHistory = {
 }
 };
 
-var index = Object.assign(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), manageDefaults), onboarding$1), purchaseLabel), registerCarrier), registerWallet), viewShipment), voidLabel), walletHistory);
+var index = Object.assign(Object.assign(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), manageDefaults), manageFunding), manageWarehouses), manageDefaults), onboarding$1), purchaseLabel), registerCarrier), registerWallet), viewShipment), voidLabel), walletHistory);
 
 var resources = /*#__PURE__*/Object.freeze({
 	__proto__: null,
@@ -14604,8 +14769,9 @@ const useImportSalesOrder = ({
   const {
     data: salesOrders,
     error: listSalesOrdersErrors,
-    refetch: refetchSalesOrders,
-    isFetching: isFetchingSalesOrders
+    isFetching: isFetchingSalesOrders,
+    isLoading: isLoadingSalesOrders,
+    refetch: refetchSalesOrders
   } = useListSalesOrders({
     externalOrderId,
     externalOrderNumber
@@ -14613,8 +14779,9 @@ const useImportSalesOrder = ({
   const {
     data: salesOrder,
     error: getSalesOrderErrors,
-    refetch: refetchSalesOrder,
-    isFetching: isFetchingSalesOrder
+    isFetching: isFetchingSalesOrder,
+    isLoading: isLoadingSalesOrder,
+    refetch: refetchSalesOrder
   } = useGetSalesOrder(salesOrderId !== null && salesOrderId !== void 0 ? salesOrderId : salesOrders && salesOrders[0] ? salesOrders[0].salesOrderId : undefined);
   const {
     data: orderSources,
@@ -14643,7 +14810,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: isFetchingSalesOrder || isFetchingSalesOrders || isRefreshingOrderSource || !hasRefreshedOrderSource && !salesOrder && (salesOrders === null || salesOrders === void 0 ? void 0 : salesOrders.length) === 0 && errors.length === 0,
+    isLoading: isLoadingSalesOrder || isLoadingSalesOrders || isRefreshingOrderSource || !hasRefreshedOrderSource && !salesOrder && (salesOrders === null || salesOrders === void 0 ? void 0 : salesOrders.length) === 0 && errors.length === 0,
     salesOrder
   };
 };
@@ -14846,4 +15013,4 @@ 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$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 };
+export { Accordion, AddFundsForm, AutoFundingForm, ButtonGroup, CarrierBalance, Country, Cube, DateRangeCombo, DateRangeSelect, 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, getRelativeDates, 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, useDateRangeOptions, useElements, useExpirationMonthOptions, useInsuranceProviderOptions, useNestedForm, usePackageOptions, usePageLayout, useRateOptions, useRootPortal, useRunOnceOnTrue, useServiceCodeOptions, useShippingPresetsOptions, useStateCodeOptions, useToggle, useWarehouseOptions, useWarehouseValidation, validationResolver };