@shipengine/elements 0.24.0 → 0.25.0

package/index.js

@@ -3,7 +3,7 @@ import { useController, get as get$1, set as set$2, useWatch, useFormState, useF
 import { useTranslation, Trans } from 'react-i18next';
 import { Typography, FormField, FieldMessageType, Checkbox, Input, Icon, Divider, Link, SelectAutocomplete, Select as Select$1, OptionGroup, Option, Button, Switch as Switch$1, Textarea, ButtonVariant, InlineNotification, NotificationType, ButtonColor, Grid, GridChild, Tag, TagColor, ButtonSize, Spinner, IconSize, Skeleton, SkeletonAnimation, SkeletonVariant, SkeletonBackgroundColor, RadioGroup, Radio, Stepper, Step, SpinnerSize, ChipList, Chip, Table, TableBody, TableBaseRow, TableBodyCell, TableHeader, TableHeaderCell, Popover, DropdownOptionList, BottomSheet, DatePicker as DatePicker$1 } from '@packlink/giger';
 import axios from 'axios';
-import alchemy, { logger, SE, useValidateAddresses, useAddFunds, useGetCarrierById, useUpdateAutoFunding, useGetAutoFundingConfiguration, Currency, useListCarriers, useConnectCarrier, useListWarehouses, useUpdateWarehouse, useCreateWarehouse, useDeleteWarehouse, useUpdateSalesOrderShipment, useParseAddress, useListCustomPackageTypes, useCalculateRates, useGetShipmentRates, useCreateLabel, useListSalesOrderShipments, useCreateSalesOrderShipment, useGetAccountSettings, useListSalesOrders, useGetSalesOrder, useListOrderSources, useRefreshOrderSource, useGetShipment, useGetSalesOrderShipment, useListLabels, useGetLabel, useVoidLabel } from '@shipengine/alchemy';
+import alchemy, { logger, SE, useValidateAddresses, useAddFunds, useGetCarrierById, useGetAccountSettings, useUpdateAccountSettings, useUpdateAutoFunding, useGetAutoFundingConfiguration, Currency, useListCarriers, useConnectCarrier, useListWarehouses, useUpdateWarehouse, useCreateWarehouse, useDeleteWarehouse, useUpdateSalesOrderShipment, useParseAddress, useListCustomPackageTypes, useCalculateRates, useGetShipmentRates, useListLabels, useCreateLabel, useListSalesOrderShipments, useCreateSalesOrderShipment, useListSalesOrders, useGetSalesOrder, useListOrderSources, useRefreshOrderSource, useGetShipment, useGetSalesOrderShipment, useGetLabel, useVoidLabel } from '@shipengine/alchemy';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import * as React from 'react';
@@ -2563,10 +2563,15 @@ const formatExpiration = exp => {
 
 const isString = x => typeof x === "string";
 
-const getRateRequiresAcknowledgement = serviceCode => {
+const getRateRequiresAcknowledgement = (serviceCode, packageType) => {
   switch (serviceCode) {
     case "usps_media_mail":
       return true;
+    case "usps_first_class_mail":
+      if (packageType === "large_envelope_or_flat") {
+        return true;
+      }
+      return false;
     default:
       return false;
   }
@@ -4619,7 +4624,7 @@ const getDeliveryDaysLabel = deliveryDays => {
   }
   return `${deliveryDays.toString()} ${deliveryDays === 1 ? "day" : "days"}`;
 };
-const getAcknowledgementLabel = serviceCode => {
+const getAcknowledgementLabel = (serviceCode, packageType) => {
   switch (serviceCode) {
     case "usps_media_mail":
       return jsxs(Trans, Object.assign({
@@ -4634,6 +4639,13 @@ const getAcknowledgementLabel = serviceCode => {
           children: "USPS guidelines for Media Mail®"
         }))]
       }));
+    case "usps_first_class_mail":
+      if (packageType === "large_envelope_or_flat") {
+        return jsx(Trans, {
+          i18nKey: "purchase-label:rates.uspsFirstClassMailAcknowledgement_leof"
+        });
+      }
+      return;
     default:
       return null;
   }
@@ -4656,6 +4668,7 @@ const RateCard = ({
   requiresAcknowledgement,
   selected: _selected = false,
   serviceCode,
+  packageType,
   serviceType,
   shippingAmount,
   taxAmount,
@@ -4728,7 +4741,11 @@ const RateCard = ({
             css: getFooterListItemStyles,
             variant: "body2"
           }, {
-            children: msg
+            children: packageType === "large_envelope_or_flat" ? t(msg, {
+              weight: 13
+            }) : t(msg, {
+              weight: 16
+            })
           }), index + msg.length))
         })), requiresAcknowledgement && onClickAcknowledgement && jsx("div", Object.assign({
           css: getCheckboxWrapperStyles
@@ -4736,7 +4753,7 @@ const RateCard = ({
           children: jsx(Checkbox, {
             checked: isAcknowledged,
             css: getAcknowledgmentStyles,
-            label: getAcknowledgementLabel(serviceCode),
+            label: getAcknowledgementLabel(serviceCode, packageType),
             onChange: e => onClickAcknowledgement(e.target.checked)
           })
         }))]
@@ -5245,7 +5262,7 @@ const useRateOptions = (rates, carriers, shipment, enableGlobalPostFiltering) =>
       return Object.assign(Object.assign({}, r), {
         balance,
         messages: r.warningMessages,
-        requiresAcknowledgement: getRateRequiresAcknowledgement(r.serviceCode),
+        requiresAcknowledgement: getRateRequiresAcknowledgement(r.serviceCode, r.packageType),
         requiresFundedAmount
       });
     });
@@ -5909,7 +5926,7 @@ const AddressParser = ({
   }));
 };
 
-const styles$l = createStyles({
+const styles$m = createStyles({
   grow: {
     flexGrow: 1
   },
@@ -6009,13 +6026,13 @@ const AddressFields = ({
       },
       options: countryCodeOptions
     }), jsxs("div", Object.assign({
-      css: styles$l.stateZipWrapper
+      css: styles$m.stateZipWrapper
     }, {
       children: [jsx("div", Object.assign({
-        css: styles$l.stateWrapper
+        css: styles$m.stateWrapper
       }, {
         children: jsx("div", Object.assign({
-          css: styles$l.grow
+          css: styles$m.grow
         }, {
           children: watchCountryCode === "US" ?
           // Domestic States
@@ -6040,10 +6057,10 @@ const AddressFields = ({
           })
         }))
       })), jsx("div", Object.assign({
-        css: styles$l.zipWrapper
+        css: styles$m.zipWrapper
       }, {
         children: jsx("div", Object.assign({
-          css: styles$l.grow
+          css: styles$m.grow
         }, {
           children: jsx(TextInput, {
             control: form.control,
@@ -6281,7 +6298,7 @@ const AddressForm = ({
   }));
 };
 
-const styles$k = createStyles({
+const styles$l = createStyles({
   agreement: {
     alignItems: "center",
     display: "flex",
@@ -6351,10 +6368,10 @@ const DisplayCarrierTerms = c => {
   const listCarrierLinks = () => {
     return c.carrierTerms.links.map((term, index) => {
       return jsx("li", Object.assign({
-        css: styles$k.listItems
+        css: styles$l.listItems
       }, {
         children: jsx(Link, Object.assign({
-          css: styles$k.link,
+          css: styles$l.link,
           href: term.url,
           isExternal: true,
           target: "_blank"
@@ -6370,18 +6387,18 @@ const DisplayCarrierTerms = c => {
   };
   const listCarrierTerms = () => {
     return jsxs("div", Object.assign({
-      css: styles$k.terms
+      css: styles$l.terms
     }, {
       children: [jsx(Typography, Object.assign({
         variant: "subtitle1"
       }, {
         children: c.carrierTerms.title
       })), jsx("div", Object.assign({
-        css: styles$k.terms
+        css: styles$l.terms
       }, {
         children: listCarrierContent()
       })), jsx("ul", Object.assign({
-        css: styles$k.links
+        css: styles$l.links
       }, {
         children: listCarrierLinks()
       }))]
@@ -6611,7 +6628,7 @@ const AddressDisplay = ({
   }));
 };
 
-const styles$j = createStyles({
+const styles$k = createStyles({
   container: theme => ({
     display: "flex",
     gap: theme.spacing()
@@ -6649,13 +6666,13 @@ const Disclosure = ({
   }, [open]);
   return jsxs(Fragment, {
     children: [jsxs("div", Object.assign({
-      css: styles$j.container
+      css: styles$k.container
     }, {
       children: [jsx("div", {
         children: label
       }), _showToggle && jsx("button", Object.assign({
         "aria-expanded": isOpen,
-        css: styles$j.toggle,
+        css: styles$k.toggle,
         onClick: () => {
           setIsOpen(!isOpen);
           onToggle(!isOpen);
@@ -6663,12 +6680,12 @@ const Disclosure = ({
         type: "button"
       }, {
         children: jsx(Icon, {
-          css: styles$j.icon,
+          css: styles$k.icon,
           name: isOpen ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM
         })
       }))]
     })), isOpen && jsx("div", Object.assign({
-      css: styles$j.content
+      css: styles$k.content
     }, {
       children: typeof children === "function" ? children(() => setIsOpen(!isOpen)) : children
     }))]
@@ -6818,7 +6835,7 @@ const getCarrierRecoverySchema = requiresAddress => z.object({
   address: requiresAddress ? baseSchema : baseSchema.optional()
 });
 
-const styles$i = createStyles({
+const styles$j = createStyles({
   grid: theme => ({
     margin: theme.spacing(4)
   }),
@@ -6861,7 +6878,7 @@ const CarrierRecoveryForm = ({
     onSubmit: formLogger.capture(handleSubmit)
   }, {
     children: jsxs(Grid, Object.assign({
-      css: styles$i.grid,
+      css: styles$j.grid,
       noPadding: true
     }, {
       children: [requiresAddress && jsxs(Fragment, {
@@ -6869,14 +6886,14 @@ const CarrierRecoveryForm = ({
           colSpan: 12
         }, {
           children: jsx(Typography, Object.assign({
-            css: styles$i.heading,
+            css: styles$j.heading,
             variant: "heading4"
           }, {
             children: t("register-wallet:sections.carriers.title")
           }))
         })), jsx(GridChild, Object.assign({
           colSpan: 12,
-          css: styles$i.subtitle
+          css: styles$j.subtitle
         }, {
           children: jsx(Typography, Object.assign({
             variant: "subtitle1"
@@ -6962,7 +6979,7 @@ const CarrierTermsForm = ({
     onSubmit(payload.agreement);
   }));
   return jsxs("div", Object.assign({
-    css: styles$k.termsForm,
+    css: styles$l.termsForm,
     "data-testid": "carrier-terms-form"
   }, {
     children: [jsx(Typography, Object.assign({
@@ -6978,7 +6995,7 @@ const CarrierTermsForm = ({
     })), jsx(Spacer, {
       multiplier: 1
     }), jsx("div", Object.assign({
-      css: styles$k.carrierLogos
+      css: styles$l.carrierLogos
     }, {
       children: metadatas.map(({
         name,
@@ -6994,7 +7011,7 @@ const CarrierTermsForm = ({
         onSubmit: formLogger.capture(handleSubmit)
       }, {
         children: jsxs("div", Object.assign({
-          css: styles$k.agreement
+          css: styles$l.agreement
         }, {
           children: [jsx("div", {
             children: jsx(CheckboxInput, {
@@ -7021,12 +7038,12 @@ const CarrierTermsForm = ({
               name: "agreement"
             })
           }), showTerms && jsxs("div", Object.assign({
-            css: styles$k.well
+            css: styles$l.well
           }, {
             children: [terms.map(t => jsx(DisplayCarrierTerms, {
               carrierTerms: t
             }, t.title)), jsx("div", Object.assign({
-              css: styles$k.close
+              css: styles$l.close
             }, {
               children: jsx(Button, Object.assign({
                 onClick: () => setShowTerms(false),
@@ -7279,7 +7296,8 @@ const icons = {
   add: IconNames.ADD,
   checkFilled: IconNames.CHECK_FILLED,
   copy: IconNames.COPY,
-  download: IconNames.DOWNLOAD
+  download: IconNames.DOWNLOAD,
+  retry: IconNames.CIRCULAR_ARROW
 };
 const LinkAction = _a => {
   var {
@@ -7287,11 +7305,12 @@ const LinkAction = _a => {
       icon,
       isDisabled,
       isLoading,
-      title
+      title,
+      isBold = true
     } = _a,
-    props = __rest(_a, ["css", "icon", "isDisabled", "isLoading", "title"]);
+    props = __rest(_a, ["css", "icon", "isDisabled", "isLoading", "title", "isBold"]);
   return jsx(Link, Object.assign({}, props, {
-    bold: true,
+    bold: isBold,
     css: theme => [Object.assign(Object.assign({
       "&&&": {
         textDecoration: "none"
@@ -7345,7 +7364,7 @@ const CopyButton = ({
   }));
 };
 
-const styles$h = createStyles({
+const styles$i = createStyles({
   trackingNumber: theme => ({
     alignItems: "center",
     display: "flex"
@@ -7391,10 +7410,10 @@ const Label = ({
       shippingAmount: label.shipmentCost
     }, {
       children: label.trackingNumber && jsxs("div", Object.assign({
-        css: styles$h.trackingNumber
+        css: styles$i.trackingNumber
       }, {
         children: [jsx("div", Object.assign({
-          css: styles$h.truncatedTrackingNumber
+          css: styles$i.truncatedTrackingNumber
         }, {
           children: label.trackingNumber.toString()
         })), jsx(CopyButton, {
@@ -7506,7 +7525,7 @@ const LandingPageForm = ({
   }));
 };
 
-const styles$g = createStyles({
+const styles$h = createStyles({
   container: theme => ({
     padding: theme.spacing(2)
   }),
@@ -7528,11 +7547,11 @@ const LandingPage = ({
     t
   } = useTranslation();
   return jsxs("div", Object.assign({
-    css: styles$g.container,
+    css: styles$h.container,
     "data-testid": "landing-page"
   }, {
     children: [jsxs("div", Object.assign({
-      css: styles$g.header
+      css: styles$h.header
     }, {
       children: [jsx(Typography, Object.assign({
         variant: "heading4"
@@ -7550,7 +7569,7 @@ const LandingPage = ({
     })), jsx(LandingPageForm, {
       onSubmit: onSubmit
     }), jsxs("div", Object.assign({
-      css: styles$g.header
+      css: styles$h.header
     }, {
       children: [jsx(Spacer, {
         multiplier: 6
@@ -7561,14 +7580,14 @@ const LandingPage = ({
       })), jsx(Spacer, {
         multiplier: 2
       }), jsx(Typography, Object.assign({
-        css: styles$g.description,
+        css: styles$h.description,
         variant: "body1"
       }, {
         children: t("onboarding:landing.messageLine1")
       })), jsx(Spacer, {
         multiplier: 2
       }), jsx(Typography, Object.assign({
-        css: styles$g.description,
+        css: styles$h.description,
         variant: "body1"
       }, {
         children: t("onboarding:landing.messageLine2")
@@ -7579,7 +7598,7 @@ const LandingPage = ({
   }));
 };
 
-const styles$f = createStyles({
+const styles$g = createStyles({
   icon: theme => ({
     color: theme.palette.primary.main,
     marginRight: theme.spacing(2)
@@ -7624,10 +7643,10 @@ const Section = _a => {
     rest = __rest(_a, ["bold", "title", "children", "rightContent"]);
   return jsxs(Fragment, {
     children: [title && jsx("summary", Object.assign({
-      css: styles$f.summary
+      css: styles$g.summary
     }, {
       children: jsxs("div", Object.assign({
-        css: styles$f.summaryWrapper
+        css: styles$g.summaryWrapper
       }, {
         children: [jsx(Typography, Object.assign({
           bold: bold,
@@ -7635,20 +7654,20 @@ const Section = _a => {
         }, {
           children: title
         })), rightContent && jsx("div", Object.assign({
-          css: styles$f.rightContentWrapper
+          css: styles$g.rightContentWrapper
         }, {
           children: rightContent
         }))]
       }))
     })), jsx("section", Object.assign({
-      css: styles$f.section
+      css: styles$g.section
     }, rest, {
       children: children
     }))]
   });
 };
 
-const styles$e = createStyles({
+const styles$f = createStyles({
   container: {
     display: "flex",
     flexDirection: "column"
@@ -7708,14 +7727,14 @@ const ListCarriersRow = ({
     setIsSubmitting(false);
   });
   return jsxs("div", Object.assign({
-    css: styles$e.container,
+    css: styles$f.container,
     "data-testid": "carrier-row"
   }, {
     children: [jsxs("div", Object.assign({
-      css: styles$e.rowContainer
+      css: styles$f.rowContainer
     }, {
       children: [jsxs("div", Object.assign({
-        css: styles$e.logoContainer
+        css: styles$f.logoContainer
       }, {
         children: [jsx("div", {
           children: jsx("img", {
@@ -7733,7 +7752,7 @@ const ListCarriersRow = ({
         css: _ref
       }, {
         children: jsx(LinkAction, {
-          css: styles$e.getConnectButton(isConnected),
+          css: styles$f.getConnectButton(isConnected),
           isDisabled: isConnected || showDropDown,
           isLoading: isSubmitting,
           onClick: () => __awaiter(void 0, void 0, void 0, function* () {
@@ -7751,7 +7770,7 @@ const ListCarriersRow = ({
   }));
 };
 
-const styles$d = createStyles({
+const styles$e = createStyles({
   carriersList: theme => ({
     "& > li:not(:last-of-type)": {
       borderBottom: `1px solid ${theme.palette.gray.light}`
@@ -7804,7 +7823,7 @@ const ListCarriers = ({
         }))
       })), jsx(Spacer, {})]
     }), jsx("ul", Object.assign({
-      css: styles$d.carriersList,
+      css: styles$e.carriersList,
       "data-testid": "carriers-list"
     }, {
       children: isLoading ? jsxs(Fragment, {
@@ -7826,11 +7845,11 @@ const ListCarriers = ({
 };
 const LoadingSkeletonRow = () => {
   return jsxs("div", Object.assign({
-    css: styles$d.skeletonRow,
+    css: styles$e.skeletonRow,
     "data-testid": "skeleton-carrier-row"
   }, {
     children: [jsxs("div", Object.assign({
-      css: styles$d.skeletonLogoContainer
+      css: styles$e.skeletonLogoContainer
     }, {
       children: [jsx(Skeleton, {
         animation: SkeletonAnimation.WAVE,
@@ -8137,7 +8156,7 @@ const useAddressPreference = () => {
   return context;
 };
 
-const styles$c = createStyles({
+const styles$d = createStyles({
   body: theme => ({
     borderTop: `1px solid ${theme.palette.gray.light}`,
     color: theme.palette.black,
@@ -8188,14 +8207,14 @@ const SettingsCard = ({
   verticallyAligned
 }) => {
   return jsxs("div", Object.assign({
-    css: verticallyAligned ? styles$c.verticalContainer : styles$c.container,
+    css: verticallyAligned ? styles$d.verticalContainer : styles$d.container,
     "data-testid": "settingsCard"
   }, {
     children: [jsxs("div", Object.assign({
-      css: styles$c.header
+      css: styles$d.header
     }, {
       children: [jsxs("div", Object.assign({
-        css: styles$c.title
+        css: styles$d.title
       }, {
         children: [typeof title === "string" ? jsx(Typography, Object.assign({
           variant: "subtitle2"
@@ -8230,7 +8249,7 @@ const SettingsCard = ({
         }))
       }))]
     })), children && jsx("div", Object.assign({
-      css: styles$c.body
+      css: styles$d.body
     }, {
       children: jsxs("div", {
         children: [children, accessoryAction && jsx(ButtonGroup, Object.assign({
@@ -8486,7 +8505,7 @@ const WarehouseForm = ({
   }));
 };
 
-const styles$b = createStyles({
+const styles$c = createStyles({
   cardSpacing: theme => ({
     display: "flex",
     flexDirection: "column",
@@ -8516,9 +8535,9 @@ const ManageWarehouses = ({
   const [showAddNewWarehouseForm, toggleShowAddNewWarehouseForm] = useToggle(false);
   return jsxs(Fragment, {
     children: [showAddNewWarehouseForm ? jsx(AddressPreferenceProvider, Object.assign({
-      css: styles$b.well,
+      css: styles$c.well,
       formHeader: jsxs("div", Object.assign({
-        css: styles$b.header
+        css: styles$c.header
       }, {
         children: [jsx(Typography, Object.assign({
           variant: "subtitle1"
@@ -8563,14 +8582,14 @@ const ManageWarehouses = ({
         })]
       }))
     })), jsx("div", Object.assign({
-      css: styles$b.cardSpacing
+      css: styles$c.cardSpacing
     }, {
       children: warehouses.map(warehouse => {
         if (editWarehouseId && editWarehouseId === warehouse.warehouseId) {
           return jsx(AddressPreferenceProvider, Object.assign({
-            css: styles$b.well,
+            css: styles$c.well,
             formHeader: jsxs("div", Object.assign({
-              css: styles$b.header
+              css: styles$c.header
             }, {
               children: [jsx(Typography, Object.assign({
                 variant: "subtitle1"
@@ -9748,7 +9767,7 @@ const EditWalletAddressForm = ({
   }));
 };
 
-const styles$a = createStyles({
+const styles$b = createStyles({
   grid: theme => ({
     margin: theme.spacing(4)
   })
@@ -9810,7 +9829,7 @@ const WalletForm = ({
     onSubmit: formLogger.capture(handleSubmit)
   }, {
     children: jsxs(Grid, Object.assign({
-      css: styles$a.grid,
+      css: styles$b.grid,
       noPadding: true
     }, {
       children: [jsx(GridChild, Object.assign({
@@ -9892,7 +9911,7 @@ const WalletForm = ({
   }));
 };
 
-const styles$9 = createStyles({
+const styles$a = createStyles({
   container: theme => ({
     padding: theme.spacing(2)
   }),
@@ -10068,10 +10087,10 @@ const Onboarding = ({
       const defaultWarehouse = (_a = warehouses.find(w => w.isDefault)) !== null && _a !== void 0 ? _a : warehouses[0];
       return jsx(AddressPreferenceProvider, Object.assign({
         formHeader: jsxs("div", Object.assign({
-          css: styles$9.walletFormHeader
+          css: styles$a.walletFormHeader
         }, {
           children: [jsxs("div", Object.assign({
-            css: styles$9.walletFormTitle
+            css: styles$a.walletFormTitle
           }, {
             children: [jsx(Typography, Object.assign({
               variant: "heading4"
@@ -10148,22 +10167,22 @@ const Onboarding = ({
     });
   };
   return jsxs("div", Object.assign({
-    css: styles$9.container
+    css: styles$a.container
   }, {
     children: [jsxs(Stepper, Object.assign({
       currentStep: currentStep
     }, {
       children: [jsx(Step, {
-        css: styles$9.step,
+        css: styles$a.step,
         label: t("onboarding:steps.login")
       }), jsx(Step, {
-        css: styles$9.step,
+        css: styles$a.step,
         label: t("onboarding:steps.carriers")
       }), jsx(Step, {
-        css: styles$9.step,
+        css: styles$a.step,
         label: t("onboarding:steps.addresses")
       }), jsx(Step, {
-        css: styles$9.step,
+        css: styles$a.step,
         label: t("onboarding:steps.payment")
       })]
     })), renderStep()]
@@ -10297,7 +10316,7 @@ const Loader = props => {
   }));
 };
 
-const styles$8 = createStyles({
+const styles$9 = createStyles({
   chipList: theme => ({
     gap: theme.spacing(1)
   }),
@@ -10408,7 +10427,7 @@ const AddFundsForm = ({
       })), jsx(Spacer, {
         multiplier: 2
       }), jsx(ChipList, Object.assign({
-        css: styles$8.chipList,
+        css: styles$9.chipList,
         onChange: idx => {
           const chip = chips[idx];
           setSelectedChip(chip);
@@ -10423,7 +10442,7 @@ const AddFundsForm = ({
         }
       }, {
         children: chips.map(chip => jsx(Chip, Object.assign({
-          css: styles$8.getChip({
+          css: styles$9.getChip({
             isDisabled: chip.value < _minimumAmount,
             isSelected: chip.value === selectedChip.value
           }),
@@ -10440,7 +10459,7 @@ const AddFundsForm = ({
           multiplier: 1
         }), jsx(MoneyInput, {
           control: form.control,
-          css: styles$8.fundsInput,
+          css: styles$9.fundsInput,
           defaultValue: {
             amount: undefined,
             currency: SE.Currency.USD
@@ -10493,7 +10512,7 @@ const AddFundsForm = ({
   });
 };
 
-const styles$7 = isLabelRight => createStyles({
+const styles$8 = isLabelRight => createStyles({
   inlineContainer: theme => ({
     alignItems: "center",
     display: "flex",
@@ -10508,14 +10527,14 @@ const InlineLabel = ({
   isLabelRight,
   labelProps: _labelProps = {}
 }) => jsxs("div", Object.assign({
-  css: styles$7(isLabelRight).inlineContainer
+  css: styles$8(isLabelRight).inlineContainer
 }, {
   children: [jsx(Typography, Object.assign({}, _labelProps, {
     children: label
   })), children]
 }));
 
-const styles$6 = createStyles({
+const styles$7 = createStyles({
   getBalanceText: balance => theme => ({
     color: balance === undefined ? theme.palette.alert.main : balance >= 0 ? theme.palette.secondary.dark : theme.palette.error.main
   })
@@ -10538,7 +10557,7 @@ const CarrierBalance = ({
   }, {
     children: isLoadingCarrier || isRefetchingCarrier ? jsx(Spinner, {}) : jsx(Typography, Object.assign({
       bold: true,
-      css: styles$6.getBalanceText(balance)
+      css: styles$7.getBalanceText(balance)
     }, {
       children: balance === undefined ? t("manage-funding:errors.balanceUnknown") : formatMoney({
         amount: balance,
@@ -10560,7 +10579,7 @@ const Spread = ({
   children: children
 }));
 
-const styles$5 = createStyles({
+const styles$6 = createStyles({
   balanceText: theme => ({
     color: theme.palette.secondary.dark
   }),
@@ -10628,7 +10647,7 @@ const FundAndPurchase = ({
   }, {
     children: [jsx(Button, Object.assign({
       bold: false,
-      css: styles$5.saveRateButton,
+      css: styles$6.saveRateButton,
       disabled: disabled || !carrierId || addFundsForm.isSubmitting || isRateFormSubmitting,
       isLoading: isSavingRate,
       onClick: handleSaveRate,
@@ -10648,7 +10667,7 @@ const FundAndPurchase = ({
   //         don't show balance or funding form
   if (!isFundingRequired) return jsx("div", Object.assign({
     className: className,
-    css: styles$5.container
+    css: styles$6.container
   }, {
     children: renderActionButtons()
   }));
@@ -10661,7 +10680,7 @@ const FundAndPurchase = ({
   //         show balance, but not the funding form.
   if (!isFundingEnabled) return jsxs("div", Object.assign({
     className: className,
-    css: styles$5.container
+    css: styles$6.container
   }, {
     children: [jsx(CarrierBalance, {
       carrierId: carrierId
@@ -10673,7 +10692,7 @@ const FundAndPurchase = ({
   //         show balance and funding form
   return jsxs("div", Object.assign({
     className: className,
-    css: styles$5.container
+    css: styles$6.container
   }, {
     children: [jsxs(Spread, {
       children: [jsx(CarrierBalance, {
@@ -10704,13 +10723,13 @@ const FundAndPurchase = ({
         var _a, _b;
         return jsxs(Fragment, {
           children: [jsxs("section", Object.assign({
-            css: styles$5.getFormExtension(addFundsForm.isCustomAmount)
+            css: styles$6.getFormExtension(addFundsForm.isCustomAmount)
           }, {
             children: [jsx(InlineLabel, Object.assign({
               label: t("manage-funding:fundAndPurchase.newBalance")
             }, {
               children: jsx(Typography, Object.assign({
-                css: styles$5.balanceText
+                css: styles$6.balanceText
               }, {
                 children: formatMoney({
                   amount: balance + ((_a = addFundsForm.selectedAmount) !== null && _a !== void 0 ? _a : 0),
@@ -10721,7 +10740,7 @@ const FundAndPurchase = ({
               label: t("manage-funding:fundAndPurchase.finalBalance")
             }, {
               children: jsx(Typography, Object.assign({
-                css: styles$5.balanceText
+                css: styles$6.balanceText
               }, {
                 children: formatMoney({
                   amount: balance + ((_b = addFundsForm.selectedAmount) !== null && _b !== void 0 ? _b : 0) - purchaseAmount,
@@ -10748,6 +10767,274 @@ const FundAndPurchase = ({
   }));
 };
 
+const LabelLayoutPurchase = ({
+  onChange
+}) => {
+  const {
+    t
+  } = useTranslation(["common", "manage-defaults"]);
+  const [layout, setLayout] = useState("4x6");
+  return jsxs(Fragment, {
+    children: [jsx(InlineNotification, Object.assign({
+      title: t("manage-defaults:label.purchase.title"),
+      type: NotificationType.INFO
+    }, {
+      children: t("manage-defaults:label.purchase.description")
+    })), jsx(Spacer, {
+      multiplier: 1.5
+    }), jsxs(RadioGroup, Object.assign({
+      name: "labelLayout",
+      onChange: e => {
+        setLayout(e.target.value);
+        onChange(e.target.value);
+      },
+      value: layout
+    }, {
+      children: [jsx(Radio, Object.assign({
+        value: "Letter"
+      }, {
+        children: jsx(Typography, Object.assign({
+          bold: true
+        }, {
+          children: t("manage-defaults:label.letter.title")
+        }))
+      })), jsx(Spacer, {
+        multiplier: 3
+      }), jsx(Radio, Object.assign({
+        value: "4x6"
+      }, {
+        children: jsx(Typography, Object.assign({
+          bold: true
+        }, {
+          children: t("manage-defaults:label.thermal.title")
+        }))
+      }))]
+    }))]
+  });
+};
+
+const styles$5 = createStyles({
+  button: theme => ({
+    backgroundColor: "transparent",
+    padding: 0
+  }),
+  buttonContainer: theme => ({
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "left"
+  }),
+  icon: theme => ({
+    color: theme.palette.secondary.main,
+    position: "absolute",
+    right: theme.spacing(1),
+    top: theme.spacing(1)
+  }),
+  letter: theme => ({
+    ":hover": {
+      border: `1px solid ${theme.palette.secondary.main}`
+    },
+    alignItems: "center",
+    border: `1px solid ${theme.palette.gray.light}`,
+    borderRadius: "10px",
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "column",
+    height: theme.spacing(32),
+    marginRight: theme.spacing(3.5),
+    position: "relative",
+    width: theme.spacing(24)
+  }),
+  letterInner: theme => ({
+    backgroundColor: "white",
+    border: `1px solid ${theme.palette.gray.light}`,
+    height: theme.spacing(14),
+    marginBottom: theme.spacing(2),
+    marginTop: theme.spacing(6),
+    width: theme.spacing(10)
+  }),
+  letterLabel: theme => ({
+    backgroundColor: "#95C2E0",
+    height: theme.spacing(5),
+    margin: theme.spacing(1.5)
+  }),
+  selectedLetter: theme => ({
+    alignItems: "center",
+    backgroundColor: "#EAF6FF",
+    border: `1px solid ${theme.palette.secondary.main}`,
+    borderRadius: "10px",
+    boxShadow: `0 0 0 3px ${theme.palette.secondary.main}`,
+    boxSizing: "border-box",
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "column",
+    height: theme.spacing(32),
+    marginRight: theme.spacing(3.5),
+    position: "relative",
+    width: theme.spacing(24)
+  }),
+  selectedThermal: theme => ({
+    alignItems: "center",
+    backgroundColor: "#EAF6FF",
+    border: `1px solid ${theme.palette.secondary.main}`,
+    borderRadius: "10px",
+    boxShadow: `0 0 0 3px ${theme.palette.secondary.main}`,
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "column",
+    height: theme.spacing(32),
+    position: "relative",
+    width: theme.spacing(24)
+  }),
+  thermal: theme => ({
+    ":hover": {
+      border: `1px solid ${theme.palette.secondary.main}`
+    },
+    alignItems: "center",
+    border: `1px solid ${theme.palette.gray.light}`,
+    borderRadius: "10px",
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "column",
+    height: theme.spacing(32),
+    position: "relative",
+    width: theme.spacing(24)
+  }),
+  thermalIcon: theme => ({
+    backgroundColor: "#95C2E0",
+    height: theme.spacing(8),
+    width: theme.spacing(5)
+  }),
+  thermalInner: theme => ({
+    alignItems: "center",
+    display: "flex",
+    height: theme.spacing(14),
+    justifyContent: "center",
+    marginBottom: theme.spacing(2),
+    marginTop: theme.spacing(6),
+    width: theme.spacing(10)
+  }),
+  thermalLabel: theme => ({
+    backgroundColor: "#95C2E0",
+    height: theme.spacing(8),
+    width: theme.spacing(5)
+  })
+});
+
+const LabelLayoutSettings = ({
+  onChange
+}) => {
+  var _a;
+  const {
+    t
+  } = useTranslation(["common", "manage-defaults"]);
+  const {
+    data: accountSettings
+  } = useGetAccountSettings();
+  const labelLayout = (_a = accountSettings === null || accountSettings === void 0 ? void 0 : accountSettings.defaultLabelLayout) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+  return jsx(Section, Object.assign({
+    bold: true,
+    title: t("manage-defaults:label.title")
+  }, {
+    children: jsxs("div", Object.assign({
+      css: styles$5.buttonContainer
+    }, {
+      children: [jsx("button", Object.assign({
+        css: styles$5.button,
+        id: "letter",
+        onClick: () => {
+          onChange("Letter");
+        },
+        value: "letter"
+      }, {
+        children: jsxs("div", Object.assign({
+          css: labelLayout === "letter" ? styles$5.selectedLetter : styles$5.letter
+        }, {
+          children: [labelLayout === "letter" && jsx(Icon, {
+            css: styles$5.icon,
+            name: IconNames$1.CHECK_FILLED
+          }), jsx("div", Object.assign({
+            css: styles$5.letterInner
+          }, {
+            children: jsx("div", {
+              css: styles$5.letterLabel
+            })
+          })), jsx(Typography, {
+            children: t("manage-defaults:label.letter.title")
+          }), jsx(Spacer, {
+            multiplier: 0.5
+          }), jsx(Typography, Object.assign({
+            css: {
+              color: "#6C757D"
+            }
+          }, {
+            children: t("manage-defaults:label.letter.description")
+          }))]
+        }))
+      })), jsx("button", Object.assign({
+        css: styles$5.button,
+        id: "4x6",
+        onClick: e => {
+          onChange(e.currentTarget.value);
+        },
+        value: "4x6"
+      }, {
+        children: jsxs("div", Object.assign({
+          css: labelLayout === "4x6" ? styles$5.selectedThermal : styles$5.thermal
+        }, {
+          children: [labelLayout === "4x6" && jsx(Icon, {
+            css: styles$5.icon,
+            name: IconNames$1.CHECK_FILLED
+          }), jsx("div", Object.assign({
+            css: styles$5.thermalInner
+          }, {
+            children: jsx("div", {
+              css: styles$5.thermalLabel
+            })
+          })), jsx(Typography, {
+            children: t("manage-defaults:label.thermal.title")
+          }), jsx(Spacer, {
+            multiplier: 0.5
+          }), jsx(Typography, Object.assign({
+            css: {
+              color: "#6C757D"
+            }
+          }, {
+            children: t("manage-defaults:label.thermal.description")
+          }))]
+        }))
+      }))]
+    }))
+  }));
+};
+
+const LabelLayout = ({
+  display
+}) => {
+  const {
+    mutateAsync: updateAccountSettings
+  } = useUpdateAccountSettings();
+  const {
+    refetch: refreshAccountSettings
+  } = useGetAccountSettings();
+  const handleSubmitUpdateAccountSettings = newLabelLayout => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+      yield updateAccountSettings({
+        defaultLabelLayout: newLabelLayout
+      });
+    } catch (error) {
+      console.error(error);
+    }
+    yield refreshAccountSettings();
+  });
+  return jsxs(Fragment, {
+    children: [display === "settings" && jsx(LabelLayoutSettings, {
+      onChange: handleSubmitUpdateAccountSettings
+    }), display === "purchase" && jsx(LabelLayoutPurchase, {
+      onChange: handleSubmitUpdateAccountSettings
+    })]
+  });
+};
+
 const styles$4 = createStyles({
   fundAndPurchase: theme => ({
     borderTop: `1px solid ${theme.palette.gray.ultraLight}`
@@ -10780,6 +11067,8 @@ const RateForm = ({
   displayableLabelErrors,
   features,
   labelErrors,
+  labels,
+  labelsLoading,
   isLoading,
   onSave,
   onSelectRate,
@@ -10930,6 +11219,12 @@ const RateForm = ({
           children: [displayableErrors, outOfBandDisplayableErrors, displayableLabelErrors]
         })
       }))]
+    })), !labelsLoading && !(labels === null || labels === void 0 ? void 0 : labels.length) && jsx(Section, Object.assign({
+      title: t("manage-defaults:label.title")
+    }, {
+      children: jsx(LabelLayout, {
+        display: "purchase"
+      })
     })), jsx(FundAndPurchase, {
       carrierId: selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.carrierId,
       control: form.control,
@@ -12619,7 +12914,7 @@ var index = /*#__PURE__*/Object.freeze({
 	WarehouseForm: WarehouseForm,
 	VoidLabel: VoidLabel,
 	WalletForm: WalletForm,
-	styles: styles$a,
+	styles: styles$b,
 	billingAddressSchema: billingAddressSchema,
 	walletSchema: walletSchema,
 	BillingFields: BillingFields,
@@ -13166,6 +13461,7 @@ var common = {
 		invalidNameOrCompany: "Recipient name and company name (if provided) must have two characters in first and last name.",
 		noWarehouses: "You must have an active Ship From Location to use this feature.",
 		unableToLoad: {
+			accountSettings: "Unable to load account settings",
 			autoFundingSettings: "Unable to load auto funding settings",
 			carrier: "Unable to load carrier",
 			carriers: "Unable to load carriers",
@@ -13194,6 +13490,7 @@ var common = {
 		thirdParty: "Third Party"
 	},
 	loading: {
+		accountSettings: "Loading account settings...",
 		carrier: "Loading carrier...",
 		carriers: "Loading carriers...",
 		data: "Loading...",
@@ -13507,7 +13804,8 @@ var purchaseLabel$1 = {
 		needToAcknowledge: "Need to accept Rate Compliance Agreement"
 	},
 	rates: {
-		uspsMediaMailAcknowledgement: "I confirm that this package is compliant with <1>USPS guidelines for Media Mail®</1>"
+		uspsMediaMailAcknowledgement: "I confirm that this package is compliant with <1>USPS guidelines for Media Mail®</1>",
+		uspsFirstClassMailAcknowledgement_leof: "I understand the limitations and confirm that this package is compliant with USPS guidelines for First Class Mail Large Envelopes or Flats."
 	},
 	shipToAddressFormFields: "Ship To Address Form Fields",
 	sections: {
@@ -14117,7 +14415,7 @@ const useScrubErrors = ({
 };
 
 var usps_first_class_mail = [
-	"First Class Mail packages must weigh less than 16 oz. If the package weight exceeds the weight provided when buying the label, USPS will charge an adjustment fee."
+	"First Class Mail shipments must weigh less than {{weight}} oz. Shipments exceeding the weight entered when buying the label will be charged an adjustment fee by USPS."
 ];
 var usps_media_mail = [
 	"Media Mail® can only be used for shipping books, sound recordings, manuscripts, printed music, and other media in packages weighing 70 lbs. or less. Packages containing unsupported items may be subject to post-billing adjustment fees or returned to the sender."
@@ -14157,7 +14455,7 @@ var rateMessages = {
 	"First Class Mail letter is not eligible for USPS tracking nor refund if unused. If the package weight exceeds the weight provided when buying the label, USPS will charge an adjustment fee."
 ],
 	"usps_first_class_mail:large_envelope_or_flat": [
-	"First Class Mail large envelope or flats is not eligible for USPS tracking nor refund if unused. If the package weight exceeds the weight provided when buying the label, USPS will charge an adjustment fee."
+	"Tracking and refunds are not available for First Class Mail Large Envelopes or Flats labels."
 ],
 	usps_first_class_mail: usps_first_class_mail,
 	usps_media_mail: usps_media_mail,
@@ -14166,10 +14464,25 @@ var rateMessages = {
 	usps_priority_mail_express: usps_priority_mail_express,
 	ups_ground: ups_ground,
 	ups_2nd_day_air: ups_2nd_day_air,
+	"ups_2nd_day_air:Saturday": [
+	"Additional fees may apply post-delivery if picked up on a Saturday."
+],
 	ups_next_day_air_saver: ups_next_day_air_saver,
+	"ups_next_day_air_saver:Saturday": [
+	"Additional fees may apply post-delivery if picked up on a Saturday."
+],
 	ups_next_day_air: ups_next_day_air,
+	"ups_next_day_air:Saturday": [
+	"Additional fees may apply post-delivery if picked up on a Saturday."
+],
 	ups_next_day_air_early_am: ups_next_day_air_early_am,
+	"ups_next_day_air_early_am:Saturday": [
+	"Additional fees may apply post-delivery if picked up on a Saturday."
+],
 	ups_2nd_day_air_am: ups_2nd_day_air_am,
+	"ups_2nd_day_air_am:Saturday": [
+	"Additional fees may apply post-delivery if picked up on a Saturday."
+],
 	ups_3_day_select: ups_3_day_select
 };
 
@@ -14203,16 +14516,24 @@ const useRequestRates = ({
     if (result) yield onRatesCalculated === null || onRatesCalculated === void 0 ? void 0 : onRatesCalculated(result.rateResponse.rates, shipment);
   }), [calculateRates, carriers, customPackageTypes, onRatesCalculated]);
   let ratesResponse = ratedShipment === null || ratedShipment === void 0 ? void 0 : ratedShipment.rateResponse;
+  const shipDay = useMemo(() => {
+    if (ratedShipment === null || ratedShipment === void 0 ? void 0 : ratedShipment.shipDate) {
+      return omitTime(ratedShipment === null || ratedShipment === void 0 ? void 0 : ratedShipment.shipDate).toLocaleString("en-us", {
+        weekday: "long"
+      });
+    }
+    return;
+  }, [ratedShipment]);
   ratesResponse = useMemo(() => ratesResponse && Object.assign(Object.assign({}, ratesResponse), {
     rates: ratesResponse.rates.map(rate => {
-      var _a, _b;
+      var _a, _b, _c;
       return Object.assign(Object.assign({}, rate), {
         warningMessages: [
-        // add additional rateMessages based on combinations of serviceCode and packageType
-        ...((_a = rateMessages[`${rate.serviceCode}:${rate.packageType}`]) !== null && _a !== void 0 ? _a : []), ...((_b = rateMessages[rate.serviceCode]) !== null && _b !== void 0 ? _b : []), ...rate.warningMessages]
+        // add additional rateMessages based on combinations of serviceCode, packageType and shipDay
+        ...((_a = rateMessages[`${rate.serviceCode}:${shipDay}`]) !== null && _a !== void 0 ? _a : []), ...((_b = rateMessages[`${rate.serviceCode}:${rate.packageType}`]) !== null && _b !== void 0 ? _b : []), ...((_c = rateMessages[rate.serviceCode]) !== null && _c !== void 0 ? _c : []), ...rate.warningMessages]
       });
     })
-  }), [ratesResponse]);
+  }), [ratesResponse, shipDay]);
   return {
     ratesCalculating,
     ratesErrors,
@@ -14271,6 +14592,10 @@ const useRatesForm = ({
   const {
     data: carriers
   } = useListCarriers();
+  const {
+    data: labels,
+    isLoading: labelsLoading
+  } = useListLabels();
   const {
     mutateAsync: updateShipment
   } = useUpdateSalesOrderShipment();
@@ -14371,6 +14696,8 @@ const useRatesForm = ({
     errors: errors.length > 0 ? errors : undefined,
     isLoading: ratesCalculating,
     labelErrors: (labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length) ? labelErrors : undefined,
+    labels,
+    labelsLoading,
     onSave: handleSave,
     onSubmit: handleSubmit,
     rates: ratesResponse === null || ratesResponse === void 0 ? void 0 : ratesResponse.rates,