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

package/dist/cjs/index.cjs

@@ -283,7 +283,7 @@ var getIntlLocale = (locale) => {
 };
 var package_default = {
 	name: "@layerfi/components",
-	version: "0.1.134-alpha",
+	version: "0.1.134-alpha.1",
 	description: "Layer React Components",
 	main: "dist/cjs/index.cjs",
 	module: "dist/esm/index.mjs",
@@ -24127,7 +24127,7 @@ var CategorizationRulesHeader = ({ onGoBack }) => {
 		})]
 	});
 };
-var resolveVariant$1 = ({ width }) => width < BREAKPOINTS.TABLET ? "Mobile" : "Desktop";
+var resolveVariant$2 = ({ width }) => width < BREAKPOINTS.TABLET ? "Mobile" : "Desktop";
 var ResponsiveCategorizationRulesView = () => {
 	var _ref;
 	const { t } = (0, react_i18next.useTranslation)();
@@ -24238,7 +24238,7 @@ var ResponsiveCategorizationRulesView = () => {
 	]);
 	const selectedRuleCounterpartyLabel = (_ref = selectedRule && getCategorizationRuleCounterpartyLabel(selectedRule)) !== null && _ref !== void 0 ? _ref : t("bankTransactions:label.selected_counterparty", "this counterparty");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponsiveComponent, {
-		resolveVariant: resolveVariant$1,
+		resolveVariant: resolveVariant$2,
 		slots: {
 			Desktop: DesktopView,
 			Mobile: MobileView
@@ -33415,10 +33415,11 @@ var Expand = (_ref) => {
 };
 //#endregion
 //#region src/components/ExpandableDataTable/ExpandableDataTableToggleButton.tsx
-var ExpandableDataTableToggleButton = () => {
+var ExpandableDataTableToggleButton = ({ iconOnly }) => {
 	const { t } = (0, react_i18next.useTranslation)();
 	const { expanded, setExpanded } = (0, react.useContext)(ExpandableDataTableContext);
 	const { isDesktop } = useSizeClass();
+	const resolvedIconOnly = iconOnly !== null && iconOnly !== void 0 ? iconOnly : !isDesktop;
 	const shouldCollapse = expanded === true;
 	const onClickExpandOrCollapse = (0, react.useCallback)(() => {
 		if (shouldCollapse) setExpanded({});
@@ -33426,11 +33427,11 @@ var ExpandableDataTableToggleButton = () => {
 	}, [setExpanded, shouldCollapse]);
 	const buttonText = shouldCollapse ? t("common:action.collapse_all", "Collapse All") : t("common:action.expand_all", "Expand All");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button$1, {
-		icon: !isDesktop,
+		icon: resolvedIconOnly,
 		variant: "outlined",
 		onClick: onClickExpandOrCollapse,
-		"aria-label": !isDesktop ? buttonText : void 0,
-		children: !isDesktop ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(shouldCollapse ? Collapse : Expand, {}) : buttonText
+		"aria-label": resolvedIconOnly ? buttonText : void 0,
+		children: resolvedIconOnly ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(shouldCollapse ? Collapse : Expand, {}) : buttonText
 	});
 };
 //#endregion
@@ -43670,9 +43671,10 @@ function useUnifiedReportExcel({ onSuccess } = {}) {
 }
 //#endregion
 //#region src/components/UnifiedReports/UnifiedReportDownloadButton.tsx
-function UnifiedReportDownloadButton() {
+function UnifiedReportDownloadButton({ iconOnly }) {
 	const { t } = (0, react_i18next.useTranslation)();
 	const { isDesktop } = useSizeClass();
+	const resolvedIconOnly = iconOnly !== null && iconOnly !== void 0 ? iconOnly : !isDesktop;
 	const { invisibleDownloadRef, triggerInvisibleDownload } = useInvisibleDownload();
 	const { trigger, isMutating, isError } = useUnifiedReportExcel({ onSuccess: ({ presignedUrl }) => triggerInvisibleDownload({ url: presignedUrl }) });
 	const buttonText = isError ? t("common:action.retry_label", "Retry") : t("common:action.download_label", "Download");
@@ -43683,22 +43685,23 @@ function UnifiedReportDownloadButton() {
 		},
 		isPending: isMutating,
 		isDisabled: isMutating,
-		icon: !isDesktop,
-		"aria-label": !isDesktop ? buttonText : void 0,
-		children: [isDesktop && buttonText, isError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RefreshCcw$1, { size: 12 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DownloadCloud, { size: 16 })]
+		icon: resolvedIconOnly,
+		"aria-label": resolvedIconOnly ? buttonText : void 0,
+		children: [!resolvedIconOnly && buttonText, isError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RefreshCcw$1, { size: 12 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DownloadCloud, { size: 16 })]
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InvisibleDownload, { ref: invisibleDownloadRef })] });
 }
 //#endregion
 //#region src/components/UnifiedReports/UnifiedReportHeaderButtons.tsx
-var UnifiedReportHeaderButtons = () => {
+var UnifiedReportHeaderButtons = ({ variant }) => {
 	const { isDesktop } = useSizeClass();
+	const isMobile = (variant !== null && variant !== void 0 ? variant : isDesktop ? "Desktop" : "Mobile") === "Mobile";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
 		gap: "xs",
-		className: "Layer__UnifiedReports__HeaderButtons",
+		className: (0, classnames.default)("Layer__UnifiedReports__HeaderButtons", { "Layer__UnifiedReports__HeaderButtons--mobile": isMobile }),
 		children: [
-			!isDesktop && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReportsMobileSelectionDrawer, {}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandableDataTableToggleButton, {}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportDownloadButton, {})
+			isMobile && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReportsMobileSelectionDrawer, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandableDataTableToggleButton, { iconOnly: isMobile }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportDownloadButton, { iconOnly: isMobile })
 		]
 	});
 };
@@ -44126,8 +44129,14 @@ function UnifiedReportTagControl({ tagControl }) {
 	const { t } = (0, react_i18next.useTranslation)();
 	const { selectedTagValues, setSelectedTagValues } = useUnifiedReportTagSelection();
 	const dimensionName = (_tagControl$tagDimens = tagControl.tagDimension.displayName) !== null && _tagControl$tagDimens !== void 0 ? _tagControl$tagDimens : capitalizeFirstLetter(tagControl.tagDimension.key);
-	const options = tagControl.tagDimension.definedValues.filter(isActiveTagValueDefinition).map(toOption);
-	const selectedValues = selectedTagValues.filter(isActiveTagValueDefinition).map(toOption);
+	const options = (0, react.useMemo)(() => tagControl.tagDimension.definedValues.filter(isActiveTagValueDefinition).map(toOption), [tagControl.tagDimension.definedValues]);
+	const selectedValues = (0, react.useMemo)(() => {
+		const optionsByTagValueId = new Map(options.map((option) => [option.tagValueDefinition.id, option]));
+		return selectedTagValues.flatMap((tagValue) => {
+			const option = optionsByTagValueId.get(tagValue.id);
+			return option ? [option] : [];
+		});
+	}, [options, selectedTagValues]);
 	const handleSelectedValuesChange = (values) => {
 		setSelectedTagValues(values.map(({ tagValueDefinition }) => tagValueDefinition));
 	};
@@ -44150,13 +44159,7 @@ function UnifiedReportTagControl({ tagControl }) {
 }
 //#endregion
 //#region src/components/UnifiedReports/UnifiedReportControls.tsx
-var SMALL_BREAKPOINT$1 = 560;
-var MEDIUM_BREAKPOINT$1 = 760;
-var getVariantForWidth = (width) => {
-	if (width >= MEDIUM_BREAKPOINT$1) return "large";
-	if (width >= SMALL_BREAKPOINT$1) return "medium";
-	return "small";
-};
+var COMPACT_DATE_SELECTION_BREAKPOINT = 560;
 var UnifiedReportDateSelection = ({ isCompact }) => {
 	const { baseReport } = useBaseUnifiedReport();
 	const dateSelectionMode = useUnifiedReportDateSelectionMode();
@@ -44180,55 +44183,69 @@ var UnifiedReportControls = () => {
 	const containerRef = useElementSize((size) => {
 		setSize(size.width);
 	});
-	const variant = getVariantForWidth(size);
+	const isCompact = size < COMPACT_DATE_SELECTION_BREAKPOINT;
 	const hasGroupBy = dateSelectionMode === "full" && hasControl(baseReport, ReportControl.GroupBy);
 	const hasYear = hasControl(baseReport, ReportControl.Year);
 	const hasReportingBasis = hasControl(baseReport, ReportControl.ReportingBasis) && reportingBasis != null;
 	const tagControl = baseReport === null || baseReport === void 0 ? void 0 : baseReport.tagControl;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Stack, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VStack, {
 		ref: containerRef,
-		direction: variant === "large" ? "row" : "column",
-		pb: "md",
-		pi: "lg",
-		gap: "xs",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportDateSelection, { isCompact: variant === "small" }), (hasYear || hasGroupBy || hasReportingBasis || tagControl) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "Layer__UnifiedReports__AdditionalControls",
-			"data-variant": variant,
-			children: [
-				hasYear && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GlobalYearPicker, {}),
-				hasGroupBy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateGroupByComboBox, {
-					value: groupBy,
-					onValueChange: setGroupBy
-				}),
-				tagControl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportTagControl, { tagControl }),
-				hasReportingBasis && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportReportingBasisControl, {
-					value: reportingBasis,
-					onValueChange: setReportingBasis
-				})
-			]
-		})]
+		className: "Layer__UnifiedReports__ControlsContainer",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Stack, {
+			direction: "row",
+			pb: "md",
+			pi: "lg",
+			gap: "xs",
+			className: "Layer__UnifiedReports__Controls",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportDateSelection, { isCompact }), (hasYear || hasGroupBy || hasReportingBasis || tagControl) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "Layer__UnifiedReports__AdditionalControls",
+				children: [
+					hasYear && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GlobalYearPicker, {}),
+					hasGroupBy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateGroupByComboBox, {
+						value: groupBy,
+						onValueChange: setGroupBy
+					}),
+					tagControl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportTagControl, { tagControl }),
+					hasReportingBasis && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportReportingBasisControl, {
+						value: reportingBasis,
+						onValueChange: setReportingBasis
+					})
+				]
+			})]
+		})
 	});
 };
 //#endregion
 //#region src/components/UnifiedReports/UnifiedReportBaseHeader.tsx
-var UnifiedReportBaseHeader = () => {
+var resolveVariant$1 = ({ width }) => width <= BREAKPOINTS.MOBILE ? "Mobile" : "Desktop";
+var UnifiedReportBaseHeaderRow = ({ variant }) => {
 	const { baseReport } = useBaseUnifiedReport();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
+		pi: "lg",
+		pbs: "lg",
+		align: "center",
+		justify: "space-between",
+		className: "Layer__UnifiedReports__BaseHeaderRow",
+		children: [!(variant === "Mobile") && (baseReport ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Span, {
+			size: "lg",
+			weight: "bold",
+			children: baseReport.displayName
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonLoader, {
+			width: "192px",
+			height: "24px"
+		})), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportHeaderButtons, { variant })]
+	});
+};
+var UnifiedReportBaseHeader = () => {
 	const { isDesktop } = useSizeClass();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(VStack, {
 		className: "Layer__UnifiedReports__BaseHeader",
-		children: [isDesktop && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
-			pi: "lg",
-			pbs: "lg",
-			align: "center",
-			justify: "space-between",
-			children: [baseReport ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Span, {
-				size: "lg",
-				weight: "bold",
-				children: baseReport.displayName
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonLoader, {
-				width: "192px",
-				height: "24px"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportHeaderButtons, {})]
+		children: [isDesktop && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponsiveComponent, {
+			resolveVariant: resolveVariant$1,
+			slots: {
+				Desktop: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportBaseHeaderRow, { variant: "Desktop" }),
+				Mobile: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportBaseHeaderRow, { variant: "Mobile" })
+			}
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportControls, {})]
 	});
 };

package/dist/esm/index.mjs

@@ -255,7 +255,7 @@ var getIntlLocale = (locale) => {
 };
 var package_default = {
 	name: "@layerfi/components",
-	version: "0.1.134-alpha",
+	version: "0.1.134-alpha.1",
 	description: "Layer React Components",
 	main: "dist/cjs/index.cjs",
 	module: "dist/esm/index.mjs",
@@ -20768,7 +20768,7 @@ var CategorizationRulesHeader = ({ onGoBack }) => {
 		})]
 	});
 };
-var resolveVariant$1 = ({ width }) => width < BREAKPOINTS.TABLET ? "Mobile" : "Desktop";
+var resolveVariant$2 = ({ width }) => width < BREAKPOINTS.TABLET ? "Mobile" : "Desktop";
 var ResponsiveCategorizationRulesView = () => {
 	var _ref;
 	const { t } = useTranslation();
@@ -20879,7 +20879,7 @@ var ResponsiveCategorizationRulesView = () => {
 	]);
 	const selectedRuleCounterpartyLabel = (_ref = selectedRule && getCategorizationRuleCounterpartyLabel(selectedRule)) !== null && _ref !== void 0 ? _ref : t("bankTransactions:label.selected_counterparty", "this counterparty");
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ResponsiveComponent, {
-		resolveVariant: resolveVariant$1,
+		resolveVariant: resolveVariant$2,
 		slots: {
 			Desktop: DesktopView,
 			Mobile: MobileView
@@ -30056,10 +30056,11 @@ var Expand = (_ref) => {
 };
 //#endregion
 //#region src/components/ExpandableDataTable/ExpandableDataTableToggleButton.tsx
-var ExpandableDataTableToggleButton = () => {
+var ExpandableDataTableToggleButton = ({ iconOnly }) => {
 	const { t } = useTranslation();
 	const { expanded, setExpanded } = useContext(ExpandableDataTableContext);
 	const { isDesktop } = useSizeClass();
+	const resolvedIconOnly = iconOnly !== null && iconOnly !== void 0 ? iconOnly : !isDesktop;
 	const shouldCollapse = expanded === true;
 	const onClickExpandOrCollapse = useCallback(() => {
 		if (shouldCollapse) setExpanded({});
@@ -30067,11 +30068,11 @@ var ExpandableDataTableToggleButton = () => {
 	}, [setExpanded, shouldCollapse]);
 	const buttonText = shouldCollapse ? t("common:action.collapse_all", "Collapse All") : t("common:action.expand_all", "Expand All");
 	return /* @__PURE__ */ jsx(Button$1, {
-		icon: !isDesktop,
+		icon: resolvedIconOnly,
 		variant: "outlined",
 		onClick: onClickExpandOrCollapse,
-		"aria-label": !isDesktop ? buttonText : void 0,
-		children: !isDesktop ? /* @__PURE__ */ jsx(shouldCollapse ? Collapse : Expand, {}) : buttonText
+		"aria-label": resolvedIconOnly ? buttonText : void 0,
+		children: resolvedIconOnly ? /* @__PURE__ */ jsx(shouldCollapse ? Collapse : Expand, {}) : buttonText
 	});
 };
 //#endregion
@@ -40311,9 +40312,10 @@ function useUnifiedReportExcel({ onSuccess } = {}) {
 }
 //#endregion
 //#region src/components/UnifiedReports/UnifiedReportDownloadButton.tsx
-function UnifiedReportDownloadButton() {
+function UnifiedReportDownloadButton({ iconOnly }) {
 	const { t } = useTranslation();
 	const { isDesktop } = useSizeClass();
+	const resolvedIconOnly = iconOnly !== null && iconOnly !== void 0 ? iconOnly : !isDesktop;
 	const { invisibleDownloadRef, triggerInvisibleDownload } = useInvisibleDownload();
 	const { trigger, isMutating, isError } = useUnifiedReportExcel({ onSuccess: ({ presignedUrl }) => triggerInvisibleDownload({ url: presignedUrl }) });
 	const buttonText = isError ? t("common:action.retry_label", "Retry") : t("common:action.download_label", "Download");
@@ -40324,22 +40326,23 @@ function UnifiedReportDownloadButton() {
 		},
 		isPending: isMutating,
 		isDisabled: isMutating,
-		icon: !isDesktop,
-		"aria-label": !isDesktop ? buttonText : void 0,
-		children: [isDesktop && buttonText, isError ? /* @__PURE__ */ jsx(RefreshCcw$1, { size: 12 }) : /* @__PURE__ */ jsx(DownloadCloud, { size: 16 })]
+		icon: resolvedIconOnly,
+		"aria-label": resolvedIconOnly ? buttonText : void 0,
+		children: [!resolvedIconOnly && buttonText, isError ? /* @__PURE__ */ jsx(RefreshCcw$1, { size: 12 }) : /* @__PURE__ */ jsx(DownloadCloud, { size: 16 })]
 	}), /* @__PURE__ */ jsx(InvisibleDownload, { ref: invisibleDownloadRef })] });
 }
 //#endregion
 //#region src/components/UnifiedReports/UnifiedReportHeaderButtons.tsx
-var UnifiedReportHeaderButtons = () => {
+var UnifiedReportHeaderButtons = ({ variant }) => {
 	const { isDesktop } = useSizeClass();
+	const isMobile = (variant !== null && variant !== void 0 ? variant : isDesktop ? "Desktop" : "Mobile") === "Mobile";
 	return /* @__PURE__ */ jsxs(HStack, {
 		gap: "xs",
-		className: "Layer__UnifiedReports__HeaderButtons",
+		className: classNames("Layer__UnifiedReports__HeaderButtons", { "Layer__UnifiedReports__HeaderButtons--mobile": isMobile }),
 		children: [
-			!isDesktop && /* @__PURE__ */ jsx(ReportsMobileSelectionDrawer, {}),
-			/* @__PURE__ */ jsx(ExpandableDataTableToggleButton, {}),
-			/* @__PURE__ */ jsx(UnifiedReportDownloadButton, {})
+			isMobile && /* @__PURE__ */ jsx(ReportsMobileSelectionDrawer, {}),
+			/* @__PURE__ */ jsx(ExpandableDataTableToggleButton, { iconOnly: isMobile }),
+			/* @__PURE__ */ jsx(UnifiedReportDownloadButton, { iconOnly: isMobile })
 		]
 	});
 };
@@ -40767,8 +40770,14 @@ function UnifiedReportTagControl({ tagControl }) {
 	const { t } = useTranslation();
 	const { selectedTagValues, setSelectedTagValues } = useUnifiedReportTagSelection();
 	const dimensionName = (_tagControl$tagDimens = tagControl.tagDimension.displayName) !== null && _tagControl$tagDimens !== void 0 ? _tagControl$tagDimens : capitalizeFirstLetter(tagControl.tagDimension.key);
-	const options = tagControl.tagDimension.definedValues.filter(isActiveTagValueDefinition).map(toOption);
-	const selectedValues = selectedTagValues.filter(isActiveTagValueDefinition).map(toOption);
+	const options = useMemo(() => tagControl.tagDimension.definedValues.filter(isActiveTagValueDefinition).map(toOption), [tagControl.tagDimension.definedValues]);
+	const selectedValues = useMemo(() => {
+		const optionsByTagValueId = new Map(options.map((option) => [option.tagValueDefinition.id, option]));
+		return selectedTagValues.flatMap((tagValue) => {
+			const option = optionsByTagValueId.get(tagValue.id);
+			return option ? [option] : [];
+		});
+	}, [options, selectedTagValues]);
 	const handleSelectedValuesChange = (values) => {
 		setSelectedTagValues(values.map(({ tagValueDefinition }) => tagValueDefinition));
 	};
@@ -40791,13 +40800,7 @@ function UnifiedReportTagControl({ tagControl }) {
 }
 //#endregion
 //#region src/components/UnifiedReports/UnifiedReportControls.tsx
-var SMALL_BREAKPOINT$1 = 560;
-var MEDIUM_BREAKPOINT$1 = 760;
-var getVariantForWidth = (width) => {
-	if (width >= MEDIUM_BREAKPOINT$1) return "large";
-	if (width >= SMALL_BREAKPOINT$1) return "medium";
-	return "small";
-};
+var COMPACT_DATE_SELECTION_BREAKPOINT = 560;
 var UnifiedReportDateSelection = ({ isCompact }) => {
 	const { baseReport } = useBaseUnifiedReport();
 	const dateSelectionMode = useUnifiedReportDateSelectionMode();
@@ -40821,55 +40824,69 @@ var UnifiedReportControls = () => {
 	const containerRef = useElementSize((size) => {
 		setSize(size.width);
 	});
-	const variant = getVariantForWidth(size);
+	const isCompact = size < COMPACT_DATE_SELECTION_BREAKPOINT;
 	const hasGroupBy = dateSelectionMode === "full" && hasControl(baseReport, ReportControl.GroupBy);
 	const hasYear = hasControl(baseReport, ReportControl.Year);
 	const hasReportingBasis = hasControl(baseReport, ReportControl.ReportingBasis) && reportingBasis != null;
 	const tagControl = baseReport === null || baseReport === void 0 ? void 0 : baseReport.tagControl;
-	return /* @__PURE__ */ jsxs(Stack, {
+	return /* @__PURE__ */ jsx(VStack, {
 		ref: containerRef,
-		direction: variant === "large" ? "row" : "column",
-		pb: "md",
-		pi: "lg",
-		gap: "xs",
-		children: [/* @__PURE__ */ jsx(UnifiedReportDateSelection, { isCompact: variant === "small" }), (hasYear || hasGroupBy || hasReportingBasis || tagControl) && /* @__PURE__ */ jsxs("div", {
-			className: "Layer__UnifiedReports__AdditionalControls",
-			"data-variant": variant,
-			children: [
-				hasYear && /* @__PURE__ */ jsx(GlobalYearPicker, {}),
-				hasGroupBy && /* @__PURE__ */ jsx(DateGroupByComboBox, {
-					value: groupBy,
-					onValueChange: setGroupBy
-				}),
-				tagControl && /* @__PURE__ */ jsx(UnifiedReportTagControl, { tagControl }),
-				hasReportingBasis && /* @__PURE__ */ jsx(UnifiedReportReportingBasisControl, {
-					value: reportingBasis,
-					onValueChange: setReportingBasis
-				})
-			]
-		})]
+		className: "Layer__UnifiedReports__ControlsContainer",
+		children: /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			pb: "md",
+			pi: "lg",
+			gap: "xs",
+			className: "Layer__UnifiedReports__Controls",
+			children: [/* @__PURE__ */ jsx(UnifiedReportDateSelection, { isCompact }), (hasYear || hasGroupBy || hasReportingBasis || tagControl) && /* @__PURE__ */ jsxs("div", {
+				className: "Layer__UnifiedReports__AdditionalControls",
+				children: [
+					hasYear && /* @__PURE__ */ jsx(GlobalYearPicker, {}),
+					hasGroupBy && /* @__PURE__ */ jsx(DateGroupByComboBox, {
+						value: groupBy,
+						onValueChange: setGroupBy
+					}),
+					tagControl && /* @__PURE__ */ jsx(UnifiedReportTagControl, { tagControl }),
+					hasReportingBasis && /* @__PURE__ */ jsx(UnifiedReportReportingBasisControl, {
+						value: reportingBasis,
+						onValueChange: setReportingBasis
+					})
+				]
+			})]
+		})
 	});
 };
 //#endregion
 //#region src/components/UnifiedReports/UnifiedReportBaseHeader.tsx
-var UnifiedReportBaseHeader = () => {
+var resolveVariant$1 = ({ width }) => width <= BREAKPOINTS.MOBILE ? "Mobile" : "Desktop";
+var UnifiedReportBaseHeaderRow = ({ variant }) => {
 	const { baseReport } = useBaseUnifiedReport();
+	return /* @__PURE__ */ jsxs(HStack, {
+		pi: "lg",
+		pbs: "lg",
+		align: "center",
+		justify: "space-between",
+		className: "Layer__UnifiedReports__BaseHeaderRow",
+		children: [!(variant === "Mobile") && (baseReport ? /* @__PURE__ */ jsx(Span, {
+			size: "lg",
+			weight: "bold",
+			children: baseReport.displayName
+		}) : /* @__PURE__ */ jsx(SkeletonLoader, {
+			width: "192px",
+			height: "24px"
+		})), /* @__PURE__ */ jsx(UnifiedReportHeaderButtons, { variant })]
+	});
+};
+var UnifiedReportBaseHeader = () => {
 	const { isDesktop } = useSizeClass();
 	return /* @__PURE__ */ jsxs(VStack, {
 		className: "Layer__UnifiedReports__BaseHeader",
-		children: [isDesktop && /* @__PURE__ */ jsxs(HStack, {
-			pi: "lg",
-			pbs: "lg",
-			align: "center",
-			justify: "space-between",
-			children: [baseReport ? /* @__PURE__ */ jsx(Span, {
-				size: "lg",
-				weight: "bold",
-				children: baseReport.displayName
-			}) : /* @__PURE__ */ jsx(SkeletonLoader, {
-				width: "192px",
-				height: "24px"
-			}), /* @__PURE__ */ jsx(UnifiedReportHeaderButtons, {})]
+		children: [isDesktop && /* @__PURE__ */ jsx(ResponsiveComponent, {
+			resolveVariant: resolveVariant$1,
+			slots: {
+				Desktop: /* @__PURE__ */ jsx(UnifiedReportBaseHeaderRow, { variant: "Desktop" }),
+				Mobile: /* @__PURE__ */ jsx(UnifiedReportBaseHeaderRow, { variant: "Mobile" })
+			}
 		}), /* @__PURE__ */ jsx(UnifiedReportControls, {})]
 	});
 };

package/dist/index.css

@@ -5650,7 +5650,7 @@ tbody .Layer__table__empty-row:first-child {
   visibility: hidden;
 }
 .Layer__ComboBoxOption--selected {
-  background-color: var(--color-base-100);
+  background-color: var(--color-base-300);
 }
 .Layer__ComboBoxOption--selected .Layer__ComboBoxOptionCheckIcon {
   visibility: visible;
@@ -9362,6 +9362,19 @@ tbody .Layer__table__empty-row:first-child {
   justify-content: flex-end;
   min-width: 15rem;
   max-width: 24rem;
+}
+.Layer__UnifiedReports__HeaderButtons--mobile {
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+}
+
+@container unified-reports (max-width: 500px) {
+  .Layer__UnifiedReports__HeaderButtons {
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+  }
 }.Layer__UI__Table__UnifiedReports {
   width: max-content;
   min-width: 100%;
@@ -9385,27 +9398,36 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__UnifiedReports__TagControl__Container .Layer__ComboBoxMultiValue {
   flex: 1 1 auto;
-}.Layer__UnifiedReports__AdditionalControls {
-  display: grid;
-  gap: var(--spacing-xs);
-}
-.Layer__UnifiedReports__AdditionalControls[data-variant=small] {
-  grid-template-columns: 1fr;
-}
-.Layer__UnifiedReports__AdditionalControls[data-variant=medium] {
-  grid-template-columns: repeat(2, 1fr);
+}.Layer__UnifiedReports__ControlsContainer {
+  container: unified-report-controls/inline-size;
 }
-.Layer__UnifiedReports__AdditionalControls[data-variant=large] {
+
+.Layer__UnifiedReports__AdditionalControls {
+  display: grid;
   grid-auto-columns: max-content;
   grid-auto-flow: column;
+  gap: var(--spacing-xs);
 }
-.Layer__UnifiedReports__AdditionalControls[data-variant=small] > *,
-.Layer__UnifiedReports__AdditionalControls[data-variant=small] .Layer__DateGroupByComboBox__Container,
-.Layer__UnifiedReports__AdditionalControls[data-variant=small] .Layer__YearPicker, .Layer__UnifiedReports__AdditionalControls[data-variant=medium] > *,
-.Layer__UnifiedReports__AdditionalControls[data-variant=medium] .Layer__DateGroupByComboBox__Container,
-.Layer__UnifiedReports__AdditionalControls[data-variant=medium] .Layer__YearPicker {
-  inline-size: 100%;
-  max-inline-size: none;
+
+@container unified-report-controls (max-width: 1200px) {
+  .Layer__UnifiedReports__Controls.Layer__Stack[data-direction=row] {
+    flex-direction: column;
+  }
+  .Layer__UnifiedReports__AdditionalControls {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-flow: row;
+  }
+  .Layer__UnifiedReports__AdditionalControls > *,
+  .Layer__UnifiedReports__AdditionalControls .Layer__DateGroupByComboBox__Container,
+  .Layer__UnifiedReports__AdditionalControls .Layer__YearPicker {
+    inline-size: 100%;
+    max-inline-size: none;
+  }
+}
+@container unified-report-controls (max-width: 560px) {
+  .Layer__UnifiedReports__AdditionalControls {
+    grid-template-columns: 1fr;
+  }
 }.Layer__UnifiedReports__BaseHeader {
   border-bottom: 1px solid var(--border-color);
 }.Layer__UI__Link {
@@ -9467,6 +9489,7 @@ tbody .Layer__table__empty-row:first-child {
 }.Layer__UnifiedReports__DetailHeader {
   border-bottom: 1px solid var(--border-color);
 }.Layer__view.Layer__UnifiedReports {
+  container: unified-reports/inline-size;
   overflow: hidden;
   max-height: 100vh;
   min-width: clamp(23rem, 100%, 1406px);

package/package.json

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