@layerfi/components 0.1.122-alpha → 0.1.122

package/dist/cjs/index.cjs

@@ -208,7 +208,7 @@ class ErrorHandlerClass {
 }
 const errorHandler = new ErrorHandlerClass();
 const reportError = (payload) => errorHandler.onError(payload);
-const version = "0.1.122-alpha";
+const version = "0.1.122";
 const pkg = {
   version
 };
@@ -13861,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) {
@@ -14046,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, { slot: "label", size: "sm", 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(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 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 }) => {
@@ -24709,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" });
@@ -24722,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,
@@ -25177,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 = ({
@@ -26298,7 +26301,7 @@ const DateSelectionComboBox = () => {
   }, [setDateRange]);
   const inputId = React.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Label, { size: "2xs", htmlFor: inputId, children: "Date Range" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Label, { pbe: "3xs", size: "sm", htmlFor: inputId, children: "Report period" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       ComboBox,
       {
@@ -26351,7 +26354,7 @@ const GlobalDateRangePicker = () => {
     /* @__PURE__ */ jsxRuntime.jsx(
       DatePicker,
       {
-        label: "Start Date",
+        label: "Start date",
         date: localStartDate,
         onChange: onChangeStartDate,
         minDate: minStartDate,
@@ -26359,17 +26362,13 @@ const GlobalDateRangePicker = () => {
         isInvalid: startDateInvalid,
         errorText: startDateErrorText,
         onBlur: onBlurStartDate,
-        slotProps: {
-          Label: {
-            size: "2xs"
-          }
-        }
+        slotProps: { Label: { size: "sm", pbe: "3xs" } }
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
       DatePicker,
       {
-        label: "End Date",
+        label: "End date",
         date: localEndDate,
         onChange: onChangeEndDate,
         minDate: minEndDate,
@@ -26377,11 +26376,7 @@ const GlobalDateRangePicker = () => {
         isInvalid: endDateInvalid,
         errorText: endDateErrorText,
         onBlur: onBlurEndDate,
-        slotProps: {
-          Label: {
-            size: "2xs"
-          }
-        }
+        slotProps: { Label: { size: "sm", pbe: "3xs" } }
       }
     )
   ] });
@@ -26403,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, {});
 };
@@ -26668,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,
@@ -26728,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), {
@@ -26735,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 = {
@@ -27410,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,
     {
@@ -28124,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
@@ -28246,7 +28237,7 @@ const GlobalDatePicker = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     DatePicker,
     {
-      label: "Effective Date",
+      label: "Effective date",
       date: localDate,
       onChange,
       minDate: minDateZdt,
@@ -28254,11 +28245,7 @@ const GlobalDatePicker = () => {
       isInvalid,
       errorText,
       onBlur,
-      slotProps: {
-        Label: {
-          size: "2xs"
-        }
-      }
+      slotProps: { Label: { size: "sm", pbe: "3xs" } }
     }
   );
 };
@@ -28279,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, {});
 };
@@ -28308,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,
           {
@@ -28328,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,
@@ -28340,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,
         {
@@ -28622,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,
         {

package/dist/esm/index.mjs

@@ -208,7 +208,7 @@ class ErrorHandlerClass {
 }
 const errorHandler = new ErrorHandlerClass();
 const reportError = (payload) => errorHandler.onError(payload);
-const version = "0.1.122-alpha";
+const version = "0.1.122";
 const pkg = {
   version
 };
@@ -12385,7 +12385,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) {
@@ -12570,31 +12570,34 @@ const MonthPicker = ({
   }, [onChange]);
   const inputValue = format(date.toDate(), truncateMonth ? MONTH_YEAR_FORMAT_SHORT : MONTH_YEAR_FORMAT);
   const additionalAriaProps = !showLabel && { "aria-label": label };
-  return /* @__PURE__ */ jsxs(DialogTrigger, { isOpen: isPopoverOpen, onOpenChange: setPopoverOpen, children: [
-    showLabel && /* @__PURE__ */ jsx(Label, { slot: "label", size: "sm", children: label }),
-    /* @__PURE__ */ jsxs(
-      InputGroup$1,
-      {
-        ref: triggerRef,
-        slot: "input",
-        className: classNames("Layer__MonthPicker__InputGroup", { "Layer__MonthPicker__InputGroup--truncated": truncateMonth }),
-        onClick: () => setPopoverOpen(true),
-        children: [
-          /* @__PURE__ */ jsx(Input$1, __spreadProps(__spreadValues({ inset: true }, additionalAriaProps), { value: inputValue, readOnly: true })),
-          /* @__PURE__ */ jsx(PickerDropdownIndicator, { onClick: () => setPopoverOpen(true) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(ResponsivePopover, { triggerRef, children: /* @__PURE__ */ jsx(Dialog$1, { children: /* @__PURE__ */ jsx(
-      MonthCalendar,
-      {
-        date,
-        onChange: onChangeMonth,
-        minDate,
-        maxDate,
-        variant: value
-      }
-    ) }) })
+  const inputId = useId();
+  return /* @__PURE__ */ jsxs(VStack, { children: [
+    showLabel && /* @__PURE__ */ jsx(Label, { pbe: "3xs", size: "sm", htmlFor: inputId, children: label }),
+    /* @__PURE__ */ jsxs(DialogTrigger, { isOpen: isPopoverOpen, onOpenChange: setPopoverOpen, children: [
+      /* @__PURE__ */ jsxs(
+        InputGroup$1,
+        {
+          ref: triggerRef,
+          slot: "input",
+          className: classNames("Layer__MonthPicker__InputGroup", { "Layer__MonthPicker__InputGroup--truncated": truncateMonth }),
+          onClick: () => setPopoverOpen(true),
+          children: [
+            /* @__PURE__ */ jsx(Input$1, __spreadProps(__spreadValues({ inset: true }, additionalAriaProps), { value: inputValue, readOnly: true, id: inputId })),
+            /* @__PURE__ */ jsx(PickerDropdownIndicator, { onClick: () => setPopoverOpen(true) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(ResponsivePopover, { triggerRef, children: /* @__PURE__ */ jsx(Dialog$1, { children: /* @__PURE__ */ jsx(
+        MonthCalendar,
+        {
+          date,
+          onChange: onChangeMonth,
+          minDate,
+          maxDate,
+          variant: value
+        }
+      ) }) })
+    ] })
   ] });
 };
 const SmallLoader = ({ size = 28 }) => {
@@ -23233,7 +23236,7 @@ function useGlobalDatePickerBounds() {
   const maxDate = useMemo(() => endOfDay(/* @__PURE__ */ new Date()), []);
   return useMemo(() => ({ minDate, maxDate }), [minDate, maxDate]);
 }
-const GlobalMonthPicker = ({ truncateMonth }) => {
+const GlobalMonthPicker = ({ truncateMonth, showLabel = false }) => {
   const { minDate, maxDate } = useGlobalDatePickerBounds();
   const { setMonth } = useGlobalDateRangeActions();
   const { date } = useGlobalDate({ dateSelectionMode: "month" });
@@ -23246,8 +23249,8 @@ const GlobalMonthPicker = ({ truncateMonth }) => {
   return /* @__PURE__ */ jsx(
     MonthPicker,
     {
-      label: "Select a month",
-      showLabel: false,
+      label: "Month",
+      showLabel,
       date: dateZdt,
       onChange,
       minDate: minDateZdt,
@@ -23701,8 +23704,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__ */ jsx("div", __spreadProps(__spreadValues({}, dataProperties), { className: classNames("Layer__header__col", className), style, children }));
 };
 const DetailReportBreadcrumb = ({
@@ -24822,7 +24825,7 @@ const DateSelectionComboBox = () => {
   }, [setDateRange]);
   const inputId = useId();
   return /* @__PURE__ */ jsxs(VStack, { children: [
-    /* @__PURE__ */ jsx(Label, { size: "2xs", htmlFor: inputId, children: "Date Range" }),
+    /* @__PURE__ */ jsx(Label, { pbe: "3xs", size: "sm", htmlFor: inputId, children: "Report period" }),
     /* @__PURE__ */ jsx(
       ComboBox,
       {
@@ -24875,7 +24878,7 @@ const GlobalDateRangePicker = () => {
     /* @__PURE__ */ jsx(
       DatePicker,
       {
-        label: "Start Date",
+        label: "Start date",
         date: localStartDate,
         onChange: onChangeStartDate,
         minDate: minStartDate,
@@ -24883,17 +24886,13 @@ const GlobalDateRangePicker = () => {
         isInvalid: startDateInvalid,
         errorText: startDateErrorText,
         onBlur: onBlurStartDate,
-        slotProps: {
-          Label: {
-            size: "2xs"
-          }
-        }
+        slotProps: { Label: { size: "sm", pbe: "3xs" } }
       }
     ),
     /* @__PURE__ */ jsx(
       DatePicker,
       {
-        label: "End Date",
+        label: "End date",
         date: localEndDate,
         onChange: onChangeEndDate,
         minDate: minEndDate,
@@ -24901,11 +24900,7 @@ const GlobalDateRangePicker = () => {
         isInvalid: endDateInvalid,
         errorText: endDateErrorText,
         onBlur: onBlurEndDate,
-        slotProps: {
-          Label: {
-            size: "2xs"
-          }
-        }
+        slotProps: { Label: { size: "sm", pbe: "3xs" } }
       }
     )
   ] });
@@ -24927,7 +24922,7 @@ const DateRangeSelection = () => {
 };
 const CombinedDateRangeSelection = ({ mode }) => {
   if (mode === "month") {
-    return /* @__PURE__ */ jsx(GlobalMonthPicker, {});
+    return /* @__PURE__ */ jsx(GlobalMonthPicker, { showLabel: true });
   }
   return /* @__PURE__ */ jsx(DateRangeSelection, {});
 };
@@ -25192,17 +25187,22 @@ const DateGroupByComboBox = ({ value, onValueChange }) => {
   const onSelectedValueChange = useCallback((option) => {
     onValueChange((option == null ? void 0 : option.value) || null);
   }, [onValueChange]);
-  return /* @__PURE__ */ jsx(
-    ComboBox,
-    {
-      className: "Layer__DateGroupByComboBox",
-      options: options$3,
-      onSelectedValueChange,
-      selectedValue: selectedOption,
-      isSearchable: false,
-      isClearable: false
-    }
-  );
+  const inputId = useId();
+  return /* @__PURE__ */ jsxs(VStack, { className: "Layer__DateGroupByComboBox__Container", children: [
+    /* @__PURE__ */ jsx(Label, { pbe: "3xs", size: "sm", htmlFor: inputId, children: "Group by" }),
+    /* @__PURE__ */ jsx(
+      ComboBox,
+      {
+        className: "Layer__DateGroupByComboBox",
+        options: options$3,
+        onSelectedValueChange,
+        selectedValue: selectedOption,
+        isSearchable: false,
+        isClearable: false,
+        inputId
+      }
+    )
+  ] });
 };
 const MultiSelect = ({
   name,
@@ -25252,6 +25252,10 @@ const MultiSelect = ({
     /* @__PURE__ */ 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), {
@@ -25259,49 +25263,43 @@ const selectStyles = {
     });
   }
 };
-const ProfitAndLossCompareOptions = () => {
+const CompareTagsMultiSelect = () => {
   const {
-    setSelectedCompareOptions,
     compareOptions,
     selectedCompareOptions,
+    setSelectedCompareOptions
+  } = useContext(ProfitAndLossComparisonContext);
+  const inputId = useId();
+  return /* @__PURE__ */ jsxs(VStack, { className: "Layer__CompareTagsMultiSelect__Container", children: [
+    /* @__PURE__ */ jsx(Label, { pbe: "3xs", size: "sm", htmlFor: inputId, children: "Compare by" }),
+    /* @__PURE__ */ 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
   } = useContext(ProfitAndLossComparisonContext);
   const { dateSelectionMode } = useContext(ProfitAndLossContext);
-  const tagComparisonSelectOptions = compareOptions.map(
-    (tagComparisonOption) => {
-      return {
-        value: JSON.stringify(tagComparisonOption.tagFilterConfig),
-        label: tagComparisonOption.displayName
-      };
-    }
-  );
   if (!comparisonConfig) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "xs", children: [
+  return /* @__PURE__ */ jsxs(HStack, { align: "end", gap: "xs", children: [
     dateSelectionMode === "full" && /* @__PURE__ */ jsx(DateGroupByComboBox, { value: comparisonPeriodMode, onValueChange: setComparisonPeriodMode }),
-    /* @__PURE__ */ 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__ */ jsx(CompareTagsMultiSelect, {})
   ] });
 };
 const defaultValue = {
@@ -25934,29 +25932,22 @@ const ProfitAndLossReport = ({
   const header = useMemo(() => {
     if (hideHeader) return null;
     return /* @__PURE__ */ jsxs(Header, { children: [
-      /* @__PURE__ */ jsxs(HeaderRow, { children: [
-        /* @__PURE__ */ jsxs(HeaderCol, { children: [
+      /* @__PURE__ */ jsx(HeaderRow, { children: /* @__PURE__ */ jsx(HeaderCol, { fluid: true, children: /* @__PURE__ */ jsxs(HStack, { pb: "sm", align: "end", fluid: true, gap: "xs", justify: "space-between", children: [
+        /* @__PURE__ */ jsxs(HStack, { gap: "xs", children: [
           /* @__PURE__ */ jsx(CombinedDateRangeSelection, { mode: dateSelectionMode }),
           view === "desktop" && useComparisonPnl && /* @__PURE__ */ jsx(ProfitAndLossCompareOptions, {})
         ] }),
-        /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           ProfitAndLossDownloadButton,
           {
             stringOverrides: stringOverrides == null ? void 0 : stringOverrides.downloadButton,
             moneyFormat: csvMoneyFormat
           }
-        ) })
-      ] }),
-      view !== "desktop" && useComparisonPnl && /* @__PURE__ */ jsx(HeaderRow, { children: /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(ProfitAndLossCompareOptions, {}) }) })
+        )
+      ] }) }) }),
+      view !== "desktop" && useComparisonPnl && /* @__PURE__ */ jsx(HeaderRow, { children: /* @__PURE__ */ jsx(HeaderCol, { fluid: true, children: /* @__PURE__ */ jsx(HStack, { pb: "sm", fluid: true, children: /* @__PURE__ */ 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__ */ jsx(InAppLinkProvider, { renderInAppLink, children: /* @__PURE__ */ jsx(View, { type: "panel", header, children: selectedLineItem ? /* @__PURE__ */ jsx(
     ProfitAndLossDetailReport,
     {
@@ -26648,7 +26639,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
@@ -26770,7 +26761,7 @@ const GlobalDatePicker = () => {
   return /* @__PURE__ */ jsx(
     DatePicker,
     {
-      label: "Effective Date",
+      label: "Effective date",
       date: localDate,
       onChange,
       minDate: minDateZdt,
@@ -26778,11 +26769,7 @@ const GlobalDatePicker = () => {
       isInvalid,
       errorText,
       onBlur,
-      slotProps: {
-        Label: {
-          size: "2xs"
-        }
-      }
+      slotProps: { Label: { size: "sm", pbe: "3xs" } }
     }
   );
 };
@@ -26803,7 +26790,7 @@ const DateSelection = () => {
 };
 const CombinedDateSelection = ({ mode }) => {
   if (mode === "month") {
-    return /* @__PURE__ */ jsx(GlobalMonthPicker, {});
+    return /* @__PURE__ */ jsx(GlobalMonthPicker, { showLabel: true });
   }
   return /* @__PURE__ */ jsx(DateSelection, {});
 };
@@ -26832,10 +26819,10 @@ const BalanceSheetView = ({
       {
         type: "panel",
         ref: containerRef,
-        header: /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(HeaderRow, { children: [
-          /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(CombinedDateSelection, { mode: dateSelectionMode }) }),
-          withExpandAllButton && /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(BalanceSheetExpandAllButton, { view }) })
-        ] }) }),
+        header: /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(HeaderRow, { children: /* @__PURE__ */ jsx(HeaderCol, { fluid: true, children: /* @__PURE__ */ jsxs(HStack, { pb: "sm", align: "end", gap: "xs", justify: "space-between", fluid: true, children: [
+          /* @__PURE__ */ jsx(CombinedDateSelection, { mode: dateSelectionMode }),
+          withExpandAllButton && /* @__PURE__ */ jsx(BalanceSheetExpandAllButton, { view })
+        ] }) }) }) }),
         children: !data || isLoading ? /* @__PURE__ */ jsx("div", { className: `Layer__${COMPONENT_NAME$9}__loader-container`, children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx(
           BalanceSheetTable,
           {
@@ -26852,9 +26839,9 @@ const BalanceSheetView = ({
     {
       type: "panel",
       ref: containerRef,
-      header: /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(HeaderRow, { children: [
-        /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(CombinedDateSelection, { mode: dateSelectionMode }) }),
-        /* @__PURE__ */ jsxs(HeaderCol, { children: [
+      header: /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(HeaderRow, { children: /* @__PURE__ */ jsx(HeaderCol, { fluid: true, children: /* @__PURE__ */ jsxs(HStack, { pb: "sm", align: "end", gap: "xs", justify: "space-between", fluid: true, children: [
+        /* @__PURE__ */ jsx(CombinedDateSelection, { mode: dateSelectionMode }),
+        /* @__PURE__ */ jsxs(HStack, { gap: "xs", children: [
           withExpandAllButton && /* @__PURE__ */ jsx(BalanceSheetExpandAllButton, { view }),
           /* @__PURE__ */ jsx(
             BalanceSheetDownloadButton,
@@ -26864,7 +26851,7 @@ const BalanceSheetView = ({
             }
           )
         ] })
-      ] }) }),
+      ] }) }) }) }),
       children: !data || isLoading ? /* @__PURE__ */ jsx("div", { className: `Layer__${COMPONENT_NAME$9}__loader-container`, children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx(
         BalanceSheetTable,
         {
@@ -27146,17 +27133,17 @@ const StatementOfCashFlowView = ({
     {
       type: "panel",
       ref: containerRef,
-      header: /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(HeaderRow, { children: [
-        /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(CombinedDateRangeSelection, { mode: dateSelectionMode }) }),
-        /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(
+      header: /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(HeaderRow, { children: /* @__PURE__ */ jsx(HeaderCol, { fluid: true, children: /* @__PURE__ */ jsxs(HStack, { pb: "sm", align: "end", fluid: true, gap: "xs", justify: "space-between", children: [
+        /* @__PURE__ */ jsx(CombinedDateRangeSelection, { mode: dateSelectionMode }),
+        /* @__PURE__ */ jsx(
           CashflowStatementDownloadButton,
           {
             startDate: dateRange.startDate,
             endDate: dateRange.endDate,
             iconOnly: view === "mobile"
           }
-        ) })
-      ] }) }),
+        )
+      ] }) }) }) }),
       children: !data || isLoading ? /* @__PURE__ */ jsx("div", { className: `Layer__${COMPONENT_NAME$8}__loader-container`, children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx(
         StatementOfCashFlowTable,
         {

package/dist/index.css

@@ -1320,6 +1320,9 @@
   padding-right: 0;
   padding-left: 0;
 }
+.Layer__header__col[data-fluid=true] {
+  flex: 1 1;
+}
 ::placeholder {
   color: var(--input-placeholder-color);
 }
@@ -4851,9 +4854,6 @@ tbody .Layer__table__empty-row:first-child {
   align-items: stretch;
   background-color: white;
 }
-:is(.Layer__input-tooltip:has(.Layer__ProfitAndLoss__TagMultiSelect)) {
-  flex: 1;
-}
 .Layer__profit-and-loss__main-panel {
   flex: 1;
 }
@@ -9198,6 +9198,13 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }.Layer__DateGroupByComboBox__Container {
   inline-size: 12rem;
   max-inline-size: 12rem;
+}.Layer__CompareTagsMultiSelect__Container {
+  min-inline-size: 12rem;
+  max-inline-size: 20rem;
+}
+
+:is(.Layer__input-tooltip:has(.Layer__CompareTagsMultiSelect)) {
+  flex: 1;
 }.Layer__panel {
   display: flex;
   flex: 1;

package/dist/index.d.ts

@@ -505,9 +505,12 @@ declare interface GeneralLedgerStringOverrides {
 
 export declare const GeneralLedgerView: ({ title, showTitle, showTags, showCustomerVendor, stringOverrides, chartOfAccountsOptions, renderInAppLink, }: GeneralLedgerProps) => JSX_2.Element;
 
-export declare const GlobalMonthPicker: ({ truncateMonth }: {
+export declare const GlobalMonthPicker: ({ truncateMonth, showLabel }: GlobalMonthPickerProps) => JSX_2.Element;
+
+declare type GlobalMonthPickerProps = {
     truncateMonth?: boolean;
-}) => JSX_2.Element;
+    showLabel?: boolean;
+};
 
 /**
  * Configuration for the hero/main content section of the Landing Page page

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.122-alpha",
+  "version": "0.1.122",
   "description": "Layer React Components",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.mjs",