@tesouro/embedded-components-react 0.11.21 → 0.11.24

package/dist/index.css

@@ -2055,9 +2055,6 @@
   .ttw\:border-\[\#D0D5DD\] {
     border-color: #D0D5DD;
   }
-  .ttw\:border-\[\#E0E4EA\] {
-    border-color: #E0E4EA;
-  }
   .ttw\:border-\[\#EAECF0\] {
     border-color: #EAECF0;
   }
@@ -2250,9 +2247,6 @@
   .ttw\:bg-\[\#EFF8FF\] {
     background-color: #EFF8FF;
   }
-  .ttw\:bg-\[\#F0F2FD\] {
-    background-color: #F0F2FD;
-  }
   .ttw\:bg-\[\#F2F4F7\] {
     background-color: #F2F4F7;
   }
@@ -5647,14 +5641,6 @@
     .ttw\:hover\:bg-primary:hover {
       background-color: var(--ttw-primary);
     }
-    .ttw\:hover\:bg-primary\/10:hover {
-      background-color: var(--ttw-primary);
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      .ttw\:hover\:bg-primary\/10:hover {
-        background-color: color-mix(in oklab, var(--ttw-primary) 10%, transparent);
-      }
-    }
     .ttw\:hover\:bg-primary\/15:hover {
       background-color: var(--ttw-primary);
     }

package/dist/index.d.ts

@@ -3632,9 +3632,11 @@ declare function ExpenseManagementWidget({ screenLabels, headerLabels, transacti
 
 interface InsightsWidgetLabels {
     widgetTitle: string;
+    filterTabsLabel: string;
     activeTab: string;
     dismissedTab: string;
     noInsightsFound: string;
+    noInsightsDescription: string;
     /** Screen-reader only: names the wait while insights load. */
     loadingLabel: string;
     loadErrorTitle: string;
@@ -3650,7 +3652,6 @@ interface InsightRowView {
     displayText: string;
     createdDate: string;
     badgeLabel: string;
-    badgeIcon: ReactElement;
     showDismissButton: boolean;
     showToggle: boolean;
     toggleLabel?: string;

package/dist/lib/InsightsWidget.d.ts

@@ -1,13 +1,15 @@
 import * as React from 'react';
-import { ReactElement, ComponentType, AnchorHTMLAttributes, ReactNode, ErrorInfo } from 'react';
+import { ComponentType, AnchorHTMLAttributes, ReactNode, ErrorInfo } from 'react';
 import { RowData } from '@tanstack/react-table';
 import { FallbackProps } from 'react-error-boundary';
 
 interface InsightsWidgetLabels {
     widgetTitle: string;
+    filterTabsLabel: string;
     activeTab: string;
     dismissedTab: string;
     noInsightsFound: string;
+    noInsightsDescription: string;
     /** Screen-reader only: names the wait while insights load. */
     loadingLabel: string;
     loadErrorTitle: string;
@@ -23,7 +25,6 @@ interface InsightRowView {
     displayText: string;
     createdDate: string;
     badgeLabel: string;
-    badgeIcon: ReactElement;
     showDismissButton: boolean;
     showToggle: boolean;
     toggleLabel?: string;

package/dist/lib/WidgetSuite.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ComponentType, AnchorHTMLAttributes, ReactNode, ErrorInfo, ReactElement } from 'react';
+import { ComponentType, AnchorHTMLAttributes, ReactNode, ErrorInfo } from 'react';
 import { RowData } from '@tanstack/react-table';
 import { FallbackProps } from 'react-error-boundary';
 import { PartialDeep } from 'type-fest';
@@ -2568,9 +2568,11 @@ type ExpenseManagementWidgetProps = WidgetProviderProps & ExpenseManagementWidge
 
 interface InsightsWidgetLabels {
     widgetTitle: string;
+    filterTabsLabel: string;
     activeTab: string;
     dismissedTab: string;
     noInsightsFound: string;
+    noInsightsDescription: string;
     /** Screen-reader only: names the wait while insights load. */
     loadingLabel: string;
     loadErrorTitle: string;
@@ -2585,7 +2587,6 @@ interface InsightRowView {
     displayText: string;
     createdDate: string;
     badgeLabel: string;
-    badgeIcon: ReactElement;
     showDismissButton: boolean;
     showToggle: boolean;
     toggleLabel?: string;

package/dist/libs/tesouro-embedded-components-react/insights-widget/feature/dist/lib/InsightsWidget/InsightsWidgetContext.js

@@ -2,115 +2,123 @@
 "use client";
 "use client";
 "use client";
-import { OrganizationStatus as e } from "../../../../../shared/data-access/dist/lib/organizationStatus.js";
-import { useEmbedApi as t } from "../../../../../shared/data-access/dist/lib/EmbedApiContext.js";
-import { useAllBankAccountsQuery as n } from "../../../../../shared/data-access/dist/lib/bank-account/useAllBankAccountsQuery.js";
-import { useAllExternalBankAccountsQuery as r } from "../../../../../shared/data-access/dist/lib/external-bank-account/useAllExternalBankAccountsQuery.js";
+import { DATE_DISPLAY_LOCALE as e, DATE_DISPLAY_OPTIONS as t } from "../../../../../shared/util/dist/lib/dateDisplay.js";
+import "../../../../../shared/util/dist/index.js";
+import { OrganizationStatus as n } from "../../../../../shared/data-access/dist/lib/organizationStatus.js";
+import { useEmbedApi as ee } from "../../../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import { useAllBankAccountsQuery as r } from "../../../../../shared/data-access/dist/lib/bank-account/useAllBankAccountsQuery.js";
+import { useAllExternalBankAccountsQuery as i } from "../../../../../shared/data-access/dist/lib/external-bank-account/useAllExternalBankAccountsQuery.js";
 import "../../../../../shared/data-access/dist/index.js";
-import { useRefetchWidget as i, useWidgetConfig as a, useWidgetError as o, useWidgetLoading as s } from "../../../../../shared/feature/dist/lib/WidgetProvider/hooks.js";
+import { useRefetchWidget as a, useWidgetConfig as o, useWidgetError as s, useWidgetLoading as te } from "../../../../../shared/feature/dist/lib/WidgetProvider/hooks.js";
 import "../../../../../shared/feature/dist/index.js";
 import { INSIGHTS_FEATURE_LABELS_EN as c } from "./labels.js";
-import { useDismissedInsightIds as l } from "./useDismissedInsightIds.js";
-import { shouldShowRoutingOnboardingInsight as u } from "./shouldShowRoutingOnboardingInsight.js";
-import { getInsightsPermissions as d } from "./permissions.js";
-import { createContext as f, useCallback as p, useContext as m, useMemo as h, useState as g } from "react";
-import { jsx as ee } from "react/jsx-runtime";
+import { useDismissedInsightIds as ne } from "./useDismissedInsightIds.js";
+import { shouldShowRoutingOnboardingInsight as l } from "./shouldShowRoutingOnboardingInsight.js";
+import { getInsightsPermissions as u } from "./permissions.js";
+import { createContext as d, useCallback as f, useContext as p, useMemo as m, useState as h } from "react";
+import { jsx as g } from "react/jsx-runtime";
 // ../../libs/tesouro-embedded-components-react/insights-widget/feature/dist/lib/InsightsWidget/InsightsWidgetContext.js
-var _ = f({
+var _ = d({
 	activeFilter: "active",
 	setActiveFilter: () => {},
 	filteredInsights: [],
+	activeCount: 0,
+	dismissedCount: 0,
 	isLoading: !1,
 	isError: !1,
 	refetch: async () => void 0,
 	onDismissClick: () => {},
 	featureLabels: c,
 	createdDateLabel: ""
-}), v = () => m(_), y = ({ children: f, routingEnabled: m = !1, onRoutingToggleChange: v, onLinkExternalAccountClick: y, featureLabels: b }) => {
-	let { initResponse: x } = a(), te = s(), { organizationStatus: ne } = t(), S = o(), C = i(), w = h(() => u(x?.scopes), [x?.scopes]), { canReadBankAccounts: T, canReadExternalBankAccounts: E } = h(() => d(x?.scopes), [x?.scopes]), D = h(() => ({
+}), v = () => p(_), y = ({ children: d, routingEnabled: p = !1, onRoutingToggleChange: v, onLinkExternalAccountClick: y, featureLabels: b }) => {
+	let { initResponse: x } = o(), S = te(), { organizationStatus: C } = ee(), w = s(), T = a(), E = m(() => l(x?.scopes), [x?.scopes]), { canReadBankAccounts: D, canReadExternalBankAccounts: O } = m(() => u(x?.scopes), [x?.scopes]), k = m(() => ({
 		...c,
 		...b
-	}), [b]), [O, k] = g("active"), [A, j] = g(!1), M = v !== void 0, N = M ? m : A, P = M ? v : j, { dismissedIds: F, isLoading: I, refetch: L, dismissInsight: R } = l(), { data: z, isLoading: B, isError: V, refetch: H } = n({ enabled: T }), { data: U, isLoading: W, isError: G, refetch: K } = r({ enabled: E }), q = z?.data, J = U?.data, Y = !T || q !== void 0 || V, X = !E || J !== void 0 || G, re = ne === e.None, Z = te || B || W || I || !(Y && X) && !S && !re, Q = !!S || (T || E) && !(T && !V) && !(E && !G), ie = p(() => (C(), Promise.all([
-		T ? H() : void 0,
-		E ? K() : void 0,
-		L()
+	}), [b]), [A, re] = h("active"), [ie, ae] = h(!1), j = v !== void 0, M = j ? p : ie, N = j ? v : ae, { dismissedIds: P, isLoading: F, refetch: I, dismissInsight: L } = ne(), { data: R, isLoading: z, isError: B, refetch: V } = r({ enabled: D }), { data: H, isLoading: U, isError: W, refetch: G } = i({ enabled: O }), K = R?.data, q = H?.data, oe = !D || K !== void 0 || B, se = !O || q !== void 0 || W, ce = C === n.None, J = S || z || U || F || !(oe && se) && !w && !ce, Y = !!w || (D || O) && !(D && !B) && !(O && !W), le = f(() => (T(), Promise.all([
+		D ? V() : void 0,
+		O ? G() : void 0,
+		I()
 	])), [
-		C,
-		H,
-		K,
-		L,
 		T,
-		E
-	]), ae = h(() => (/* @__PURE__ */ new Date()).toLocaleDateString(), []), $ = h(() => {
-		if (Z || Q) return [];
+		V,
+		G,
+		I,
+		D,
+		O
+	]), X = m(() => new Intl.DateTimeFormat(e, t).format(/* @__PURE__ */ new Date()), []), Z = m(() => {
+		if (J || Y) return [];
 		let e = [];
-		if (w && e.push({
+		if (E && e.push({
 			id: "insight-routing-onboarding",
-			isDismissed: F.includes("insight-routing-onboarding"),
+			isDismissed: P.includes("insight-routing-onboarding"),
 			canDismiss: !0,
 			showToggle: !0,
-			displayText: D.routingOnboardingText,
-			toggleLabel: D.enableRoutingToggle,
-			toggleChecked: N,
-			onToggle: P
-		}), q !== void 0 && q.length === 0 && e.push({
+			displayText: k.routingOnboardingText,
+			toggleLabel: k.enableRoutingToggle,
+			toggleChecked: M,
+			onToggle: N
+		}), K !== void 0 && K.length === 0 && e.push({
 			id: "insight-create-embedded-account",
-			isDismissed: F.includes("insight-create-embedded-account"),
+			isDismissed: P.includes("insight-create-embedded-account"),
 			canDismiss: !0,
 			showToggle: !1,
-			displayText: D.createAccountText
-		}), J !== void 0 && J.length === 0 && e.push({
+			displayText: k.createAccountText
+		}), q !== void 0 && q.length === 0 && e.push({
 			id: "insight-connect-external-account",
-			isDismissed: F.includes("insight-connect-external-account"),
+			isDismissed: P.includes("insight-connect-external-account"),
 			canDismiss: !0,
 			showToggle: !1,
-			displayText: D.connectExternalText,
-			actionText: y ? D.linkAccountAction : void 0,
+			displayText: k.connectExternalText,
+			actionText: y ? k.linkAccountAction : void 0,
 			onActionClick: y
-		}), J !== void 0) {
-			for (let t of J) if (t.verificationStatus !== "VERIFIED") {
+		}), q !== void 0) {
+			for (let t of q) if (t.verificationStatus !== "VERIFIED") {
 				let n = `insight-verify-external-${t.id}`;
 				e.push({
 					id: n,
-					isDismissed: F.includes(n),
+					isDismissed: P.includes(n),
 					canDismiss: !0,
 					showToggle: !1,
-					displayText: D.verifyExternalAccountText(t.nickname ?? "")
+					displayText: k.verifyExternalAccountText(t.nickname ?? "")
 				});
 			}
 		}
 		return e;
 	}, [
+		K,
 		q,
 		J,
-		Z,
-		Q,
-		F,
-		w,
-		N,
+		Y,
 		P,
+		E,
+		M,
+		N,
 		y,
-		D
-	]), oe = p((e) => {
-		R(e);
-	}, [R]), se = h(() => O === "dismissed" ? $.filter((e) => F.includes(e.id)) : $.filter((e) => !F.includes(e.id)), [
-		$,
-		O,
-		F
-	]);
-	return /* @__PURE__ */ ee(_.Provider, {
+		k
+	]), ue = f((e) => {
+		L(e);
+	}, [L]), { activeInsights: Q, dismissedInsights: $ } = m(() => {
+		let e = Z.filter((e) => P.includes(e.id));
+		return {
+			activeInsights: Z.filter((e) => !P.includes(e.id)),
+			dismissedInsights: e
+		};
+	}, [Z, P]), de = A === "dismissed" ? $ : Q;
+	return /* @__PURE__ */ g(_.Provider, {
 		value: {
-			activeFilter: O,
-			setActiveFilter: k,
-			filteredInsights: se,
-			isLoading: Z,
-			isError: Q,
-			refetch: ie,
-			onDismissClick: oe,
-			featureLabels: D,
-			createdDateLabel: ae
+			activeFilter: A,
+			setActiveFilter: re,
+			filteredInsights: de,
+			activeCount: Q.length,
+			dismissedCount: $.length,
+			isLoading: J,
+			isError: Y,
+			refetch: le,
+			onDismissClick: ue,
+			featureLabels: k,
+			createdDateLabel: X
 		},
-		children: f
+		children: d
 	});
 };
 export { y as InsightsWidgetContextProvider, v as useInsightsWidgetContext };

package/dist/libs/tesouro-embedded-components-react/insights-widget/feature/dist/lib/InsightsWidget/InsightsWidgetFeature.js

@@ -20,27 +20,29 @@ function d({ labels: t, singleInsightLabels: n }) {
 	l(() => {
 		a(i.Mounted);
 	}, [a]);
-	let { activeFilter: d, setActiveFilter: f, filteredInsights: p, isLoading: m, isError: h, refetch: g, onDismissClick: _, featureLabels: v, createdDateLabel: y } = r();
+	let { activeFilter: d, setActiveFilter: f, filteredInsights: p, activeCount: m, dismissedCount: h, isLoading: g, isError: _, refetch: v, onDismissClick: y, featureLabels: b, createdDateLabel: x } = r();
 	return /* @__PURE__ */ u(s, {
 		hasInsights: p.length > 0,
-		isLoading: m,
-		isError: h,
-		onRetry: h ? () => void g() : void 0,
+		isLoading: g,
+		isError: _,
+		onRetry: _ ? () => void v() : void 0,
 		activeFilter: d,
 		setActiveFilter: f,
+		activeCount: String(m),
+		dismissedCount: String(h),
 		labels: t,
 		testIds: {
 			activeTab: o.activeTab,
 			skeleton: o.skeleton,
 			error: o.error,
-			retry: o.retry,
+			empty: o.empty,
 			list: o.list
 		},
 		children: p.map((e) => /* @__PURE__ */ u(c, {
 			insight: e,
-			createdDate: y,
-			featureLabels: v,
-			onDismissClick: _,
+			createdDate: x,
+			featureLabels: b,
+			onDismissClick: y,
 			labels: n
 		}, e.id))
 	});

package/dist/libs/tesouro-embedded-components-react/insights-widget/feature/dist/lib/InsightsWidget/mapInsightToRowView.js

@@ -1,22 +1,16 @@
-import { jsx as e } from "react/jsx-runtime";
-import { ClipboardCheck as t } from "lucide-react";
 // ../../libs/tesouro-embedded-components-react/insights-widget/feature/dist/lib/InsightsWidget/mapInsightToRowView.js
-function n(n, r, i) {
+function e(e, t, n) {
 	return {
-		displayText: n.displayText,
-		createdDate: i,
-		badgeLabel: r.onboardingBadgeLabel,
-		badgeIcon: /* @__PURE__ */ e(t, {
-			className: "ttw:size-4",
-			"aria-hidden": !0
-		}),
-		showDismissButton: n.canDismiss && !n.isDismissed,
-		showToggle: n.showToggle,
-		toggleLabel: n.toggleLabel,
-		toggleChecked: n.toggleChecked,
-		onToggle: n.onToggle,
-		actionText: n.actionText,
-		onActionClick: n.onActionClick
+		displayText: e.displayText,
+		createdDate: n,
+		badgeLabel: t.onboardingBadgeLabel,
+		showDismissButton: e.canDismiss && !e.isDismissed,
+		showToggle: e.showToggle,
+		toggleLabel: e.toggleLabel,
+		toggleChecked: e.toggleChecked,
+		onToggle: e.onToggle,
+		actionText: e.actionText,
+		onActionClick: e.onActionClick
 	};
 }
-export { n as mapInsightToRowView };
+export { e as mapInsightToRowView };

package/dist/libs/tesouro-embedded-components-react/insights-widget/feature/dist/lib/InsightsWidget/testIds.js

@@ -2,7 +2,7 @@
 var e = {
 	skeleton: "insights-widget-skeleton",
 	error: "insights-widget-error",
-	retry: "insights-widget-retry",
+	empty: "insights-widget-empty",
 	activeTab: "insights-widget-active-tab",
 	list: "insights-widget-list",
 	singleInsight: "insights-widget-single-insight",

package/dist/libs/tesouro-embedded-components-react/insights-widget/ui/dist/lib/InsightsWidget/InsightsWidget.js

@@ -1,85 +1,72 @@
-import { Button as e, Skeleton as t, Typography as n, cn as r } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { WidgetContainer as i } from "../../../../../shared/ui/dist/lib/WidgetContainer/WidgetContainer.js";
+import { Skeleton as e, Tabs as t, TabsContent as n, TabsList as r, TabsTrigger as i } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { WidgetContainer as a } from "../../../../../shared/ui/dist/lib/WidgetContainer/WidgetContainer.js";
+import { EmptyState as o } from "../../../../../shared/ui/dist/lib/EmptyState/EmptyState.js";
+import { ErrorState as s } from "../../../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
+import { LoadingRegion as c } from "../../../../../shared/ui/dist/lib/LoadingRegion/LoadingRegion.js";
 import "../../../../../shared/ui/dist/index.js";
-import { INSIGHTS_WIDGET_LABELS_EN as a } from "./labels.js";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Sparkles as l } from "lucide-react";
+import { INSIGHTS_WIDGET_LABELS_EN as l } from "./labels.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Sparkles as f } from "lucide-react";
 // ../../libs/tesouro-embedded-components-react/insights-widget/ui/dist/lib/InsightsWidget/InsightsWidget.js
-var u = ({ hasInsights: u, children: d, activeFilter: f, setActiveFilter: p, isLoading: m, isError: h, onRetry: g, labels: _, testIds: v }) => {
-	let y = {
-		...a,
-		..._
+var p = (e) => e === "active" || e === "dismissed", m = ({ hasInsights: m, children: h, activeFilter: g, setActiveFilter: _, activeCount: v, dismissedCount: y, isLoading: b, isError: x, onRetry: S, labels: C, testIds: w }) => {
+	let T = {
+		...l,
+		...C
 	};
-	return /* @__PURE__ */ s(i, {
-		icon: /* @__PURE__ */ s(l, {
-			className: "ttw:size-[18px] ttw:shrink-0 ttw:text-primary",
-			"aria-hidden": !0
-		}),
-		title: y.widgetTitle,
-		children: m ? /* @__PURE__ */ c("div", {
-			role: "status",
-			"aria-busy": !0,
-			children: [/* @__PURE__ */ s("span", {
-				className: "ttw:sr-only",
-				children: y.loadingLabel
-			}), /* @__PURE__ */ s(t, {
-				"data-testid": v?.skeleton,
+	return /* @__PURE__ */ u(a, {
+		icon: /* @__PURE__ */ u(f, {}),
+		title: T.widgetTitle,
+		children: b ? /* @__PURE__ */ u(c, {
+			isLoading: !0,
+			loadingLabel: T.loadingLabel,
+			children: /* @__PURE__ */ u(e, {
+				"data-testid": w?.skeleton,
 				height: 80,
 				width: "100%",
 				className: "ttw:rounded-md"
-			})]
-		}) : h ? /* @__PURE__ */ c("div", {
-			className: "ttw:flex ttw:flex-col ttw:gap-3",
-			"data-testid": v?.error,
+			})
+		}) : x ? /* @__PURE__ */ u(s, {
+			title: T.loadErrorTitle,
+			description: T.loadErrorDescription,
+			retryLabel: T.loadErrorRetry,
+			onRetry: S,
+			testId: w?.error
+		}) : /* @__PURE__ */ d(t, {
+			value: g,
+			onValueChange: (e) => {
+				p(e) && _(e);
+			},
+			className: "ttw:gap-4",
 			children: [
-				/* @__PURE__ */ s(n, {
-					component: "p",
-					variant: "body1",
-					className: "ttw:font-semibold",
-					children: y.loadErrorTitle
+				/* @__PURE__ */ d(r, {
+					variant: "pills",
+					"aria-label": T.filterTabsLabel,
+					children: [/* @__PURE__ */ u(i, {
+						value: "active",
+						count: v,
+						"data-testid": w?.activeTab,
+						children: T.activeTab
+					}), /* @__PURE__ */ u(i, {
+						value: "dismissed",
+						count: y,
+						children: T.dismissedTab
+					})]
 				}),
-				/* @__PURE__ */ s(n, {
-					component: "p",
-					variant: "body2",
-					color: "muted",
-					children: y.loadErrorDescription
-				}),
-				g ? /* @__PURE__ */ s(e, {
-					type: "button",
-					variant: "outline",
-					size: "sm",
-					className: "ttw:self-start ttw:cursor-pointer",
-					onClick: g,
-					"data-testid": v?.retry,
-					children: y.loadErrorRetry
-				}) : null
+				/* @__PURE__ */ u(n, { value: g === "active" ? "dismissed" : "active" }),
+				/* @__PURE__ */ u(n, {
+					value: g,
+					children: m ? /* @__PURE__ */ u("div", {
+						className: "ttw:flex ttw:max-h-80 ttw:flex-col ttw:gap-2 ttw:overflow-y-auto",
+						"data-testid": w?.list,
+						children: h
+					}) : /* @__PURE__ */ u(o, {
+						title: T.noInsightsFound,
+						description: g === "active" ? T.noInsightsDescription : void 0,
+						testId: w?.empty
+					})
+				})
 			]
-		}) : /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ c("div", {
-			className: "ttw:mb-2 ttw:flex ttw:flex-row ttw:gap-1",
-			children: [/* @__PURE__ */ s(e, {
-				type: "button",
-				"data-testid": v?.activeTab,
-				variant: f === "active" ? "default" : "outline",
-				size: "sm",
-				className: r("ttw:cursor-pointer ttw:rounded-md ttw:font-normal", f !== "active" && "ttw:border-border ttw:text-foreground"),
-				onClick: () => p("active"),
-				children: y.activeTab
-			}), /* @__PURE__ */ s(e, {
-				type: "button",
-				variant: f === "dismissed" ? "default" : "outline",
-				size: "sm",
-				className: r("ttw:cursor-pointer ttw:rounded-md ttw:font-normal", f !== "dismissed" && "ttw:border-border ttw:text-foreground"),
-				onClick: () => p("dismissed"),
-				children: y.dismissedTab
-			})]
-		}), u ? /* @__PURE__ */ s("div", {
-			className: "ttw:flex ttw:max-h-80 ttw:flex-col ttw:gap-1.5 ttw:overflow-y-auto ttw:rounded-2xl ttw:bg-[#F0F2FD] ttw:p-2",
-			"data-testid": v?.list,
-			children: d
-		}) : /* @__PURE__ */ s(n, {
-			color: "muted",
-			children: y.noInsightsFound
-		})] })
+		})
 	});
 };
-export { a as INSIGHTS_WIDGET_LABELS_EN, u as InsightsWidget };
+export { l as INSIGHTS_WIDGET_LABELS_EN, m as InsightsWidget };

package/dist/libs/tesouro-embedded-components-react/insights-widget/ui/dist/lib/InsightsWidget/SingleInsight/SingleInsight.js

@@ -1,93 +1,90 @@
-import { Badge as e, Button as t, Switch as n, Typography as r } from "../../../../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { SINGLE_INSIGHT_LABELS_EN as i } from "./labels.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { ArrowRight as s, X as c } from "lucide-react";
+import { Badge as e, Button as t, Switch as n, Tooltip as r, TooltipContent as i, TooltipProvider as a, TooltipTrigger as o, Typography as s } from "../../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { SINGLE_INSIGHT_LABELS_EN as c } from "./labels.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { ArrowRight as d, X as f } from "lucide-react";
 // ../../libs/tesouro-embedded-components-react/insights-widget/ui/dist/lib/InsightsWidget/SingleInsight/SingleInsight.js
-var l = ({ row: l, onDismissClick: u, labels: d, testIds: f }) => {
-	let p = {
-		...i,
-		...d
-	}, m = l.showToggle || !!(l.navigationLinkText && l.onNavigationClick) || !!(l.actionText && l.onActionClick);
-	return /* @__PURE__ */ o("div", {
-		className: "ttw:rounded-xl ttw:border ttw:border-[#E0E4EA] ttw:bg-background ttw:p-2",
-		"data-testid": f?.root,
+var p = ({ row: p, onDismissClick: m, labels: h, testIds: g }) => {
+	let _ = {
+		...c,
+		...h
+	}, v = p.showToggle || !!(p.navigationLinkText && p.onNavigationClick) || !!(p.actionText && p.onActionClick);
+	return /* @__PURE__ */ u("div", {
+		className: "ttw:rounded-lg ttw:bg-muted ttw:p-3",
+		"data-testid": g?.root,
 		children: [
-			/* @__PURE__ */ o("div", {
-				className: "ttw:mb-1 ttw:flex ttw:flex-row ttw:items-center ttw:justify-between",
-				children: [/* @__PURE__ */ o("div", {
-					className: "ttw:flex ttw:flex-row ttw:items-center ttw:gap-1",
-					children: [/* @__PURE__ */ o(e, {
-						variant: "outline",
-						className: "ttw:gap-1 ttw:border-primary/30 ttw:bg-primary/10 ttw:font-medium ttw:text-primary ttw:hover:bg-primary/10 ttw:hover:text-primary",
-						children: [l.badgeIcon, l.badgeLabel]
-					}), /* @__PURE__ */ a(r, {
+			/* @__PURE__ */ u("div", {
+				className: "ttw:mb-1 ttw:flex ttw:flex-row ttw:items-center ttw:justify-between ttw:gap-2",
+				children: [/* @__PURE__ */ u("div", {
+					className: "ttw:flex ttw:min-w-0 ttw:flex-row ttw:items-center ttw:gap-2",
+					children: [/* @__PURE__ */ l(e, {
+						tone: "neutral",
+						children: p.badgeLabel
+					}), /* @__PURE__ */ l(s, {
 						variant: "body2",
 						color: "muted",
 						component: "span",
-						children: l.createdDate
+						children: p.createdDate
 					})]
-				}), l.showDismissButton && u ? /* @__PURE__ */ a(t, {
-					type: "button",
-					variant: "ghost",
-					size: "icon-sm",
-					className: "ttw:size-8 ttw:shrink-0 ttw:cursor-pointer",
-					"aria-label": p.dismissInsightAriaLabel,
-					onClick: u,
-					"data-testid": f?.dismiss,
-					children: /* @__PURE__ */ a(c, {
-						className: "ttw:size-4",
-						"aria-hidden": !0
+				}), p.showDismissButton && m ? /* @__PURE__ */ l(a, { children: /* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l(o, {
+					asChild: !0,
+					"aria-describedby": void 0,
+					children: /* @__PURE__ */ l(t, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						className: "ttw:shrink-0",
+						"aria-label": _.dismissInsightAriaLabel,
+						onClick: m,
+						"data-testid": g?.dismiss,
+						children: /* @__PURE__ */ l(f, { "aria-hidden": !0 })
 					})
-				}) : null]
+				}), /* @__PURE__ */ l(i, {
+					sideOffset: 4,
+					children: _.dismissInsightAriaLabel
+				})] }) }) : null]
 			}),
-			/* @__PURE__ */ a(r, {
+			/* @__PURE__ */ l(s, {
 				variant: "body1",
 				component: "p",
-				className: m ? "ttw:mb-1" : "",
-				children: l.displayText
+				className: v ? "ttw:mb-1" : "",
+				children: p.displayText
 			}),
-			l.showToggle ? /* @__PURE__ */ o("div", {
+			p.showToggle ? /* @__PURE__ */ u("div", {
 				className: "ttw:mt-1 ttw:flex ttw:flex-row ttw:items-center ttw:gap-2",
-				children: [l.onToggle ? /* @__PURE__ */ a(n, {
-					checked: l.toggleChecked ?? !1,
-					onCheckedChange: l.onToggle,
-					"data-testid": f?.toggle
-				}) : null, l.toggleLabel ? /* @__PURE__ */ a(r, {
+				children: [p.onToggle ? /* @__PURE__ */ l(n, {
+					checked: p.toggleChecked ?? !1,
+					onCheckedChange: p.onToggle,
+					"data-testid": g?.toggle
+				}) : null, p.toggleLabel ? /* @__PURE__ */ l(s, {
 					variant: "body2",
 					component: "span",
-					color: l.onToggle ? void 0 : "muted",
-					children: l.toggleLabel
+					color: p.onToggle ? void 0 : "muted",
+					children: p.toggleLabel
 				}) : null]
 			}) : null,
-			l.navigationLinkText && l.onNavigationClick ? /* @__PURE__ */ a("div", {
+			p.navigationLinkText && p.onNavigationClick ? /* @__PURE__ */ l("div", {
 				className: "ttw:mt-1",
-				children: /* @__PURE__ */ o(t, {
+				children: /* @__PURE__ */ u(t, {
 					type: "button",
 					variant: "link",
-					className: "ttw:h-auto ttw:gap-0.5 ttw:p-0 ttw:font-medium",
-					onClick: l.onNavigationClick,
-					"data-testid": f?.navigation,
-					children: [l.navigationLinkText, /* @__PURE__ */ a(s, {
-						className: "ttw:size-[18px] ttw:shrink-0",
-						"aria-hidden": !0
-					})]
+					className: "ttw:h-auto ttw:gap-1 ttw:p-0 ttw:font-medium",
+					onClick: p.onNavigationClick,
+					"data-testid": g?.navigation,
+					children: [p.navigationLinkText, /* @__PURE__ */ l(d, { "aria-hidden": !0 })]
 				})
 			}) : null,
-			l.actionText && l.onActionClick ? /* @__PURE__ */ a("div", {
+			p.actionText && p.onActionClick ? /* @__PURE__ */ l("div", {
 				className: "ttw:mt-1",
-				children: /* @__PURE__ */ o(t, {
+				children: /* @__PURE__ */ u(t, {
 					type: "button",
 					variant: "link",
-					className: "ttw:h-auto ttw:gap-0.5 ttw:p-0 ttw:font-medium",
-					onClick: l.onActionClick,
-					"data-testid": f?.action,
-					children: [l.actionText, /* @__PURE__ */ a(s, {
-						className: "ttw:size-[18px] ttw:shrink-0",
-						"aria-hidden": !0
-					})]
+					className: "ttw:h-auto ttw:gap-1 ttw:p-0 ttw:font-medium",
+					onClick: p.onActionClick,
+					"data-testid": g?.action,
+					children: [p.actionText, /* @__PURE__ */ l(d, { "aria-hidden": !0 })]
 				})
 			}) : null
 		]
 	});
 };
-export { i as SINGLE_INSIGHT_LABELS_EN, l as SingleInsight };
+export { c as SINGLE_INSIGHT_LABELS_EN, p as SingleInsight };

package/dist/libs/tesouro-embedded-components-react/insights-widget/ui/dist/lib/InsightsWidget/labels.js

@@ -1,12 +1,14 @@
 // ../../libs/tesouro-embedded-components-react/insights-widget/ui/dist/lib/InsightsWidget/labels.js
 var e = {
 	widgetTitle: "Insights",
+	filterTabsLabel: "Filter insights",
 	activeTab: "Active",
 	dismissedTab: "Dismissed",
 	noInsightsFound: "No insights found",
+	noInsightsDescription: "New insights appear here as your accounts change.",
 	loadingLabel: "Loading insights",
-	loadErrorTitle: "Could not load insights",
-	loadErrorDescription: "Something went wrong while loading account data. Please try again.",
-	loadErrorRetry: "Retry"
+	loadErrorTitle: "Couldn't load insights",
+	loadErrorDescription: "Check your connection, then try again.",
+	loadErrorRetry: "Try again"
 };
 export { e as INSIGHTS_WIDGET_LABELS_EN };

package/dist/libs/tesouro-embedded-components-react/shared/feature/dist/lib/analytics/build-info.js

@@ -1,5 +1,5 @@
 // ../../libs/tesouro-embedded-components-react/shared/feature/dist/lib/analytics/build-info.js
-var e = "@tesouro/embedded-components-react", t = "0.11.21", n = "c679ff5861e72ab093600c95f18af84dbb20f020", r = Object.freeze({
+var e = "@tesouro/embedded-components-react", t = "0.11.24", n = "dc95664f77b2946ce62c2fbbf22978637cbbd07f", r = Object.freeze({
 	library_name: e,
 	library_version: t,
 	library_sha: n

package/dist/libs/tesouro-embedded-components-react/shared/util/dist/index.js

@@ -1,34 +1,34 @@
 import { coerceAmountValueToMinorUnits as e } from "./lib/coerceAmountValueToMinorUnits.js";
 import { createCurrencyFormatter as t } from "./lib/createCurrencyFormatter.js";
 import { amountOutputToMajorUnits as n, minorExponentForCurrency as r } from "./lib/amountOutputToMajorUnits.js";
-import "./lib/dateDisplay.js";
-import { formatCalendarDate as i } from "./lib/formatCalendarDate.js";
-import { formatTimestampDate as a } from "./lib/formatTimestampDate.js";
-import { formatRejectionDate as o } from "./lib/formatRejectionDate.js";
-import { currencySymbolForCode as s, formatMoneyExact as c } from "./lib/formatMoneyExact.js";
-import { formatPhoneDisplay as l } from "./lib/formatPhoneDisplay.js";
-import { getInitials as u } from "./lib/getInitials.js";
-import { isValidAchAccountNumber as d } from "./lib/isValidAchAccountNumber.js";
-import { mergeLabelTree as f } from "./lib/mergeLabelTree.js";
-import { normalizeAmountOutputCurrencyCode as p } from "./lib/normalizeAmountOutputCurrencyCode.js";
-import { parseAmountOutputMajorUnits as m } from "./lib/parseAmountOutputMajorUnits.js";
-import { parseCalendarDate as h, parseDateOrTimestamp as g } from "./lib/parseCalendarDate.js";
-import { getRelativeCalendarDay as _ } from "./lib/relativeCalendarDay.js";
-import { parseDecimalAmountToMinorUnits as v } from "./lib/parseDecimalAmountToMinorUnits.js";
-import { sumAmountOutputsMajorUnits as y } from "./lib/sumAmountOutputsMajorUnits.js";
-import { getStateOptions as b, isStateValid as x } from "./lib/usStates.js";
-import { createWidgetTokenManager as S } from "./lib/widgetTokenManager.js";
-import { TESOURO_NEW_EMBEDDED_BANK_ACCOUNT_CREATED_SUCCESS_EVENT as C, TESOURO_NEW_EXTERNAL_BANK_ACCOUNT_LINKED_SUCCESS_EVENT as w, emitWidgetDomEvent as T } from "./lib/widgetDomEvents.js";
-import { extractApiErrorMessage as E } from "./lib/apiErrors.js";
-import { parseApiValidationErrors as D } from "./lib/apiValidationErrors.js";
+import { DATE_DISPLAY_LOCALE as i, DATE_DISPLAY_OPTIONS as a } from "./lib/dateDisplay.js";
+import { formatCalendarDate as o } from "./lib/formatCalendarDate.js";
+import { formatTimestampDate as s } from "./lib/formatTimestampDate.js";
+import { formatRejectionDate as c } from "./lib/formatRejectionDate.js";
+import { currencySymbolForCode as l, formatMoneyExact as u } from "./lib/formatMoneyExact.js";
+import { formatPhoneDisplay as d } from "./lib/formatPhoneDisplay.js";
+import { getInitials as f } from "./lib/getInitials.js";
+import { isValidAchAccountNumber as p } from "./lib/isValidAchAccountNumber.js";
+import { mergeLabelTree as m } from "./lib/mergeLabelTree.js";
+import { normalizeAmountOutputCurrencyCode as h } from "./lib/normalizeAmountOutputCurrencyCode.js";
+import { parseAmountOutputMajorUnits as g } from "./lib/parseAmountOutputMajorUnits.js";
+import { parseCalendarDate as _, parseDateOrTimestamp as v } from "./lib/parseCalendarDate.js";
+import { getRelativeCalendarDay as y } from "./lib/relativeCalendarDay.js";
+import { parseDecimalAmountToMinorUnits as b } from "./lib/parseDecimalAmountToMinorUnits.js";
+import { sumAmountOutputsMajorUnits as x } from "./lib/sumAmountOutputsMajorUnits.js";
+import { getStateOptions as S, isStateValid as C } from "./lib/usStates.js";
+import { createWidgetTokenManager as w } from "./lib/widgetTokenManager.js";
+import { TESOURO_NEW_EMBEDDED_BANK_ACCOUNT_CREATED_SUCCESS_EVENT as T, TESOURO_NEW_EXTERNAL_BANK_ACCOUNT_LINKED_SUCCESS_EVENT as E, emitWidgetDomEvent as D } from "./lib/widgetDomEvents.js";
+import { extractApiErrorMessage as O } from "./lib/apiErrors.js";
+import { parseApiValidationErrors as k } from "./lib/apiValidationErrors.js";
 import "./lib/auditHistory/auditHistoryActor.js";
-import { buildReceivableAuditHistory as O } from "./lib/auditHistory/buildReceivableAuditHistory.js";
-import { buildPayableAuditHistory as k, hasUnattributedAuditRows as A } from "./lib/auditHistory/buildPayableAuditHistory.js";
+import { buildReceivableAuditHistory as A } from "./lib/auditHistory/buildReceivableAuditHistory.js";
+import { buildPayableAuditHistory as j, hasUnattributedAuditRows as M } from "./lib/auditHistory/buildPayableAuditHistory.js";
 import "./lib/theme/color.js";
-import { THEME_TOKEN_NAMES as j } from "./lib/theme/themeTokens.js";
+import { THEME_TOKEN_NAMES as N } from "./lib/theme/themeTokens.js";
 import "./lib/theme/toneColors.js";
-import { createTheme as M, isThemeDevelopmentBuild as N, readThemeTokens as P, reportThemeIssues as F, themeIssues as I, themeToCss as L } from "./lib/theme/createTheme.js";
+import { createTheme as P, isThemeDevelopmentBuild as F, readThemeTokens as I, reportThemeIssues as L, themeIssues as R, themeToCss as z } from "./lib/theme/createTheme.js";
 import "./lib/theme/index.js";
-import { configureCsp as R, installStyleNonce as z } from "./lib/csp.js";
-import { resolvePdfWorkerSrc as B } from "./lib/pdfWorkerSrc.js";
-export { C as TESOURO_NEW_EMBEDDED_BANK_ACCOUNT_CREATED_SUCCESS_EVENT, w as TESOURO_NEW_EXTERNAL_BANK_ACCOUNT_LINKED_SUCCESS_EVENT, j as THEME_TOKEN_NAMES, n as amountOutputToMajorUnits, k as buildPayableAuditHistory, O as buildReceivableAuditHistory, e as coerceAmountValueToMinorUnits, R as configureCsp, t as createCurrencyFormatter, M as createTheme, S as createWidgetTokenManager, s as currencySymbolForCode, T as emitWidgetDomEvent, E as extractApiErrorMessage, i as formatCalendarDate, c as formatMoneyExact, l as formatPhoneDisplay, o as formatRejectionDate, a as formatTimestampDate, u as getInitials, _ as getRelativeCalendarDay, b as getStateOptions, A as hasUnattributedAuditRows, z as installStyleNonce, x as isStateValid, N as isThemeDevelopmentBuild, d as isValidAchAccountNumber, f as mergeLabelTree, r as minorExponentForCurrency, p as normalizeAmountOutputCurrencyCode, m as parseAmountOutputMajorUnits, D as parseApiValidationErrors, h as parseCalendarDate, g as parseDateOrTimestamp, v as parseDecimalAmountToMinorUnits, P as readThemeTokens, F as reportThemeIssues, B as resolvePdfWorkerSrc, y as sumAmountOutputsMajorUnits, I as themeIssues, L as themeToCss };
+import { configureCsp as B, installStyleNonce as V } from "./lib/csp.js";
+import { resolvePdfWorkerSrc as H } from "./lib/pdfWorkerSrc.js";
+export { i as DATE_DISPLAY_LOCALE, a as DATE_DISPLAY_OPTIONS, T as TESOURO_NEW_EMBEDDED_BANK_ACCOUNT_CREATED_SUCCESS_EVENT, E as TESOURO_NEW_EXTERNAL_BANK_ACCOUNT_LINKED_SUCCESS_EVENT, N as THEME_TOKEN_NAMES, n as amountOutputToMajorUnits, j as buildPayableAuditHistory, A as buildReceivableAuditHistory, e as coerceAmountValueToMinorUnits, B as configureCsp, t as createCurrencyFormatter, P as createTheme, w as createWidgetTokenManager, l as currencySymbolForCode, D as emitWidgetDomEvent, O as extractApiErrorMessage, o as formatCalendarDate, u as formatMoneyExact, d as formatPhoneDisplay, c as formatRejectionDate, s as formatTimestampDate, f as getInitials, y as getRelativeCalendarDay, S as getStateOptions, M as hasUnattributedAuditRows, V as installStyleNonce, C as isStateValid, F as isThemeDevelopmentBuild, p as isValidAchAccountNumber, m as mergeLabelTree, r as minorExponentForCurrency, h as normalizeAmountOutputCurrencyCode, g as parseAmountOutputMajorUnits, k as parseApiValidationErrors, _ as parseCalendarDate, v as parseDateOrTimestamp, b as parseDecimalAmountToMinorUnits, I as readThemeTokens, L as reportThemeIssues, H as resolvePdfWorkerSrc, x as sumAmountOutputsMajorUnits, R as themeIssues, z as themeToCss };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesouro/embedded-components-react",
-  "version": "0.11.21",
+  "version": "0.11.24",
   "license": "Apache-2.0",
   "type": "module",
   "sideEffects": [