@layerfi/components 0.1.121-alpha → 0.1.121-alpha.1

package/dist/cjs/index.cjs

@@ -208,7 +208,7 @@ class ErrorHandlerClass {
 }
 const errorHandler = new ErrorHandlerClass();
 const reportError = (payload) => errorHandler.onError(payload);
-const version = "0.1.121-alpha";
+const version = "0.1.121-alpha.1";
 const pkg = {
   version
 };
@@ -6429,7 +6429,7 @@ function BulkSelectionStoreProvider({
   const [store] = React.useState(() => buildStore());
   return /* @__PURE__ */ jsxRuntime.jsx(BulkSelectionStoreContext.Provider, { value: store, children });
 }
-const CLASS_NAME$c = "Layer__Stack";
+const CLASS_NAME$d = "Layer__Stack";
 const Stack = React.forwardRef(
   function Stack2(_H, ref) {
     var _I = _H, {
@@ -6482,7 +6482,7 @@ const Stack = React.forwardRef(
       __spreadProps(__spreadValues(__spreadValues({
         ref
       }, restProps), dataProperties), {
-        className: classNames(CLASS_NAME$c, className),
+        className: classNames(CLASS_NAME$d, className),
         children
       })
     );
@@ -6927,9 +6927,9 @@ const Toggle = ({
     })
   );
 };
-const CLASS_NAME$b = "Layer__LoadingSpinner";
+const CLASS_NAME$c = "Layer__LoadingSpinner";
 function LoadingSpinner({ size }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { className: CLASS_NAME$b, size });
+  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { className: CLASS_NAME$c, size });
 }
 function withRenderProp(renderProp, callback) {
   if (typeof renderProp === "function") {
@@ -9656,7 +9656,7 @@ const centsToDollars = (cents = NaN) => isNaN(cents) ? "-.--" : formatter.format
 function centsToDollarsWithoutCommas(cents = 0) {
   return centsToDollars(cents).replaceAll(",", "");
 }
-const CLASS_NAME$a = "Layer__MoneySpan";
+const CLASS_NAME$b = "Layer__MoneySpan";
 const MoneySpan = React.forwardRef(
   (_na, ref) => {
     var _oa = _na, { amount, displayPlusSign, className } = _oa, restProps = __objRest(_oa, ["amount", "displayPlusSign", "className"]);
@@ -9665,7 +9665,7 @@ const MoneySpan = React.forwardRef(
       "negative": amount < 0,
       "display-plus-sign": displayPlusSign
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(Span, __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: classNames(CLASS_NAME$a, className), ref, children: centsToDollars(Math.abs(amount)) }));
+    return /* @__PURE__ */ jsxRuntime.jsx(Span, __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: classNames(CLASS_NAME$b, className), ref, children: centsToDollars(Math.abs(amount)) }));
   }
 );
 MoneySpan.displayName = "MoneySpan";
@@ -10253,7 +10253,7 @@ const InputGroup$1 = React.forwardRef(
     );
   }
 );
-const CLASS_NAME$9 = "Layer__MinimalSearchField";
+const CLASS_NAME$a = "Layer__MinimalSearchField";
 function MinimalSearchField(_va) {
   var _wa = _va, {
     placeholder,
@@ -10262,7 +10262,7 @@ function MinimalSearchField(_va) {
     "placeholder",
     "isDisabled"
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.SearchField, __spreadProps(__spreadValues({}, restProps), { isDisabled, className: CLASS_NAME$9, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.SearchField, __spreadProps(__spreadValues({}, restProps), { isDisabled, className: CLASS_NAME$a, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Input,
       {
@@ -10273,10 +10273,10 @@ function MinimalSearchField(_va) {
     /* @__PURE__ */ jsxRuntime.jsx(Button, { slot: "clear-button", inset: true, icon: true, variant: "ghost", "aria-label": "Clear search", children: /* @__PURE__ */ jsxRuntime.jsx(X, {}) })
   ] }));
 }
-const CLASS_NAME$8 = "Layer__SearchField";
+const CLASS_NAME$9 = "Layer__SearchField";
 function SearchField(_xa) {
   var _ya = _xa, { slot = "search", className, label, isDisabled } = _ya, restProps = __objRest(_ya, ["slot", "className", "label", "isDisabled"]);
-  const combinedClassName = classNames(CLASS_NAME$8, className);
+  const combinedClassName = classNames(CLASS_NAME$9, className);
   return /* @__PURE__ */ jsxRuntime.jsxs(InputGroup$1, { slot, className: combinedClassName, children: [
     /* @__PURE__ */ jsxRuntime.jsx(VStack, { slot: "icon", align: "center", justify: "center", className: "Layer__SearchField__Icon", "data-disabled": isDisabled || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 14 }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -11736,7 +11736,7 @@ function FormBigDecimalField(_Ja) {
     (slots == null ? void 0 : slots.badge) && /* @__PURE__ */ jsxRuntime.jsx(HStack, { children: slots.badge })
   ] }) }));
 }
-const CLASS_NAME$7 = "Layer__Checkbox";
+const CLASS_NAME$8 = "Layer__Checkbox";
 const CHECK_SIZE = {
   sm: 12,
   md: 14,
@@ -11753,7 +11753,7 @@ function Checkbox(_La) {
     reactAriaComponents.Checkbox,
     __spreadProps(__spreadValues(__spreadValues({}, dataProperties), props), {
       isIndeterminate,
-      className: classNames(CLASS_NAME$7, className),
+      className: classNames(CLASS_NAME$8, className),
       children: withRenderProp(children, (node) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "checkbox", children: isIndeterminate ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { size: CHECK_SIZE[size] }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: CHECK_SIZE[size] }) }),
         node
@@ -11998,25 +11998,17 @@ function RadioGroup(_Xa) {
   var _Ya = _Xa, {
     children,
     className,
-    orientation = "vertical",
-    onChange,
-    ref
-  } = _Ya, props = __objRest(_Ya, [
+    onChange
+  } = _Ya, restProps = __objRest(_Ya, [
     "children",
     "className",
-    "orientation",
-    "onChange",
-    "ref"
+    "onChange"
   ]);
-  const dataProperties = React.useMemo(() => toDataProperties({
-    orientation
-  }), [orientation]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.RadioGroup,
-    __spreadProps(__spreadValues(__spreadValues({}, dataProperties), props), {
+    __spreadProps(__spreadValues({}, restProps), {
       onChange,
       className: classNames(RADIO_GROUP_CLASS_NAME, className),
-      ref,
       children
     })
   );
@@ -12025,13 +12017,11 @@ function Radio(_Za) {
   var __a = _Za, {
     children,
     className,
-    size = "sm",
-    ref
-  } = __a, props = __objRest(__a, [
+    size = "sm"
+  } = __a, restProps = __objRest(__a, [
     "children",
     "className",
-    "size",
-    "ref"
+    "size"
   ]);
   const dataProperties = React.useMemo(() => toDataProperties({
     size,
@@ -12039,9 +12029,8 @@ function Radio(_Za) {
   }), [children, size]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Radio,
-    __spreadProps(__spreadValues(__spreadValues({}, dataProperties), props), {
+    __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
       className: classNames(RADIO_CLASS_NAME, className),
-      ref,
       children: withRenderProp(children, (node) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "radio", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { size: INDICATOR_SIZE[size] }) }),
         node
@@ -12065,14 +12054,15 @@ function FormRadioGroupField({
   const { meta, value } = state;
   const { errors, isValid } = meta;
   const errorMessage = errors.length !== 0 ? errors[0] : void 0;
-  const additionalAriaProps = !showLabel && { "aria-label": label };
+  const labelId = React.useId();
+  const additionalAriaProps = showLabel ? { "aria-labelledby": labelId } : { "aria-label": label };
   const radioGroupClassNames = classNames(
     FORM_RADIO_GROUP_FIELD_CLASSNAME$1,
     inline && `${FORM_RADIO_GROUP_FIELD_CLASSNAME$1}--inline`,
     className
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: radioGroupClassNames, children: [
-    showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { slot: "label", size: "sm", htmlFor: name, children: label }),
+    showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { slot: "label", size: "sm", id: labelId, children: label }),
     /* @__PURE__ */ jsxRuntime.jsx(
       RadioGroup,
       __spreadProps(__spreadValues({
@@ -12106,7 +12096,8 @@ function FormRadioGroupYesNoField({
   const { meta, value } = state;
   const { errors, isValid } = meta;
   const errorMessage = errors.length !== 0 ? errors[0] : void 0;
-  const additionalAriaProps = !showLabel && { "aria-label": label };
+  const labelId = React.useId();
+  const additionalAriaProps = showLabel ? { "aria-labelledby": labelId } : { "aria-label": label };
   const radioGroupClassNames = classNames(
     FORM_RADIO_GROUP_FIELD_CLASSNAME,
     inline && `${FORM_RADIO_GROUP_FIELD_CLASSNAME}--inline`,
@@ -12117,7 +12108,7 @@ function FormRadioGroupYesNoField({
     handleChange(newValue === "yes");
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: radioGroupClassNames, children: [
-    showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { slot: "label", size: "sm", htmlFor: name, children: label }),
+    showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { slot: "label", size: "sm", id: labelId, children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       RadioGroup,
       __spreadProps(__spreadValues({
@@ -13290,9 +13281,9 @@ const BankTransactionsHeaderMenu = ({ actions, isDisabled }) => {
     isModalOpen && /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsUploadModal, { isOpen: true, onOpenChange: setIsModalOpen })
   ] });
 };
-const CLASS_NAME$6 = "Layer__BankTransactionsActions";
+const CLASS_NAME$7 = "Layer__BankTransactionsActions";
 function BankTransactionsActions({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: CLASS_NAME$6, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: CLASS_NAME$7, children });
 }
 const BulkActionsModule = ({ showSelectedLabel = true, fullWidth = false, slots }) => {
   const { count } = useCountSelectedIds();
@@ -13697,7 +13688,7 @@ function useInvisibleDownload() {
   }, []);
   return { invisibleDownloadRef, triggerInvisibleDownload };
 }
-const CLASS_NAME$5 = "Layer__InvisibleDownload";
+const CLASS_NAME$6 = "Layer__InvisibleDownload";
 const InvisibleDownload = React.forwardRef((_props, ref) => {
   const internalRef = React.useRef(null);
   React.useImperativeHandle(ref, () => ({
@@ -13716,7 +13707,7 @@ const InvisibleDownload = React.forwardRef((_props, ref) => {
   const handleContainClick = React.useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx("a", { download: true, className: CLASS_NAME$5, ref: internalRef, onClick: handleContainClick });
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { download: true, className: CLASS_NAME$6, ref: internalRef, onClick: handleContainClick });
 });
 InvisibleDownload.displayName = "InvisibleDownload";
 function TransactionsSearch({ slot, isDisabled }) {
@@ -21878,10 +21869,10 @@ const InstitutionIcon = (_qc) => {
     })
   );
 };
-const CLASS_NAME$4 = "Layer__BasicLinkedAccountContainer";
+const CLASS_NAME$5 = "Layer__BasicLinkedAccountContainer";
 function BasicLinkedAccountContainer({ children, isSelected }) {
   const dataProperties = toDataProperties({ selected: isSelected });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, dataProperties), { className: CLASS_NAME$4, children }));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, dataProperties), { className: CLASS_NAME$5, children }));
 }
 function BasicLinkedAccountLogo({ account }) {
   var _a, _b, _c;
@@ -22755,7 +22746,7 @@ const useDatePickerState = ({ date: date2, setDate, minDate = null, maxDate = nu
     maxDateZdt
   }), [errorText, isInvalid, localDate, onBlur, onChange, maxDateZdt, minDateZdt]);
 };
-const CLASS_NAME$3 = "Layer__caobfb";
+const CLASS_NAME$4 = "Layer__caobfb";
 const AccountFormBox = ({
   account,
   value,
@@ -22788,8 +22779,8 @@ const AccountFormBox = ({
       onChange(__spreadProps(__spreadValues({}, value), { isDateInvalid }));
     }
   }, [isDateInvalid, onChange, value]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", __spreadProps(__spreadValues({}, dataProps), { className: CLASS_NAME$3, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${CLASS_NAME$3}__icon-col`, children: ((_a = account.institution) == null ? void 0 : _a.logo) != void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", __spreadProps(__spreadValues({}, dataProps), { className: CLASS_NAME$4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${CLASS_NAME$4}__icon-col`, children: ((_a = account.institution) == null ? void 0 : _a.logo) != void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
         width: 32,
@@ -22798,13 +22789,13 @@ const AccountFormBox = ({
         alt: ((_b = account.institution) == null ? void 0 : _b.name) ? (_c = account.institution) == null ? void 0 : _c.name : account.external_account_name
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(InstitutionIcon, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${CLASS_NAME$3}__details-col`, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${CLASS_NAME$3}__details-col__details`, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${CLASS_NAME$3}__details-col__name`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${CLASS_NAME$4}__details-col`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${CLASS_NAME$4}__details-col__details`, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${CLASS_NAME$4}__details-col__name`, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Text,
             {
-              className: `${CLASS_NAME$3}__details-col__name__institution-name`,
+              className: `${CLASS_NAME$4}__details-col__name__institution-name`,
               size: TextSize.sm,
               children: (_d = account.institution) == null ? void 0 : _d.name
             }
@@ -22812,7 +22803,7 @@ const AccountFormBox = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             Text,
             {
-              className: `${CLASS_NAME$3}__details-col__name__account-name`,
+              className: `${CLASS_NAME$4}__details-col__name__account-name`,
               size: TextSize.sm,
               children: account.external_account_name
             }
@@ -22823,7 +22814,7 @@ const AccountFormBox = ({
           account.mask
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${CLASS_NAME$3}__details-col__inputs`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${CLASS_NAME$4}__details-col__inputs`, children: [
         /* @__PURE__ */ jsxRuntime.jsx(InputGroup, { label: "Opening date", children: /* @__PURE__ */ jsxRuntime.jsx(
           DatePicker,
           {
@@ -22852,7 +22843,7 @@ const AccountFormBox = ({
       ] }),
       errors.includes("API_ERROR") && /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: "An error occurred while saving data. You will have an opportunity to try again later." })
     ] }),
-    !disableConfirmExclude && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${CLASS_NAME$3}__confirm-col`, children: /* @__PURE__ */ jsxRuntime.jsx(
+    !disableConfirmExclude && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${CLASS_NAME$4}__confirm-col`, children: /* @__PURE__ */ jsxRuntime.jsx(
       Checkbox,
       {
         size: "lg",
@@ -22861,7 +22852,7 @@ const AccountFormBox = ({
         "aria-label": "Confirm Account Inclusion"
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${CLASS_NAME$3}__success-banner`, children: /* @__PURE__ */ jsxRuntime.jsx(CheckCircle, { size: 36 }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${CLASS_NAME$4}__success-banner`, children: /* @__PURE__ */ jsxRuntime.jsx(CheckCircle, { size: 36 }) })
   ] }));
 };
 function buildKey$I({
@@ -27263,7 +27254,7 @@ function ProfitAndLossSummariesSummary({
     ] })
   ] });
 }
-const CLASS_NAME$2 = "Layer__TransactionsToReview";
+const CLASS_NAME$3 = "Layer__TransactionsToReview";
 function TransactionsToReview({
   onClick,
   tagFilter = void 0,
@@ -27339,7 +27330,7 @@ function TransactionsToReview({
       verticalGap = "sm";
       break;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { onClick, className: CLASS_NAME$2, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { onClick, className: CLASS_NAME$3, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: verticalGap, align: "start", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossSummariesHeading, { variants: variants2, children: "Transactions to review" }),
       transactionsToReviewBadge
@@ -32402,9 +32393,9 @@ const JournalTableView = ({
     }
   ) });
 };
-const CLASS_NAME$1 = "Layer__TasksEmptyContainer";
+const CLASS_NAME$2 = "Layer__TasksEmptyContainer";
 function TasksEmptyContainer({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: CLASS_NAME$1, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: CLASS_NAME$2, children });
 }
 const TasksHeader = ({
   tasksHeader = "Bookkeeping Tasks"
@@ -42904,11 +42895,11 @@ const CallBooking = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Container, { name: "call-booking", children: callBooking ? /* @__PURE__ */ jsxRuntime.jsx(ScheduledCallState, { callBooking }) : /* @__PURE__ */ jsxRuntime.jsx(EmptyState$1, { onBookCall }) });
 };
-const CLASS_NAME = "Layer__BookkeepingProfitAndLossSummariesContainer";
+const CLASS_NAME$1 = "Layer__BookkeepingProfitAndLossSummariesContainer";
 function BookkeepingProfitAndLossSummariesContainer({
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: CLASS_NAME, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: CLASS_NAME$1, children });
 }
 const TASKS_MOBILE_VIEWPORT_WIDTH = 1100;
 const useKeepInMobileViewport = () => {
@@ -43727,28 +43718,29 @@ var TripPurposeFilterValue = ((TripPurposeFilterValue2) => {
   TripPurposeFilterValue2[TripPurposeFilterValue2["Personal"] = TripPurpose.Personal] = "Personal";
   return TripPurposeFilterValue2;
 })(TripPurposeFilterValue || {});
+const TRIP_PURPOSE_OPTIONS = [
+  {
+    label: "All",
+    value: "ALL"
+    /* All */
+  },
+  { label: "Business", value: TripPurposeFilterValue.Business },
+  { label: "Personal", value: TripPurposeFilterValue.Personal }
+];
 const TripPurposeToggle = ({
   selected,
   onChange,
-  size = ToggleSize.small
+  fullWidth
 }) => {
-  const options2 = React.useMemo(() => [
-    {
-      label: "All",
-      value: "ALL"
-      /* All */
-    },
-    { label: "Business", value: TripPurposeFilterValue.Business },
-    { label: "Personal", value: TripPurposeFilterValue.Personal }
-  ], []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Toggle,
     {
       ariaLabel: "Trip purpose",
-      options: options2,
+      options: TRIP_PURPOSE_OPTIONS,
       selectedKey: selected,
       onSelectionChange: (key) => onChange(key),
-      size
+      size: ToggleSize.small,
+      fullWidth
     }
   );
 };
@@ -43863,16 +43855,18 @@ function useAutoResetPageIndex(filters, data) {
   }, [data]);
   return autoResetPageIndexRef;
 }
+const CLASS_NAME = "Layer__UI__ResponsiveComponent";
 const ResponsiveComponent = ({
   slots,
-  resolveVariant: resolveVariant2
+  resolveVariant: resolveVariant2,
+  className
 }) => {
   const [currentVariant, setCurrentVariant] = React.useState(null);
   const handleResize = React.useCallback((size) => {
     setCurrentVariant(resolveVariant2({ width: size.width }));
   }, [resolveVariant2]);
   const containerRef = useElementSize(handleResize);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "Layer__ResponsiveComponent", children: currentVariant !== null && slots[currentVariant] });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: classNames(CLASS_NAME, className), children: currentVariant !== null && slots[currentVariant] });
 };
 const LIST_TRIPS_TAG_KEY = "#list-trips";
 const ListTripsResponseSchema = effect.Schema.Struct({
@@ -44846,6 +44840,64 @@ const TripsAddressCell = ({ trip }) => {
     ] })
   ] });
 };
+const TripsTableHeaderMenu = () => {
+  const { toVehicleManagement } = useTripsNavigation();
+  const menuItems = React.useMemo(() => [
+    {
+      key: "ManageVehicles",
+      onClick: toVehicleManagement,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Car, { size: 20, strokeWidth: 1.25 }),
+      label: "Manage vehicles"
+    }
+  ], [toVehicleManagement]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DataTableHeaderMenu,
+    {
+      ariaLabel: "Additional trips actions",
+      items: menuItems
+    }
+  );
+};
+const TripsMobileHeader = ({ onRecordTrip }) => {
+  const { tableFilters, setTableFilters } = useTripsTableFilters();
+  const { query, purposeFilter } = tableFilters;
+  const { inputValue, searchQuery, handleInputChange } = useDebouncedSearchInput({ initialInputState: query });
+  React.useEffect(() => {
+    setTableFilters({ query: searchQuery });
+  }, [searchQuery, setTableFilters]);
+  const handlePurposeFilterChange = React.useCallback((newPurposeFilter) => {
+    setTableFilters({ purposeFilter: newPurposeFilter });
+  }, [setTableFilters]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Header$2, { className: "Layer__TripsMobileHeader", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Heading, { size: HeadingSize.secondary, align: "left", children: "Trips" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", gap: "xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TripPurposeToggle,
+        {
+          selected: purposeFilter,
+          onChange: handlePurposeFilterChange,
+          fullWidth: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(TripsTableHeaderMenu, {})
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", pbe: "md", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SearchField,
+        {
+          label: "Search trips",
+          value: inputValue,
+          onChange: handleInputChange,
+          className: "Layer__TripsMobileHeader__SearchField"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { onPress: onRecordTrip, children: [
+        "Record Trip",
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 16 })
+      ] })
+    ] })
+  ] }) });
+};
 const TripsMobileListItem = ({ trip }) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", gap: "sm", className: "Layer__TripsMobileListItem", children: [
   /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", className: "Layer__TripsMobileListItem__LeftContent", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Span, { weight: "bold", children: formatCalendarDate(trip.tripDate) }),
@@ -44861,41 +44913,27 @@ const TripsMobileList = ({
   isLoading,
   isError,
   onViewOrUpsertTrip,
+  onRecordTrip,
   paginationProps,
   slots
 }) => {
   const renderItem = React.useCallback((trip) => /* @__PURE__ */ jsxRuntime.jsx(TripsMobileListItem, { trip }), []);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__TripsMobileList", children: /* @__PURE__ */ jsxRuntime.jsx(
-    PaginatedMobileList,
-    {
-      ariaLabel: "Trips",
-      data,
-      isLoading,
-      isError,
-      renderItem,
-      paginationProps,
-      onClickItem: onViewOrUpsertTrip,
-      slots
-    }
-  ) });
-};
-const TripsTableHeaderMenu = () => {
-  const { toVehicleManagement } = useTripsNavigation();
-  const menuItems = React.useMemo(() => [
-    {
-      key: "ManageVehicles",
-      onClick: toVehicleManagement,
-      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Car, { size: 20, strokeWidth: 1.25 }),
-      label: "Manage vehicles"
-    }
-  ], [toVehicleManagement]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DataTableHeaderMenu,
-    {
-      ariaLabel: "Additional trips actions",
-      items: menuItems
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__TripsMobileList", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TripsMobileHeader, { onRecordTrip }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PaginatedMobileList,
+      {
+        ariaLabel: "Trips",
+        data,
+        isLoading,
+        isError,
+        renderItem,
+        paginationProps,
+        onClickItem: onViewOrUpsertTrip,
+        slots
+      }
+    )
+  ] });
 };
 const TripsTableHeader = ({ onRecordTrip }) => {
   const { tableFilters, setTableFilters } = useTripsTableFilters();
@@ -45093,6 +45131,7 @@ const ResponsiveTripsView = () => {
       }
     }
   ), [trips, isLoading, isError, paginationProps, onViewOrUpsertTrip, onDeleteTrip]);
+  const onRecordTrip = React.useCallback(() => onViewOrUpsertTrip(null), [onViewOrUpsertTrip]);
   const MobileView = React.useMemo(() => /* @__PURE__ */ jsxRuntime.jsx(
     TripsMobileList,
     {
@@ -45101,12 +45140,13 @@ const ResponsiveTripsView = () => {
       isError,
       paginationProps,
       onViewOrUpsertTrip,
+      onRecordTrip,
       slots: {
         EmptyState: TripsViewEmptyState,
         ErrorState: TripsViewErrorState
       }
     }
-  ), [trips, isLoading, isError, onViewOrUpsertTrip, paginationProps]);
+  ), [trips, isLoading, isError, onViewOrUpsertTrip, onRecordTrip, paginationProps]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ResponsiveComponent, { resolveVariant, slots: { Desktop: DesktopView, Mobile: MobileView } }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -45861,24 +45901,40 @@ const VehicleManagementGrid = ({ onEditVehicle, showArchived }) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(HStack, { className: "Layer__VehicleManagementGrid", children: vehicles.map((vehicle) => /* @__PURE__ */ jsxRuntime.jsx(VehicleCard, { vehicle, onEdit: onEditVehicle }, vehicle.id)) });
 };
-const VehicleManagementDetailHeader = ({ onAddVehicle, showArchived, onShowArchivedChange }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", align: "center", fluid: true, pie: "md", gap: "3xl", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Heading$1, { size: "sm", children: "Manage vehicles" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Switch, { isSelected: showArchived, onChange: onShowArchivedChange, children: /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", noWrap: true, children: "Show archived" }) })
-    ] }),
+const MobileVehicleManagementDetailHeader = ({
+  onAddVehicle
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", align: "center", fluid: true, pie: "md", pb: "md", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Heading$1, { size: "sm", children: "Manage vehicles" }),
     /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "solid", onPress: onAddVehicle, children: [
       "Add Vehicle",
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 14 })
     ] })
   ] });
 };
+const DesktopVehicleManagementDetailHeader = ({
+  onAddVehicle,
+  showArchived,
+  onShowArchivedChange
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", align: "center", fluid: true, pie: "md", gap: "3xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Heading$1, { size: "sm", children: "Manage vehicles" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Switch, { isSelected: showArchived, onChange: onShowArchivedChange, children: /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", noWrap: true, children: "Show archived" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "solid", onPress: onAddVehicle, children: [
+        "Add Vehicle",
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 14 })
+      ] })
+    ] })
+  ] });
+};
 const VehicleManagementDetail = () => {
   const { toTripsTable } = useTripsNavigation();
   const [isVehicleDrawerOpen, setIsVehicleDrawerOpen] = React.useState(false);
   const [selectedVehicle, setSelectedVehicle] = React.useState(void 0);
   const [showArchived, setShowArchived] = React.useState(false);
-  const { isMobile } = useSizeClass();
+  const { isDesktop } = useSizeClass();
+  const isMobileVariant = !isDesktop;
   const handleAddVehicle = React.useCallback(() => {
     setSelectedVehicle(void 0);
     setIsVehicleDrawerOpen(true);
@@ -45891,40 +45947,85 @@ const VehicleManagementDetail = () => {
     setIsVehicleDrawerOpen(false);
     setSelectedVehicle(void 0);
   }, []);
-  const stateRef = React.useRef({ showArchived, setShowArchived, handleAddVehicle });
-  stateRef.current = { showArchived, setShowArchived, handleAddVehicle };
+  const resolveVariant2 = () => isMobileVariant ? "Mobile" : "Desktop";
+  const stateRef = React.useRef({ showArchived, setShowArchived, handleAddVehicle, resolveVariant: resolveVariant2 });
+  stateRef.current = { showArchived, setShowArchived, handleAddVehicle, resolveVariant: resolveVariant2 };
   const HeaderRef = React.useRef(() => {
-    const { showArchived: currentShowArchived, setShowArchived: currentSetShowArchived, handleAddVehicle: currentHandleAddVehicle } = stateRef.current;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      VehicleManagementDetailHeader,
+    const {
+      showArchived: currentShowArchived,
+      setShowArchived: currentSetShowArchived,
+      handleAddVehicle: currentHandleAddVehicle,
+      resolveVariant: currentResolveVariant
+    } = stateRef.current;
+    const DesktopHeader = /* @__PURE__ */ jsxRuntime.jsx(
+      DesktopVehicleManagementDetailHeader,
+      {
+        onAddVehicle: currentHandleAddVehicle,
+        showArchived: currentShowArchived,
+        onShowArchivedChange: currentSetShowArchived
+      }
+    );
+    const MobileHeader = /* @__PURE__ */ jsxRuntime.jsx(
+      MobileVehicleManagementDetailHeader,
       {
         onAddVehicle: currentHandleAddVehicle,
         showArchived: currentShowArchived,
         onShowArchivedChange: currentSetShowArchived
       }
     );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ResponsiveComponent,
+      {
+        resolveVariant: currentResolveVariant,
+        slots: { Desktop: DesktopHeader, Mobile: MobileHeader },
+        className: "Layer__VehicleManagementDetail__Header"
+      }
+    );
   });
   const Header3 = HeaderRef.current;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       BaseDetailView,
       {
         slots: { Header: Header3, BackIcon: BackArrow },
         name: "VehicleManagementDetail",
         onGoBack: toTripsTable,
-        children: /* @__PURE__ */ jsxRuntime.jsx(VehicleManagementGrid, { onEditVehicle: handleEditVehicle, showArchived })
+        children: [
+          isMobileVariant && /* @__PURE__ */ jsxRuntime.jsx(
+            HStack,
+            {
+              justify: "end",
+              align: "center",
+              fluid: true,
+              pie: "md",
+              pbs: "md",
+              children: /* @__PURE__ */ jsxRuntime.jsx(Switch, { isSelected: showArchived, onChange: setShowArchived, children: /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", noWrap: true, children: "Show archived" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(VehicleManagementGrid, { onEditVehicle: handleEditVehicle, showArchived })
+        ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Drawer, { isOpen: isVehicleDrawerOpen, onOpenChange: setIsVehicleDrawerOpen, "aria-label": selectedVehicle ? "Vehicle details" : "Add vehicle", variant: isMobile ? "mobile-drawer" : "drawer", flexBlock: isMobile, children: ({ close: close2 }) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { pb: "lg", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(VStack, { pi: "md", children: /* @__PURE__ */ jsxRuntime.jsx(
-        ModalTitleWithClose,
-        {
-          heading: /* @__PURE__ */ jsxRuntime.jsx(ModalHeading, { size: "md", children: selectedVehicle ? "Edit vehicle" : "Add vehicle" }),
-          onClose: close2
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(VStack, { pi: "md", children: /* @__PURE__ */ jsxRuntime.jsx(VehicleForm, { vehicle: selectedVehicle, onSuccess: handleVehicleSuccess }) })
-    ] }) })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Drawer,
+      {
+        isOpen: isVehicleDrawerOpen,
+        onOpenChange: setIsVehicleDrawerOpen,
+        "aria-label": selectedVehicle ? "Vehicle details" : "Add vehicle",
+        variant: isMobileVariant ? "mobile-drawer" : "drawer",
+        flexBlock: isMobileVariant,
+        children: ({ close: close2 }) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { pb: "lg", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(VStack, { pi: "md", children: /* @__PURE__ */ jsxRuntime.jsx(
+            ModalTitleWithClose,
+            {
+              heading: /* @__PURE__ */ jsxRuntime.jsx(ModalHeading, { size: "md", children: selectedVehicle ? "Edit vehicle" : "Add vehicle" }),
+              onClose: close2
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(VStack, { pi: "md", children: /* @__PURE__ */ jsxRuntime.jsx(VehicleForm, { vehicle: selectedVehicle, onSuccess: handleVehicleSuccess }) })
+        ] })
+      }
+    )
   ] });
 };
 const Trips = () => {
@@ -46299,9 +46400,6 @@ function useTaxProfile() {
   );
   return new TaxProfileSWRResponse(swrResponse);
 }
-function usePreloadTaxProfile() {
-  useTaxProfile();
-}
 function useTaxProfileGlobalCacheActions() {
   const { patchCache } = useGlobalCacheActions();
   const patchTaxProfile = React.useCallback(
@@ -46319,6 +46417,13 @@ var TaxEstimatesRoute = /* @__PURE__ */ ((TaxEstimatesRoute2) => {
   TaxEstimatesRoute2["Profile"] = "Profile";
   return TaxEstimatesRoute2;
 })(TaxEstimatesRoute || {});
+var OnboardingStatus = /* @__PURE__ */ ((OnboardingStatus2) => {
+  OnboardingStatus2["Loading"] = "Loading";
+  OnboardingStatus2["Error"] = "Error";
+  OnboardingStatus2["NotOnboarded"] = "NotOnboarded";
+  OnboardingStatus2["Onboarded"] = "Onboarded";
+  return OnboardingStatus2;
+})(OnboardingStatus || {});
 const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
 const TaxEstimatesRouteStoreContext = React.createContext(
   zustand.createStore(() => ({
@@ -46326,7 +46431,7 @@ const TaxEstimatesRouteStoreContext = React.createContext(
       route: "Estimates"
       /* Estimates */
     },
-    isOnboarded: true,
+    onboardingStatus: "Loading",
     navigate: () => {
     },
     year: currentYear,
@@ -46344,10 +46449,9 @@ function useTaxEstimatesNavigation() {
   const store = React.useContext(TaxEstimatesRouteStoreContext);
   return zustand.useStore(store, (state) => state.navigate);
 }
-function useTaxEstimatesOnboardingState() {
+function useTaxEstimatesOnboardingStatus() {
   const store = React.useContext(TaxEstimatesRouteStoreContext);
-  const isOnboarded = zustand.useStore(store, (state) => state.isOnboarded);
-  return React.useMemo(() => ({ isOnboarded }), [isOnboarded]);
+  return zustand.useStore(store, (state) => state.onboardingStatus);
 }
 function useTaxEstimatesYear() {
   const store = React.useContext(TaxEstimatesRouteStoreContext);
@@ -46356,14 +46460,14 @@ function useTaxEstimatesYear() {
   return React.useMemo(() => ({ year, setYear }), [year, setYear]);
 }
 function TaxEstimatesRouteStoreProvider(props) {
-  const { data: taxProfile, isLoading } = useTaxProfile();
+  const { data: taxProfile, isLoading, isError } = useTaxProfile();
   const [store] = React.useState(
     () => zustand.createStore((set) => ({
       routeState: {
         route: "Estimates"
         /* Estimates */
       },
-      isOnboarded: true,
+      onboardingStatus: "Loading",
       navigate: (route) => {
         set({ routeState: { route } });
       },
@@ -46376,12 +46480,35 @@ function TaxEstimatesRouteStoreProvider(props) {
     }))
   );
   React.useEffect(() => {
-    if (!isLoading) {
+    if (isLoading) {
       store.setState({
-        isOnboarded: taxProfile !== void 0 && taxProfile.userHasSavedTaxProfile === true
+        onboardingStatus: "Loading"
+        /* Loading */
       });
+      return;
     }
-  }, [store, taxProfile, isLoading]);
+    if (isError) {
+      store.setState({
+        onboardingStatus: "Error"
+        /* Error */
+      });
+      return;
+    }
+    if (taxProfile && !taxProfile.userHasSavedTaxProfile) {
+      store.setState({
+        onboardingStatus: "NotOnboarded"
+        /* NotOnboarded */
+      });
+      return;
+    }
+    if (taxProfile && taxProfile.userHasSavedTaxProfile) {
+      store.setState({
+        onboardingStatus: "Onboarded"
+        /* Onboarded */
+      });
+      return;
+    }
+  }, [store, taxProfile, isLoading, isError]);
   return /* @__PURE__ */ jsxRuntime.jsx(TaxEstimatesRouteStoreContext.Provider, { value: store, children: props.children });
 }
 const VehicleExpenseSchema = effect.Schema.Struct({
@@ -46813,7 +46940,7 @@ const AdjustedGrossIncomeTable = ({ data }) => {
         /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Span, { children: `- ${label}` }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { amount: -getAmount(deductions) }) })
       ] }, key)),
-      /* @__PURE__ */ jsxRuntime.jsxs(Row, { className: "AdjustedGrossIncomeTable__TotalRow", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Row, { className: "Layer__AdjustedGrossIncomeTable__TotalRow", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Span, { weight: "bold", children: "Adjusted Gross Income" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { weight: "bold", amount: totalAdjustedGrossIncome }) })
       ] })
@@ -47078,7 +47205,7 @@ const TaxDetails = () => {
                 Heading: /* @__PURE__ */ jsxRuntime.jsx(
                   CardHeading,
                   {
-                    title: `State Tax (${usState.stateName})`,
+                    title: `Estimated State Taxes (${usState.stateName})`,
                     amount: usState.totalStateTax.totalStateTaxOwed
                   }
                 )
@@ -47227,8 +47354,8 @@ const ErrorState = () => /* @__PURE__ */ jsxRuntime.jsx(
   {
     spacing: true,
     status: DataStateStatus.failed,
-    title: "Error loading tax payments",
-    description: "There was an error loading the tax payments"
+    title: "We couldnʼt load your tax payments",
+    description: "An error occurred while loading your tax payments. Please check your connection and try again."
   }
 );
 const EmptyState = () => /* @__PURE__ */ jsxRuntime.jsx(
@@ -47237,7 +47364,7 @@ const EmptyState = () => /* @__PURE__ */ jsxRuntime.jsx(
     spacing: true,
     status: DataStateStatus.info,
     title: "No tax payments found",
-    description: "There are no tax payments to display"
+    description: "There are no tax payments to display."
   }
 );
 const getQuarterLabel = (quarter) => {
@@ -47745,30 +47872,35 @@ const useTaxProfileForm = ({ taxProfile, onSuccess }) => {
   const { trigger: upsertProfile } = useUpsertTaxProfile({ mode });
   const formDefaults = React.useMemo(() => taxProfileToFormValues(taxProfile), [taxProfile]);
   const defaultValuesRef = React.useRef(formDefaults);
-  const defaultValues = defaultValuesRef.current;
+  const onSubmit = React.useCallback((_0) => __async(null, [_0], function* ({ value }) {
+    try {
+      const taxProfileValue = formValuesToTaxProfile(value);
+      const input = effect.Schema.encodeSync(TaxProfileRequestSchema)(taxProfileValue);
+      const result = yield upsertProfile(input);
+      setSubmitError(void 0);
+      setSubmitSuccess("Tax profile saved");
+      onSuccess == null ? void 0 : onSuccess(result.data);
+    } catch (e) {
+      console.error(e);
+      setSubmitSuccess(void 0);
+      setSubmitError("Something went wrong. Please try again.");
+    }
+  }), [onSuccess, upsertProfile]);
   const form = useAppForm({
-    defaultValues,
-    onSubmit: (_0) => __async(null, [_0], function* ({ value }) {
-      try {
-        const taxProfileValue = formValuesToTaxProfile(value);
-        const input = effect.Schema.encodeSync(TaxProfileRequestSchema)(taxProfileValue);
-        const result = yield upsertProfile(input);
-        setSubmitError(void 0);
-        setSubmitSuccess("Tax profile saved");
-        form.reset(value, { keepDefaultValues: false });
-        onSuccess == null ? void 0 : onSuccess(result.data);
-      } catch (e) {
-        console.error(e);
-        setSubmitSuccess(void 0);
-        setSubmitError("Something went wrong. Please try again.");
-      }
-    }),
+    defaultValues: defaultValuesRef.current,
+    onSubmit,
     validationLogic: reactForm.revalidateLogic({
       mode: "submit",
       modeAfterSubmission: "submit"
     }),
     canSubmitWhenInvalid: true
   });
+  React.useEffect(() => {
+    if (formDefaults !== defaultValuesRef.current) {
+      defaultValuesRef.current = formDefaults;
+      form.reset(formDefaults);
+    }
+  }, [form, formDefaults]);
   return React.useMemo(() => ({
     form,
     submitError,
@@ -47833,7 +47965,7 @@ const TaxProfileForm = ({ taxProfile, onSuccess, isReadOnly }) => {
   ] }) });
 };
 const TaxProfile = () => {
-  const { isOnboarded } = useTaxEstimatesOnboardingState();
+  const onboardingStatus = useTaxEstimatesOnboardingStatus();
   const navigate = useTaxEstimatesNavigation();
   const { data: taxProfile } = useTaxProfile();
   const handleGoBack = React.useCallback(() => {
@@ -47847,20 +47979,43 @@ const TaxProfile = () => {
     {
       slots: { Header: TaxProfileHeader, BackIcon: BackArrow },
       name: "TaxProfile",
-      onGoBack: isOnboarded ? handleGoBack : void 0,
+      onGoBack: onboardingStatus === OnboardingStatus.Onboarded ? handleGoBack : void 0,
       children: /* @__PURE__ */ jsxRuntime.jsx(TaxProfileForm, { taxProfile })
     }
   );
 };
 const TAX_ESTIMATES_MIN_YEAR = 2024;
 const TaxEstimatesView = () => {
-  usePreloadTaxProfile();
   return /* @__PURE__ */ jsxRuntime.jsx(TaxEstimatesRouteStoreProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(TaxEstimatesViewContent, {}) });
 };
 const TaxEstimatesViewContent = () => {
-  const { isOnboarded } = useTaxEstimatesOnboardingState();
-  const header = React.useMemo(() => isOnboarded && /* @__PURE__ */ jsxRuntime.jsx(TaxEstimatesViewHeader, {}), [isOnboarded]);
-  return /* @__PURE__ */ jsxRuntime.jsx(View, { title: "Taxes", header, children: isOnboarded ? /* @__PURE__ */ jsxRuntime.jsx(TaxEstimatesOnboardedViewContent, {}) : /* @__PURE__ */ jsxRuntime.jsx(TaxProfile, {}) });
+  const onboardingStatus = useTaxEstimatesOnboardingStatus();
+  const header = React.useMemo(
+    () => onboardingStatus === OnboardingStatus.Onboarded && /* @__PURE__ */ jsxRuntime.jsx(TaxEstimatesViewHeader, {}),
+    [onboardingStatus]
+  );
+  const viewContent = React.useMemo(() => {
+    switch (onboardingStatus) {
+      case OnboardingStatus.Loading:
+        return /* @__PURE__ */ jsxRuntime.jsx(Container, { name: "tax-estimates", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, {}) });
+      case OnboardingStatus.Error:
+        return /* @__PURE__ */ jsxRuntime.jsx(Container, { name: "tax-estimates", children: /* @__PURE__ */ jsxRuntime.jsx(
+          DataState,
+          {
+            status: DataStateStatus.failed,
+            title: "Unable to load tax information",
+            description: "We couldn’t retrieve your tax profile. Please check your connection and try again.",
+            spacing: true
+          }
+        ) });
+      case OnboardingStatus.Onboarded:
+        return /* @__PURE__ */ jsxRuntime.jsx(TaxEstimatesOnboardedViewContent, {});
+      case OnboardingStatus.NotOnboarded:
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(TaxProfile, {});
+    }
+  }, [onboardingStatus]);
+  return /* @__PURE__ */ jsxRuntime.jsx(View, { title: "Taxes", header, children: viewContent });
 };
 const TaxEstimatesViewHeader = () => {
   const navigate = useTaxEstimatesNavigation();
@@ -47927,10 +48082,8 @@ const TaxEstimatesOnboardedViewContent = () => {
         onSelectionChange: handleTabChange
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(Container, { name: "tax-estimate", children: [
-      route === TaxEstimatesRoute.Estimates && /* @__PURE__ */ jsxRuntime.jsx(TaxDetails, {}),
-      route === TaxEstimatesRoute.Payments && /* @__PURE__ */ jsxRuntime.jsx(TaxPayments, {})
-    ] })
+    route === TaxEstimatesRoute.Estimates && /* @__PURE__ */ jsxRuntime.jsx(TaxDetails, {}),
+    route === TaxEstimatesRoute.Payments && /* @__PURE__ */ jsxRuntime.jsx(TaxPayments, {})
   ] });
 };
 const table = /* @__PURE__ */ new WeakMap();