@layerfi/components 0.1.121 → 0.1.122

package/dist/cjs/index.cjs

@@ -71,9 +71,9 @@ const useResizeObserver = require("@react-hook/resize-observer");
 const lucideReact = require("lucide-react");
 const pluralize = require("pluralize");
 const ReactSelect = require("react-select");
+const CreatableSelect = require("react-select/creatable");
 const reactDropzone = require("react-dropzone");
 const reactForm = require("@tanstack/react-form");
-const BaseCreatableSelect = require("react-select/creatable");
 const reactTable = require("@tanstack/react-table");
 const reactVirtual = require("@tanstack/react-virtual");
 const react$1 = require("motion/react");
@@ -208,7 +208,7 @@ class ErrorHandlerClass {
 }
 const errorHandler = new ErrorHandlerClass();
 const reportError = (payload) => errorHandler.onError(payload);
-const version = "0.1.121";
+const version = "0.1.122";
 const pkg = {
   version
 };
@@ -2334,6 +2334,12 @@ index.Schema.Struct({
     index.Schema.fromKey("update_categorization_rules_suggestion")
   )
 });
+var BankTransactionsTableContent = /* @__PURE__ */ ((BankTransactionsTableContent2) => {
+  BankTransactionsTableContent2["List"] = "List";
+  BankTransactionsTableContent2["MobileList"] = "MobileList";
+  BankTransactionsTableContent2["Table"] = "Table";
+  return BankTransactionsTableContent2;
+})(BankTransactionsTableContent || {});
 const CategorizedCategories = [
   CategorizationStatus.CATEGORIZED,
   CategorizationStatus.SPLIT,
@@ -9615,11 +9621,11 @@ function buildCustomPlaceholder({
       "children"
     ]);
     if (!placeholder) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(ReactSelect.components.Placeholder, __spreadProps(__spreadValues({}, restProps), { className: COMBO_BOX_CLASS_NAMES.PLACEHOLDER, children: /* @__PURE__ */ jsxRuntime.jsx(Span, { variant: "placeholder", ellipsis: true, children: placeholder }) }));
+    return /* @__PURE__ */ jsxRuntime.jsx(ReactSelect.components.Placeholder, __spreadProps(__spreadValues({}, restProps), { children: /* @__PURE__ */ jsxRuntime.jsx(Span, { variant: "inherit", ellipsis: true, children: placeholder }) }));
   };
 }
 function buildCustomSingleValue({
-  SelectedValue
+  SingleValue
 }) {
   return function CustomSingleValue(_a) {
     var _b = _a, {
@@ -9627,7 +9633,8 @@ function buildCustomSingleValue({
     } = _b, restProps = __objRest(_b, [
       "children"
     ]);
-    return /* @__PURE__ */ jsxRuntime.jsx(ReactSelect.components.SingleValue, __spreadProps(__spreadValues({}, restProps), { children: SelectedValue != null ? SelectedValue : children }));
+    const defaultRenderedSingleValue = /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(ReactSelect.components.SingleValue, __spreadProps(__spreadValues({}, restProps), { children: SingleValue ? /* @__PURE__ */ jsxRuntime.jsx(SingleValue, { option: restProps.data, fallback: defaultRenderedSingleValue }) : defaultRenderedSingleValue }));
   };
 }
 function useComboBoxSubcomponents({
@@ -9635,7 +9642,7 @@ function useComboBoxSubcomponents({
   slots,
   displayDisabledAsSelected
 }) {
-  const { EmptyMessage, SelectedValue, GroupHeading, Option } = slots != null ? slots : {};
+  const { EmptyMessage, SingleValue, GroupHeading, Option } = slots != null ? slots : {};
   const ClearIndicatorRef = React.useRef(buildCustomClearIndicator());
   const DropdownIndicatorRef = React.useRef(buildCustomDropdownIndicator());
   const LoadingIndicatorRef = React.useRef(buildCustomLoadingIndicator());
@@ -9657,8 +9664,8 @@ function useComboBoxSubcomponents({
     [placeholder]
   );
   const SingleValueComponent = React.useMemo(
-    () => buildCustomSingleValue({ SelectedValue }),
-    [SelectedValue]
+    () => buildCustomSingleValue({ SingleValue }),
+    [SingleValue]
   );
   return React.useMemo(() => ({
     ClearIndicator: ClearIndicatorRef.current,
@@ -9688,6 +9695,7 @@ function useCommonComboBoxProps({
   slots,
   displayDisabledAsSelected,
   isDisabled,
+  isError,
   isReadOnly = false,
   isClearable = true,
   isSearchable = true,
@@ -9710,10 +9718,14 @@ function useCommonComboBoxProps({
       COMBO_BOX_CLASS_NAMES.CONTROL,
       isFocused && `${COMBO_BOX_CLASS_NAMES.CONTROL}--focused`,
       isDisabled2 && `${COMBO_BOX_CLASS_NAMES.CONTROL}--disabled`,
+      isError && `${COMBO_BOX_CLASS_NAMES.CONTROL}--error`,
       isReadOnly && `${COMBO_BOX_CLASS_NAMES.CONTROL}--readonly`
     ),
     valueContainer: () => COMBO_BOX_CLASS_NAMES.VALUE_CONTAINER,
-    placeholder: () => COMBO_BOX_CLASS_NAMES.PLACEHOLDER,
+    placeholder: () => classNames(
+      COMBO_BOX_CLASS_NAMES.PLACEHOLDER,
+      isError && `${COMBO_BOX_CLASS_NAMES.PLACEHOLDER}--error`
+    ),
     indicatorsContainer: () => classNames(
       COMBO_BOX_CLASS_NAMES.INDICATORS_CONTAINER,
       isReadOnly && `${COMBO_BOX_CLASS_NAMES.INDICATORS_CONTAINER}--readonly`
@@ -9721,7 +9733,7 @@ function useCommonComboBoxProps({
     menu: () => COMBO_BOX_CLASS_NAMES.MENU,
     menuList: () => COMBO_BOX_CLASS_NAMES.MENU_LIST,
     group: () => COMBO_BOX_CLASS_NAMES.GROUP
-  }), [isReadOnly]);
+  }), [isError, isReadOnly]);
   const styles = React.useMemo(() => ({
     menuPortal: (base) => __spreadProps(__spreadValues({}, base), { zIndex: 101 })
   }), []);
@@ -9781,7 +9793,7 @@ function ComboBox(_la) {
     "selectedValue",
     "onSelectedValueChange"
   ]);
-  const commonSelectProps = useCommonComboBoxProps(__spreadValues({ className, slots }, props));
+  const commonSelectProps = useCommonComboBoxProps(__spreadValues({ className, slots, isError }, props));
   return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", fluid: true, className: className ? `${className}__Container` : void 0, children: [
     /* @__PURE__ */ jsxRuntime.jsx(ReactSelect, __spreadProps(__spreadValues({}, commonSelectProps), { value: selectedValue, onChange: onSelectedValueChange })),
     /* @__PURE__ */ jsxRuntime.jsx(ComboBoxErrorMessage, { isError, errorMessage: slots == null ? void 0 : slots.ErrorMessage })
@@ -10279,7 +10291,7 @@ const BankTransactionCategoryComboBox = ({
   const numMatchOptions = (matchGroup == null ? void 0 : matchGroup.options.length) || 0;
   const loadingSuggestions = bankTransaction && isLoadingSuggestions(bankTransaction) && selectedValue === null;
   const placeholder = numMatchOptions > 1 ? `${numMatchOptions} possible matches...` : loadingSuggestions ? "Generating suggestions..." : includeSuggestedMatches ? "Categorize or match..." : "Select category";
-  const SelectedValue = React.useMemo(() => {
+  const SingleValue = React.useCallback(() => {
     return /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsUncategorizedSelectedValue, { selectedValue });
   }, [selectedValue]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10292,7 +10304,7 @@ const BankTransactionCategoryComboBox = ({
       selectedValue,
       placeholder,
       slots: {
-        SelectedValue,
+        SingleValue,
         Option: BankTransactionCategoryComboBoxOption,
         GroupHeading: BankTransactionCategoryComboBoxGroupHeading
       },
@@ -11302,6 +11314,45 @@ function useCustomAccountParseCsv() {
     }
   );
 }
+const returnTrue = () => true;
+function CreatableComboBox(_Ba) {
+  var _Ca = _Ba, {
+    className,
+    slots,
+    isError,
+    selectedValue,
+    onSelectedValueChange,
+    onCreateOption,
+    formatCreateLabel: formatCreateLabel2,
+    createOptionPosition = "first",
+    isValidNewOption = returnTrue
+  } = _Ca, props = __objRest(_Ca, [
+    "className",
+    "slots",
+    "isError",
+    "selectedValue",
+    "onSelectedValueChange",
+    "onCreateOption",
+    "formatCreateLabel",
+    "createOptionPosition",
+    "isValidNewOption"
+  ]);
+  const commonSelectProps = useCommonComboBoxProps(__spreadValues({ className, slots, isError }, props));
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", fluid: true, className: className ? `${className}__Container` : void 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CreatableSelect,
+      __spreadProps(__spreadValues({}, commonSelectProps), {
+        value: selectedValue,
+        onChange: onSelectedValueChange,
+        onCreateOption,
+        isValidNewOption,
+        formatCreateLabel: formatCreateLabel2,
+        createOptionPosition
+      })
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(ComboBoxErrorMessage, { isError, errorMessage: slots == null ? void 0 : slots.ErrorMessage })
+  ] });
+}
 const copyTextToClipboard = (text) => {
   navigator.clipboard.writeText(text).catch(() => {
   });
@@ -11318,8 +11369,8 @@ const CopyTemplateHeadersButtonGroup = ({ headers, className }) => {
     key
   )) });
 };
-const CloseIcon = (_Ba) => {
-  var _Ca = _Ba, { size = 12 } = _Ca, props = __objRest(_Ca, ["size"]);
+const CloseIcon = (_Da) => {
+  var _Ea = _Da, { size = 12 } = _Ea, props = __objRest(_Ea, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -11631,15 +11682,15 @@ function useCreateCustomAccount() {
 }
 const FORM_CLASS_NAME = "Layer__UI__Form";
 const Form = React.forwardRef(
-  function Form2(_Da, ref) {
-    var _Ea = _Da, { children, className } = _Ea, restProps = __objRest(_Ea, ["children", "className"]);
+  function Form2(_Fa, ref) {
+    var _Ga = _Fa, { children, className } = _Ga, restProps = __objRest(_Ga, ["children", "className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Form, __spreadProps(__spreadValues({}, restProps), { className: classNames(FORM_CLASS_NAME, className), ref, children }));
   }
 );
 const TEXT_FIELD_CLASS_NAME = "Layer__UI__TextField";
 const TextField = React.forwardRef(
-  function TextField2(_Fa, ref) {
-    var _Ga = _Fa, { children, inline, textarea, className } = _Ga, restProps = __objRest(_Ga, ["children", "inline", "textarea", "className"]);
+  function TextField2(_Ha, ref) {
+    var _Ia = _Ha, { children, inline, textarea, className } = _Ia, restProps = __objRest(_Ia, ["children", "inline", "textarea", "className"]);
     const dataProperties = toDataProperties({ inline, textarea });
     return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.TextField, __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: classNames(TEXT_FIELD_CLASS_NAME, className), ref, children: withRenderProp(children, (node) => node) }));
   }
@@ -11769,8 +11820,8 @@ function formatBigDecimalToString(value, options2 = {
 }
 const INPUT_CLASS_NAME = "Layer__UI__Input";
 const Input$1 = React.forwardRef(
-  function Input2(_Ha, ref) {
-    var _Ia = _Ha, { inset, placement } = _Ia, restProps = __objRest(_Ia, ["inset", "placement"]);
+  function Input2(_Ja, ref) {
+    var _Ka = _Ja, { inset, placement } = _Ka, restProps = __objRest(_Ka, ["inset", "placement"]);
     const dataProperties = toDataProperties({ inset, placement });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Input,
@@ -11781,39 +11832,17 @@ const Input$1 = React.forwardRef(
     );
   }
 );
-const DEFAULT_MAX_VALUE = effect.BigDecimal.fromBigInt(BigInt(1e7));
-const DEFAULT_MIN_DECIMAL_PLACES = 0;
-const DEFAULT_MAX_DECIMAL_PLACES = 3;
 const DECORATOR_CHARS_REGEX = /[,%$]/g;
-const withForceUpdate = (value) => {
-  return Object.defineProperty(value, "__forceUpdate", {
-    value: Symbol(),
-    enumerable: true,
-    configurable: true,
-    writable: false
-  });
-};
-function FormBigDecimalField(_Ja) {
-  var _Ka = _Ja, {
-    mode = "decimal",
-    allowNegative = false,
-    maxValue = mode === "percent" ? BIG_DECIMAL_ONE : DEFAULT_MAX_VALUE,
-    minDecimalPlaces = mode === "currency" ? 2 : DEFAULT_MIN_DECIMAL_PLACES,
-    maxDecimalPlaces = mode === "currency" ? 2 : DEFAULT_MAX_DECIMAL_PLACES,
-    slots,
-    placeholder
-  } = _Ka, restProps = __objRest(_Ka, [
-    "mode",
-    "allowNegative",
-    "maxValue",
-    "minDecimalPlaces",
-    "maxDecimalPlaces",
-    "slots",
-    "placeholder"
-  ]);
-  const field = useFieldContext();
-  const { name, state, handleChange, handleBlur } = field;
-  const { value } = state;
+function useBigDecimalInput({
+  value,
+  onChange,
+  onBlur,
+  mode,
+  maxValue,
+  maxDecimalPlaces,
+  minDecimalPlaces,
+  allowNegative
+}) {
   const formattingProps = React.useMemo(() => ({
     minDecimalPlaces,
     maxDecimalPlaces,
@@ -11835,11 +11864,11 @@ function FormBigDecimalField(_Ja) {
     const normalized = effect.BigDecimal.normalize(adjustedForPercent);
     const clamped = effect.BigDecimal.min(normalized, maxValue);
     if (!effect.BigDecimal.equals(clamped, value)) {
-      handleChange(withForceUpdate(clamped));
+      onChange(clamped);
     }
-    handleBlur();
+    onBlur();
     setInputValue(formatBigDecimalToString(clamped, formattingProps));
-  }, [inputValue, mode, maxValue, maxDecimalPlaces, value, handleBlur, formattingProps, handleChange]);
+  }, [inputValue, maxDecimalPlaces, mode, maxValue, value, onBlur, formattingProps, onChange]);
   const allowedChars = React.useMemo(
     () => buildDecimalCharRegex({ allowNegative, allowPercent: mode === "percent", allowDollar: mode === "currency" }),
     [allowNegative, mode]
@@ -11858,6 +11887,48 @@ function FormBigDecimalField(_Ja) {
   React.useEffect(() => {
     setInputValue(formatBigDecimalToString(value, formattingProps));
   }, [value, formattingProps]);
+  return {
+    inputValue,
+    onInputChange,
+    onInputBlur,
+    onBeforeInput,
+    onPaste
+  };
+}
+const DEFAULT_MAX_VALUE$1 = effect.BigDecimal.fromBigInt(BigInt(1e7));
+const DEFAULT_MIN_DECIMAL_PLACES$1 = 0;
+const DEFAULT_MAX_DECIMAL_PLACES$1 = 3;
+function FormBigDecimalField(_La) {
+  var _Ma = _La, {
+    mode = "decimal",
+    allowNegative = false,
+    maxValue = mode === "percent" ? BIG_DECIMAL_ONE : DEFAULT_MAX_VALUE$1,
+    minDecimalPlaces = mode === "currency" ? 2 : DEFAULT_MIN_DECIMAL_PLACES$1,
+    maxDecimalPlaces = mode === "currency" ? 2 : DEFAULT_MAX_DECIMAL_PLACES$1,
+    slots,
+    placeholder
+  } = _Ma, restProps = __objRest(_Ma, [
+    "mode",
+    "allowNegative",
+    "maxValue",
+    "minDecimalPlaces",
+    "maxDecimalPlaces",
+    "slots",
+    "placeholder"
+  ]);
+  const field = useFieldContext();
+  const { name, state, handleChange, handleBlur } = field;
+  const { value } = state;
+  const { inputValue, onInputChange, onInputBlur, onBeforeInput, onPaste } = useBigDecimalInput({
+    value,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    mode,
+    maxValue,
+    maxDecimalPlaces,
+    minDecimalPlaces,
+    allowNegative
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(BaseFormTextField, __spreadProps(__spreadValues({}, restProps), { inputMode: "decimal", children: /* @__PURE__ */ jsxRuntime.jsxs(InputGroup$1, { slot: "input", actionCount: slots ? 2 : void 0, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Input$1,
@@ -11882,8 +11953,8 @@ const CHECK_SIZE = {
   md: 14,
   lg: 16
 };
-function Checkbox(_La) {
-  var _Ma = _La, { children, className, variant = "default", size = "sm", isIndeterminate } = _Ma, props = __objRest(_Ma, ["children", "className", "variant", "size", "isIndeterminate"]);
+function Checkbox(_Na) {
+  var _Oa = _Na, { children, className, variant = "default", size = "sm", isIndeterminate } = _Oa, props = __objRest(_Oa, ["children", "className", "variant", "size", "isIndeterminate"]);
   const dataProperties = React.useMemo(() => toDataProperties({
     size,
     variant,
@@ -11901,8 +11972,8 @@ function Checkbox(_La) {
     })
   );
 }
-function CheckboxWithTooltip(_Na) {
-  var _Oa = _Na, { tooltip } = _Oa, props = __objRest(_Oa, ["tooltip"]);
+function CheckboxWithTooltip(_Pa) {
+  var _Qa = _Pa, { tooltip } = _Qa, props = __objRest(_Qa, ["tooltip"]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__checkbox-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { disabled: !tooltip, children: [
     /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, __spreadValues({}, props)) }),
     /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: tooltip })
@@ -11946,10 +12017,11 @@ function FormCheckboxField({
     })
   );
 }
+const DATE_PICKER_CLASS_NAME = "Layer__UI__DatePicker";
 const DATE_FIELD_CLASS_NAME = "Layer__UI__DateField";
 const DateField = React.forwardRef(
-  function DateField2(_Pa, ref) {
-    var _Qa = _Pa, { inline, className, isReadOnly } = _Qa, restProps = __objRest(_Qa, ["inline", "className", "isReadOnly"]);
+  function DateField2(_Ra, ref) {
+    var _Sa = _Ra, { inline, className, isReadOnly } = _Sa, restProps = __objRest(_Sa, ["inline", "className", "isReadOnly"]);
     const dataProperties = toDataProperties({ inline, readonly: isReadOnly });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.DateField,
@@ -11963,8 +12035,8 @@ const DateField = React.forwardRef(
 );
 const DATE_INPUT_CLASS_NAME = "Layer__UI__DateInput";
 const DateInput = React.forwardRef(
-  function DateInput2(_Ra, ref) {
-    var _Sa = _Ra, { inset, pointerEvents } = _Sa, restProps = __objRest(_Sa, ["inset", "pointerEvents"]);
+  function DateInput2(_Ta, ref) {
+    var _Ua = _Ta, { inset, pointerEvents } = _Ua, restProps = __objRest(_Ua, ["inset", "pointerEvents"]);
     const dataProperties = toDataProperties({ inset, "pointer-events": pointerEvents });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.DateInput,
@@ -11977,8 +12049,8 @@ const DateInput = React.forwardRef(
 );
 const DATE_SEGMENT_CLASS_NAME = "Layer__UI__DateSegment";
 const DateSegment = React.forwardRef(
-  function DateSegment2(_Ta, ref) {
-    var _Ua = _Ta, { isReadOnly } = _Ua, restProps = __objRest(_Ua, ["isReadOnly"]);
+  function DateSegment2(_Va, ref) {
+    var _Wa = _Va, { isReadOnly } = _Wa, restProps = __objRest(_Wa, ["isReadOnly"]);
     const dataProperties = toDataProperties({ interactive: !isReadOnly });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.DateSegment,
@@ -11989,13 +12061,13 @@ const DateSegment = React.forwardRef(
     );
   }
 );
-const DATE_PICKER_CLASS_NAME = "Layer__UI__DatePicker";
 const DatePicker$1 = React.forwardRef(
-  function DatePicker2(props, ref) {
+  function DatePicker2(_Xa, ref) {
+    var _Ya = _Xa, { className } = _Ya, restProps = __objRest(_Ya, ["className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.DatePicker,
-      __spreadProps(__spreadValues({}, props), {
-        className: DATE_PICKER_CLASS_NAME,
+      __spreadProps(__spreadValues({}, restProps), {
+        className: classNames(DATE_PICKER_CLASS_NAME, className),
         ref
       })
     );
@@ -12057,10 +12129,349 @@ function FormDateField({
     })
   );
 }
+const ChevronLeft = (_Za) => {
+  var props = __objRest(_Za, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 18 18",
+      fill: "none"
+    }, props), {
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M11.25 13.5L6.75 9L11.25 4.5",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    })
+  );
+};
+const CALENDAR_CLASS_NAME = "Layer__UI__Calendar";
+const Calendar = React.forwardRef(
+  function Calendar2(__a, ref) {
+    var _$a = __a, { className, isReadOnly } = _$a, restProps = __objRest(_$a, ["className", "isReadOnly"]);
+    const dataProperties = toDataProperties({ readonly: isReadOnly });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Calendar,
+      __spreadProps(__spreadValues(__spreadValues({}, dataProperties), restProps), {
+        isReadOnly,
+        className: classNames(CALENDAR_CLASS_NAME, className),
+        ref
+      })
+    );
+  }
+);
+const CALENDAR_GRID_CLASS_NAME = "Layer__UI__CalendarGrid";
+const CalendarGrid = React.forwardRef(
+  function CalendarGrid2(_ab, ref) {
+    var _bb = _ab, { className } = _bb, restProps = __objRest(_bb, ["className"]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.CalendarGrid,
+      __spreadProps(__spreadValues({}, restProps), {
+        className: classNames(CALENDAR_GRID_CLASS_NAME, className),
+        ref
+      })
+    );
+  }
+);
+const CALENDAR_GRID_BODY_CLASS_NAME = "Layer__UI__CalendarGridBody";
+const CalendarGridBody = React.forwardRef(
+  function CalendarGridBody2(_cb, ref) {
+    var _db = _cb, { className } = _db, restProps = __objRest(_db, ["className"]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.CalendarGridBody,
+      __spreadProps(__spreadValues({}, restProps), {
+        className: classNames(CALENDAR_GRID_BODY_CLASS_NAME, className),
+        ref
+      })
+    );
+  }
+);
+const CALENDAR_CELL_CLASS_NAME = "Layer__UI__CalendarCell";
+const CalendarCell = React.forwardRef(
+  function CalendarCell2(_eb, ref) {
+    var _fb = _eb, { className, size = "sm" } = _fb, restProps = __objRest(_fb, ["className", "size"]);
+    const dataProperties = toDataProperties({ size });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.CalendarCell,
+      __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
+        className: classNames(CALENDAR_CELL_CLASS_NAME, className),
+        ref
+      })
+    );
+  }
+);
+const CALENDAR_GRID_HEADER_CLASS_NAME = "Layer__UI__CalendarGridHeader";
+const CalendarGridHeader = React.forwardRef(
+  function CalendarGridHeader2(_gb, ref) {
+    var _hb = _gb, { className } = _hb, restProps = __objRest(_hb, ["className"]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.CalendarGridHeader,
+      __spreadProps(__spreadValues({}, restProps), {
+        className: classNames(CALENDAR_GRID_HEADER_CLASS_NAME, className),
+        ref
+      })
+    );
+  }
+);
+const CALENDAR_HEADER_CELL_CLASS_NAME = "Layer__UI__CalendarHeaderCell";
+const CalendarHeaderCell = React.forwardRef(
+  function CalendarHeaderCell2(_ib, ref) {
+    var _jb = _ib, { className, size = "sm" } = _jb, restProps = __objRest(_jb, ["className", "size"]);
+    const dataProperties = toDataProperties({ size });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.CalendarHeaderCell,
+      __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
+        className: classNames(CALENDAR_HEADER_CELL_CLASS_NAME, className),
+        ref
+      })
+    );
+  }
+);
+const DateCalendar = ({ minDate, maxDate, variant }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Calendar, { minValue: minDate, maxValue: maxDate, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", justify: "space-between", pb: "xs", pi: "xs", className: "Layer__DateCalendar__Header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { icon: true, inset: true, variant: "ghost", slot: "previous", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, { size: 20 }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Heading$1, { weight: "normal", size: "sm" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { icon: true, inset: true, variant: "ghost", slot: "next", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, { size: 20 }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(HStack, { pb: "xs", pi: "xs", children: /* @__PURE__ */ jsxRuntime.jsxs(CalendarGrid, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsxRuntime.jsx(CalendarHeaderCell, { size: variant === "mobile" ? "md" : "sm", children: day }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(CalendarGridBody, { children: (date2) => /* @__PURE__ */ jsxRuntime.jsx(CalendarCell, { date: date2, size: variant === "mobile" ? "md" : "sm" }) })
+    ] }) })
+  ] });
+};
+const PickerDropdownIndicator = ({ onClick }) => /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Button, { className: "Layer__PickerDropdownIndicator", onPress: onClick, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 16 }) });
+const DatePickerInput = ({ errorText, variant, onClick, isReadOnly }) => {
+  const errorTriangle = React.useMemo(() => {
+    if (variant === "mobile" || !errorText) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { offset: 12, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(FieldError, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, { size: 18 }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", width: "md", children: errorText })
+    ] });
+  }, [errorText, variant]);
+  if (variant === "mobile") {
+    return /* @__PURE__ */ jsxRuntime.jsx(InputGroup$1, { slot: "input", isInvalid: !!errorText, onClick: isReadOnly ? void 0 : onClick, children: /* @__PURE__ */ jsxRuntime.jsx(DateInput, { inset: true, pointerEvents: "none", children: (segment) => /* @__PURE__ */ jsxRuntime.jsx(DateSegment, { isReadOnly: true, segment }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(InputGroup$1, { slot: "input", isInvalid: !!errorText, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DateInput, { inset: true, children: (segment) => /* @__PURE__ */ jsxRuntime.jsx(DateSegment, { segment, isReadOnly }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "3xs", align: "center", pie: "4xs", children: [
+      errorTriangle,
+      !isReadOnly && /* @__PURE__ */ jsxRuntime.jsx(PickerDropdownIndicator, { onClick })
+    ] })
+  ] });
+};
+const POPOVER_CLASS_NAME = "Layer__Popover";
+const POPOVER_CLASS_NAMES = `Layer__Portal ${POPOVER_CLASS_NAME}`;
+const Popover = React.forwardRef(
+  function Popover2(_kb, ref) {
+    var _lb = _kb, { flexInline = false } = _lb, restProps = __objRest(_lb, ["flexInline"]);
+    const dataProperties = toDataProperties({ "flex-inline": flexInline });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Popover,
+      __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
+        className: POPOVER_CLASS_NAMES,
+        ref
+      })
+    );
+  }
+);
+function ResponsivePopover({ children, triggerRef }) {
+  const { isMobile } = useSizeClass();
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Modal,
+      {
+        flexBlock: true,
+        flexInline: true,
+        variant: "mobile-popover",
+        isDismissable: true,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover,
+    {
+      triggerRef,
+      placement: "bottom left",
+      flexInline: true,
+      children
+    }
+  );
+}
+const DatePicker = ({
+  label,
+  showLabel = true,
+  date: date2,
+  minDate,
+  maxDate,
+  isInvalid,
+  errorText,
+  onBlur,
+  onChange,
+  isDisabled,
+  isReadOnly,
+  className,
+  slotProps
+}) => {
+  const additionalAriaProps = !showLabel && { "aria-label": label };
+  const { value } = useSizeClass();
+  const [isPopoverOpen, setPopoverOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    DatePicker$1,
+    __spreadProps(__spreadValues({
+      granularity: "day",
+      value: date2,
+      onBlur,
+      onChange,
+      isInvalid
+    }, additionalAriaProps), {
+      isOpen: isPopoverOpen,
+      onOpenChange: setPopoverOpen,
+      isDisabled,
+      isReadOnly,
+      className: classNames(DATE_PICKER_CLASS_NAME, className),
+      children: [
+        showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, __spreadProps(__spreadValues({ slot: "label", size: "sm" }, slotProps == null ? void 0 : slotProps.Label), { children: label })),
+        /* @__PURE__ */ jsxRuntime.jsx(DatePickerInput, { errorText, variant: value, onClick: () => setPopoverOpen(true), isReadOnly }),
+        /* @__PURE__ */ jsxRuntime.jsx(ResponsivePopover, { children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { children: /* @__PURE__ */ jsxRuntime.jsx(DateCalendar, { minDate, maxDate, variant: value }) }) })
+      ]
+    })
+  );
+};
+const FORM_DATE_PICKER_FIELD_CLASSNAME = "Layer__FormDatePickerField";
+function FormDatePickerField({
+  label,
+  className,
+  inline = false,
+  showLabel = true,
+  showFieldError = true,
+  isReadOnly = false,
+  minDate,
+  maxDate
+}) {
+  const field = useFieldContext();
+  const { state, handleChange, handleBlur } = field;
+  const { meta, value } = state;
+  const { errors, isValid } = meta;
+  const [localDate, setLocalDate] = React.useState(value);
+  React.useEffect(() => {
+    setLocalDate(value);
+  }, [value]);
+  const onChange = React.useCallback((newValue) => {
+    setLocalDate(newValue);
+  }, []);
+  const onBlur = React.useCallback(() => {
+    handleChange(localDate);
+    handleBlur();
+  }, [handleBlur, handleChange, localDate]);
+  const errorMessage = errors.length !== 0 ? errors[0] : void 0;
+  const shouldShowErrorMessage = showFieldError && errorMessage;
+  const datePickerClassNames = classNames(
+    FORM_DATE_PICKER_FIELD_CLASSNAME,
+    inline && `${FORM_DATE_PICKER_FIELD_CLASSNAME}--inline`,
+    className
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DatePicker,
+    {
+      label,
+      showLabel,
+      date: localDate,
+      onChange,
+      onBlur,
+      minDate,
+      maxDate,
+      isInvalid: !isValid,
+      errorText: shouldShowErrorMessage ? errorMessage : null,
+      isReadOnly,
+      className: datePickerClassNames
+    }
+  );
+}
+const NonRecursiveBigDecimalSchema = effect.Schema.Struct({
+  value: effect.Schema.BigIntFromSelf,
+  scale: effect.Schema.Int
+});
+const NRBD_ZERO = { value: /* @__PURE__ */ BigInt("0"), scale: 0 };
+const NRBD_ONE = { value: /* @__PURE__ */ BigInt("1"), scale: 0 };
+const toNonRecursiveBigDecimal = (bd) => {
+  const normalized = effect.BigDecimal.normalize(bd);
+  return { value: normalized.value, scale: normalized.scale };
+};
+const fromNonRecursiveBigDecimal = (nrbd) => {
+  return effect.BigDecimal.make(nrbd.value, nrbd.scale);
+};
+const nrbdEquals = (a, b) => {
+  return effect.BigDecimal.equals(fromNonRecursiveBigDecimal(a), fromNonRecursiveBigDecimal(b));
+};
+const DEFAULT_MAX_VALUE = effect.BigDecimal.fromBigInt(BigInt(1e7));
+const DEFAULT_MIN_DECIMAL_PLACES = 0;
+const DEFAULT_MAX_DECIMAL_PLACES = 3;
+function FormNonRecursiveBigDecimalField(_mb) {
+  var _nb = _mb, {
+    mode = "decimal",
+    allowNegative = false,
+    maxValue = mode === "percent" ? BIG_DECIMAL_ONE : DEFAULT_MAX_VALUE,
+    minDecimalPlaces = mode === "currency" ? 2 : DEFAULT_MIN_DECIMAL_PLACES,
+    maxDecimalPlaces = mode === "currency" ? 2 : DEFAULT_MAX_DECIMAL_PLACES,
+    slots,
+    placeholder
+  } = _nb, restProps = __objRest(_nb, [
+    "mode",
+    "allowNegative",
+    "maxValue",
+    "minDecimalPlaces",
+    "maxDecimalPlaces",
+    "slots",
+    "placeholder"
+  ]);
+  const field = useFieldContext();
+  const { name, state, handleChange, handleBlur } = field;
+  const { value: nrbdValue } = state;
+  const value = React.useMemo(() => fromNonRecursiveBigDecimal(nrbdValue), [nrbdValue]);
+  const onChange = React.useCallback((bd) => {
+    handleChange(toNonRecursiveBigDecimal(bd));
+  }, [handleChange]);
+  const { inputValue, onInputChange, onInputBlur, onBeforeInput, onPaste } = useBigDecimalInput({
+    value,
+    onChange,
+    onBlur: handleBlur,
+    mode,
+    maxValue,
+    maxDecimalPlaces,
+    minDecimalPlaces,
+    allowNegative
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseFormTextField, __spreadProps(__spreadValues({}, restProps), { inputMode: "decimal", children: /* @__PURE__ */ jsxRuntime.jsxs(InputGroup$1, { slot: "input", actionCount: slots ? 2 : void 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input$1,
+      {
+        inset: true,
+        id: name,
+        name,
+        value: inputValue,
+        onChange: onInputChange,
+        onBlur: onInputBlur,
+        onBeforeInput,
+        onPaste,
+        placeholder
+      }
+    ),
+    (slots == null ? void 0 : slots.badge) && /* @__PURE__ */ jsxRuntime.jsx(HStack, { children: slots.badge })
+  ] }) }));
+}
 const NUMBER_FIELD_CLASS_NAME = "Layer__UI__NumberField";
 const NumberField = React.forwardRef(
-  function NumberField2(_Va, ref) {
-    var _Wa = _Va, { inline, className, isReadOnly } = _Wa, restProps = __objRest(_Wa, ["inline", "className", "isReadOnly"]);
+  function NumberField2(_ob, ref) {
+    var _pb = _ob, { inline, className, isReadOnly } = _pb, restProps = __objRest(_pb, ["inline", "className", "isReadOnly"]);
     const dataProperties = toDataProperties({ inline, readonly: isReadOnly });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.NumberField,
@@ -12129,17 +12540,13 @@ function FormNumberField({
 }
 const RADIO_GROUP_CLASS_NAME = "Layer__RadioGroup";
 const RADIO_CLASS_NAME = "Layer__Radio";
-const INDICATOR_SIZE = {
-  sm: 8,
-  md: 10,
-  lg: 12
-};
-function RadioGroup(_Xa) {
-  var _Ya = _Xa, {
+const INDICATOR_SIZE = 10;
+function RadioGroup(_qb) {
+  var _rb = _qb, {
     children,
     className,
     onChange
-  } = _Ya, restProps = __objRest(_Ya, [
+  } = _rb, restProps = __objRest(_rb, [
     "children",
     "className",
     "onChange"
@@ -12153,26 +12560,20 @@ function RadioGroup(_Xa) {
     })
   );
 }
-function Radio(_Za) {
-  var __a = _Za, {
+function Radio(_sb) {
+  var _tb = _sb, {
     children,
-    className,
-    size = "sm"
-  } = __a, restProps = __objRest(__a, [
+    className
+  } = _tb, restProps = __objRest(_tb, [
     "children",
-    "className",
-    "size"
+    "className"
   ]);
-  const dataProperties = React.useMemo(() => toDataProperties({
-    size,
-    labeled: typeof children === "string" && children.length > 0
-  }), [children, size]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Radio,
-    __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
+    __spreadProps(__spreadValues({}, restProps), {
       className: classNames(RADIO_CLASS_NAME, className),
       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] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "radio", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { size: INDICATOR_SIZE }) }),
         node
       ] }))
     })
@@ -12193,7 +12594,6 @@ function FormRadioGroupField({
   const { name, state, handleChange, handleBlur } = field;
   const { meta, value } = state;
   const { errors, isValid } = meta;
-  const errorMessage = errors.length !== 0 ? errors[0] : void 0;
   const labelId = React.useId();
   const additionalAriaProps = showLabel ? { "aria-labelledby": labelId } : { "aria-label": label };
   const radioGroupClassNames = classNames(
@@ -12201,25 +12601,30 @@ function FormRadioGroupField({
     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", id: labelId, children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      RadioGroup,
-      __spreadProps(__spreadValues({
-        slot: "radiogroup",
-        value,
-        onChange: handleChange,
-        onBlur: handleBlur,
-        name,
-        orientation,
-        isReadOnly,
-        isInvalid: !isValid
-      }, additionalAriaProps), {
-        children: options2.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Radio, { value: option.value, size: "md", children: /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "md", slot: "description", children: option.label }) }, option.value))
-      })
-    ),
-    showFieldError && errorMessage && /* @__PURE__ */ jsxRuntime.jsx("span", { slot: "error", className: `${FORM_RADIO_GROUP_FIELD_CLASSNAME$1}__Error`, children: errorMessage })
-  ] });
+  const errorMessage = errors.length !== 0 ? errors[0] : void 0;
+  const shouldShowErrorMessage = showFieldError && errorMessage;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    RadioGroup,
+    __spreadProps(__spreadValues({
+      slot: "radiogroup",
+      value,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      name,
+      orientation,
+      isReadOnly,
+      isInvalid: !isValid,
+      className: radioGroupClassNames
+    }, additionalAriaProps), {
+      children: [
+        showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { slot: "label", size: "sm", id: labelId, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsxs(VStack, { slot: "options", gap: "3xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: orientation === "horizontal" ? "row" : "column", gap: orientation === "horizontal" ? "sm" : "xs", children: options2.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Radio, { value: option.value, children: /* @__PURE__ */ jsxRuntime.jsx(Span, { slot: "description", children: option.label }) }, option.value)) }),
+          shouldShowErrorMessage && /* @__PURE__ */ jsxRuntime.jsx(FieldError, { children: errorMessage })
+        ] })
+      ]
+    })
+  );
 }
 const FORM_RADIO_GROUP_FIELD_CLASSNAME = "Layer__FormRadioGroupField";
 function FormRadioGroupYesNoField({
@@ -12236,6 +12641,7 @@ function FormRadioGroupYesNoField({
   const { meta, value } = state;
   const { errors, isValid } = meta;
   const errorMessage = errors.length !== 0 ? errors[0] : void 0;
+  const shouldShowErrorMessage = showFieldError && errorMessage;
   const labelId = React.useId();
   const additionalAriaProps = showLabel ? { "aria-labelledby": labelId } : { "aria-label": label };
   const radioGroupClassNames = classNames(
@@ -12247,35 +12653,38 @@ function FormRadioGroupYesNoField({
   const handleRadioChange = (newValue) => {
     handleChange(newValue === "yes");
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: radioGroupClassNames, children: [
-    showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { slot: "label", size: "sm", id: labelId, children: label }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      RadioGroup,
-      __spreadProps(__spreadValues({
-        slot: "radiogroup",
-        value: radioValue,
-        onChange: handleRadioChange,
-        onBlur: handleBlur,
-        name,
-        orientation,
-        isReadOnly,
-        isInvalid: !isValid
-      }, additionalAriaProps), {
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Radio, { value: "no", size: "md", children: /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "md", slot: "description", children: "No" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Radio, { value: "yes", size: "md", children: /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "md", slot: "description", children: "Yes" }) })
-        ]
-      })
-    ),
-    showFieldError && errorMessage && /* @__PURE__ */ jsxRuntime.jsx("span", { slot: "error", className: `${FORM_RADIO_GROUP_FIELD_CLASSNAME}__Error`, children: errorMessage })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    RadioGroup,
+    __spreadProps(__spreadValues({
+      slot: "radiogroup",
+      value: radioValue,
+      onChange: handleRadioChange,
+      onBlur: handleBlur,
+      name,
+      orientation,
+      isReadOnly,
+      isInvalid: !isValid,
+      className: radioGroupClassNames
+    }, additionalAriaProps), {
+      children: [
+        showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { slot: "label", size: "sm", id: labelId, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsxs(VStack, { slot: "options", gap: "3xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Stack, { direction: orientation === "horizontal" ? "row" : "column", gap: orientation === "horizontal" ? "sm" : "xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Radio, { value: "no", children: /* @__PURE__ */ jsxRuntime.jsx(Span, { slot: "description", children: "No" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(Radio, { value: "yes", children: /* @__PURE__ */ jsxRuntime.jsx(Span, { slot: "description", children: "Yes" }) })
+          ] }),
+          shouldShowErrorMessage && /* @__PURE__ */ jsxRuntime.jsx(FieldError, { children: errorMessage })
+        ] })
+      ]
+    })
+  );
 }
 const SWITCH_CLASS_NAME = "Layer__UI__Switch";
-const Switch = React.forwardRef((_$a, ref) => {
-  var _ab = _$a, {
+const Switch = React.forwardRef((_ub, ref) => {
+  var _vb = _ub, {
     children,
     className
-  } = _ab, props = __objRest(_ab, [
+  } = _vb, props = __objRest(_vb, [
     "children",
     "className"
   ]);
@@ -12325,8 +12734,8 @@ function FormSwitchField({
 }
 const TEXTAREA_CLASS_NAME = "Layer__UI__TextArea";
 const TextArea = React.forwardRef(
-  function TextArea2(_bb, ref) {
-    var _cb = _bb, { resize = "none" } = _cb, restProps = __objRest(_cb, ["resize"]);
+  function TextArea2(_wb, ref) {
+    var _xb = _wb, { resize = "none" } = _xb, restProps = __objRest(_xb, ["resize"]);
     const dataProperties = toDataProperties({ resize });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.TextArea,
@@ -12337,8 +12746,8 @@ const TextArea = React.forwardRef(
     );
   }
 );
-function FormTextAreaField(_db) {
-  var _eb = _db, { placeholder } = _eb, props = __objRest(_eb, ["placeholder"]);
+function FormTextAreaField(_yb) {
+  var _zb = _yb, { placeholder } = _zb, props = __objRest(_zb, ["placeholder"]);
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
   const { value } = state;
@@ -12358,8 +12767,8 @@ function FormTextAreaField(_db) {
     }
   ) }));
 }
-function FormTextField(_fb) {
-  var _gb = _fb, { placeholder } = _gb, props = __objRest(_gb, ["placeholder"]);
+function FormTextField(_Ab) {
+  var _Bb = _Ab, { placeholder } = _Bb, props = __objRest(_Bb, ["placeholder"]);
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
   const { value } = state;
@@ -12386,6 +12795,8 @@ const { useAppForm: useRawAppForm } = reactForm.createFormHook({
     FormBigDecimalField,
     FormCheckboxField,
     FormDateField,
+    FormDatePickerField,
+    FormNonRecursiveBigDecimalField,
     FormNumberField,
     FormRadioGroupField,
     FormRadioGroupYesNoField,
@@ -12450,13 +12861,13 @@ const useCustomAccountForm = ({ onSuccess }) => {
   const isFormValid = reactForm.useStore(form.store, (state) => state.isValid);
   return { form, submitError, isFormValid };
 };
-const Input = (_hb) => {
-  var _ib = _hb, {
+const Input = (_Cb) => {
+  var _Db = _Cb, {
     className,
     isInvalid,
     errorMessage,
     leftText
-  } = _ib, props = __objRest(_ib, [
+  } = _Db, props = __objRest(_Db, [
     "className",
     "isInvalid",
     "errorMessage",
@@ -12502,8 +12913,8 @@ const InputGroup = ({
     children
   ] });
 };
-const ChevronDownFill = (_jb) => {
-  var _kb = _jb, { size = 18 } = _kb, props = __objRest(_kb, ["size"]);
+const ChevronDownFill = (_Eb) => {
+  var _Fb = _Eb, { size = 18 } = _Fb, props = __objRest(_Fb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -12528,10 +12939,10 @@ const ChevronDownFill = (_jb) => {
     })
   );
 };
-const SelectMenuPortal = (_lb) => {
-  var _mb = _lb, {
+const SelectMenuPortal = (_Gb) => {
+  var _Hb = _Gb, {
     children
-  } = _mb, restProps = __objRest(_mb, [
+  } = _Hb, restProps = __objRest(_Hb, [
     "children"
   ]);
   const dataProperties = toDataProperties({ "react-aria-top-layer": true });
@@ -12556,7 +12967,7 @@ const Select = ({
   errorMessage,
   inputId,
   isLoading,
-  formatOptionLabel: formatOptionLabel2
+  formatOptionLabel
 }) => {
   const baseClassName2 = classNames(
     "Layer__select",
@@ -12574,7 +12985,7 @@ const Select = ({
         classNamePrefix,
         placeholder: placeholder != null ? placeholder : "Select...",
         options: options2,
-        formatOptionLabel: formatOptionLabel2,
+        formatOptionLabel,
         value,
         onChange: (newValue) => newValue && onChange(newValue),
         menuPortalTarget: document.body,
@@ -12587,8 +12998,8 @@ const Select = ({
     /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: errorMessage })
   ] });
 };
-const ErrorText = (_nb) => {
-  var _ob = _nb, { className } = _ob, props = __objRest(_ob, ["className"]);
+const ErrorText = (_Ib) => {
+  var _Jb = _Ib, { className } = _Jb, props = __objRest(_Jb, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(Text, __spreadProps(__spreadValues({}, props), { status: "error", className }));
 };
 const accountTypeOptions = [
@@ -12698,61 +13109,6 @@ const CustomAccountForm = ({ initialAccountName, onCancel, onSuccess }) => {
     }
   );
 };
-const CreatableSelect = ({
-  name,
-  options: options2,
-  className,
-  classNamePrefix = "Layer__select",
-  value,
-  onChange,
-  disabled,
-  placeholder,
-  isInvalid,
-  errorMessage,
-  formatOptionLabel: formatOptionLabel2,
-  onCreateOption,
-  isValidNewOption,
-  formatCreateLabel: formatCreateLabel2,
-  inputId,
-  isLoading,
-  isClearable,
-  createOptionPosition = "first"
-}) => {
-  const baseClassName2 = classNames(
-    "Layer__select",
-    isInvalid ? "Layer__select--error" : "",
-    className
-  );
-  const DropdownIndicator = React.useCallback((props) => /* @__PURE__ */ jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownFill, {}) })), []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { disabled: !isInvalid || !errorMessage, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ jsxRuntime.jsx(
-      BaseCreatableSelect,
-      {
-        inputId,
-        name,
-        className: baseClassName2,
-        classNamePrefix,
-        placeholder: placeholder != null ? placeholder : "Select...",
-        options: options2,
-        formatOptionLabel: formatOptionLabel2,
-        value,
-        onChange: (newValue) => onChange(newValue),
-        onCreateOption,
-        isValidNewOption,
-        formatCreateLabel: formatCreateLabel2,
-        menuPortalTarget: document.body,
-        styles: { menuPortal: (base) => __spreadProps(__spreadValues({}, base), { zIndex: 9999 }) },
-        components: { DropdownIndicator, MenuPortal: SelectMenuPortal },
-        isLoading,
-        isDisabled: disabled,
-        isClearable,
-        escapeClearsValue: isClearable,
-        createOptionPosition
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: errorMessage })
-  ] });
-};
 const templateHeaders = {
   date: "Date",
   description: "Description",
@@ -12780,18 +13136,27 @@ const templateExampleTransactions = [
 const formatCreateLabel$1 = (inputValue) => {
   return inputValue ? `Create "${inputValue}"` : "Create account";
 };
-const formatOptionLabel = (option, meta) => {
+const AccountOption = ({ option, fallback }) => {
   if (option.account && !option.__isNew__) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, children: option.account.accountName }),
-      (meta == null ? void 0 : meta.context) === "menu" && /* @__PURE__ */ jsxRuntime.jsxs(Span, { size: "sm", variant: "subtle", noWrap: true, children: [
-        option.account.institutionName,
-        " · ",
-        humanizeEnum(option.account.accountSubtype)
+    return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Check, { size: 16, className: COMBO_BOX_CLASS_NAMES.OPTION_CHECK_ICON }),
+      /* @__PURE__ */ jsxRuntime.jsxs(VStack, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, children: option.account.accountName }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Span, { size: "sm", variant: "subtle", noWrap: true, children: [
+          option.account.institutionName,
+          " · ",
+          humanizeEnum(option.account.accountSubtype)
+        ] })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Span, { children: option.label });
+  return fallback;
+};
+const AccountSingleValue = ({ option, fallback }) => {
+  if (option.account && !option.__isNew__) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, children: option.account.accountName });
+  }
+  return fallback;
 };
 function UploadTransactionsUploadCsvStep({ selectedAccount, onSelectAccount, selectedFile, onSelectFile, onParseCsv }) {
   var _a;
@@ -12846,30 +13211,27 @@ function UploadTransactionsUploadCsvStep({ selectedAccount, onSelectAccount, sel
       setHasParseCsvError(true);
     });
   }, [selectedAccount, isCreatingNewAccount, selectedFile, parseCsv2, onParseCsv, next]);
-  const inputClassName = classNames(
-    "Layer__upload-transactions__select-account-name-input",
-    !!customAccountsError && "Layer__upload-transactions__select-account-name-input--error"
-  );
   const hasSelectedAccount = selectedAccount && !isCreatingNewAccount;
   return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "lg", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", className: "Layer__upload-transactions__select-account-name-field", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(VStack, { pis: "3xs", gap: "xs", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Label, { size: "md", htmlFor: "account_name", children: "Which account are these transactions from?" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        CreatableSelect,
+        CreatableComboBox,
         {
           inputId: "account_name",
           placeholder: customAccountsError ? "Failed to load options" : "Select account...",
           options: accountOptions,
-          formatOptionLabel,
-          onChange: onSelectAccount,
+          onSelectedValueChange: onSelectAccount,
           onCreateOption,
           formatCreateLabel: formatCreateLabel$1,
           isValidNewOption: () => true,
-          value: selectedAccount,
+          selectedValue: selectedAccount,
           isClearable: true,
           isLoading: isLoadingCustomAccounts,
-          disabled: !!customAccountsError,
-          className: inputClassName
+          isDisabled: !!customAccountsError,
+          isError: !!customAccountsError,
+          className: "Layer__upload-transactions__select-account-name-input",
+          slots: { Option: AccountOption, SingleValue: AccountSingleValue }
         }
       )
     ] }),
@@ -13236,7 +13598,8 @@ function UploadTransactionsHeader({ currentStep, isValid, onClose }) {
     {
       heading: /* @__PURE__ */ jsxRuntime.jsx(Heading$1, { level: 1, size: "sm", children: title }),
       description: /* @__PURE__ */ jsxRuntime.jsx(Heading$1, { level: 2, size: "xs", variant: "subtle", weight: "normal", children: description }),
-      onClose
+      onClose,
+      hideBottomPadding: true
     }
   );
 }
@@ -13446,8 +13809,8 @@ const BulkActionsModule = ({ showSelectedLabel = true, fullWidth = false, slots
     /* @__PURE__ */ jsxRuntime.jsx(slots.BulkActions, {})
   ] });
 };
-const DownloadCloud = (_pb) => {
-  var _qb = _pb, { size = 18 } = _qb, props = __objRest(_qb, ["size"]);
+const DownloadCloud = (_Kb) => {
+  var _Lb = _Kb, { size = 18 } = _Lb, props = __objRest(_Lb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -13498,7 +13861,7 @@ const DownloadButton$1 = ({
   text = "Download",
   retryText = "Retry",
   errorText = "Download failed. Check connection and retry in few seconds.",
-  variant = iconOnly ? ButtonVariant.secondary : ButtonVariant.tertiary,
+  variant = ButtonVariant.secondary,
   disabled = false
 }) => {
   if (requestFailed) {
@@ -13665,45 +14028,6 @@ function MonthCalendar({
     )
   ] });
 }
-const POPOVER_CLASS_NAME = "Layer__Popover";
-const POPOVER_CLASS_NAMES = `Layer__Portal ${POPOVER_CLASS_NAME}`;
-const Popover = React.forwardRef(
-  function Popover2(_rb, ref) {
-    var _sb = _rb, { flexInline = false } = _sb, restProps = __objRest(_sb, ["flexInline"]);
-    const dataProperties = toDataProperties({ "flex-inline": flexInline });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactAriaComponents.Popover,
-      __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
-        className: POPOVER_CLASS_NAMES,
-        ref
-      })
-    );
-  }
-);
-function ResponsivePopover({ children, triggerRef }) {
-  const { isMobile } = useSizeClass();
-  if (isMobile) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Modal,
-      {
-        flexBlock: true,
-        flexInline: true,
-        variant: "mobile-popover",
-        isDismissable: true,
-        children
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Popover,
-    {
-      triggerRef,
-      placement: "bottom left",
-      flexInline: true,
-      children
-    }
-  );
-}
 const MonthPicker = ({
   label,
   showLabel = true,
@@ -13722,31 +14046,34 @@ const MonthPicker = ({
   }, [onChange]);
   const inputValue = dateFns.format(date2.toDate(), truncateMonth ? MONTH_YEAR_FORMAT_SHORT : MONTH_YEAR_FORMAT);
   const additionalAriaProps = !showLabel && { "aria-label": label };
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.DialogTrigger, { isOpen: isPopoverOpen, onOpenChange: setPopoverOpen, children: [
-    showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { children: label }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      InputGroup$1,
-      {
-        ref: triggerRef,
-        slot: "input",
-        className: classNames("Layer__MonthPicker__InputGroup", { "Layer__MonthPicker__InputGroup--truncated": truncateMonth }),
-        onClick: () => setPopoverOpen(true),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Input$1, __spreadProps(__spreadValues({ inset: true }, additionalAriaProps), { value: inputValue, readOnly: true })),
-          /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "3xs", align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { icon: true, inset: true, variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 20 }) }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(ResponsivePopover, { triggerRef, children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      MonthCalendar,
-      {
-        date: date2,
-        onChange: onChangeMonth,
-        minDate,
-        maxDate,
-        variant: value
-      }
-    ) }) })
+  const inputId = React.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { children: [
+    showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { pbe: "3xs", size: "sm", htmlFor: inputId, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.DialogTrigger, { isOpen: isPopoverOpen, onOpenChange: setPopoverOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        InputGroup$1,
+        {
+          ref: triggerRef,
+          slot: "input",
+          className: classNames("Layer__MonthPicker__InputGroup", { "Layer__MonthPicker__InputGroup--truncated": truncateMonth }),
+          onClick: () => setPopoverOpen(true),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Input$1, __spreadProps(__spreadValues({ inset: true }, additionalAriaProps), { value: inputValue, readOnly: true, id: inputId })),
+            /* @__PURE__ */ jsxRuntime.jsx(PickerDropdownIndicator, { onClick: () => setPopoverOpen(true) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(ResponsivePopover, { triggerRef, children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        MonthCalendar,
+        {
+          date: date2,
+          onChange: onChangeMonth,
+          minDate,
+          maxDate,
+          variant: value
+        }
+      ) }) })
+    ] })
   ] });
 };
 const SmallLoader = ({ size = 28 }) => {
@@ -13908,8 +14235,7 @@ const DownloadButton = ({
 const BankTransactionsHeader = ({
   shiftStickyHeader,
   asWidget,
-  mobileComponent,
-  listView,
+  tableContentMode,
   stringOverrides,
   isSyncing,
   withUploadMenu,
@@ -13939,7 +14265,8 @@ const BankTransactionsHeader = ({
   }, [setFilters]);
   const { count } = useCountSelectedIds();
   const showBulkActions = count > 0;
-  const isMobileList = listView && mobileComponent === "mobileList";
+  const isMobileList = tableContentMode === BankTransactionsTableContent.MobileList;
+  const isListView = isMobileList || tableContentMode === BankTransactionsTableContent.List;
   const headerTopRow = React.useMemo(() => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__bank-transactions__header__content", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -13955,7 +14282,7 @@ const BankTransactionsHeader = ({
         {
           timeSync: 5,
           inProgress: true,
-          hideContent: listView
+          hideContent: isListView
         }
       )
     ] }),
@@ -13975,7 +14302,7 @@ const BankTransactionsHeader = ({
     activationDate,
     asWidget,
     isSyncing,
-    listView,
+    isListView,
     monthPickerDate,
     setDateRange,
     stringOverrides == null ? void 0 : stringOverrides.header,
@@ -14010,7 +14337,8 @@ const BankTransactionsHeader = ({
       }
     );
   }, [isMobileList]);
-  const statusToggle = isCategorizationEnabled && showStatusToggle ? /* @__PURE__ */ jsxRuntime.jsx(
+  const isStatusToggleVisible = isCategorizationEnabled && showStatusToggle;
+  const statusToggle = isStatusToggleVisible ? /* @__PURE__ */ jsxRuntime.jsx(
     Toggle,
     {
       ariaLabel: "Categorization status",
@@ -14023,50 +14351,34 @@ const BankTransactionsHeader = ({
       fullWidth: isMobileList
     }
   ) : null;
-  if (isMobileList) {
+  if (isListView) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Header$1,
       {
         className: classNames(
           "Layer__bank-transactions__header",
           withDatePicker && "Layer__bank-transactions__header--with-date-picker",
-          "Layer__bank-transactions__header--mobile"
+          isMobileList && "Layer__bank-transactions__header--mobile"
         ),
         style: { top: shiftStickyHeader },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
           headerTopRow,
-          /* @__PURE__ */ jsxRuntime.jsx(HStack, { justify: "space-between", align: "center", gap: "xs", children: showBulkActions ? /* @__PURE__ */ jsxRuntime.jsx(
+          showBulkActions && /* @__PURE__ */ jsxRuntime.jsx(
             BulkActionsModule,
             {
-              showSelectedLabel: false,
-              fullWidth: true,
+              showSelectedLabel: !isMobileList,
+              fullWidth: isMobileList,
               slots: { BulkActions }
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            statusToggle,
-            /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsHeaderMenu, { actions: headerMenuActions, isDisabled: showBulkActions })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TransactionsSearch, { isDisabled: showBulkActions })
-        ] })
-      }
-    );
-  }
-  if (listView) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Header$1,
-      {
-        className: classNames(
-          "Layer__bank-transactions__header",
-          withDatePicker && "Layer__bank-transactions__header--with-date-picker"
-        ),
-        style: { top: shiftStickyHeader },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
-          headerTopRow,
-          /* @__PURE__ */ jsxRuntime.jsx(HStack, { justify: "space-between", align: "center", gap: "xs", children: showBulkActions ? /* @__PURE__ */ jsxRuntime.jsx(BulkActionsModule, { slots: { BulkActions } }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          ),
+          !showBulkActions && isStatusToggleVisible && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", align: "center", gap: "xs", children: [
             statusToggle,
-            /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsHeaderMenu, { actions: headerMenuActions, isDisabled: showBulkActions })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TransactionsSearch, { isDisabled: showBulkActions })
+            /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsHeaderMenu, { actions: headerMenuActions })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "Layer__bank-transactions__header__search-and-menu", align: "center", gap: "xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TransactionsSearch, { isDisabled: showBulkActions }),
+            !isStatusToggleVisible && /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsHeaderMenu, { actions: headerMenuActions, isDisabled: showBulkActions })
+          ] })
         ] })
       }
     );
@@ -14092,7 +14404,7 @@ const BankTransactionsHeader = ({
               DownloadButton,
               {
                 downloadButtonTextOverride: stringOverrides == null ? void 0 : stringOverrides.downloadButton,
-                iconOnly: listView,
+                iconOnly: isListView,
                 disabled: showBulkActions
               }
             ),
@@ -14476,8 +14788,8 @@ function useDelayedVisibility({
   );
   return { isVisible };
 }
-const File$1 = (_tb) => {
-  var _ub = _tb, { size = 12 } = _ub, props = __objRest(_ub, ["size"]);
+const File$1 = (_Mb) => {
+  var _Nb = _Mb, { size = 12 } = _Nb, props = __objRest(_Nb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -14560,15 +14872,15 @@ const variants = {
     }
   }
 };
-function AnimatedPresenceElementInner(_vb, ref) {
-  var _wb = _vb, {
+function AnimatedPresenceElementInner(_Ob, ref) {
+  var _Pb = _Ob, {
     as,
     children,
     variant,
     isOpen,
     slotProps = { AnimatePresence: { initial: false } },
     motionKey
-  } = _wb, props = __objRest(_wb, [
+  } = _Pb, props = __objRest(_Pb, [
     "as",
     "children",
     "variant",
@@ -14767,8 +15079,8 @@ function useBookkeepingPeriods() {
     }
   });
 }
-const Clock = (_xb) => {
-  var _yb = _xb, { size = 18 } = _yb, props = __objRest(_yb, ["size"]);
+const Clock = (_Qb) => {
+  var _Rb = _Qb, { size = 18 } = _Rb, props = __objRest(_Rb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -15094,8 +15406,8 @@ const useSplitsForm = ({
     saveLocalSplitsToCategoryStore
   };
 };
-const ScissorsFullOpen = (_zb) => {
-  var _Ab = _zb, { size = 12 } = _Ab, props = __objRest(_Ab, ["size"]);
+const ScissorsFullOpen = (_Sb) => {
+  var _Tb = _Sb, { size = 12 } = _Tb, props = __objRest(_Tb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -15160,8 +15472,8 @@ const ScissorsFullOpen = (_zb) => {
     })
   );
 };
-const Trash = (_Bb) => {
-  var _Cb = _Bb, { size = 18 } = _Cb, props = __objRest(_Cb, ["size"]);
+const Trash = (_Ub) => {
+  var _Vb = _Ub, { size = 18 } = _Vb, props = __objRest(_Vb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -15412,8 +15724,8 @@ const ReceiptsProvider = ({
   const contextData = useReceipts({ bankTransaction, isActive });
   return /* @__PURE__ */ jsxRuntime.jsx(ReceiptsContext.Provider, { value: contextData, children });
 };
-const Eye = (_Db) => {
-  var _Eb = _Db, { size = 18 } = _Eb, props = __objRest(_Eb, ["size"]);
+const Eye = (_Wb) => {
+  var _Xb = _Wb, { size = 18 } = _Xb, props = __objRest(_Xb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -15549,11 +15861,11 @@ const FileThumb = ({
     }
   );
 };
-const TextButton = (_Fb) => {
-  var _Gb = _Fb, {
+const TextButton = (_Yb) => {
+  var _Zb = _Yb, {
     className,
     children
-  } = _Gb, props = __objRest(_Gb, [
+  } = _Zb, props = __objRest(_Zb, [
     "className",
     "children"
   ]);
@@ -15641,8 +15953,8 @@ const openReceiptInNewTab = (url, index2) => (e) => {
       `);
   }
 };
-const BankTransactionReceiptsWithProvider = React.forwardRef((_Hb, ref) => {
-  var _Ib = _Hb, { bankTransaction, isActive } = _Ib, props = __objRest(_Ib, ["bankTransaction", "isActive"]);
+const BankTransactionReceiptsWithProvider = React.forwardRef((__b, ref) => {
+  var _$b = __b, { bankTransaction, isActive } = _$b, props = __objRest(_$b, ["bankTransaction", "isActive"]);
   return /* @__PURE__ */ jsxRuntime.jsx(ReceiptsProvider, { bankTransaction, isActive, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionReceipts, __spreadProps(__spreadValues({}, props), { ref })) });
 });
 BankTransactionReceiptsWithProvider.displayName = "BankTransactionReceiptsWithProvider";
@@ -15704,8 +16016,8 @@ const transformCurrencyValue = (rawValue) => {
   }
   return cleaned;
 };
-const AmountInput = (_Jb) => {
-  var _Kb = _Jb, {
+const AmountInput = (_ac) => {
+  var _bc = _ac, {
     onChange,
     className,
     leftText,
@@ -15713,7 +16025,7 @@ const AmountInput = (_Jb) => {
     isInvalid,
     badge,
     placeholder = "$0.00"
-  } = _Kb, props = __objRest(_Kb, [
+  } = _bc, props = __objRest(_bc, [
     "onChange",
     "className",
     "leftText",
@@ -16027,12 +16339,12 @@ const useBankTransactionMemo = ({ bankTransactionId }) => {
     isSaved
   }), [form, isErrorUpdatingMemo, isUpdatingMemo, isSaved]);
 };
-const Textarea = (_Lb) => {
-  var _Mb = _Lb, {
+const Textarea = (_cc) => {
+  var _dc = _cc, {
     className,
     isInvalid,
     errorMessage
-  } = _Mb, props = __objRest(_Mb, [
+  } = _dc, props = __objRest(_dc, [
     "className",
     "isInvalid",
     "errorMessage"
@@ -17011,9 +17323,6 @@ function useTagDimensionByKey({ isEnabled = true, dimensionKey }) {
   );
   return new TagDimensionByKeySWRResponse(swrResponse);
 }
-function usePreloadTagDimensionByKey(parameters) {
-  useTagDimensionByKey(parameters);
-}
 class TagValueDefinitionAsOption {
   constructor(tagValueDefinition) {
     __publicField(this, "tagValueDefinition");
@@ -17819,8 +18128,8 @@ const BankTransactionsMobileListItemCheckbox = ({
     }
   ) });
 };
-const Paperclip = (_Nb) => {
-  var _Ob = _Nb, { size = 20 } = _Ob, props = __objRest(_Ob, ["size"]);
+const Paperclip = (_ec) => {
+  var _fc = _ec, { size = 20 } = _fc, props = __objRest(_fc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -19541,8 +19850,8 @@ function useArchiveCategorizationRule() {
     }
   });
 }
-const BackArrow = (_Pb) => {
-  var _Qb = _Pb, { size = 18 } = _Qb, props = __objRest(_Qb, ["size"]);
+const BackArrow = (_gc) => {
+  var _hc = _gc, { size = 18 } = _hc, props = __objRest(_hc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -19709,31 +20018,8 @@ const usePaginationRange = ({
   }, [totalCount, pageSize, siblingCount, currentPage]);
   return paginationRange;
 };
-const ChevronLeft = (_Rb) => {
-  var props = __objRest(_Rb, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    __spreadProps(__spreadValues({
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "18",
-      height: "18",
-      viewBox: "0 0 18 18",
-      fill: "none"
-    }, props), {
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M11.25 13.5L6.75 9L11.25 4.5",
-          stroke: "currentColor",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    })
-  );
-};
-const PaginationButton = (_Sb) => {
-  var _Tb = _Sb, { children, isSelected } = _Tb, buttonProps = __objRest(_Tb, ["children", "isSelected"]);
+const PaginationButton = (_ic) => {
+  var _jc = _ic, { children, isSelected } = _jc, buttonProps = __objRest(_jc, ["children", "isSelected"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     __spreadProps(__spreadValues({
@@ -19934,8 +20220,8 @@ const getColumnDefs = (columnConfig2) => {
 const CSS_PREFIX$1 = "Layer__UI__Table";
 const getClassName = (component, additionalClassNames, withHidden) => classNames(`${CSS_PREFIX$1}-${component}`, withHidden && `${CSS_PREFIX$1}-${component}--hidden`, additionalClassNames);
 const Table$1 = React.forwardRef(
-  (_Ub, ref) => {
-    var _Vb = _Ub, { children, className, nonAria, slot } = _Vb, restProps = __objRest(_Vb, ["children", "className", "nonAria", "slot"]);
+  (_kc, ref) => {
+    var _lc = _kc, { children, className, nonAria, slot } = _lc, restProps = __objRest(_lc, ["children", "className", "nonAria", "slot"]);
     const TableComponent = nonAria ? "table" : reactAriaComponents.Table;
     return /* @__PURE__ */ jsxRuntime.jsx(
       TableComponent,
@@ -19950,8 +20236,8 @@ const Table$1 = React.forwardRef(
   }
 );
 Table$1.displayName = "Table";
-const TableHeaderInner = (_Wb, ref) => {
-  var _Xb = _Wb, { children, className, hideHeader, nonAria } = _Xb, restProps = __objRest(_Xb, ["children", "className", "hideHeader", "nonAria"]);
+const TableHeaderInner = (_mc, ref) => {
+  var _nc = _mc, { children, className, hideHeader, nonAria } = _nc, restProps = __objRest(_nc, ["children", "className", "hideHeader", "nonAria"]);
   const TableHeaderComponent = nonAria ? "thead" : reactAriaComponents.TableHeader;
   return /* @__PURE__ */ jsxRuntime.jsx(
     TableHeaderComponent,
@@ -19965,8 +20251,8 @@ const TableHeaderInner = (_Wb, ref) => {
 };
 const TableHeader = React.forwardRef(TableHeaderInner);
 TableHeader.displayName = "TableHeader";
-const TableBodyInner = (_Yb, ref) => {
-  var _Zb = _Yb, { children, className, nonAria } = _Zb, restProps = __objRest(_Zb, ["children", "className", "nonAria"]);
+const TableBodyInner = (_oc, ref) => {
+  var _pc = _oc, { children, className, nonAria } = _pc, restProps = __objRest(_pc, ["children", "className", "nonAria"]);
   const TableBodyComponent = nonAria ? "tbody" : reactAriaComponents.TableBody;
   return /* @__PURE__ */ jsxRuntime.jsx(
     TableBodyComponent,
@@ -19980,8 +20266,8 @@ const TableBodyInner = (_Yb, ref) => {
 };
 const TableBody$1 = React.forwardRef(TableBodyInner);
 TableBody$1.displayName = "TableBody";
-const RowInner = (__b, ref) => {
-  var _$b = __b, { children, className, depth = 0, nonAria, id } = _$b, restProps = __objRest(_$b, ["children", "className", "depth", "nonAria", "id"]);
+const RowInner = (_qc, ref) => {
+  var _rc = _qc, { children, className, depth = 0, nonAria, id } = _rc, restProps = __objRest(_rc, ["children", "className", "depth", "nonAria", "id"]);
   const dataProperties = toDataProperties({ depth });
   const RowComponent = nonAria ? "tr" : reactAriaComponents.Row;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -19998,8 +20284,8 @@ const RowInner = (__b, ref) => {
 const Row = React.forwardRef(RowInner);
 Row.displayName = "Row";
 const Column = React.forwardRef(
-  (_ac, ref) => {
-    var _bc = _ac, { children, className, nonAria, id, textAlign = "left", colSpan = 1 } = _bc, restProps = __objRest(_bc, ["children", "className", "nonAria", "id", "textAlign", "colSpan"]);
+  (_sc, ref) => {
+    var _tc = _sc, { children, className, nonAria, id, textAlign = "left", colSpan = 1 } = _tc, restProps = __objRest(_tc, ["children", "className", "nonAria", "id", "textAlign", "colSpan"]);
     const dataProperties = toDataProperties({ "text-align": textAlign });
     const columnClassName = getClassName("Column", className);
     const ColumnComponent = nonAria ? "th" : reactAriaComponents.Column;
@@ -20018,8 +20304,8 @@ const Column = React.forwardRef(
 );
 Column.displayName = "Column";
 const Cell = React.forwardRef(
-  (_cc, ref) => {
-    var _dc = _cc, { children, className, nonAria, id } = _dc, restProps = __objRest(_dc, ["children", "className", "nonAria", "id"]);
+  (_uc, ref) => {
+    var _vc = _uc, { children, className, nonAria, id } = _vc, restProps = __objRest(_vc, ["children", "className", "nonAria", "id"]);
     const CellComponent = nonAria ? "td" : reactAriaComponents.Cell;
     return /* @__PURE__ */ jsxRuntime.jsx(
       CellComponent,
@@ -20932,8 +21218,8 @@ function useTagDimensions({ isEnabled = true } = {}) {
 function usePreloadTagDimensions(parameters) {
   useTagDimensions(parameters);
 }
-const Inbox = (_ec) => {
-  var _fc = _ec, { size = 18 } = _fc, props = __objRest(_fc, ["size"]);
+const Inbox = (_wc) => {
+  var _xc = _wc, { size = 18 } = _xc, props = __objRest(_xc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -21013,8 +21299,8 @@ function BankTransactionsListWithEmptyStates({
   return slots.List;
 }
 const COMPONENT_NAME$d = "bank-transactions";
-const BankTransactions = (_gc) => {
-  var _hc = _gc, {
+const BankTransactions = (_yc) => {
+  var _zc = _yc, {
     onError,
     showTags = false,
     showCustomerVendor = false,
@@ -21023,7 +21309,7 @@ const BankTransactions = (_gc) => {
     mode,
     renderInAppLink,
     filters
-  } = _hc, restProps = __objRest(_hc, [
+  } = _zc, restProps = __objRest(_zc, [
     "onError",
     "showTags",
     "showCustomerVendor",
@@ -21118,7 +21404,7 @@ const BankTransactionsTableView = ({
     }
   });
   const isLastPage = data && !hasMore && Math.ceil(((data == null ? void 0 : data.length) || 0) / pageSize) === currentPage;
-  const tableContentMode = listView && mobileComponent === "mobileList" ? "MobileList" : listView ? "List" : "Table";
+  const tableContentMode = listView && mobileComponent === "mobileList" ? BankTransactionsTableContent.MobileList : listView ? BankTransactionsTableContent.List : BankTransactionsTableContent.Table;
   const BankTransactionsTableViewContent = React.useMemo(() => {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__bank-transactions__table-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
       BankTransactionsTable,
@@ -21173,16 +21459,16 @@ const BankTransactionsTableView = ({
   }, [bankTransactions, showDescriptions, showReceiptUploads, showTooltips]);
   const slots = React.useMemo(() => {
     switch (tableContentMode) {
-      case "Table":
+      case BankTransactionsTableContent.Table:
         return {
           List: BankTransactionsTableViewContent
         };
-      case "List":
+      case BankTransactionsTableContent.List:
         return {
           List: BankTransactionsListView,
           Loader: BankTransactionsListLoader
         };
-      case "MobileList":
+      case BankTransactionsTableContent.MobileList:
         return {
           List: BankTransactionsMobileListView,
           Loader: /* @__PURE__ */ jsxRuntime.jsx(MobileListSkeleton, {})
@@ -21216,8 +21502,7 @@ const BankTransactionsTableView = ({
           {
             shiftStickyHeader,
             asWidget,
-            mobileComponent,
-            listView,
+            tableContentMode,
             stringOverrides: stringOverrides == null ? void 0 : stringOverrides.bankTransactionsHeader,
             isSyncing,
             withUploadMenu: showUploadOptions,
@@ -21233,7 +21518,7 @@ const BankTransactionsTableView = ({
             isOpen: !!ruleSuggestion,
             onOpenChange: handleRuleSuggestionOpenChange,
             ruleSuggestion,
-            variant: tableContentMode === "MobileList" ? "drawer" : "modal"
+            variant: tableContentMode === BankTransactionsTableContent.MobileList ? "drawer" : "modal"
           }
         ),
         !isMonthlyViewMode && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(HStack, { justify: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -21330,8 +21615,8 @@ function QuickbooksContextProvider({ children }) {
   const quickbooksContextData = useQuickbooks();
   return /* @__PURE__ */ jsxRuntime.jsx(QuickbooksContext.Provider, { value: quickbooksContextData, children });
 }
-const Cog = (_ic) => {
-  var _jc = _ic, { size = 12 } = _jc, props = __objRest(_jc, ["size"]);
+const Cog = (_Ac) => {
+  var _Bc = _Ac, { size = 12 } = _Bc, props = __objRest(_Bc, ["size"]);
   const id = React.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -21352,8 +21637,8 @@ const Cog = (_ic) => {
     })
   );
 };
-const QuickbooksIcon = (_kc) => {
-  var _lc = _kc, { size = 24 } = _lc, props = __objRest(_lc, ["size"]);
+const QuickbooksIcon = (_Cc) => {
+  var _Dc = _Cc, { size = 24 } = _Dc, props = __objRest(_Dc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -21512,8 +21797,8 @@ function IntegrationsQuickbooksUnlinkConfirmationModal({ isOpen, onOpenChange })
     }
   );
 }
-const MoreVertical = (_mc) => {
-  var _nc = _mc, { size = 18 } = _nc, props = __objRest(_nc, ["size"]);
+const MoreVertical = (_Ec) => {
+  var _Fc = _Ec, { size = 18 } = _Fc, props = __objRest(_Fc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -21742,8 +22027,8 @@ const IntegrationsComponent = ({
     (quickbooksConnectionStatus == null ? void 0 : quickbooksConnectionStatus.is_connected) && /* @__PURE__ */ jsxRuntime.jsx(IntegrationsContent, {})
   ] });
 };
-const PlusIcon = (_oc) => {
-  var _pc = _oc, { size = 14 } = _pc, props = __objRest(_pc, ["size"]);
+const PlusIcon = (_Gc) => {
+  var _Hc = _Gc, { size = 14 } = _Hc, props = __objRest(_Hc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -21785,8 +22070,8 @@ const PlusIcon = (_oc) => {
     })
   );
 };
-const InstitutionIcon = (_qc) => {
-  var _rc = _qc, { size = 18 } = _rc, props = __objRest(_rc, ["size"]);
+const InstitutionIcon = (_Ic) => {
+  var _Jc = _Ic, { size = 18 } = _Jc, props = __objRest(_Jc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -22404,8 +22689,8 @@ const MenuItem = React.forwardRef(
 );
 const PILL_CLASS_NAME = "Layer__Pill";
 const Pill = React.forwardRef(
-  function Pill2(_sc, ref) {
-    var _tc = _sc, { children, status } = _tc, restProps = __objRest(_tc, ["children", "status"]);
+  function Pill2(_Kc, ref) {
+    var _Lc = _Kc, { children, status } = _Lc, restProps = __objRest(_Lc, ["children", "status"]);
     const dataProperties = toDataProperties({ status });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Button,
@@ -22766,158 +23051,9 @@ const LinkedAccountsContent = ({
     /* @__PURE__ */ jsxRuntime.jsx(LinkedAccountsConfirmationModal, {})
   ] });
 };
-const CALENDAR_CLASS_NAME = "Layer__UI__Calendar";
-const Calendar = React.forwardRef(
-  function Calendar2(_uc, ref) {
-    var _vc = _uc, { className, isReadOnly } = _vc, restProps = __objRest(_vc, ["className", "isReadOnly"]);
-    const dataProperties = toDataProperties({ readonly: isReadOnly });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactAriaComponents.Calendar,
-      __spreadProps(__spreadValues(__spreadValues({}, dataProperties), restProps), {
-        isReadOnly,
-        className: classNames(CALENDAR_CLASS_NAME, className),
-        ref
-      })
-    );
-  }
-);
-const CALENDAR_GRID_CLASS_NAME = "Layer__UI__CalendarGrid";
-const CalendarGrid = React.forwardRef(
-  function CalendarGrid2(_wc, ref) {
-    var _xc = _wc, { className } = _xc, restProps = __objRest(_xc, ["className"]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactAriaComponents.CalendarGrid,
-      __spreadProps(__spreadValues({}, restProps), {
-        className: classNames(CALENDAR_GRID_CLASS_NAME, className),
-        ref
-      })
-    );
-  }
-);
-const CALENDAR_GRID_BODY_CLASS_NAME = "Layer__UI__CalendarGridBody";
-const CalendarGridBody = React.forwardRef(
-  function CalendarGridBody2(_yc, ref) {
-    var _zc = _yc, { className } = _zc, restProps = __objRest(_zc, ["className"]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactAriaComponents.CalendarGridBody,
-      __spreadProps(__spreadValues({}, restProps), {
-        className: classNames(CALENDAR_GRID_BODY_CLASS_NAME, className),
-        ref
-      })
-    );
-  }
-);
-const CALENDAR_CELL_CLASS_NAME = "Layer__UI__CalendarCell";
-const CalendarCell = React.forwardRef(
-  function CalendarCell2(_Ac, ref) {
-    var _Bc = _Ac, { className, size = "sm" } = _Bc, restProps = __objRest(_Bc, ["className", "size"]);
-    const dataProperties = toDataProperties({ size });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactAriaComponents.CalendarCell,
-      __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
-        className: classNames(CALENDAR_CELL_CLASS_NAME, className),
-        ref
-      })
-    );
-  }
-);
-const CALENDAR_GRID_HEADER_CLASS_NAME = "Layer__UI__CalendarGridHeader";
-const CalendarGridHeader = React.forwardRef(
-  function CalendarGridHeader2(_Cc, ref) {
-    var _Dc = _Cc, { className } = _Dc, restProps = __objRest(_Dc, ["className"]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactAriaComponents.CalendarGridHeader,
-      __spreadProps(__spreadValues({}, restProps), {
-        className: classNames(CALENDAR_GRID_HEADER_CLASS_NAME, className),
-        ref
-      })
-    );
-  }
-);
-const CALENDAR_HEADER_CELL_CLASS_NAME = "Layer__UI__CalendarHeaderCell";
-const CalendarHeaderCell = React.forwardRef(
-  function CalendarHeaderCell2(_Ec, ref) {
-    var _Fc = _Ec, { className, size = "sm" } = _Fc, restProps = __objRest(_Fc, ["className", "size"]);
-    const dataProperties = toDataProperties({ size });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactAriaComponents.CalendarHeaderCell,
-      __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
-        className: classNames(CALENDAR_HEADER_CELL_CLASS_NAME, className),
-        ref
-      })
-    );
-  }
-);
-const DateCalendar = ({ minDate, maxDate, variant }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Calendar, { minValue: minDate, maxValue: maxDate, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", justify: "space-between", pb: "xs", pi: "xs", className: "Layer__DateCalendar__Header", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { icon: true, inset: true, variant: "ghost", slot: "previous", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, { size: 20 }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Heading$1, { weight: "normal", size: "sm" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { icon: true, inset: true, variant: "ghost", slot: "next", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, { size: 20 }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(HStack, { pb: "xs", pi: "xs", children: /* @__PURE__ */ jsxRuntime.jsxs(CalendarGrid, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsxRuntime.jsx(CalendarHeaderCell, { size: variant === "mobile" ? "md" : "sm", children: day }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(CalendarGridBody, { children: (date2) => /* @__PURE__ */ jsxRuntime.jsx(CalendarCell, { date: date2, size: variant === "mobile" ? "md" : "sm" }) })
-    ] }) })
-  ] });
-};
-const DatePickerInput = ({ errorText, variant, onClick }) => {
-  const errorTriangle = React.useMemo(() => {
-    if (variant === "mobile" || !errorText) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { offset: 12, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(FieldError, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, { size: 18 }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", width: "md", children: errorText })
-    ] });
-  }, [errorText, variant]);
-  if (variant === "mobile") {
-    return /* @__PURE__ */ jsxRuntime.jsx(InputGroup$1, { slot: "input", isInvalid: !!errorText, onClick, children: /* @__PURE__ */ jsxRuntime.jsx(DateInput, { inset: true, pointerEvents: "none", children: (segment) => /* @__PURE__ */ jsxRuntime.jsx(DateSegment, { isReadOnly: true, segment }) }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(InputGroup$1, { slot: "input", isInvalid: !!errorText, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DateInput, { inset: true, children: (segment) => /* @__PURE__ */ jsxRuntime.jsx(DateSegment, { segment }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "3xs", align: "center", children: [
-      errorTriangle,
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { icon: true, inset: true, variant: "ghost", onClick, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 20 }) })
-    ] })
-  ] });
-};
-const DatePicker = ({
-  label,
-  showLabel = true,
-  date: date2,
-  minDate,
-  maxDate,
-  isInvalid,
-  errorText,
-  onBlur,
-  onChange,
-  isDisabled
-}) => {
-  const additionalAriaProps = !showLabel && { "aria-label": label };
-  const { value } = useSizeClass();
-  const [isPopoverOpen, setPopoverOpen] = React.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    DatePicker$1,
-    __spreadProps(__spreadValues({
-      granularity: "day",
-      value: date2,
-      onBlur,
-      onChange,
-      isInvalid
-    }, additionalAriaProps), {
-      isOpen: isPopoverOpen,
-      onOpenChange: setPopoverOpen,
-      isDisabled,
-      children: [
-        showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx(DatePickerInput, { errorText, variant: value, onClick: () => setPopoverOpen(true) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ResponsivePopover, { children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { children: /* @__PURE__ */ jsxRuntime.jsx(DateCalendar, { minDate, maxDate, variant: value }) }) })
-      ]
-    })
-  );
-};
 const getIsDateInvalid = (date2, { minDate, maxDate }) => {
   if (date2 === null) return "Cannot select empty date";
-  if (minDate && date2.compare(minDate) < 0) return "Cannot select date before the business activation date";
+  if (minDate && date2.compare(minDate) < 0) return `Cannot select date before ${formatDate(minDate.toDate())}`;
   if (maxDate && date2.compare(maxDate) > 0) return "Cannot select date in the future";
   return null;
 };
@@ -23945,14 +24081,14 @@ const formatYAxisValue = (value) => {
     return value;
   }
 };
-const CustomizedYTick = (_Gc) => {
-  var _Hc = _Gc, {
+const CustomizedYTick = (_Mc) => {
+  var _Nc = _Mc, {
     verticalAnchor: _verticalAnchor,
     visibleTicksCount: _visibleTicksCount,
     tickFormatter: _tickFormatter,
     format,
     payload
-  } = _Hc, restProps = __objRest(_Hc, [
+  } = _Nc, restProps = __objRest(_Nc, [
     "verticalAnchor",
     "visibleTicksCount",
     "tickFormatter",
@@ -23961,8 +24097,8 @@ const CustomizedYTick = (_Gc) => {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("text", __spreadProps(__spreadValues({}, restProps), { className: "Layer__ChartYAxis__tick", children: /* @__PURE__ */ jsxRuntime.jsx("tspan", { dy: "0.355em", children: format(payload.value) }) }));
 };
-const ChartYAxis = (_Ic) => {
-  var _Jc = _Ic, { format = formatYAxisValue } = _Jc, props = __objRest(_Jc, ["format"]);
+const ChartYAxis = (_Oc) => {
+  var _Pc = _Oc, { format = formatYAxisValue } = _Pc, props = __objRest(_Pc, ["format"]);
   const tick = (tickProps) => /* @__PURE__ */ jsxRuntime.jsx(CustomizedYTick, __spreadProps(__spreadValues({}, tickProps), { format }));
   return /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, __spreadValues({ tick }, props));
 };
@@ -24210,8 +24346,8 @@ const renderLegendContent = () => {
   )) });
 };
 const ProfitAndLossChartLegend = () => /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { verticalAlign: "top", align: "right", content: renderLegendContent });
-const BarChart2 = (_Kc) => {
-  var _Lc = _Kc, { size = 12 } = _Lc, props = __objRest(_Lc, ["size"]);
+const BarChart2 = (_Qc) => {
+  var _Rc = _Qc, { size = 12 } = _Rc, props = __objRest(_Rc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -24291,13 +24427,13 @@ const ChartTooltipCursor = ({ width, points, height }) => {
     }
   ) });
 };
-const ChartTooltip = (_Mc) => {
-  var _Nc = _Mc, {
+const ChartTooltip = (_Sc) => {
+  var _Tc = _Sc, {
     content,
     cursorWidth,
     animationDuration = 100,
     animationEasing = "ease-out"
-  } = _Nc, props = __objRest(_Nc, [
+  } = _Tc, props = __objRest(_Tc, [
     "content",
     "cursorWidth",
     "animationDuration",
@@ -24559,11 +24695,11 @@ const ProfitAndLossChart = ({ tagFilter }) => {
     isSyncing ? /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossChartStateCard, {}) : null
   ] });
 };
-const BackButton = (_Oc) => {
-  var _Pc = _Oc, {
+const BackButton = (_Uc) => {
+  var _Vc = _Uc, {
     className,
     textOnly = false
-  } = _Pc, props = __objRest(_Pc, [
+  } = _Vc, props = __objRest(_Vc, [
     "className",
     "textOnly"
   ]);
@@ -24576,7 +24712,7 @@ function useGlobalDatePickerBounds() {
   const maxDate = React.useMemo(() => dateFns.endOfDay(/* @__PURE__ */ new Date()), []);
   return React.useMemo(() => ({ minDate, maxDate }), [minDate, maxDate]);
 }
-const GlobalMonthPicker = ({ truncateMonth }) => {
+const GlobalMonthPicker = ({ truncateMonth, showLabel = false }) => {
   const { minDate, maxDate } = useGlobalDatePickerBounds();
   const { setMonth } = useGlobalDateRangeActions();
   const { date: date2 } = useGlobalDate({ dateSelectionMode: "month" });
@@ -24589,8 +24725,8 @@ const GlobalMonthPicker = ({ truncateMonth }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     MonthPicker,
     {
-      label: "Select a month",
-      showLabel: false,
+      label: "Month",
+      showLabel,
       date: dateZdt,
       onChange,
       minDate: minDateZdt,
@@ -24617,8 +24753,8 @@ const TASKS_CHARTS_COLORS = {
   done: "#3B9C63",
   pending: "#DFA000"
 };
-const SortArrows = (_Qc) => {
-  var _Rc = _Qc, { size = 13 } = _Rc, props = __objRest(_Rc, ["size"]);
+const SortArrows = (_Wc) => {
+  var _Xc = _Wc, { size = 13 } = _Xc, props = __objRest(_Xc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -25044,8 +25180,8 @@ const DetailedChart = ({
     ] }) }) })
   ] });
 };
-const HeaderCol = ({ className, children, style, noPadding = false }) => {
-  const dataProperties = toDataProperties({ "no-padding": noPadding });
+const HeaderCol = ({ className, children, style, noPadding = false, fluid = false }) => {
+  const dataProperties = toDataProperties({ "no-padding": noPadding, fluid });
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, dataProperties), { className: classNames("Layer__header__col", className), style, children }));
 };
 const DetailReportBreadcrumb = ({
@@ -25149,11 +25285,11 @@ const LedgerAccountsContext = React.createContext({
   fetchMore: () => {
   }
 });
-const CloseButton = (_Sc) => {
-  var _Tc = _Sc, {
+const CloseButton = (_Yc) => {
+  var _Zc = _Yc, {
     className,
     textOnly = false
-  } = _Tc, props = __objRest(_Tc, [
+  } = _Zc, props = __objRest(_Zc, [
     "className",
     "textOnly"
   ]);
@@ -26163,16 +26299,21 @@ const DateSelectionComboBox = () => {
     const nextRange = rangeForPreset(nextPreset);
     setDateRange(nextRange);
   }, [setDateRange]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ComboBox,
-    {
-      options: options$4,
-      onSelectedValueChange,
-      selectedValue: selectedOption,
-      isSearchable: false,
-      isClearable: false
-    }
-  );
+  const inputId = React.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Label, { pbe: "3xs", size: "sm", htmlFor: inputId, children: "Report period" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ComboBox,
+      {
+        options: options$4,
+        onSelectedValueChange,
+        selectedValue: selectedOption,
+        isSearchable: false,
+        isClearable: false,
+        inputId
+      }
+    )
+  ] });
 };
 const GlobalDateRangePicker = () => {
   const { startDate: globalStartDate, endDate: globalEndDate } = useGlobalDateRange({ dateSelectionMode: "full" });
@@ -26213,29 +26354,29 @@ const GlobalDateRangePicker = () => {
     /* @__PURE__ */ jsxRuntime.jsx(
       DatePicker,
       {
-        label: "Start Date",
-        showLabel: false,
+        label: "Start date",
         date: localStartDate,
         onChange: onChangeStartDate,
         minDate: minStartDate,
         maxDate: maxStartDate,
         isInvalid: startDateInvalid,
         errorText: startDateErrorText,
-        onBlur: onBlurStartDate
+        onBlur: onBlurStartDate,
+        slotProps: { Label: { size: "sm", pbe: "3xs" } }
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
       DatePicker,
       {
-        label: "End Date",
-        showLabel: false,
+        label: "End date",
         date: localEndDate,
         onChange: onChangeEndDate,
         minDate: minEndDate,
         maxDate: maxEndDate,
         isInvalid: endDateInvalid,
         errorText: endDateErrorText,
-        onBlur: onBlurEndDate
+        onBlur: onBlurEndDate,
+        slotProps: { Label: { size: "sm", pbe: "3xs" } }
       }
     )
   ] });
@@ -26257,7 +26398,7 @@ const DateRangeSelection = () => {
 };
 const CombinedDateRangeSelection = ({ mode }) => {
   if (mode === "month") {
-    return /* @__PURE__ */ jsxRuntime.jsx(GlobalMonthPicker, {});
+    return /* @__PURE__ */ jsxRuntime.jsx(GlobalMonthPicker, { showLabel: true });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(DateRangeSelection, {});
 };
@@ -26522,17 +26663,22 @@ const DateGroupByComboBox = ({ value, onValueChange }) => {
   const onSelectedValueChange = React.useCallback((option) => {
     onValueChange((option == null ? void 0 : option.value) || null);
   }, [onValueChange]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ComboBox,
-    {
-      className: "Layer__DateGroupByComboBox",
-      options: options$3,
-      onSelectedValueChange,
-      selectedValue: selectedOption,
-      isSearchable: false,
-      isClearable: false
-    }
-  );
+  const inputId = React.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { className: "Layer__DateGroupByComboBox__Container", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Label, { pbe: "3xs", size: "sm", htmlFor: inputId, children: "Group by" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ComboBox,
+      {
+        className: "Layer__DateGroupByComboBox",
+        options: options$3,
+        onSelectedValueChange,
+        selectedValue: selectedOption,
+        isSearchable: false,
+        isClearable: false,
+        inputId
+      }
+    )
+  ] });
 };
 const MultiSelect = ({
   name,
@@ -26582,6 +26728,10 @@ const MultiSelect = ({
     /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: errorMessage })
   ] });
 };
+const toSelectOption = (opt) => ({
+  value: JSON.stringify(opt.tagFilterConfig),
+  label: opt.displayName
+});
 const selectStyles = {
   valueContainer: (styles) => {
     return __spreadProps(__spreadValues({}, styles), {
@@ -26589,49 +26739,43 @@ const selectStyles = {
     });
   }
 };
-const ProfitAndLossCompareOptions = () => {
+const CompareTagsMultiSelect = () => {
   const {
-    setSelectedCompareOptions,
     compareOptions,
     selectedCompareOptions,
+    setSelectedCompareOptions
+  } = React.useContext(ProfitAndLossComparisonContext);
+  const inputId = React.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { className: "Layer__CompareTagsMultiSelect__Container", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Label, { pbe: "3xs", size: "sm", htmlFor: inputId, children: "Compare by" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MultiSelect,
+      {
+        inputId,
+        options: compareOptions.map(toSelectOption),
+        onChange: setSelectedCompareOptions,
+        defaultValue: selectedCompareOptions == null ? void 0 : selectedCompareOptions.map(toSelectOption),
+        value: selectedCompareOptions.map(toSelectOption),
+        placeholder: "Select tags",
+        styles: selectStyles,
+        className: "Layer__CompareTagsMultiSelect"
+      }
+    )
+  ] });
+};
+const ProfitAndLossCompareOptions = () => {
+  const {
     comparisonConfig,
     comparisonPeriodMode,
     setComparisonPeriodMode
   } = React.useContext(ProfitAndLossComparisonContext);
   const { dateSelectionMode } = React.useContext(ProfitAndLossContext);
-  const tagComparisonSelectOptions = compareOptions.map(
-    (tagComparisonOption) => {
-      return {
-        value: JSON.stringify(tagComparisonOption.tagFilterConfig),
-        label: tagComparisonOption.displayName
-      };
-    }
-  );
   if (!comparisonConfig) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", gap: "xs", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "end", gap: "xs", children: [
     dateSelectionMode === "full" && /* @__PURE__ */ jsxRuntime.jsx(DateGroupByComboBox, { value: comparisonPeriodMode, onValueChange: setComparisonPeriodMode }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      MultiSelect,
-      {
-        options: tagComparisonSelectOptions,
-        onChange: (values) => setSelectedCompareOptions(values),
-        defaultValue: selectedCompareOptions == null ? void 0 : selectedCompareOptions.map((option) => ({
-          value: JSON.stringify(option.tagFilterConfig),
-          label: option.displayName
-        })),
-        value: selectedCompareOptions.map((tagComparisonOption) => {
-          return {
-            value: JSON.stringify(tagComparisonOption.tagFilterConfig),
-            label: tagComparisonOption.displayName
-          };
-        }),
-        placeholder: "Select views",
-        styles: selectStyles,
-        className: "Layer__ProfitAndLoss__TagMultiSelect"
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsx(CompareTagsMultiSelect, {})
   ] });
 };
 const defaultValue = {
@@ -27264,29 +27408,22 @@ const ProfitAndLossReport = ({
   const header = React.useMemo(() => {
     if (hideHeader) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(HeaderCol, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(HeaderRow, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { fluid: true, children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pb: "sm", align: "end", fluid: true, gap: "xs", justify: "space-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", children: [
           /* @__PURE__ */ jsxRuntime.jsx(CombinedDateRangeSelection, { mode: dateSelectionMode }),
           view === "desktop" && useComparisonPnl && /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossCompareOptions, {})
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           ProfitAndLossDownloadButton,
           {
             stringOverrides: stringOverrides == null ? void 0 : stringOverrides.downloadButton,
             moneyFormat: csvMoneyFormat
           }
-        ) })
-      ] }),
-      view !== "desktop" && useComparisonPnl && /* @__PURE__ */ jsxRuntime.jsx(HeaderRow, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossCompareOptions, {}) }) })
+        )
+      ] }) }) }),
+      view !== "desktop" && useComparisonPnl && /* @__PURE__ */ jsxRuntime.jsx(HeaderRow, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { fluid: true, children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { pb: "sm", fluid: true, children: /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossCompareOptions, {}) }) }) })
     ] });
-  }, [
-    csvMoneyFormat,
-    dateSelectionMode,
-    hideHeader,
-    stringOverrides == null ? void 0 : stringOverrides.downloadButton,
-    useComparisonPnl,
-    view
-  ]);
+  }, [csvMoneyFormat, dateSelectionMode, hideHeader, stringOverrides == null ? void 0 : stringOverrides.downloadButton, useComparisonPnl, view]);
   return /* @__PURE__ */ jsxRuntime.jsx(InAppLinkProvider, { renderInAppLink, children: /* @__PURE__ */ jsxRuntime.jsx(View, { type: "panel", header, children: selectedLineItem ? /* @__PURE__ */ jsxRuntime.jsx(
     ProfitAndLossDetailReport,
     {
@@ -27697,10 +27834,10 @@ function Internal_ProfitAndLossSummaries({
     unstable_AdditionalListItems.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossSummariesListItem, { children: item }, index2))
   ] }) });
 }
-function ProfitAndLossSummaries(_Uc) {
-  var _Vc = _Uc, {
+function ProfitAndLossSummaries(__c) {
+  var _$c = __c, {
     onTransactionsToReviewClick
-  } = _Vc, restProps = __objRest(_Vc, [
+  } = _$c, restProps = __objRest(_$c, [
     "onTransactionsToReviewClick"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -27899,8 +28036,8 @@ function BalanceSheetDownloadButton({
     /* @__PURE__ */ jsxRuntime.jsx(InvisibleDownload, { ref: invisibleDownloadRef })
   ] });
 }
-const Collapse = (_Wc) => {
-  var props = __objRest(_Wc, []);
+const Collapse = (_ad) => {
+  var props = __objRest(_ad, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -27933,8 +28070,8 @@ const Collapse = (_Wc) => {
     })
   );
 };
-const Expand = (_Xc) => {
-  var props = __objRest(_Xc, []);
+const Expand = (_bd) => {
+  var props = __objRest(_bd, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -27978,7 +28115,7 @@ const ExpandCollapseButton = ({
     Button$1,
     {
       onClick: () => onClick(!expanded),
-      variant: variant ? variant : iconOnly ? ButtonVariant.secondary : ButtonVariant.tertiary,
+      variant: variant ? variant : ButtonVariant.secondary,
       className: classNames(
         iconOnly ? "Layer__expand-collpase-all-rows-btn--sm" : "Layer__expand-collpase-all-rows-btn",
         className
@@ -28100,15 +28237,15 @@ const GlobalDatePicker = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     DatePicker,
     {
-      label: "Effective Date",
-      showLabel: false,
+      label: "Effective date",
       date: localDate,
       onChange,
       minDate: minDateZdt,
       maxDate: maxDateZdt,
       isInvalid,
       errorText,
-      onBlur
+      onBlur,
+      slotProps: { Label: { size: "sm", pbe: "3xs" } }
     }
   );
 };
@@ -28129,7 +28266,7 @@ const DateSelection = () => {
 };
 const CombinedDateSelection = ({ mode }) => {
   if (mode === "month") {
-    return /* @__PURE__ */ jsxRuntime.jsx(GlobalMonthPicker, {});
+    return /* @__PURE__ */ jsxRuntime.jsx(GlobalMonthPicker, { showLabel: true });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(DateSelection, {});
 };
@@ -28158,10 +28295,10 @@ const BalanceSheetView = ({
       {
         type: "panel",
         ref: containerRef,
-        header: /* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(CombinedDateSelection, { mode: dateSelectionMode }) }),
-          withExpandAllButton && /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(BalanceSheetExpandAllButton, { view }) })
-        ] }) }),
+        header: /* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderRow, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { fluid: true, children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pb: "sm", align: "end", gap: "xs", justify: "space-between", fluid: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CombinedDateSelection, { mode: dateSelectionMode }),
+          withExpandAllButton && /* @__PURE__ */ jsxRuntime.jsx(BalanceSheetExpandAllButton, { view })
+        ] }) }) }) }),
         children: !data || isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `Layer__${COMPONENT_NAME$9}__loader-container`, children: /* @__PURE__ */ jsxRuntime.jsx(Loader, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(
           BalanceSheetTable,
           {
@@ -28178,9 +28315,9 @@ const BalanceSheetView = ({
     {
       type: "panel",
       ref: containerRef,
-      header: /* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(CombinedDateSelection, { mode: dateSelectionMode }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(HeaderCol, { children: [
+      header: /* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderRow, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { fluid: true, children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pb: "sm", align: "end", gap: "xs", justify: "space-between", fluid: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CombinedDateSelection, { mode: dateSelectionMode }),
+        /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", children: [
           withExpandAllButton && /* @__PURE__ */ jsxRuntime.jsx(BalanceSheetExpandAllButton, { view }),
           /* @__PURE__ */ jsxRuntime.jsx(
             BalanceSheetDownloadButton,
@@ -28190,7 +28327,7 @@ const BalanceSheetView = ({
             }
           )
         ] })
-      ] }) }),
+      ] }) }) }) }),
       children: !data || isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `Layer__${COMPONENT_NAME$9}__loader-container`, children: /* @__PURE__ */ jsxRuntime.jsx(Loader, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(
         BalanceSheetTable,
         {
@@ -28472,17 +28609,17 @@ const StatementOfCashFlowView = ({
     {
       type: "panel",
       ref: containerRef,
-      header: /* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(CombinedDateRangeSelection, { mode: dateSelectionMode }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      header: /* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderRow, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { fluid: true, children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pb: "sm", align: "end", fluid: true, gap: "xs", justify: "space-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CombinedDateRangeSelection, { mode: dateSelectionMode }),
+        /* @__PURE__ */ jsxRuntime.jsx(
           CashflowStatementDownloadButton,
           {
             startDate: dateRange.startDate,
             endDate: dateRange.endDate,
             iconOnly: view === "mobile"
           }
-        ) })
-      ] }) }),
+        )
+      ] }) }) }) }),
       children: !data || isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `Layer__${COMPONENT_NAME$8}__loader-container`, children: /* @__PURE__ */ jsxRuntime.jsx(Loader, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(
         StatementOfCashFlowTable,
         {
@@ -29622,8 +29759,8 @@ const ChartOfAccountsContext = React.createContext(
     }
   }
 );
-const Plus = (_Yc) => {
-  var _Zc = _Yc, { size = 14 } = _Zc, props = __objRest(_Zc, ["size"]);
+const Plus = (_cd) => {
+  var _dd = _cd, { size = 14 } = _dd, props = __objRest(_dd, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -29994,8 +30131,8 @@ var LedgerAccountNodeType = /* @__PURE__ */ ((LedgerAccountNodeType2) => {
   LedgerAccountNodeType2["Parent"] = "Parent";
   return LedgerAccountNodeType2;
 })(LedgerAccountNodeType || {});
-const Edit2 = (__c) => {
-  var _$c = __c, { size = 18 } = _$c, props = __objRest(_$c, ["size"]);
+const Edit2 = (_ed) => {
+  var _fd = _ed, { size = 18 } = _fd, props = __objRest(_fd, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -32626,8 +32763,8 @@ const TasksHeader = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__tasks-header", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.lg, children: tasksHeader }) });
 };
-const SmileIcon = (_ad) => {
-  var _bd = _ad, { size = 12 } = _bd, props = __objRest(_bd, ["size"]);
+const SmileIcon = (_gd) => {
+  var _hd = _gd, { size = 12 } = _hd, props = __objRest(_hd, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -33472,8 +33609,8 @@ const useBookkeepingYearsStatus = () => {
     isLoading
   };
 };
-const ArrowRightCircle = (_cd) => {
-  var _dd = _cd, { size = 18 } = _dd, props = __objRest(_dd, ["size"]);
+const ArrowRightCircle = (_id) => {
+  var _jd = _id, { size = 18 } = _jd, props = __objRest(_jd, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -35521,12 +35658,12 @@ const FormSection = ({ children, title }) => {
     children
   ] });
 };
-const PhoneInput = (_ed) => {
-  var _fd = _ed, {
+const PhoneInput = (_kd) => {
+  var _ld = _kd, {
     value,
     onChange,
     placeholder = "Phone number"
-  } = _fd, props = __objRest(_fd, [
+  } = _ld, props = __objRest(_ld, [
     "value",
     "onChange",
     "placeholder"
@@ -35818,8 +35955,8 @@ const SummaryStep = ({ onNext, title = defaultTitle$1, description = defaultDesc
     /* @__PURE__ */ jsxRuntime.jsx(Button$1, { onClick: onNext, children: nextBtnText })
   ] });
 };
-const Document = (_gd) => {
-  var _hd = _gd, { size = 20 } = _hd, props = __objRest(_hd, ["size"]);
+const Document = (_md) => {
+  var _nd = _md, { size = 20 } = _nd, props = __objRest(_nd, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -35924,8 +36061,8 @@ const Document = (_gd) => {
     })
   );
 };
-const TrendingUp = (_id) => {
-  var _jd = _id, { size = 20 } = _jd, props = __objRest(_jd, ["size"]);
+const TrendingUp = (_od) => {
+  var _pd = _od, { size = 20 } = _pd, props = __objRest(_pd, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -36182,8 +36319,8 @@ const PlatformOnboarding = ({ onComplete }) => {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__platform-onboarding-layout__footer", children: renderStepFooter() })
   ] }) });
 };
-const CoffeeIcon = (_kd) => {
-  var _ld = _kd, { size = 11 } = _ld, props = __objRest(_ld, ["size"]);
+const CoffeeIcon = (_qd) => {
+  var _rd = _qd, { size = 11 } = _rd, props = __objRest(_rd, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -36254,8 +36391,8 @@ const CoffeeIcon = (_kd) => {
     })
   );
 };
-const Link = (_md) => {
-  var _nd = _md, {
+const Link = (_sd) => {
+  var _td = _sd, {
     className,
     children,
     variant = ButtonVariant.primary,
@@ -36265,7 +36402,7 @@ const Link = (_md) => {
     iconAsPrimary = false,
     justify = "center",
     fullWidth
-  } = _nd, props = __objRest(_nd, [
+  } = _td, props = __objRest(_td, [
     "className",
     "children",
     "variant",
@@ -36357,8 +36494,8 @@ const BookkeepingUpsellBar = ({
     onClick ? /* @__PURE__ */ jsxRuntime.jsx(Button$1, { variant: ButtonVariant.secondary, onClick, children: "Schedule a demo" }) : href ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href, target: "_blank", variant: ButtonVariant.secondary, children: "Schedule a demo" }) : null
   ] });
 };
-const ChevronRightFill = (_od) => {
-  var _pd = _od, { size = 18 } = _pd, props = __objRest(_pd, ["size"]);
+const ChevronRightFill = (_ud) => {
+  var _vd = _ud, { size = 18 } = _vd, props = __objRest(_vd, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -36654,7 +36791,11 @@ const InvoiceSchema = effect.Schema.Struct({
     effect.Schema.propertySignature(effect.Schema.NullOr(effect.Schema.Date)),
     effect.Schema.fromKey("updated_at")
   ),
-  memo: effect.Schema.NullOr(effect.Schema.String)
+  memo: effect.Schema.NullOr(effect.Schema.String),
+  customPaymentInstructions: effect.pipe(
+    effect.Schema.propertySignature(effect.Schema.NullOr(effect.Schema.String)),
+    effect.Schema.fromKey("custom_payment_instructions")
+  )
 });
 const UpsertInvoiceTaxLineItemSchema = effect.Schema.Struct({
   amount: effect.Schema.Number
@@ -36691,6 +36832,9 @@ const UpsertInvoiceSchema = effect.Schema.Struct({
     effect.Schema.fromKey("customer_id")
   ),
   memo: effect.Schema.optional(effect.Schema.String),
+  customPaymentInstructions: effect.Schema.optional(effect.Schema.String).pipe(
+    effect.Schema.fromKey("custom_payment_instructions")
+  ),
   lineItems: effect.pipe(
     effect.Schema.propertySignature(effect.Schema.Array(UpsertInvoiceLineItemSchema)),
     effect.Schema.fromKey("line_items")
@@ -36701,12 +36845,10 @@ const UpsertInvoiceSchema = effect.Schema.Struct({
 });
 const InvoiceFormLineItemSchema = effect.Schema.Struct({
   description: effect.Schema.String,
-  unitPrice: effect.Schema.BigDecimal,
-  quantity: effect.Schema.BigDecimal,
-  amount: effect.Schema.BigDecimal,
-  isTaxable: effect.Schema.Boolean,
-  accountIdentifier: effect.Schema.NullOr(AccountIdentifierSchema),
-  tags: effect.Schema.Array(TagSchema)
+  unitPrice: NonRecursiveBigDecimalSchema,
+  quantity: NonRecursiveBigDecimalSchema,
+  amount: NonRecursiveBigDecimalSchema,
+  isTaxable: effect.Schema.Boolean
 });
 const InvoiceFormLineItemEquivalence = effect.Schema.equivalence(InvoiceFormLineItemSchema);
 const InvoiceTermsValuesSchema = effect.Schema.Enums(InvoiceTermsValues);
@@ -37202,7 +37344,7 @@ const InvoiceTable = () => {
     };
   }, [fetchMore, hasMore]);
   const options2 = React.useMemo(() => Object.values(InvoiceStatusOptionConfig), []);
-  const SelectedValue = React.useMemo(() => {
+  const SingleValue = React.useCallback(() => {
     const label = selectedInvoiceStatusOption.label;
     return label ? `Status: ${label}` : "Status";
   }, [selectedInvoiceStatusOption.label]);
@@ -37217,11 +37359,11 @@ const InvoiceTable = () => {
         isSearchable: false,
         isClearable: false,
         placeholder: "Status",
-        slots: { SelectedValue },
+        slots: { SingleValue },
         "aria-label": "Status Filter"
       }
     ),
-    [SelectedValue, options2, selectedInvoiceStatusOption, setTableFilters]
+    [SingleValue, options2, selectedInvoiceStatusOption, setTableFilters]
   );
   const CreateInvoiceButton = React.useCallback(
     () => /* @__PURE__ */ jsxRuntime.jsxs(Button, { onPress: toCreateInvoice, children: [
@@ -39199,8 +39341,8 @@ const useCustomerForm = (props) => {
   }, [form, formDefaults]);
   return React.useMemo(() => ({ form, submitError }), [form, submitError]);
 };
-const CustomerForm = (_qd) => {
-  var _rd = _qd, { onSuccess, isReadOnly } = _rd, formState = __objRest(_rd, ["onSuccess", "isReadOnly"]);
+const CustomerForm = (_wd) => {
+  var _xd = _wd, { onSuccess, isReadOnly } = _xd, formState = __objRest(_xd, ["onSuccess", "isReadOnly"]);
   const { form, submitError } = useCustomerForm(__spreadValues({ onSuccess }, formState));
   const blockNativeOnSubmit = React.useCallback((e) => {
     e.preventDefault();
@@ -39302,7 +39444,8 @@ const CustomerFormDrawer = (props) => {
     }
   );
 };
-const InvoiceFormErrorBanner = ({ form, submitError }) => {
+const InvoiceFormErrorBanner = ({ submitError }) => {
+  const form = useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx(form.Subscribe, { selector: (state) => state.errorMap, children: (errorMap) => {
     const validationErrors = flattenValidationErrors(errorMap);
     if (validationErrors.length > 0 || submitError) {
@@ -39320,9 +39463,9 @@ const InvoiceFormErrorBanner = ({ form, submitError }) => {
   } });
 };
 function computeSubtotal(lineItems) {
-  return lineItems.reduce((sum, item) => effect.BigDecimal.sum(sum, item.amount), BIG_DECIMAL_ZERO);
+  return lineItems.reduce((sum, item) => effect.BigDecimal.sum(sum, fromNonRecursiveBigDecimal(item.amount)), BIG_DECIMAL_ZERO);
 }
-const computeRawTaxableSubtotal = (lineItems) => lineItems.filter((item) => item.isTaxable).reduce((sum, item) => effect.BigDecimal.sum(sum, item.amount), BIG_DECIMAL_ZERO);
+const computeRawTaxableSubtotal = (lineItems) => lineItems.filter((item) => item.isTaxable).reduce((sum, item) => effect.BigDecimal.sum(sum, fromNonRecursiveBigDecimal(item.amount)), BIG_DECIMAL_ZERO);
 function computeAdditionalDiscount({
   subtotal,
   discountRate
@@ -39366,15 +39509,22 @@ const getGrandTotalFromInvoice = (invoice) => {
   const grandTotal = computeGrandTotal({ subtotal, additionalDiscount, taxes });
   return grandTotal;
 };
-const INVOICE_MECE_TAG_DIMENSION = "Job";
 const EMPTY_LINE_ITEM = {
   description: "",
-  unitPrice: BIG_DECIMAL_ZERO,
-  quantity: BIG_DECIMAL_ONE,
-  amount: BIG_DECIMAL_ZERO,
-  isTaxable: false,
-  accountIdentifier: null,
-  tags: []
+  unitPrice: NRBD_ZERO,
+  quantity: NRBD_ONE,
+  amount: NRBD_ZERO,
+  isTaxable: false
+};
+const computeLineItemAmount = (unitPrice, quantity) => {
+  const bdUnitPrice = fromNonRecursiveBigDecimal(unitPrice);
+  const bdQuantity = fromNonRecursiveBigDecimal(quantity);
+  return toNonRecursiveBigDecimal(effect.BigDecimal.round(effect.BigDecimal.normalize(effect.BigDecimal.multiply(bdUnitPrice, bdQuantity)), { scale: 2 }));
+};
+const computeLineItemUnitPrice = (amount, quantity) => {
+  const bdAmount = fromNonRecursiveBigDecimal(amount);
+  const bdQuantity = fromNonRecursiveBigDecimal(quantity);
+  return toNonRecursiveBigDecimal(effect.BigDecimal.round(effect.BigDecimal.normalize(safeDivide(bdAmount, bdQuantity)), { scale: 2 }));
 };
 const getEmptyInvoiceFormValues = () => {
   const sentAt = date.fromDate(dateFns.startOfToday(), date.getLocalTimeZone());
@@ -39393,13 +39543,6 @@ const getEmptyInvoiceFormValues = () => {
     taxRate: BIG_DECIMAL_ZERO
   };
 };
-const getAdditionalTags = (tags) => {
-  return tags.filter((obj) => obj.key.toLowerCase() !== INVOICE_MECE_TAG_DIMENSION.toLowerCase());
-};
-const getSelectedTag = (tags) => {
-  var _a;
-  return (_a = tags.find((obj) => obj.key.toLowerCase() === INVOICE_MECE_TAG_DIMENSION.toLowerCase())) != null ? _a : null;
-};
 const getInvoiceLineItemAmount = (lineItem) => {
   const { unitPrice, quantity } = lineItem;
   return effect.BigDecimal.multiply(quantity, convertCentsToBigDecimal(unitPrice));
@@ -39408,12 +39551,10 @@ const getInvoiceFormLineItem = (lineItem) => {
   const { description, unitPrice, quantity } = lineItem;
   return {
     description: description || "",
-    quantity: effect.BigDecimal.normalize(quantity),
-    unitPrice: convertCentsToBigDecimal(unitPrice),
-    amount: getInvoiceLineItemAmount(lineItem),
-    isTaxable: lineItem.salesTaxTotal > 0,
-    accountIdentifier: lineItem.accountIdentifier,
-    tags: lineItem.transactionTags.map(makeTagFromTransactionTag)
+    quantity: toNonRecursiveBigDecimal(quantity),
+    unitPrice: toNonRecursiveBigDecimal(convertCentsToBigDecimal(unitPrice)),
+    amount: toNonRecursiveBigDecimal(getInvoiceLineItemAmount(lineItem)),
+    isTaxable: lineItem.salesTaxTotal > 0
   };
 };
 const getInvoiceFormInitialValues = (invoice) => {
@@ -39471,14 +39612,6 @@ const validateInvoiceForm = ({ value: invoice }) => {
     errors.push({ lineItems: "Invoice requires at least one non-empty line item." });
   }
   nonEmptyLineItems.some((item) => {
-    if (item.accountIdentifier === null) {
-      errors.push({ lineItems: "Invoice has incomplete line items. Please include required field: Revenue account." });
-      return true;
-    }
-    if (getSelectedTag(item.tags) === null) {
-      errors.push({ lineItems: `Invoice has incomplete line items. Please include required field: ${INVOICE_MECE_TAG_DIMENSION}.` });
-      return true;
-    }
     if (item.description.trim() === "") {
       errors.push({ lineItems: "Invoice has incomplete line items. Please include required field: Description." });
       return true;
@@ -39499,14 +39632,14 @@ const convertInvoiceFormToParams = (form) => {
     invoiceNumber: form.invoiceNumber.trim(),
     memo: form.memo.trim(),
     lineItems: form.lineItems.filter((item) => !InvoiceFormLineItemEquivalence(EMPTY_LINE_ITEM, item)).map((item) => {
-      const baseLineItem = __spreadValues({
+      const baseLineItem = {
         description: item.description.trim(),
-        unitPrice: convertBigDecimalToCents(item.unitPrice),
-        quantity: item.quantity,
-        tags: item.tags.map(makeTagKeyValueFromTag)
-      }, item.accountIdentifier && { accountIdentifier: item.accountIdentifier });
+        unitPrice: convertBigDecimalToCents(fromNonRecursiveBigDecimal(item.unitPrice)),
+        quantity: fromNonRecursiveBigDecimal(item.quantity)
+      };
       if (!item.isTaxable || effect.BigDecimal.equals(form.taxRate, BIG_DECIMAL_ZERO)) return baseLineItem;
-      const itemTaxableSubtotal = computeTaxableSubtotal({ rawTaxableSubtotal: item.amount, discountRate: form.discountRate });
+      const itemAmount = fromNonRecursiveBigDecimal(item.amount);
+      const itemTaxableSubtotal = computeTaxableSubtotal({ rawTaxableSubtotal: itemAmount, discountRate: form.discountRate });
       const itemTaxes = computeTaxes({ taxableSubtotal: itemTaxableSubtotal, taxRate: form.taxRate });
       return __spreadProps(__spreadValues({}, baseLineItem), { salesTaxes: [{ amount: convertBigDecimalToCents(itemTaxes) }] });
     })
@@ -39517,50 +39650,13 @@ const convertInvoiceFormToParams = (form) => {
   });
 };
 const InvoiceFormLineItemRow = ({ form, index: index2, isReadOnly, onDeleteLine }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "xs", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(VStack, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     HStack,
     {
       gap: "xs",
       align: "end",
       className: classNames("Layer__InvoiceForm__LineItem", isReadOnly && "Layer__InvoiceForm__LineItem--readonly"),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(form.Field, { name: `lineItems[${index2}].accountIdentifier`, children: (field) => {
-          const onValueChange = (value) => {
-            if (value && !isClassificationAccountIdentifier(value)) {
-              return;
-            }
-            field.setValue(value);
-          };
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            LedgerAccountCombobox,
-            {
-              label: "Revenue account (hidden)",
-              value: field.state.value,
-              mode: CategoriesListMode.Revenue,
-              onValueChange,
-              isReadOnly,
-              showLabel: index2 === 0
-            }
-          );
-        } }),
-        /* @__PURE__ */ jsxRuntime.jsx(form.Field, { name: `lineItems[${index2}].tags`, children: (field) => {
-          const additionalTags = getAdditionalTags(field.state.value);
-          const selectedTag = getSelectedTag(field.state.value);
-          const onValueChange = (value) => {
-            field.setValue(value ? [...additionalTags, value] : additionalTags);
-          };
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            TagDimensionCombobox,
-            {
-              dimensionKey: INVOICE_MECE_TAG_DIMENSION,
-              isReadOnly,
-              value: selectedTag,
-              onValueChange,
-              showLabel: index2 === 0,
-              isClearable: false
-            }
-          );
-        } }),
         /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: `lineItems[${index2}].description`, children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormTextField, { label: "Description", showLabel: index2 === 0, isReadOnly }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           form.AppField,
@@ -39570,13 +39666,13 @@ const InvoiceFormLineItemRow = ({ form, index: index2, isReadOnly, onDeleteLine
               onBlur: ({ value: quantity }) => {
                 const amount = form.getFieldValue(`lineItems[${index2}].amount`);
                 const unitPrice = form.getFieldValue(`lineItems[${index2}].unitPrice`);
-                const nextAmount = effect.BigDecimal.round(effect.BigDecimal.normalize(effect.BigDecimal.multiply(unitPrice, quantity)), { scale: 2 });
-                if (!effect.BigDecimal.equals(amount, nextAmount)) {
-                  form.setFieldValue(`lineItems[${index2}].amount`, withForceUpdate(nextAmount));
+                const nextAmount = computeLineItemAmount(unitPrice, quantity);
+                if (!nrbdEquals(amount, nextAmount)) {
+                  form.setFieldValue(`lineItems[${index2}].amount`, nextAmount);
                 }
               }
             },
-            children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormBigDecimalField, { label: "Quantity", showLabel: index2 === 0, isReadOnly })
+            children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormNonRecursiveBigDecimalField, { label: "Quantity", showLabel: index2 === 0, isReadOnly })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -39587,13 +39683,13 @@ const InvoiceFormLineItemRow = ({ form, index: index2, isReadOnly, onDeleteLine
               onBlur: ({ value: unitPrice }) => {
                 const amount = form.getFieldValue(`lineItems[${index2}].amount`);
                 const quantity = form.getFieldValue(`lineItems[${index2}].quantity`);
-                const nextAmount = effect.BigDecimal.round(effect.BigDecimal.normalize(effect.BigDecimal.multiply(unitPrice, quantity)), { scale: 2 });
-                if (!effect.BigDecimal.equals(amount, nextAmount)) {
-                  form.setFieldValue(`lineItems[${index2}].amount`, withForceUpdate(nextAmount));
+                const nextAmount = computeLineItemAmount(unitPrice, quantity);
+                if (!nrbdEquals(amount, nextAmount)) {
+                  form.setFieldValue(`lineItems[${index2}].amount`, nextAmount);
                 }
               }
             },
-            children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormBigDecimalField, { label: "Rate", mode: "currency", showLabel: index2 === 0, allowNegative: true, isReadOnly })
+            children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormNonRecursiveBigDecimalField, { label: "Rate", mode: "currency", showLabel: index2 === 0, allowNegative: true, isReadOnly })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -39604,13 +39700,13 @@ const InvoiceFormLineItemRow = ({ form, index: index2, isReadOnly, onDeleteLine
               onBlur: ({ value: amount }) => {
                 const unitPrice = form.getFieldValue(`lineItems[${index2}].unitPrice`);
                 const quantity = form.getFieldValue(`lineItems[${index2}].quantity`);
-                const nextUnitPrice = effect.BigDecimal.round(effect.BigDecimal.normalize(safeDivide(amount, quantity)), { scale: 2 });
-                if (!effect.BigDecimal.equals(unitPrice, nextUnitPrice)) {
-                  form.setFieldValue(`lineItems[${index2}].unitPrice`, withForceUpdate(nextUnitPrice));
+                const nextUnitPrice = computeLineItemUnitPrice(amount, quantity);
+                if (!nrbdEquals(unitPrice, nextUnitPrice)) {
+                  form.setFieldValue(`lineItems[${index2}].unitPrice`, nextUnitPrice);
                 }
               }
             },
-            children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormBigDecimalField, { label: "Amount", mode: "currency", showLabel: index2 === 0, allowNegative: true, isReadOnly })
+            children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormNonRecursiveBigDecimalField, { label: "Amount", mode: "currency", showLabel: index2 === 0, allowNegative: true, isReadOnly })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: `lineItems[${index2}].isTaxable`, children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormCheckboxField, { label: "Taxable", showLabel: index2 === 0, isReadOnly }) }),
@@ -39624,7 +39720,16 @@ const InvoiceFormLineItemsSection = ({
   isReadOnly
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(form.Field, { name: "lineItems", mode: "array", children: (field) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", align: "baseline", children: [
-    field.state.value.map((_value, index2) => /* @__PURE__ */ jsxRuntime.jsx(InvoiceFormLineItemRow, { form, index: index2, isReadOnly, onDeleteLine: () => field.removeValue(index2) }, index2)),
+    field.state.value.map((_lineItem, index2) => /* @__PURE__ */ jsxRuntime.jsx(
+      InvoiceFormLineItemRow,
+      {
+        form,
+        index: index2,
+        isReadOnly,
+        onDeleteLine: () => field.removeValue(index2)
+      },
+      index2
+    )),
     !isReadOnly && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outlined", onClick: () => field.pushValue(EMPTY_LINE_ITEM), children: [
       "Add line item",
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 16 })
@@ -39659,45 +39764,6 @@ const InvoiceFormMetadataSection = ({
     ] })
   ] }) });
 };
-const returnTrue = () => true;
-function CreatableComboBox(_sd) {
-  var _td = _sd, {
-    className,
-    slots,
-    isError,
-    selectedValue,
-    onSelectedValueChange,
-    onCreateOption,
-    formatCreateLabel: formatCreateLabel2,
-    createOptionPosition = "first",
-    isValidNewOption = returnTrue
-  } = _td, props = __objRest(_td, [
-    "className",
-    "slots",
-    "isError",
-    "selectedValue",
-    "onSelectedValueChange",
-    "onCreateOption",
-    "formatCreateLabel",
-    "createOptionPosition",
-    "isValidNewOption"
-  ]);
-  const commonSelectProps = useCommonComboBoxProps(__spreadValues({ className, slots }, props));
-  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", fluid: true, className: className ? `${className}__Container` : void 0, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      BaseCreatableSelect,
-      __spreadProps(__spreadValues({}, commonSelectProps), {
-        value: selectedValue,
-        onChange: onSelectedValueChange,
-        onCreateOption,
-        isValidNewOption,
-        formatCreateLabel: formatCreateLabel2,
-        createOptionPosition
-      })
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(ComboBoxErrorMessage, { isError, errorMessage: slots == null ? void 0 : slots.ErrorMessage })
-  ] });
-}
 function MaybeCreatableComboBox(props) {
   if (props.isCreatable) {
     return /* @__PURE__ */ jsxRuntime.jsx(CreatableComboBox, __spreadValues({}, props));
@@ -39907,7 +39973,7 @@ const InvoiceFormTermsSection = ({
               updateDueAtFromTermsAndSentAt(terms, sentAt);
             }
           },
-          children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormDateField, { label: "Invoice date", inline: true, className: "Layer__InvoiceForm__Field__SentAt", isReadOnly })
+          children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormDatePickerField, { label: "Invoice date", inline: true, className: "Layer__InvoiceForm__Field__SentAt", isReadOnly })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -39925,7 +39991,7 @@ const InvoiceFormTermsSection = ({
               lastDueAtRef.current = dueAt;
             }
           },
-          children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormDateField, { label: "Due date", inline: true, className: "Layer__InvoiceForm__Field__DueAt", isReadOnly })
+          children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormDatePickerField, { label: "Due date", inline: true, className: "Layer__InvoiceForm__Field__DueAt", isReadOnly })
         }
       )
     ] })
@@ -39978,23 +40044,26 @@ const useInvoiceForm = (props) => {
   const upsertInvoiceProps = mode === UpsertInvoiceMode.Update ? { mode, invoiceId: props.invoice.id } : { mode };
   const { trigger: upsertInvoice } = useUpsertInvoice(upsertInvoiceProps);
   const invoice = isUpdateMode(props) ? props.invoice : null;
-  const defaultValuesRef = React.useRef(getInvoiceFormDefaultValues(invoice));
-  const defaultValues = defaultValuesRef.current;
-  const onSubmit = React.useCallback((_0) => __async(null, [_0], function* ({ value, meta }) {
-    try {
-      const upsertInvoiceParams = convertInvoiceFormToParams(value);
-      const upsertInvoiceRequest = effect.Schema.encodeUnknownSync(UpsertInvoiceSchema)(upsertInvoiceParams);
-      const { data: invoice2 } = yield upsertInvoice(upsertInvoiceRequest);
-      setSubmitError(void 0);
-      onSuccess(invoice2);
-      if (meta.submitAction === "send" && onSendInvoice) {
-        yield onSendInvoice(invoice2.id);
+  const defaultValues = React.useMemo(() => getInvoiceFormDefaultValues(invoice), [invoice]);
+  const onSubmit = React.useCallback(
+    (_0) => __async(null, [_0], function* ({ value, meta, formApi }) {
+      try {
+        const upsertInvoiceParams = convertInvoiceFormToParams(value);
+        const upsertInvoiceRequest = effect.Schema.encodeUnknownSync(UpsertInvoiceSchema)(upsertInvoiceParams);
+        const { data: invoice2 } = yield upsertInvoice(upsertInvoiceRequest);
+        setSubmitError(void 0);
+        onSuccess(invoice2);
+        formApi.reset();
+        if (meta.submitAction === "send" && onSendInvoice) {
+          yield onSendInvoice(invoice2.id);
+        }
+      } catch (e) {
+        console.error(e);
+        setSubmitError("Something went wrong. Please try again.");
       }
-    } catch (e) {
-      console.error(e);
-      setSubmitError("Something went wrong. Please try again.");
-    }
-  }), [onSendInvoice, onSuccess, upsertInvoice]);
+    }),
+    [onSendInvoice, onSuccess, upsertInvoice]
+  );
   const validators = React.useMemo(() => ({
     onDynamic: validateInvoiceForm
   }), []);
@@ -40081,7 +40150,7 @@ const InvoiceForm = React.forwardRef((props, ref) => {
   }, [formState, onChangeFormState]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Form, { className: "Layer__InvoiceForm", onSubmit: blockNativeOnSubmit, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(InvoiceFormErrorBanner, { form, submitError }),
+      /* @__PURE__ */ jsxRuntime.jsx(form.AppForm, { children: /* @__PURE__ */ jsxRuntime.jsx(InvoiceFormErrorBanner, { submitError }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         InvoiceFormTermsSection,
         {
@@ -40191,8 +40260,8 @@ const getClassnameForSubComponent = (className, suffix) => {
 };
 const METER_CLASS_NAME = "Layer__Meter";
 const Meter = React.forwardRef(
-  function Meter2(_ud, ref) {
-    var _vd = _ud, { className, label, meterOnly } = _vd, restProps = __objRest(_vd, ["className", "label", "meterOnly"]);
+  function Meter2(_yd, ref) {
+    var _zd = _yd, { className, label, meterOnly } = _zd, restProps = __objRest(_zd, ["className", "label", "meterOnly"]);
     return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Meter, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, restProps), { className: classNames(METER_CLASS_NAME, className), ref }), meterOnly && { "aria-label": label }), { children: ({ percentage, valueText }) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", fluid: true, children: [
       !meterOnly && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Label, { slot: "label", children: label }),
@@ -40619,15 +40688,9 @@ const InvoiceOverview = () => {
     /* @__PURE__ */ jsxRuntime.jsx(InvoiceTable, {})
   ] });
 };
-const Invoices = ({
-  showTitle = true,
-  stringOverrides,
-  onSendInvoice
-}) => {
+const Invoices = ({ stringOverrides, onSendInvoice }) => {
   usePreloadCustomers();
-  usePreloadCategories({ mode: CategoriesListMode.Revenue });
-  usePreloadTagDimensionByKey({ dimensionKey: INVOICE_MECE_TAG_DIMENSION });
-  return /* @__PURE__ */ jsxRuntime.jsx(InvoicesProvider, { onSendInvoice, children: /* @__PURE__ */ jsxRuntime.jsx(View, { title: (stringOverrides == null ? void 0 : stringOverrides.title) || "Invoices", showHeader: showTitle, children: /* @__PURE__ */ jsxRuntime.jsx(InvoicesContent, {}) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(InvoicesProvider, { onSendInvoice, children: /* @__PURE__ */ jsxRuntime.jsx(View, { title: (stringOverrides == null ? void 0 : stringOverrides.title) || "Invoices", children: /* @__PURE__ */ jsxRuntime.jsx(InvoicesContent, {}) }) });
 };
 const InvoicesContent = () => {
   const routeState = useInvoiceRouteState();
@@ -40638,11 +40701,11 @@ const ProfitAndLossView = (props) => {
   const containerRef = React.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsx(Container, { name: COMPONENT_NAME$4, ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLoss, { children: /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossPanel, __spreadValues({ containerRef }, props)) }) });
 };
-const ProfitAndLossPanel = (_wd) => {
-  var _xd = _wd, {
+const ProfitAndLossPanel = (_Ad) => {
+  var _Bd = _Ad, {
     containerRef,
     stringOverrides
-  } = _xd, props = __objRest(_xd, [
+  } = _Bd, props = __objRest(_Bd, [
     "containerRef",
     "stringOverrides"
   ]);
@@ -40893,14 +40956,14 @@ function ExpandableDataTable({
   );
 }
 const UNIFIED_REPORT_TAG_KEY = "#unified-report";
-function buildKey$g(_yd) {
-  var _zd = _yd, {
+function buildKey$g(_Cd) {
+  var _Dd = _Cd, {
     access_token: accessToken,
     apiUrl,
     businessId,
     report,
     groupBy
-  } = _zd, dateParams = __objRest(_zd, [
+  } = _Dd, dateParams = __objRest(_Dd, [
     "access_token",
     "apiUrl",
     "businessId",
@@ -40918,8 +40981,8 @@ function buildKey$g(_yd) {
     }, dateParams);
   }
 }
-const getUnifiedReport = get$1((_Ad) => {
-  var _Bd = _Ad, { businessId, report, groupBy } = _Bd, dateParams = __objRest(_Bd, ["businessId", "report", "groupBy"]);
+const getUnifiedReport = get$1((_Ed) => {
+  var _Fd = _Ed, { businessId, report, groupBy } = _Fd, dateParams = __objRest(_Fd, ["businessId", "report", "groupBy"]);
   const parameters = toDefinedSearchParameters(__spreadProps(__spreadValues({}, dateParams), { groupBy }));
   return `/v1/businesses/${businessId}/reports/unified/${report}?${parameters}`;
 });
@@ -40944,8 +41007,8 @@ class UnifiedReportSWRResponse {
     return this.swrResponse.mutate;
   }
 }
-function useUnifiedReport(_Cd) {
-  var _Dd = _Cd, { report, groupBy } = _Dd, dateParams = __objRest(_Dd, ["report", "groupBy"]);
+function useUnifiedReport(_Gd) {
+  var _Hd = _Gd, { report, groupBy } = _Hd, dateParams = __objRest(_Hd, ["report", "groupBy"]);
   const { data: auth } = useAuth();
   const { apiUrl } = useEnvironment();
   const { businessId } = useLayerContext();
@@ -41064,8 +41127,8 @@ const S3PresignedUrlSchema = effect.Schema.Struct({
   createdAt: effect.Schema.Date,
   documentId: effect.Schema.NullishOr(effect.Schema.UUID)
 });
-const getUnifiedReportExcel = get$1((_Ed) => {
-  var _Fd = _Ed, { businessId, report, groupBy } = _Fd, dateParams = __objRest(_Fd, ["businessId", "report", "groupBy"]);
+const getUnifiedReportExcel = get$1((_Id) => {
+  var _Jd = _Id, { businessId, report, groupBy } = _Jd, dateParams = __objRest(_Jd, ["businessId", "report", "groupBy"]);
   const parameters = toDefinedSearchParameters(__spreadProps(__spreadValues({}, dateParams), { groupBy }));
   return `/v1/businesses/${businessId}/reports/unified/${report}/exports/excel?${parameters}`;
 });
@@ -42478,19 +42541,19 @@ const VendorsProvider = ({ children }) => {
   const vendors = useVendors();
   return /* @__PURE__ */ jsxRuntime.jsx(VendorsContext.Provider, { value: vendors, children });
 };
-const SelectVendor = (_Gd) => {
-  var _Hd = _Gd, { withContext = true } = _Hd, props = __objRest(_Hd, ["withContext"]);
+const SelectVendor = (_Kd) => {
+  var _Ld = _Kd, { withContext = true } = _Ld, props = __objRest(_Ld, ["withContext"]);
   if (withContext) {
     return /* @__PURE__ */ jsxRuntime.jsx(VendorsProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectVendorContent, __spreadValues({}, props)) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(SelectVendorContent, __spreadValues({}, props));
 };
-const SelectVendorContent = (_Id) => {
-  var _Jd = _Id, {
+const SelectVendorContent = (_Md) => {
+  var _Nd = _Md, {
     value,
     onChange,
     placeholder = "Select vendor"
-  } = _Jd, props = __objRest(_Jd, [
+  } = _Nd, props = __objRest(_Nd, [
     "value",
     "onChange",
     "placeholder"
@@ -43228,8 +43291,8 @@ const BillsTableWithPanel = ({
     }
   );
 };
-const Bills = (_Kd) => {
-  var _Ld = _Kd, { context = true } = _Ld, props = __objRest(_Ld, ["context"]);
+const Bills = (_Od) => {
+  var _Pd = _Od, { context = true } = _Pd, props = __objRest(_Pd, ["context"]);
   if (context) {
     return /* @__PURE__ */ jsxRuntime.jsx(BillsProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(BillsContent, __spreadValues({}, props)) });
   }
@@ -43284,8 +43347,8 @@ const getTimezoneDisplay = (date2) => {
   }
 };
 const LinkButton = React.forwardRef(
-  function LinkButton2(_Md, ref) {
-    var _Nd = _Md, {
+  function LinkButton2(_Qd, ref) {
+    var _Rd = _Qd, {
       children,
       ellipsis,
       icon,
@@ -43298,7 +43361,7 @@ const LinkButton = React.forwardRef(
       href,
       target,
       rel
-    } = _Nd, restProps = __objRest(_Nd, [
+    } = _Rd, restProps = __objRest(_Rd, [
       "children",
       "ellipsis",
       "icon",
@@ -48079,11 +48142,11 @@ const TaxPaymentsMobileList = ({ data, isLoading, isError, slots }) => {
   ) });
 };
 const EMPTY_ARRAY = [];
-const SimpleDataTable = (_Od) => {
-  var _Pd = _Od, {
+const SimpleDataTable = (_Sd) => {
+  var _Td = _Sd, {
     data,
     columnConfig: columnConfig2
-  } = _Pd, rest = __objRest(_Pd, [
+  } = _Td, rest = __objRest(_Td, [
     "data",
     "columnConfig"
   ]);
@@ -49195,14 +49258,14 @@ const BusinessProvider = ({
     }
   );
 };
-const LayerProvider = (_Qd) => {
-  var _Rd = _Qd, {
+const LayerProvider = (_Ud) => {
+  var _Vd = _Ud, {
     appId,
     appSecret,
     businessAccessToken,
     environment,
     usePlaidSandbox
-  } = _Rd, restProps = __objRest(_Rd, [
+  } = _Vd, restProps = __objRest(_Vd, [
     "appId",
     "appSecret",
     "businessAccessToken",
@@ -49210,7 +49273,7 @@ const LayerProvider = (_Qd) => {
     "usePlaidSandbox"
   ]);
   const [cache] = React.useState(() => /* @__PURE__ */ new Map());
-  return /* @__PURE__ */ jsxRuntime.jsx(useSWR.SWRConfig, { value: __spreadProps(__spreadValues({}, DEFAULT_SWR_CONFIG), { provider: () => cache }), children: /* @__PURE__ */ jsxRuntime.jsx(EnvironmentInputProvider, { environment, usePlaidSandbox, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(useSWR.SWRConfig, { value: __spreadProps(__spreadValues({}, DEFAULT_SWR_CONFIG), { provider: () => cache }), children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.I18nProvider, { locale: "en-US", children: /* @__PURE__ */ jsxRuntime.jsx(EnvironmentInputProvider, { environment, usePlaidSandbox, children: /* @__PURE__ */ jsxRuntime.jsx(
     AuthInputProvider,
     {
       appId,
@@ -49218,7 +49281,7 @@ const LayerProvider = (_Qd) => {
       businessAccessToken,
       children: /* @__PURE__ */ jsxRuntime.jsx(GlobalDateStoreProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(BusinessProvider, __spreadValues({}, restProps)) })
     }
-  ) }) });
+  ) }) }) });
 };
 exports.AccountingOverview = AccountingOverview;
 exports.BalanceSheet = BalanceSheet;