@shipengine/elements 0.24.0 → 0.25.0

package/index.cjs

@@ -2594,10 +2594,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;
   }
@@ -4650,7 +4655,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 jsxRuntime.jsxs(reactI18next.Trans, Object.assign({
@@ -4665,6 +4670,13 @@ const getAcknowledgementLabel = serviceCode => {
           children: "USPS guidelines for Media Mail®"
         }))]
       }));
+    case "usps_first_class_mail":
+      if (packageType === "large_envelope_or_flat") {
+        return jsxRuntime.jsx(reactI18next.Trans, {
+          i18nKey: "purchase-label:rates.uspsFirstClassMailAcknowledgement_leof"
+        });
+      }
+      return;
     default:
       return null;
   }
@@ -4687,6 +4699,7 @@ const RateCard = ({
   requiresAcknowledgement,
   selected: _selected = false,
   serviceCode,
+  packageType,
   serviceType,
   shippingAmount,
   taxAmount,
@@ -4759,7 +4772,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 && jsxRuntime.jsx("div", Object.assign({
           css: getCheckboxWrapperStyles
@@ -4767,7 +4784,7 @@ const RateCard = ({
           children: jsxRuntime.jsx(giger.Checkbox, {
             checked: isAcknowledged,
             css: getAcknowledgmentStyles,
-            label: getAcknowledgementLabel(serviceCode),
+            label: getAcknowledgementLabel(serviceCode, packageType),
             onChange: e => onClickAcknowledgement(e.target.checked)
           })
         }))]
@@ -5276,7 +5293,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
       });
     });
@@ -5940,7 +5957,7 @@ const AddressParser = ({
   }));
 };
 
-const styles$l = createStyles({
+const styles$m = createStyles({
   grow: {
     flexGrow: 1
   },
@@ -6040,13 +6057,13 @@ const AddressFields = ({
       },
       options: countryCodeOptions
     }), jsxRuntime.jsxs("div", Object.assign({
-      css: styles$l.stateZipWrapper
+      css: styles$m.stateZipWrapper
     }, {
       children: [jsxRuntime.jsx("div", Object.assign({
-        css: styles$l.stateWrapper
+        css: styles$m.stateWrapper
       }, {
         children: jsxRuntime.jsx("div", Object.assign({
-          css: styles$l.grow
+          css: styles$m.grow
         }, {
           children: watchCountryCode === "US" ?
           // Domestic States
@@ -6071,10 +6088,10 @@ const AddressFields = ({
           })
         }))
       })), jsxRuntime.jsx("div", Object.assign({
-        css: styles$l.zipWrapper
+        css: styles$m.zipWrapper
       }, {
         children: jsxRuntime.jsx("div", Object.assign({
-          css: styles$l.grow
+          css: styles$m.grow
         }, {
           children: jsxRuntime.jsx(TextInput, {
             control: form.control,
@@ -6312,7 +6329,7 @@ const AddressForm = ({
   }));
 };
 
-const styles$k = createStyles({
+const styles$l = createStyles({
   agreement: {
     alignItems: "center",
     display: "flex",
@@ -6382,10 +6399,10 @@ const DisplayCarrierTerms = c => {
   const listCarrierLinks = () => {
     return c.carrierTerms.links.map((term, index) => {
       return jsxRuntime.jsx("li", Object.assign({
-        css: styles$k.listItems
+        css: styles$l.listItems
       }, {
         children: jsxRuntime.jsx(giger.Link, Object.assign({
-          css: styles$k.link,
+          css: styles$l.link,
           href: term.url,
           isExternal: true,
           target: "_blank"
@@ -6401,18 +6418,18 @@ const DisplayCarrierTerms = c => {
   };
   const listCarrierTerms = () => {
     return jsxRuntime.jsxs("div", Object.assign({
-      css: styles$k.terms
+      css: styles$l.terms
     }, {
       children: [jsxRuntime.jsx(giger.Typography, Object.assign({
         variant: "subtitle1"
       }, {
         children: c.carrierTerms.title
       })), jsxRuntime.jsx("div", Object.assign({
-        css: styles$k.terms
+        css: styles$l.terms
       }, {
         children: listCarrierContent()
       })), jsxRuntime.jsx("ul", Object.assign({
-        css: styles$k.links
+        css: styles$l.links
       }, {
         children: listCarrierLinks()
       }))]
@@ -6642,7 +6659,7 @@ const AddressDisplay = ({
   }));
 };
 
-const styles$j = createStyles({
+const styles$k = createStyles({
   container: theme => ({
     display: "flex",
     gap: theme.spacing()
@@ -6680,13 +6697,13 @@ const Disclosure = ({
   }, [open]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs("div", Object.assign({
-      css: styles$j.container
+      css: styles$k.container
     }, {
       children: [jsxRuntime.jsx("div", {
         children: label
       }), _showToggle && jsxRuntime.jsx("button", Object.assign({
         "aria-expanded": isOpen,
-        css: styles$j.toggle,
+        css: styles$k.toggle,
         onClick: () => {
           setIsOpen(!isOpen);
           onToggle(!isOpen);
@@ -6694,12 +6711,12 @@ const Disclosure = ({
         type: "button"
       }, {
         children: jsxRuntime.jsx(giger.Icon, {
-          css: styles$j.icon,
+          css: styles$k.icon,
           name: isOpen ? gigerTheme.IconNames.CHEVRON_TOP : gigerTheme.IconNames.CHEVRON_BOTTOM
         })
       }))]
     })), isOpen && jsxRuntime.jsx("div", Object.assign({
-      css: styles$j.content
+      css: styles$k.content
     }, {
       children: typeof children === "function" ? children(() => setIsOpen(!isOpen)) : children
     }))]
@@ -6849,7 +6866,7 @@ const getCarrierRecoverySchema = requiresAddress => zod.z.object({
   address: requiresAddress ? baseSchema : baseSchema.optional()
 });
 
-const styles$i = createStyles({
+const styles$j = createStyles({
   grid: theme => ({
     margin: theme.spacing(4)
   }),
@@ -6892,7 +6909,7 @@ const CarrierRecoveryForm = ({
     onSubmit: formLogger.capture(handleSubmit)
   }, {
     children: jsxRuntime.jsxs(giger.Grid, Object.assign({
-      css: styles$i.grid,
+      css: styles$j.grid,
       noPadding: true
     }, {
       children: [requiresAddress && jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -6900,14 +6917,14 @@ const CarrierRecoveryForm = ({
           colSpan: 12
         }, {
           children: jsxRuntime.jsx(giger.Typography, Object.assign({
-            css: styles$i.heading,
+            css: styles$j.heading,
             variant: "heading4"
           }, {
             children: t("register-wallet:sections.carriers.title")
           }))
         })), jsxRuntime.jsx(giger.GridChild, Object.assign({
           colSpan: 12,
-          css: styles$i.subtitle
+          css: styles$j.subtitle
         }, {
           children: jsxRuntime.jsx(giger.Typography, Object.assign({
             variant: "subtitle1"
@@ -6993,7 +7010,7 @@ const CarrierTermsForm = ({
     onSubmit(payload.agreement);
   }));
   return jsxRuntime.jsxs("div", Object.assign({
-    css: styles$k.termsForm,
+    css: styles$l.termsForm,
     "data-testid": "carrier-terms-form"
   }, {
     children: [jsxRuntime.jsx(giger.Typography, Object.assign({
@@ -7009,7 +7026,7 @@ const CarrierTermsForm = ({
     })), jsxRuntime.jsx(Spacer, {
       multiplier: 1
     }), jsxRuntime.jsx("div", Object.assign({
-      css: styles$k.carrierLogos
+      css: styles$l.carrierLogos
     }, {
       children: metadatas.map(({
         name,
@@ -7025,7 +7042,7 @@ const CarrierTermsForm = ({
         onSubmit: formLogger.capture(handleSubmit)
       }, {
         children: jsxRuntime.jsxs("div", Object.assign({
-          css: styles$k.agreement
+          css: styles$l.agreement
         }, {
           children: [jsxRuntime.jsx("div", {
             children: jsxRuntime.jsx(CheckboxInput, {
@@ -7052,12 +7069,12 @@ const CarrierTermsForm = ({
               name: "agreement"
             })
           }), showTerms && jsxRuntime.jsxs("div", Object.assign({
-            css: styles$k.well
+            css: styles$l.well
           }, {
             children: [terms.map(t => jsxRuntime.jsx(DisplayCarrierTerms, {
               carrierTerms: t
             }, t.title)), jsxRuntime.jsx("div", Object.assign({
-              css: styles$k.close
+              css: styles$l.close
             }, {
               children: jsxRuntime.jsx(giger.Button, Object.assign({
                 onClick: () => setShowTerms(false),
@@ -7310,7 +7327,8 @@ const icons = {
   add: gigerTheme.IconNames.ADD,
   checkFilled: gigerTheme.IconNames.CHECK_FILLED,
   copy: gigerTheme.IconNames.COPY,
-  download: gigerTheme.IconNames.DOWNLOAD
+  download: gigerTheme.IconNames.DOWNLOAD,
+  retry: gigerTheme.IconNames.CIRCULAR_ARROW
 };
 const LinkAction = _a => {
   var {
@@ -7318,11 +7336,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 jsxRuntime.jsx(giger.Link, Object.assign({}, props, {
-    bold: true,
+    bold: isBold,
     css: theme => [Object.assign(Object.assign({
       "&&&": {
         textDecoration: "none"
@@ -7376,7 +7395,7 @@ const CopyButton = ({
   }));
 };
 
-const styles$h = createStyles({
+const styles$i = createStyles({
   trackingNumber: theme => ({
     alignItems: "center",
     display: "flex"
@@ -7422,10 +7441,10 @@ const Label = ({
       shippingAmount: label.shipmentCost
     }, {
       children: label.trackingNumber && jsxRuntime.jsxs("div", Object.assign({
-        css: styles$h.trackingNumber
+        css: styles$i.trackingNumber
       }, {
         children: [jsxRuntime.jsx("div", Object.assign({
-          css: styles$h.truncatedTrackingNumber
+          css: styles$i.truncatedTrackingNumber
         }, {
           children: label.trackingNumber.toString()
         })), jsxRuntime.jsx(CopyButton, {
@@ -7537,7 +7556,7 @@ const LandingPageForm = ({
   }));
 };
 
-const styles$g = createStyles({
+const styles$h = createStyles({
   container: theme => ({
     padding: theme.spacing(2)
   }),
@@ -7559,11 +7578,11 @@ const LandingPage = ({
     t
   } = reactI18next.useTranslation();
   return jsxRuntime.jsxs("div", Object.assign({
-    css: styles$g.container,
+    css: styles$h.container,
     "data-testid": "landing-page"
   }, {
     children: [jsxRuntime.jsxs("div", Object.assign({
-      css: styles$g.header
+      css: styles$h.header
     }, {
       children: [jsxRuntime.jsx(giger.Typography, Object.assign({
         variant: "heading4"
@@ -7581,7 +7600,7 @@ const LandingPage = ({
     })), jsxRuntime.jsx(LandingPageForm, {
       onSubmit: onSubmit
     }), jsxRuntime.jsxs("div", Object.assign({
-      css: styles$g.header
+      css: styles$h.header
     }, {
       children: [jsxRuntime.jsx(Spacer, {
         multiplier: 6
@@ -7592,14 +7611,14 @@ const LandingPage = ({
       })), jsxRuntime.jsx(Spacer, {
         multiplier: 2
       }), jsxRuntime.jsx(giger.Typography, Object.assign({
-        css: styles$g.description,
+        css: styles$h.description,
         variant: "body1"
       }, {
         children: t("onboarding:landing.messageLine1")
       })), jsxRuntime.jsx(Spacer, {
         multiplier: 2
       }), jsxRuntime.jsx(giger.Typography, Object.assign({
-        css: styles$g.description,
+        css: styles$h.description,
         variant: "body1"
       }, {
         children: t("onboarding:landing.messageLine2")
@@ -7610,7 +7629,7 @@ const LandingPage = ({
   }));
 };
 
-const styles$f = createStyles({
+const styles$g = createStyles({
   icon: theme => ({
     color: theme.palette.primary.main,
     marginRight: theme.spacing(2)
@@ -7655,10 +7674,10 @@ const Section = _a => {
     rest = __rest(_a, ["bold", "title", "children", "rightContent"]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [title && jsxRuntime.jsx("summary", Object.assign({
-      css: styles$f.summary
+      css: styles$g.summary
     }, {
       children: jsxRuntime.jsxs("div", Object.assign({
-        css: styles$f.summaryWrapper
+        css: styles$g.summaryWrapper
       }, {
         children: [jsxRuntime.jsx(giger.Typography, Object.assign({
           bold: bold,
@@ -7666,20 +7685,20 @@ const Section = _a => {
         }, {
           children: title
         })), rightContent && jsxRuntime.jsx("div", Object.assign({
-          css: styles$f.rightContentWrapper
+          css: styles$g.rightContentWrapper
         }, {
           children: rightContent
         }))]
       }))
     })), jsxRuntime.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"
@@ -7739,14 +7758,14 @@ const ListCarriersRow = ({
     setIsSubmitting(false);
   });
   return jsxRuntime.jsxs("div", Object.assign({
-    css: styles$e.container,
+    css: styles$f.container,
     "data-testid": "carrier-row"
   }, {
     children: [jsxRuntime.jsxs("div", Object.assign({
-      css: styles$e.rowContainer
+      css: styles$f.rowContainer
     }, {
       children: [jsxRuntime.jsxs("div", Object.assign({
-        css: styles$e.logoContainer
+        css: styles$f.logoContainer
       }, {
         children: [jsxRuntime.jsx("div", {
           children: jsxRuntime.jsx("img", {
@@ -7764,7 +7783,7 @@ const ListCarriersRow = ({
         css: _ref
       }, {
         children: jsxRuntime.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* () {
@@ -7782,7 +7801,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}`
@@ -7835,7 +7854,7 @@ const ListCarriers = ({
         }))
       })), jsxRuntime.jsx(Spacer, {})]
     }), jsxRuntime.jsx("ul", Object.assign({
-      css: styles$d.carriersList,
+      css: styles$e.carriersList,
       "data-testid": "carriers-list"
     }, {
       children: isLoading ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -7857,11 +7876,11 @@ const ListCarriers = ({
 };
 const LoadingSkeletonRow = () => {
   return jsxRuntime.jsxs("div", Object.assign({
-    css: styles$d.skeletonRow,
+    css: styles$e.skeletonRow,
     "data-testid": "skeleton-carrier-row"
   }, {
     children: [jsxRuntime.jsxs("div", Object.assign({
-      css: styles$d.skeletonLogoContainer
+      css: styles$e.skeletonLogoContainer
     }, {
       children: [jsxRuntime.jsx(giger.Skeleton, {
         animation: giger.SkeletonAnimation.WAVE,
@@ -8168,7 +8187,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,
@@ -8219,14 +8238,14 @@ const SettingsCard = ({
   verticallyAligned
 }) => {
   return jsxRuntime.jsxs("div", Object.assign({
-    css: verticallyAligned ? styles$c.verticalContainer : styles$c.container,
+    css: verticallyAligned ? styles$d.verticalContainer : styles$d.container,
     "data-testid": "settingsCard"
   }, {
     children: [jsxRuntime.jsxs("div", Object.assign({
-      css: styles$c.header
+      css: styles$d.header
     }, {
       children: [jsxRuntime.jsxs("div", Object.assign({
-        css: styles$c.title
+        css: styles$d.title
       }, {
         children: [typeof title === "string" ? jsxRuntime.jsx(giger.Typography, Object.assign({
           variant: "subtitle2"
@@ -8261,7 +8280,7 @@ const SettingsCard = ({
         }))
       }))]
     })), children && jsxRuntime.jsx("div", Object.assign({
-      css: styles$c.body
+      css: styles$d.body
     }, {
       children: jsxRuntime.jsxs("div", {
         children: [children, accessoryAction && jsxRuntime.jsx(ButtonGroup, Object.assign({
@@ -8517,7 +8536,7 @@ const WarehouseForm = ({
   }));
 };
 
-const styles$b = createStyles({
+const styles$c = createStyles({
   cardSpacing: theme => ({
     display: "flex",
     flexDirection: "column",
@@ -8547,9 +8566,9 @@ const ManageWarehouses = ({
   const [showAddNewWarehouseForm, toggleShowAddNewWarehouseForm] = useToggle(false);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [showAddNewWarehouseForm ? jsxRuntime.jsx(AddressPreferenceProvider, Object.assign({
-      css: styles$b.well,
+      css: styles$c.well,
       formHeader: jsxRuntime.jsxs("div", Object.assign({
-        css: styles$b.header
+        css: styles$c.header
       }, {
         children: [jsxRuntime.jsx(giger.Typography, Object.assign({
           variant: "subtitle1"
@@ -8594,14 +8613,14 @@ const ManageWarehouses = ({
         })]
       }))
     })), jsxRuntime.jsx("div", Object.assign({
-      css: styles$b.cardSpacing
+      css: styles$c.cardSpacing
     }, {
       children: warehouses.map(warehouse => {
         if (editWarehouseId && editWarehouseId === warehouse.warehouseId) {
           return jsxRuntime.jsx(AddressPreferenceProvider, Object.assign({
-            css: styles$b.well,
+            css: styles$c.well,
             formHeader: jsxRuntime.jsxs("div", Object.assign({
-              css: styles$b.header
+              css: styles$c.header
             }, {
               children: [jsxRuntime.jsx(giger.Typography, Object.assign({
                 variant: "subtitle1"
@@ -9779,7 +9798,7 @@ const EditWalletAddressForm = ({
   }));
 };
 
-const styles$a = createStyles({
+const styles$b = createStyles({
   grid: theme => ({
     margin: theme.spacing(4)
   })
@@ -9841,7 +9860,7 @@ const WalletForm = ({
     onSubmit: formLogger.capture(handleSubmit)
   }, {
     children: jsxRuntime.jsxs(giger.Grid, Object.assign({
-      css: styles$a.grid,
+      css: styles$b.grid,
       noPadding: true
     }, {
       children: [jsxRuntime.jsx(giger.GridChild, Object.assign({
@@ -9923,7 +9942,7 @@ const WalletForm = ({
   }));
 };
 
-const styles$9 = createStyles({
+const styles$a = createStyles({
   container: theme => ({
     padding: theme.spacing(2)
   }),
@@ -10099,10 +10118,10 @@ const Onboarding = ({
       const defaultWarehouse = (_a = warehouses.find(w => w.isDefault)) !== null && _a !== void 0 ? _a : warehouses[0];
       return jsxRuntime.jsx(AddressPreferenceProvider, Object.assign({
         formHeader: jsxRuntime.jsxs("div", Object.assign({
-          css: styles$9.walletFormHeader
+          css: styles$a.walletFormHeader
         }, {
           children: [jsxRuntime.jsxs("div", Object.assign({
-            css: styles$9.walletFormTitle
+            css: styles$a.walletFormTitle
           }, {
             children: [jsxRuntime.jsx(giger.Typography, Object.assign({
               variant: "heading4"
@@ -10179,22 +10198,22 @@ const Onboarding = ({
     });
   };
   return jsxRuntime.jsxs("div", Object.assign({
-    css: styles$9.container
+    css: styles$a.container
   }, {
     children: [jsxRuntime.jsxs(giger.Stepper, Object.assign({
       currentStep: currentStep
     }, {
       children: [jsxRuntime.jsx(giger.Step, {
-        css: styles$9.step,
+        css: styles$a.step,
         label: t("onboarding:steps.login")
       }), jsxRuntime.jsx(giger.Step, {
-        css: styles$9.step,
+        css: styles$a.step,
         label: t("onboarding:steps.carriers")
       }), jsxRuntime.jsx(giger.Step, {
-        css: styles$9.step,
+        css: styles$a.step,
         label: t("onboarding:steps.addresses")
       }), jsxRuntime.jsx(giger.Step, {
-        css: styles$9.step,
+        css: styles$a.step,
         label: t("onboarding:steps.payment")
       })]
     })), renderStep()]
@@ -10328,7 +10347,7 @@ const Loader = props => {
   }));
 };
 
-const styles$8 = createStyles({
+const styles$9 = createStyles({
   chipList: theme => ({
     gap: theme.spacing(1)
   }),
@@ -10439,7 +10458,7 @@ const AddFundsForm = ({
       })), jsxRuntime.jsx(Spacer, {
         multiplier: 2
       }), jsxRuntime.jsx(giger.ChipList, Object.assign({
-        css: styles$8.chipList,
+        css: styles$9.chipList,
         onChange: idx => {
           const chip = chips[idx];
           setSelectedChip(chip);
@@ -10454,7 +10473,7 @@ const AddFundsForm = ({
         }
       }, {
         children: chips.map(chip => jsxRuntime.jsx(giger.Chip, Object.assign({
-          css: styles$8.getChip({
+          css: styles$9.getChip({
             isDisabled: chip.value < _minimumAmount,
             isSelected: chip.value === selectedChip.value
           }),
@@ -10471,7 +10490,7 @@ const AddFundsForm = ({
           multiplier: 1
         }), jsxRuntime.jsx(MoneyInput, {
           control: form.control,
-          css: styles$8.fundsInput,
+          css: styles$9.fundsInput,
           defaultValue: {
             amount: undefined,
             currency: alchemy.SE.Currency.USD
@@ -10524,7 +10543,7 @@ const AddFundsForm = ({
   });
 };
 
-const styles$7 = isLabelRight => createStyles({
+const styles$8 = isLabelRight => createStyles({
   inlineContainer: theme => ({
     alignItems: "center",
     display: "flex",
@@ -10539,14 +10558,14 @@ const InlineLabel = ({
   isLabelRight,
   labelProps: _labelProps = {}
 }) => jsxRuntime.jsxs("div", Object.assign({
-  css: styles$7(isLabelRight).inlineContainer
+  css: styles$8(isLabelRight).inlineContainer
 }, {
   children: [jsxRuntime.jsx(giger.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
   })
@@ -10569,7 +10588,7 @@ const CarrierBalance = ({
   }, {
     children: isLoadingCarrier || isRefetchingCarrier ? jsxRuntime.jsx(giger.Spinner, {}) : jsxRuntime.jsx(giger.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,
@@ -10591,7 +10610,7 @@ const Spread = ({
   children: children
 }));
 
-const styles$5 = createStyles({
+const styles$6 = createStyles({
   balanceText: theme => ({
     color: theme.palette.secondary.dark
   }),
@@ -10659,7 +10678,7 @@ const FundAndPurchase = ({
   }, {
     children: [jsxRuntime.jsx(giger.Button, Object.assign({
       bold: false,
-      css: styles$5.saveRateButton,
+      css: styles$6.saveRateButton,
       disabled: disabled || !carrierId || addFundsForm.isSubmitting || isRateFormSubmitting,
       isLoading: isSavingRate,
       onClick: handleSaveRate,
@@ -10679,7 +10698,7 @@ const FundAndPurchase = ({
   //         don't show balance or funding form
   if (!isFundingRequired) return jsxRuntime.jsx("div", Object.assign({
     className: className,
-    css: styles$5.container
+    css: styles$6.container
   }, {
     children: renderActionButtons()
   }));
@@ -10692,7 +10711,7 @@ const FundAndPurchase = ({
   //         show balance, but not the funding form.
   if (!isFundingEnabled) return jsxRuntime.jsxs("div", Object.assign({
     className: className,
-    css: styles$5.container
+    css: styles$6.container
   }, {
     children: [jsxRuntime.jsx(CarrierBalance, {
       carrierId: carrierId
@@ -10704,7 +10723,7 @@ const FundAndPurchase = ({
   //         show balance and funding form
   return jsxRuntime.jsxs("div", Object.assign({
     className: className,
-    css: styles$5.container
+    css: styles$6.container
   }, {
     children: [jsxRuntime.jsxs(Spread, {
       children: [jsxRuntime.jsx(CarrierBalance, {
@@ -10735,13 +10754,13 @@ const FundAndPurchase = ({
         var _a, _b;
         return jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsxs("section", Object.assign({
-            css: styles$5.getFormExtension(addFundsForm.isCustomAmount)
+            css: styles$6.getFormExtension(addFundsForm.isCustomAmount)
           }, {
             children: [jsxRuntime.jsx(InlineLabel, Object.assign({
               label: t("manage-funding:fundAndPurchase.newBalance")
             }, {
               children: jsxRuntime.jsx(giger.Typography, Object.assign({
-                css: styles$5.balanceText
+                css: styles$6.balanceText
               }, {
                 children: formatMoney({
                   amount: balance + ((_a = addFundsForm.selectedAmount) !== null && _a !== void 0 ? _a : 0),
@@ -10752,7 +10771,7 @@ const FundAndPurchase = ({
               label: t("manage-funding:fundAndPurchase.finalBalance")
             }, {
               children: jsxRuntime.jsx(giger.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,
@@ -10779,6 +10798,274 @@ const FundAndPurchase = ({
   }));
 };
 
+const LabelLayoutPurchase = ({
+  onChange
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "manage-defaults"]);
+  const [layout, setLayout] = React.useState("4x6");
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+      title: t("manage-defaults:label.purchase.title"),
+      type: giger.NotificationType.INFO
+    }, {
+      children: t("manage-defaults:label.purchase.description")
+    })), jsxRuntime.jsx(Spacer, {
+      multiplier: 1.5
+    }), jsxRuntime.jsxs(giger.RadioGroup, Object.assign({
+      name: "labelLayout",
+      onChange: e => {
+        setLayout(e.target.value);
+        onChange(e.target.value);
+      },
+      value: layout
+    }, {
+      children: [jsxRuntime.jsx(giger.Radio, Object.assign({
+        value: "Letter"
+      }, {
+        children: jsxRuntime.jsx(giger.Typography, Object.assign({
+          bold: true
+        }, {
+          children: t("manage-defaults:label.letter.title")
+        }))
+      })), jsxRuntime.jsx(Spacer, {
+        multiplier: 3
+      }), jsxRuntime.jsx(giger.Radio, Object.assign({
+        value: "4x6"
+      }, {
+        children: jsxRuntime.jsx(giger.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
+  } = reactI18next.useTranslation(["common", "manage-defaults"]);
+  const {
+    data: accountSettings
+  } = alchemy.useGetAccountSettings();
+  const labelLayout = (_a = accountSettings === null || accountSettings === void 0 ? void 0 : accountSettings.defaultLabelLayout) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+  return jsxRuntime.jsx(Section, Object.assign({
+    bold: true,
+    title: t("manage-defaults:label.title")
+  }, {
+    children: jsxRuntime.jsxs("div", Object.assign({
+      css: styles$5.buttonContainer
+    }, {
+      children: [jsxRuntime.jsx("button", Object.assign({
+        css: styles$5.button,
+        id: "letter",
+        onClick: () => {
+          onChange("Letter");
+        },
+        value: "letter"
+      }, {
+        children: jsxRuntime.jsxs("div", Object.assign({
+          css: labelLayout === "letter" ? styles$5.selectedLetter : styles$5.letter
+        }, {
+          children: [labelLayout === "letter" && jsxRuntime.jsx(giger.Icon, {
+            css: styles$5.icon,
+            name: brands.IconNames.CHECK_FILLED
+          }), jsxRuntime.jsx("div", Object.assign({
+            css: styles$5.letterInner
+          }, {
+            children: jsxRuntime.jsx("div", {
+              css: styles$5.letterLabel
+            })
+          })), jsxRuntime.jsx(giger.Typography, {
+            children: t("manage-defaults:label.letter.title")
+          }), jsxRuntime.jsx(Spacer, {
+            multiplier: 0.5
+          }), jsxRuntime.jsx(giger.Typography, Object.assign({
+            css: {
+              color: "#6C757D"
+            }
+          }, {
+            children: t("manage-defaults:label.letter.description")
+          }))]
+        }))
+      })), jsxRuntime.jsx("button", Object.assign({
+        css: styles$5.button,
+        id: "4x6",
+        onClick: e => {
+          onChange(e.currentTarget.value);
+        },
+        value: "4x6"
+      }, {
+        children: jsxRuntime.jsxs("div", Object.assign({
+          css: labelLayout === "4x6" ? styles$5.selectedThermal : styles$5.thermal
+        }, {
+          children: [labelLayout === "4x6" && jsxRuntime.jsx(giger.Icon, {
+            css: styles$5.icon,
+            name: brands.IconNames.CHECK_FILLED
+          }), jsxRuntime.jsx("div", Object.assign({
+            css: styles$5.thermalInner
+          }, {
+            children: jsxRuntime.jsx("div", {
+              css: styles$5.thermalLabel
+            })
+          })), jsxRuntime.jsx(giger.Typography, {
+            children: t("manage-defaults:label.thermal.title")
+          }), jsxRuntime.jsx(Spacer, {
+            multiplier: 0.5
+          }), jsxRuntime.jsx(giger.Typography, Object.assign({
+            css: {
+              color: "#6C757D"
+            }
+          }, {
+            children: t("manage-defaults:label.thermal.description")
+          }))]
+        }))
+      }))]
+    }))
+  }));
+};
+
+const LabelLayout = ({
+  display
+}) => {
+  const {
+    mutateAsync: updateAccountSettings
+  } = alchemy.useUpdateAccountSettings();
+  const {
+    refetch: refreshAccountSettings
+  } = alchemy.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 jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [display === "settings" && jsxRuntime.jsx(LabelLayoutSettings, {
+      onChange: handleSubmitUpdateAccountSettings
+    }), display === "purchase" && jsxRuntime.jsx(LabelLayoutPurchase, {
+      onChange: handleSubmitUpdateAccountSettings
+    })]
+  });
+};
+
 const styles$4 = createStyles({
   fundAndPurchase: theme => ({
     borderTop: `1px solid ${theme.palette.gray.ultraLight}`
@@ -10811,6 +11098,8 @@ const RateForm = ({
   displayableLabelErrors,
   features,
   labelErrors,
+  labels,
+  labelsLoading,
   isLoading,
   onSave,
   onSelectRate,
@@ -10961,6 +11250,12 @@ const RateForm = ({
           children: [displayableErrors, outOfBandDisplayableErrors, displayableLabelErrors]
         })
       }))]
+    })), !labelsLoading && !(labels === null || labels === void 0 ? void 0 : labels.length) && jsxRuntime.jsx(Section, Object.assign({
+      title: t("manage-defaults:label.title")
+    }, {
+      children: jsxRuntime.jsx(LabelLayout, {
+        display: "purchase"
+      })
     })), jsxRuntime.jsx(FundAndPurchase, {
       carrierId: selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.carrierId,
       control: form.control,
@@ -12650,7 +12945,7 @@ var index = /*#__PURE__*/Object.freeze({
 	WarehouseForm: WarehouseForm,
 	VoidLabel: VoidLabel,
 	WalletForm: WalletForm,
-	styles: styles$a,
+	styles: styles$b,
 	billingAddressSchema: billingAddressSchema,
 	walletSchema: walletSchema,
 	BillingFields: BillingFields,
@@ -13197,6 +13492,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",
@@ -13225,6 +13521,7 @@ var common = {
 		thirdParty: "Third Party"
 	},
 	loading: {
+		accountSettings: "Loading account settings...",
 		carrier: "Loading carrier...",
 		carriers: "Loading carriers...",
 		data: "Loading...",
@@ -13538,7 +13835,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: {
@@ -14148,7 +14446,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."
@@ -14188,7 +14486,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,
@@ -14197,10 +14495,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
 };
 
@@ -14234,16 +14547,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 = React.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 = React.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,
@@ -14302,6 +14623,10 @@ const useRatesForm = ({
   const {
     data: carriers
   } = alchemy.useListCarriers();
+  const {
+    data: labels,
+    isLoading: labelsLoading
+  } = alchemy.useListLabels();
   const {
     mutateAsync: updateShipment
   } = alchemy.useUpdateSalesOrderShipment();
@@ -14402,6 +14727,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,