@peax/consent-banner-react 0.3.0 → 0.5.0

package/README.md

@@ -14,7 +14,7 @@ A React cookie banner with compact and stacked layouts, built-in preferences, an
 npm install @peax/consent-banner-react @peax/consent-banner-theme
 ```
 
-Import the stylesheet once in your application entry. Locales are already a dependency; install `@peax/consent-banner-locales` directly if your application imports its dictionaries or types.
+Import the stylesheet once in your application entry. English defaults work without locales. Install the optional `@peax/consent-banner-locales` package and pass its dictionaries through `locales` when needed; message types live in `@peax/consent-banner-shared`.
 
 The example below uses the three default categories. Supply previously saved choices as `initialPreferences` (`null` for a new visitor), and connect `onCommit` to your consent storage and service controls.
 
@@ -102,7 +102,8 @@ All `BannerProps` fields are optional, but `floatingButtonPosition` requires `sh
 
 | Prop | Default | Purpose |
 | --- | --- | --- |
-| `locale` | `'en'` | Select English/German; regional tags fall back to their base language |
+| `locale` | `'en'` | Select a configured dictionary; exact tags precede base-language matches |
+| `locales` | Omitted | Readonly map of `{ banner, preferences }` dictionaries; omitted means shared English fallback |
 | `cookiePolicyUrl` | Omitted | Destination for policy links; without it, labels are plain text |
 | `bannerContent` | Locale dictionary | Partial `BannerMessages` overrides for banner and preferences copy |
 | `preferencesSections` | `['essential', 'analytics', 'marketing']` | Ordered visible section IDs; `[]` displays no sections |
@@ -197,7 +198,7 @@ Keyboard order follows visual order where `reading-flow` is supported; otherwise
 | --- | --- | --- |
 | Colors, spacing, radii, theme mode | Public `--pxc-*` variables on the root | [Theme package](https://github.com/peaxco/consent/blob/main/packages/consent-banner-theme/README.md) |
 | Body/heading fonts and text size | Typography tokens; load fonts in your application | [Typography guide](https://github.com/peaxco/consent/blob/main/docs/typography.md) |
-| Language and button text | `locale`, `bannerContent` | [Locales package](https://github.com/peaxco/consent/blob/main/packages/consent-banner-locales/README.md) |
+| Language and button text | `locale`, `locales`, `bannerContent` | [Locales package](https://github.com/peaxco/consent/blob/main/packages/consent-banner-locales/README.md) |
 | Section titles/descriptions | `preferencesContent` | [Preferences guide](https://github.com/peaxco/consent/blob/main/docs/preferences.md) |
 | A translated policy link | `<cookiePolicy>label</cookiePolicy>` plus `cookiePolicyUrl` | [Localized links](https://github.com/peaxco/consent/blob/main/docs/localization.md#localized-links) |
 
@@ -215,3 +216,14 @@ Run `yarn workspace @peax/consent-banner-react dev` from the repository. The dem
 See [Banner verification](https://github.com/peaxco/consent/blob/main/docs/engineering/banner-verification.md) for browser setup and snapshot checks, and [Contributing](https://github.com/peaxco/consent/blob/main/CONTRIBUTING.md) for repository commands.
 
 The adapter shares pure presentation contracts and UI state helpers with `@peax/consent-banner-shared`. Existing React exports and callback behavior remain unchanged. See [Vue integration](../../docs/vue.md) for the equivalent Vue package.
+
+## Optional translations
+
+```tsx
+import { de } from '@peax/consent-banner-locales/de'
+import { fr } from '@peax/consent-banner-locales/fr'
+
+<Banner isOpen locale="de-AT" locales={{ de, fr }} />
+```
+
+For all 25 languages, use `import locales from '@peax/consent-banner-locales'` and pass `locales={locales}`. Applications can also provide custom/partial dictionaries or use only content props with no locale package. Missing fields fall back to shared English; content props have final precedence. See [localization and migration](https://github.com/peaxco/consent/blob/main/docs/localization.md).

package/dist/index.js

@@ -1,18 +1,17 @@
 import e from "clsx";
-import { getMessages as t, getPreferencesMessages as n, parseMessage as r, resolveLocale as i } from "@peax/consent-banner-locales";
-import { defaultPreferencesSections as a, entranceDuration as o, entranceEase as s, mergeBannerContent as c, normalizeAppearanceDelay as l, reconcileDraft as u, resolveFloatingPosition as d, resolveSections as f, resolveSlideFrom as p, safeHref as m, safeHref as h, transitionPreferencesView as g } from "@peax/consent-banner-shared";
-import { forwardRef as _, memo as v, useCallback as y, useEffect as b, useId as x, useMemo as S, useRef as C, useState as w } from "react";
-import { AnimatePresence as T, LazyMotion as E, domAnimation as D, useIsPresent as O, usePresenceData as k, useReducedMotion as A } from "framer-motion";
-import * as j from "framer-motion/m";
-import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
-import { Button as F } from "@base-ui/react/button";
-import { ScrollArea as I } from "@base-ui/react/scroll-area";
-import { Switch as L } from "@base-ui/react/switch";
+import { defaultPreferencesSections as t, entranceDuration as n, entranceEase as r, mergeBannerContent as i, normalizeAppearanceDelay as a, parseMessage as o, reconcileDraft as s, resolveFloatingPosition as c, resolveLocaleContent as l, resolveSections as u, resolveSlideFrom as d, safeHref as f, safeHref as p, transitionPreferencesView as m } from "@peax/consent-banner-shared";
+import { forwardRef as h, memo as g, useCallback as _, useEffect as v, useId as y, useMemo as b, useRef as x, useState as S } from "react";
+import { AnimatePresence as C, LazyMotion as w, domAnimation as T, useIsPresent as E, usePresenceData as D, useReducedMotion as O } from "framer-motion";
+import * as k from "framer-motion/m";
+import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
+import { Button as N } from "@base-ui/react/button";
+import { ScrollArea as P } from "@base-ui/react/scroll-area";
+import { Switch as F } from "@base-ui/react/switch";
 //#region src/hooks/usePreferencesView.ts
-function R({ isOpen: e, showFloatingButton: t, showCustomizePreferences: n, floatingPosition: r, onMsg: i }) {
-	let [a, o] = w(null), [s, c] = w(!1), l = C(null);
-	return b(() => {
-		o((t) => g(t, {
+function I({ isOpen: e, showFloatingButton: t, showCustomizePreferences: n, floatingPosition: r, onMsg: i }) {
+	let [a, o] = S(null), [s, c] = S(!1), l = x(null);
+	return v(() => {
+		o((t) => m(t, {
 			type: "sync",
 			isOpen: e
 		})), (e || !t) && (l.current = null);
@@ -20,14 +19,14 @@ function R({ isOpen: e, showFloatingButton: t, showCustomizePreferences: n, floa
 		view: a,
 		hasPanel: s,
 		setHasPanel: c,
-		triggerRef: y((e) => {
+		triggerRef: _((e) => {
 			if (!e) return;
 			let t = l.current;
 			l.current = null, t && (document.activeElement === t || document.activeElement === document.body) && e.focus();
 		}, []),
-		onExitFocus: y(() => (t && (l.current = document.activeElement), t), [t]),
+		onExitFocus: _(() => (t && (l.current = document.activeElement), t), [t]),
 		openPreferences: (e) => {
-			o((t) => g(t, {
+			o((t) => m(t, {
 				type: "open",
 				source: e,
 				position: r
@@ -37,7 +36,7 @@ function R({ isOpen: e, showFloatingButton: t, showCustomizePreferences: n, floa
 			});
 		},
 		closePreferences: () => {
-			a && (a.source === "banner" && (l.current = n ? document.activeElement : null, o((e) => g(e, { type: "close" }))), i?.({
+			a && (a.source === "banner" && (l.current = n ? document.activeElement : null, o((e) => m(e, { type: "close" }))), i?.({
 				type: "on_close_preferences",
 				source: a.source
 			}));
@@ -46,42 +45,42 @@ function R({ isOpen: e, showFloatingButton: t, showCustomizePreferences: n, floa
 }
 //#endregion
 //#region src/components/Container/ContainerWrapper.tsx
-var z = ({ position: t, slideFrom: n, onPresenceChange: r, children: i }) => {
-	let a = O(), c = k(), l = A(), u = C(null), d = C(null);
-	b(() => (r?.(!0), () => r?.(!1)), [r]), b(() => {
+var L = ({ position: t, slideFrom: i, onPresenceChange: a, children: o }) => {
+	let s = E(), c = D(), l = O(), u = x(null), f = x(null);
+	v(() => (a?.(!0), () => a?.(!1)), [a]), v(() => {
 		let e = u.current;
 		if (e) {
-			if (a) {
+			if (s) {
 				e.removeAttribute("inert");
 				let t = document.activeElement;
-				t instanceof HTMLElement && !e.contains(t) && (d.current = t);
+				t instanceof HTMLElement && !e.contains(t) && (f.current = t);
 				return;
 			}
 			if (e.contains(document.activeElement) && !c?.()) {
-				let e = d.current;
+				let e = f.current;
 				e?.isConnected && e.focus({ preventScroll: !0 });
 			}
 			e.setAttribute("inert", "");
 		}
-	}, [a, c]);
-	let f = p(t, n), m = { transform: l ? "none" : f === "bottom" ? "translateY(100%)" : `translateX(${f === "left" ? "-100%" : "100%"})` };
-	return /* @__PURE__ */ N(j.div, {
+	}, [s, c]);
+	let p = d(t, i), m = { transform: p === "bottom" ? "translateY(100%)" : `translateX(${p === "left" ? "-100%" : "100%"})` };
+	return /* @__PURE__ */ j(k.div, {
 		ref: u,
 		exit: { transform: "none" },
 		initial: m,
 		animate: { transform: "none" },
-		"aria-hidden": !a || void 0,
-		"data-state": a ? "open" : "closing",
+		"aria-hidden": !s || void 0,
+		"data-state": s ? "open" : "closing",
 		className: e("pxc-wrapper", `pxc-wrapper--${t}`),
 		transition: {
-			duration: a && !l ? o : 0,
-			ease: [...s]
+			duration: s && !l ? n : 0,
+			ease: [...r]
 		},
-		children: i
+		children: o
 	});
-}, B = _(function({ isOpen: t = !0, appearanceDelay: n = 0, position: r = "right", slideFrom: i = "bottom", onPresenceChange: a, onExitFocus: o, className: s, children: c, actions: u, ...d }, f) {
-	let p = l(n), [m, h] = w(p === 0);
-	return b(() => {
+}, R = h(function({ isOpen: t = !0, appearanceDelay: n = 0, position: r = "right", slideFrom: i = "bottom", onPresenceChange: o, onExitFocus: s, className: c, children: l, actions: u, ...d }, f) {
+	let p = a(n), [m, h] = S(p === 0);
+	return v(() => {
 		if (m || !t) return;
 		let e = window.setTimeout(() => h(!0), p);
 		return () => window.clearTimeout(e);
@@ -89,24 +88,24 @@ var z = ({ position: t, slideFrom: n, onPresenceChange: r, children: i }) => {
 		p,
 		t,
 		m
-	]), /* @__PURE__ */ N(E, {
-		features: D,
+	]), /* @__PURE__ */ j(w, {
+		features: T,
 		strict: !0,
-		children: /* @__PURE__ */ N(T, {
-			custom: o,
-			children: t && m && /* @__PURE__ */ N(z, {
+		children: /* @__PURE__ */ j(C, {
+			custom: s,
+			children: t && m && /* @__PURE__ */ j(L, {
 				position: r,
 				slideFrom: i,
-				onPresenceChange: a,
-				children: /* @__PURE__ */ N("div", {
+				onPresenceChange: o,
+				children: /* @__PURE__ */ j("div", {
 					ref: f,
-					className: e("pxc-container", u != null && "pxc-container--with-actions", s),
+					className: e("pxc-container", u != null && "pxc-container--with-actions", c),
 					...d,
-					children: u == null ? c : /* @__PURE__ */ P(M, { children: [/* @__PURE__ */ N("div", {
+					children: u == null ? l : /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j("div", {
 						className: "pxc-container__content",
 						"data-container-content": !0,
-						children: c
-					}), /* @__PURE__ */ N("div", {
+						children: l
+					}), /* @__PURE__ */ j("div", {
 						className: "pxc-container__actions",
 						"data-container-actions": !0,
 						children: u
@@ -115,7 +114,7 @@ var z = ({ position: t, slideFrom: n, onPresenceChange: r, children: i }) => {
 			}, "container")
 		})
 	});
-}), V = () => /* @__PURE__ */ P("svg", {
+}), z = () => /* @__PURE__ */ M("svg", {
 	width: "24",
 	height: "24",
 	viewBox: "0 0 24 24",
@@ -128,14 +127,14 @@ var z = ({ position: t, slideFrom: n, onPresenceChange: r, children: i }) => {
 	"aria-hidden": "true",
 	focusable: "false",
 	children: [
-		/* @__PURE__ */ N("path", { d: "M11 17H11.01" }),
-		/* @__PURE__ */ N("path", { d: "M12.025 2.61499C12.054 2.29199 11.82 1.98399 11.496 1.99999C9.02138 2.12561 6.68155 3.16546 4.92997 4.91799C3.0533 6.79479 1.99905 9.34023 1.99915 11.9943C1.99924 14.6484 3.05367 17.1938 4.93047 19.0705C6.80728 20.9472 9.35272 22.0014 12.0068 22.0013C14.6609 22.0012 17.2063 20.9468 19.083 19.07C20.8344 17.3179 21.8732 14.9782 21.998 12.504C22.014 12.181 21.707 11.947 21.384 11.977C20.8082 12.0311 20.2276 11.9597 19.6821 11.7677C19.1366 11.5757 18.6392 11.2678 18.2242 10.865C17.8092 10.4623 17.4864 9.97436 17.2782 9.43485C17.07 8.89535 16.9812 8.31711 17.018 7.73999C17.0244 7.63881 17.0093 7.53742 16.9734 7.44257C16.9376 7.34773 16.882 7.26161 16.8103 7.18997C16.7385 7.11833 16.6523 7.06281 16.5574 7.02712C16.4626 6.99143 16.3611 6.97638 16.26 6.98299C15.6828 7.01952 15.1046 6.93048 14.5652 6.72199C14.0258 6.51351 13.538 6.19054 13.1355 5.77535C12.7329 5.36015 12.4252 4.86261 12.2335 4.31701C12.0417 3.77141 11.9706 3.19073 12.025 2.61499Z" }),
-		/* @__PURE__ */ N("path", { d: "M12 12H12.01" }),
-		/* @__PURE__ */ N("path", { d: "M16 16H16.01" }),
-		/* @__PURE__ */ N("path", { d: "M7 14H7.01" }),
-		/* @__PURE__ */ N("path", { d: "M9 8H9.01" })
+		/* @__PURE__ */ j("path", { d: "M11 17H11.01" }),
+		/* @__PURE__ */ j("path", { d: "M12.025 2.61499C12.054 2.29199 11.82 1.98399 11.496 1.99999C9.02138 2.12561 6.68155 3.16546 4.92997 4.91799C3.0533 6.79479 1.99905 9.34023 1.99915 11.9943C1.99924 14.6484 3.05367 17.1938 4.93047 19.0705C6.80728 20.9472 9.35272 22.0014 12.0068 22.0013C14.6609 22.0012 17.2063 20.9468 19.083 19.07C20.8344 17.3179 21.8732 14.9782 21.998 12.504C22.014 12.181 21.707 11.947 21.384 11.977C20.8082 12.0311 20.2276 11.9597 19.6821 11.7677C19.1366 11.5757 18.6392 11.2678 18.2242 10.865C17.8092 10.4623 17.4864 9.97436 17.2782 9.43485C17.07 8.89535 16.9812 8.31711 17.018 7.73999C17.0244 7.63881 17.0093 7.53742 16.9734 7.44257C16.9376 7.34773 16.882 7.26161 16.8103 7.18997C16.7385 7.11833 16.6523 7.06281 16.5574 7.02712C16.4626 6.99143 16.3611 6.97638 16.26 6.98299C15.6828 7.01952 15.1046 6.93048 14.5652 6.72199C14.0258 6.51351 13.538 6.19054 13.1355 5.77535C12.7329 5.36015 12.4252 4.86261 12.2335 4.31701C12.0417 3.77141 11.9706 3.19073 12.025 2.61499Z" }),
+		/* @__PURE__ */ j("path", { d: "M12 12H12.01" }),
+		/* @__PURE__ */ j("path", { d: "M16 16H16.01" }),
+		/* @__PURE__ */ j("path", { d: "M7 14H7.01" }),
+		/* @__PURE__ */ j("path", { d: "M9 8H9.01" })
 	]
-}), H = () => /* @__PURE__ */ P("svg", {
+}), B = () => /* @__PURE__ */ M("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "24",
 	height: "24",
@@ -148,40 +147,40 @@ var z = ({ position: t, slideFrom: n, onPresenceChange: r, children: i }) => {
 	"aria-hidden": "true",
 	focusable: "false",
 	children: [
-		/* @__PURE__ */ N("path", { d: "M14 17H5" }),
-		/* @__PURE__ */ N("path", { d: "M19 7h-9" }),
-		/* @__PURE__ */ N("circle", {
+		/* @__PURE__ */ j("path", { d: "M14 17H5" }),
+		/* @__PURE__ */ j("path", { d: "M19 7h-9" }),
+		/* @__PURE__ */ j("circle", {
 			cx: "17",
 			cy: "17",
 			r: "3"
 		}),
-		/* @__PURE__ */ N("circle", {
+		/* @__PURE__ */ j("circle", {
 			cx: "7",
 			cy: "7",
 			r: "3"
 		})
 	]
-}), U = _(function({ variant: t, className: n, children: r, ...i }, a) {
-	return /* @__PURE__ */ N(F, {
+}), V = h(function({ variant: t, className: n, children: r, ...i }, a) {
+	return /* @__PURE__ */ j(N, {
 		ref: a,
 		className: (r) => e("pxc-button", `pxc-button--${t}`, typeof n == "function" ? n(r) : n),
 		...i,
 		focusableWhenDisabled: !1,
 		children: r
 	});
-}), W = _(function({ label: e, position: t, onMsg: n }, r) {
-	return /* @__PURE__ */ N(U, {
+}), H = h(function({ label: e, position: t, onMsg: n }, r) {
+	return /* @__PURE__ */ j(V, {
 		ref: r,
 		variant: "iconed",
 		className: `pxc-floating-button pxc-floating-button--${t}`,
 		"aria-label": e,
 		onClick: () => n({ type: "on_open_preferences" }),
-		children: /* @__PURE__ */ N(V, {})
+		children: /* @__PURE__ */ j(z, {})
 	});
-}), G = () => /* @__PURE__ */ N("div", {
+}), U = () => /* @__PURE__ */ j("div", {
 	className: "pxc-lead-icon",
-	children: /* @__PURE__ */ N(V, {})
-}), K = () => /* @__PURE__ */ N("svg", {
+	children: /* @__PURE__ */ j(z, {})
+}), W = () => /* @__PURE__ */ j("svg", {
 	viewBox: "0 0 24 24",
 	fill: "none",
 	stroke: "currentColor",
@@ -189,36 +188,36 @@ var z = ({ position: t, slideFrom: n, onPresenceChange: r, children: i }) => {
 	strokeLinecap: "round",
 	"aria-hidden": "true",
 	focusable: "false",
-	children: /* @__PURE__ */ N("path", { d: "m6 6 12 12M6 18 18 6" })
+	children: /* @__PURE__ */ j("path", { d: "m6 6 12 12M6 18 18 6" })
 });
 //#endregion
 //#region src/utils/notReachable.ts
-function q(e, t = { throwError: !0 }) {
+function G(e, t = { throwError: !0 }) {
 	let n = `Should not be reached ${e}`;
 	if (t.throwError) throw Error(n);
 }
 //#endregion
 //#region src/components/Text/RichText.tsx
-var J = ({ message: e, links: t }) => S(() => r(e, Object.keys(t)), [e, t]).map((e) => {
+var K = ({ message: e, links: t }) => b(() => o(e, Object.keys(t)), [e, t]).map((e) => {
 	if (e.type === "text") return e.value;
-	let n = m(t[e.name]);
-	return n && e.value.trim() ? /* @__PURE__ */ N("a", {
+	let n = f(t[e.name]);
+	return n && e.value.trim() ? /* @__PURE__ */ j("a", {
 		className: "pxc-link",
 		href: n,
 		children: e.value
 	}, e.offset) : e.value;
-}), Y = ({ section: e, checked: t, links: n, onMsg: r }) => {
-	let i = x();
-	return /* @__PURE__ */ P("section", {
+}), q = ({ section: e, checked: t, links: n, onMsg: r }) => {
+	let i = y();
+	return /* @__PURE__ */ M("section", {
 		className: "pxc-preferences__section",
 		"aria-labelledby": `${i}-title`,
-		children: [/* @__PURE__ */ P("div", {
+		children: [/* @__PURE__ */ M("div", {
 			className: "pxc-preferences__section-heading",
-			children: [/* @__PURE__ */ N("h4", {
+			children: [/* @__PURE__ */ j("h4", {
 				id: `${i}-title`,
 				className: "pxc-text--h4",
 				children: e.title
-			}), /* @__PURE__ */ N(L.Root, {
+			}), /* @__PURE__ */ j(F.Root, {
 				className: "pxc-switch",
 				checked: t,
 				disabled: e.disabled ?? !1,
@@ -229,208 +228,213 @@ var J = ({ message: e, links: t }) => S(() => r(e, Object.keys(t)), [e, t]).map(
 					sectionId: e.id,
 					checked: t
 				}),
-				children: /* @__PURE__ */ N(L.Thumb, { className: "pxc-switch__thumb" })
+				children: /* @__PURE__ */ j(F.Thumb, { className: "pxc-switch__thumb" })
 			})]
-		}), e.text && /* @__PURE__ */ N("p", {
+		}), e.text && /* @__PURE__ */ j("p", {
 			id: `${i}-text`,
 			className: "pxc-text--paragraph pxc-preferences__description",
-			children: /* @__PURE__ */ N(J, {
+			children: /* @__PURE__ */ j(K, {
 				message: e.text,
 				links: n
 			})
 		})]
 	});
-}, X = ({ sections: e, content: t, links: n, onMsg: r }) => {
-	let i = x(), a = C(null), [o, s] = w(() => u(e)), c = u(e, o);
-	(o.size !== c.size || [...c].some(([e, t]) => o.get(e) !== t)) && s(c), b(() => {
+}, J = ({ sections: e, content: t, links: n, onMsg: r }) => {
+	let i = y(), a = x(null), [o, c] = S(() => s(e)), l = s(e, o);
+	(o.size !== l.size || [...l].some(([e, t]) => o.get(e) !== t)) && c(l), v(() => {
 		a.current?.focus({ preventScroll: !0 });
 	}, []);
-	let l = h(n.cookiePolicy);
-	return /* @__PURE__ */ P("section", {
+	let u = p(n.cookiePolicy);
+	return /* @__PURE__ */ M("section", {
 		className: "pxc-preferences",
 		"aria-labelledby": i,
 		onKeyDown: (e) => {
 			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), r({ type: "on_close_preferences" }));
 		},
 		children: [
-			/* @__PURE__ */ P("header", {
+			/* @__PURE__ */ M("header", {
 				className: "pxc-preferences__header",
-				children: [/* @__PURE__ */ N("h3", {
+				children: [/* @__PURE__ */ j("h3", {
 					id: i,
 					ref: a,
 					tabIndex: -1,
 					className: "pxc-text--h3",
 					children: t.preferencesTitle
-				}), /* @__PURE__ */ N(U, {
+				}), /* @__PURE__ */ j(V, {
 					variant: "iconed",
 					"aria-label": t.closePreferencesLabel,
 					onClick: () => r({ type: "on_close_preferences" }),
-					children: /* @__PURE__ */ N(K, {})
+					children: /* @__PURE__ */ j(W, {})
 				})]
 			}),
-			/* @__PURE__ */ P(I.Root, {
+			/* @__PURE__ */ M(P.Root, {
 				className: "pxc-preferences__scroll-area",
-				children: [/* @__PURE__ */ N(I.Viewport, {
+				children: [/* @__PURE__ */ j(P.Viewport, {
 					className: "pxc-preferences__body",
 					role: "group",
 					"aria-labelledby": i,
-					children: /* @__PURE__ */ P(I.Content, {
+					children: /* @__PURE__ */ M(P.Content, {
 						className: "pxc-preferences__content",
-						children: [t.preferencesText && /* @__PURE__ */ N("p", {
+						children: [t.preferencesText && /* @__PURE__ */ j("p", {
 							className: "pxc-text--paragraph pxc-preferences__introduction",
-							children: /* @__PURE__ */ N(J, {
+							children: /* @__PURE__ */ j(K, {
 								message: t.preferencesText,
 								links: n
 							})
-						}), e.map((e) => /* @__PURE__ */ N(Y, {
+						}), e.map((e) => /* @__PURE__ */ j(q, {
 							section: e,
-							checked: c.get(e.id) ?? e.checked,
+							checked: l.get(e.id) ?? e.checked,
 							links: n,
 							onMsg: (e) => {
 								switch (e.type) {
 									case "on_change_preference":
-										s((t) => new Map(t).set(e.sectionId, e.checked)), r(e);
+										c((t) => new Map(t).set(e.sectionId, e.checked)), r(e);
 										break;
-									default: q(e.type);
+									default: G(e.type);
 								}
 							}
 						}, e.id))]
 					})
-				}), /* @__PURE__ */ N(I.Scrollbar, {
+				}), /* @__PURE__ */ j(P.Scrollbar, {
 					className: "pxc-preferences__scrollbar",
-					children: /* @__PURE__ */ N(I.Thumb, {
+					children: /* @__PURE__ */ j(P.Thumb, {
 						className: "pxc-preferences__scroll-thumb",
-						children: /* @__PURE__ */ N("span", { className: "pxc-preferences__scroll-indicator" })
+						children: /* @__PURE__ */ j("span", { className: "pxc-preferences__scroll-indicator" })
 					})
 				})]
 			}),
-			/* @__PURE__ */ P("footer", {
+			/* @__PURE__ */ M("footer", {
 				className: "pxc-preferences__footer",
-				children: [/* @__PURE__ */ N(U, {
+				children: [/* @__PURE__ */ j(V, {
 					variant: "primary",
 					onClick: () => r({
 						type: "on_apply_preferences",
-						preferences: Object.fromEntries(c)
+						preferences: Object.fromEntries(l)
 					}),
 					children: t.applyPreferencesLabel
-				}), l ? /* @__PURE__ */ N("a", {
+				}), u ? /* @__PURE__ */ j("a", {
 					className: "pxc-link pxc-preferences__policy",
-					href: l,
+					href: u,
 					children: t.cookiePolicyLabel
-				}) : /* @__PURE__ */ N("span", {
+				}) : /* @__PURE__ */ j("span", {
 					className: "pxc-preferences__policy",
 					children: t.cookiePolicyLabel
 				})]
 			})
 		]
 	});
-}, Z = ({ variant: e, tag: t, children: n }) => {
+}, Y = ({ variant: e, tag: t, children: n }) => {
 	switch (e) {
-		case "label": return /* @__PURE__ */ N(t, {
+		case "label": return /* @__PURE__ */ j(t, {
 			className: "pxc-text--label",
 			children: n
 		});
-		case "heading": return /* @__PURE__ */ N(t, {
+		case "heading": return /* @__PURE__ */ j(t, {
 			className: `pxc-text--${t}`,
 			children: n
 		});
-		case "paragraph": return /* @__PURE__ */ N("p", {
+		case "paragraph": return /* @__PURE__ */ j("p", {
 			className: "pxc-text--paragraph",
 			children: n
 		});
-		default: return q(e);
+		default: return G(e);
 	}
-}, Q = ({ variant: e, content: t, equalWeight: n, showCustomizePreferences: r, preferencesRef: i, onMsg: a }) => /* @__PURE__ */ P(M, { children: [/* @__PURE__ */ P("div", {
+}, X = ({ variant: e, content: t, equalWeight: n, showCustomizePreferences: r, preferencesRef: i, onMsg: a }) => /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ M("div", {
 	className: "pxc-banner__choices",
-	children: [/* @__PURE__ */ N(U, {
+	children: [/* @__PURE__ */ j(V, {
 		variant: n ? "secondary" : "primary",
 		onClick: () => a({ type: "on_accept_all" }),
 		children: t.acceptAllLabel
-	}), /* @__PURE__ */ N(U, {
+	}), /* @__PURE__ */ j(V, {
 		variant: "secondary",
 		onClick: () => a({ type: "on_reject_all" }),
 		children: t.rejectAllLabel
 	})]
-}), r && /* @__PURE__ */ N("div", {
+}), r && /* @__PURE__ */ j("div", {
 	className: "pxc-banner__preferences",
-	children: /* @__PURE__ */ N(U, {
+	children: /* @__PURE__ */ j(V, {
 		ref: i,
 		variant: "inline",
 		className: e === "compact" ? "pxc-button--iconed" : void 0,
 		"aria-label": t.customizePreferencesLabel,
 		onClick: () => a({ type: "on_open_preferences" }),
-		children: e === "compact" ? /* @__PURE__ */ P(M, { children: [/* @__PURE__ */ N(H, {}), /* @__PURE__ */ N("span", { children: t.customizePreferencesLabel })] }) : t.customizePreferencesLabel
+		children: e === "compact" ? /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j(B, {}), /* @__PURE__ */ j("span", { children: t.customizePreferencesLabel })] }) : t.customizePreferencesLabel
 	})
-})] }), $ = v(function({ bannerContent: r, cookiePolicyUrl: o, isOpen: s = !1, appearanceDelay: l = 0, preferencesSections: u = a, preferencesContent: p, hasAcceptRejectEqualWeight: m = !1, showCustomizePreferences: h = !0, showFloatingButton: g = !0, floatingButtonPosition: _, variant: v = "compact", theme: y = "auto", locale: b = "en", onMsg: x, className: C, style: w, ...T }) {
-	let E = i(b), D = t(E), O = c(D, r), k = S(() => ({ cookiePolicy: o }), [o]), A = S(() => f(u, p, n(E)), [
-		u,
-		p,
-		E
-	]), j = d(T.position, _), F = R({
-		isOpen: s,
-		showFloatingButton: g,
-		showCustomizePreferences: h,
-		floatingPosition: j,
+})] }), Z = g(function({ bannerContent: n, cookiePolicyUrl: r, isOpen: a = !1, appearanceDelay: o = 0, preferencesSections: s = t, preferencesContent: d, hasAcceptRejectEqualWeight: f = !1, showCustomizePreferences: p = !0, showFloatingButton: m = !0, floatingButtonPosition: h, variant: g = "compact", theme: _ = "auto", locale: v = "en", locales: y, onMsg: x, className: S, style: C, ...w }) {
+	let T = b(() => l(v, y, n !== void 0 || d !== void 0), [
+		v,
+		y,
+		n,
+		d
+	]), E = i(T.banner, n), D = b(() => ({ cookiePolicy: r }), [r]), O = b(() => u(s, d, T.preferences), [
+		s,
+		d,
+		T.preferences
+	]), k = c(w.position, h), N = I({
+		isOpen: a,
+		showFloatingButton: m,
+		showCustomizePreferences: p,
+		floatingPosition: k,
 		onMsg: x
-	}), I = F.view !== null, L = F.view?.source === "floating-button" ? {
-		...T,
-		position: F.view.position,
+	}), P = N.view !== null, F = N.view?.source === "floating-button" ? {
+		...w,
+		position: N.view.position,
 		slideFrom: "bottom"
-	} : T, z = (e) => {
-		if (e.type === "on_open_preferences") return F.openPreferences("banner");
-		if (e.type === "on_close_preferences") return F.closePreferences();
+	} : w, L = (e) => {
+		if (e.type === "on_open_preferences") return N.openPreferences("banner");
+		if (e.type === "on_close_preferences") return N.closePreferences();
 		x?.(e);
 	};
-	return /* @__PURE__ */ P("div", {
-		"data-theme": y,
-		"data-banner-variant": v,
-		className: e("pxc", C),
+	return /* @__PURE__ */ M("div", {
+		"data-theme": _,
+		"data-banner-variant": g,
+		className: e("pxc", S),
 		style: {
 			fontFamily: "var(--pxc-font-family)",
-			...w
+			...C
 		},
-		lang: E,
-		children: [/* @__PURE__ */ N(B, {
-			...L,
-			isOpen: s,
-			onExitFocus: F.onExitFocus,
-			onPresenceChange: F.setHasPanel,
-			appearanceDelay: l,
-			className: I ? "pxc-container--preferences" : void 0,
-			actions: I ? null : /* @__PURE__ */ N(Q, {
-				variant: v,
-				content: O,
-				equalWeight: m,
-				showCustomizePreferences: h,
-				preferencesRef: F.triggerRef,
-				onMsg: z
+		lang: T.locale,
+		children: [/* @__PURE__ */ j(R, {
+			...F,
+			isOpen: a,
+			onExitFocus: N.onExitFocus,
+			onPresenceChange: N.setHasPanel,
+			appearanceDelay: o,
+			className: P ? "pxc-container--preferences" : void 0,
+			actions: P ? null : /* @__PURE__ */ j(X, {
+				variant: g,
+				content: E,
+				equalWeight: f,
+				showCustomizePreferences: p,
+				preferencesRef: N.triggerRef,
+				onMsg: L
 			}),
-			children: I ? /* @__PURE__ */ N(X, {
-				links: k,
-				content: O,
-				sections: A,
-				onMsg: z
-			}) : /* @__PURE__ */ P(M, { children: [v === "stacked" ? /* @__PURE__ */ P("div", {
+			children: P ? /* @__PURE__ */ j(J, {
+				links: D,
+				content: E,
+				sections: O,
+				onMsg: L
+			}) : /* @__PURE__ */ M(A, { children: [g === "stacked" ? /* @__PURE__ */ M("div", {
 				className: "pxc-banner__heading",
-				children: [/* @__PURE__ */ N(G, {}), /* @__PURE__ */ N(Z, {
+				children: [/* @__PURE__ */ j(U, {}), /* @__PURE__ */ j(Y, {
 					variant: "heading",
 					tag: "h3",
-					children: O.title
+					children: E.title
 				})]
-			}) : /* @__PURE__ */ N(G, {}), /* @__PURE__ */ N(Z, {
+			}) : /* @__PURE__ */ j(U, {}), /* @__PURE__ */ j(Y, {
 				variant: "paragraph",
-				children: /* @__PURE__ */ N(J, {
-					message: O.collapsedText,
-					links: k
+				children: /* @__PURE__ */ j(K, {
+					message: E.collapsedText,
+					links: D
 				})
 			})] })
-		}), g && !s && !F.hasPanel && /* @__PURE__ */ N(W, {
-			ref: F.triggerRef,
-			position: j,
-			label: O.customizePreferencesLabel.trim() || D.customizePreferencesLabel,
-			onMsg: () => F.openPreferences("floating-button")
+		}), m && !a && !N.hasPanel && /* @__PURE__ */ j(H, {
+			ref: N.triggerRef,
+			position: k,
+			label: E.customizePreferencesLabel.trim() || T.banner.customizePreferencesLabel,
+			onMsg: () => N.openPreferences("floating-button")
 		})]
 	});
 });
 //#endregion
-export { $ as Banner };
+export { Z as Banner };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peax/consent-banner-react",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Accessible React bindings and components for Peax Consent.",
   "keywords": [
     "consent-management",
@@ -45,44 +45,51 @@
     "build": "vite build",
     "dev": "vite src/demo --config vite.config.ts",
     "test": "vitest run",
-    "test:browser": "vitest run --config vitest.browser.config.ts",
+    "test:browser": "node ../../scripts/test-browser.mjs react",
+    "test:browser:native": "vitest run --config vitest.browser.config.ts --testTimeout 30000",
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
+    "@peax/consent-banner-locales": "^0.5.0",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0"
   },
   "dependencies": {
-    "@base-ui/react": "^1.7.0",
-    "@peax/consent-banner-locales": "^0.3.0",
-    "@peax/consent-banner-shared": "^0.3.0",
-    "@peax/consent-banner-theme": "^0.3.0",
+    "@base-ui/react": "^1.8.0",
+    "@peax/consent-banner-shared": "^0.5.0",
+    "@peax/consent-banner-theme": "^0.5.0",
     "clsx": "^2.1.1",
-    "framer-motion": "^13.1.1"
+    "framer-motion": "^13.4.1"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.13.0",
     "@fontsource/figtree": "^5.3.0",
     "@fontsource/poppins": "^5.3.0",
-    "@testing-library/dom": "^10.4.1",
+    "@peax/consent-banner-locales": "^0.5.0",
+    "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.6",
-    "@types/jest-image-snapshot": "^6.4.1",
-    "@types/node": "^26.3.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
-    "@unocss/reset": "^66.8.1",
-    "@vitejs/plugin-react": "^6.1.0",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/jest-image-snapshot": "^6.4.2",
+    "@types/node": "^26.6.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@unocss/reset": "^66.10.5",
+    "@vitejs/plugin-react": "^6.1.1",
     "jest-image-snapshot": "^6.5.2",
-    "jsdom": "30.0.1",
-    "playwright": "^1.62.1",
-    "playwright-core": "1.62.1",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "jsdom": "30.1.1",
+    "playwright": "^1.63.0",
+    "playwright-core": "1.63.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "typescript": "5.9.3",
-    "vite": "^8.2.2",
-    "vite-plugin-dts": "^5.0.3",
-    "vitest": "^4.1.11"
+    "vite": "^8.3.0",
+    "vite-plugin-dts": "^5.1.1",
+    "vitest": "^5.0.1"
+  },
+  "peerDependenciesMeta": {
+    "@peax/consent-banner-locales": {
+      "optional": true
+    }
   }
 }