@persona/design-system 0.1.9 → 0.2.1

package/dist/lib/embeddedSurfaceProtocol.mjs

@@ -0,0 +1,74 @@
+//#region lib/embeddedSurfaceProtocol.ts
+const EMBEDDED_SURFACE_CHANNEL = "persona-embedded-surface";
+const EMBEDDED_SURFACE_PROTOCOL_VERSION = 1;
+const IDENTIFIER_PATTERN = /^[A-Za-z0-9_:-]+$/;
+const MAX_IDENTIFIER_LENGTH = 64;
+const MAX_SURFACE_IDS = 16;
+const coerceIdentifier = (value) => {
+	if (typeof value !== "string" || value.length < 1 || value.length > MAX_IDENTIFIER_LENGTH || !IDENTIFIER_PATTERN.test(value)) return;
+	return value;
+};
+const isRecord = (value) => typeof value === "object" && value != null && !Array.isArray(value);
+const isKnownKind = (value) => value === "hello" || value === "surfaceSnapshot" || value === "welcome";
+const getEnvelopeMetadata = (value) => {
+	if (value.channel !== "persona-embedded-surface" || value.version !== 1) return;
+	const connectionId = coerceIdentifier(value.connectionId);
+	return connectionId != null ? { connectionId } : void 0;
+};
+const coerceHostboundEnvelope = (value) => {
+	if (!isRecord(value) || !isKnownKind(value.kind)) return;
+	const metadata = getEnvelopeMetadata(value);
+	if (metadata == null) return;
+	const payload = isRecord(value.payload) ? value.payload : void 0;
+	if (payload == null) return;
+	switch (value.kind) {
+		case "hello": return {
+			channel: EMBEDDED_SURFACE_CHANNEL,
+			version: 1,
+			...metadata,
+			kind: value.kind,
+			payload: {}
+		};
+		case "surfaceSnapshot": {
+			const epoch = coerceIdentifier(payload.epoch);
+			if (epoch == null || !Array.isArray(payload.surfaces) || payload.surfaces.length > MAX_SURFACE_IDS) return;
+			const surfaces = [];
+			for (const surface of payload.surfaces) {
+				if (!isRecord(surface)) return;
+				const surfaceId = coerceIdentifier(surface.surfaceId);
+				if (surfaceId == null) return;
+				surfaces.push({ surfaceId });
+			}
+			return {
+				channel: EMBEDDED_SURFACE_CHANNEL,
+				version: 1,
+				...metadata,
+				kind: value.kind,
+				payload: {
+					epoch,
+					surfaces
+				}
+			};
+		}
+		case "welcome": return;
+	}
+};
+const coerceChildboundEnvelope = (value) => {
+	if (!isRecord(value) || value.kind !== "welcome") return;
+	const metadata = getEnvelopeMetadata(value);
+	const payload = isRecord(value.payload) ? value.payload : void 0;
+	if (metadata == null || payload == null) return;
+	const epoch = coerceIdentifier(payload.epoch);
+	if (epoch == null) return;
+	return {
+		channel: EMBEDDED_SURFACE_CHANNEL,
+		version: 1,
+		...metadata,
+		kind: value.kind,
+		payload: { epoch }
+	};
+};
+//#endregion
+export { EMBEDDED_SURFACE_CHANNEL, EMBEDDED_SURFACE_PROTOCOL_VERSION, coerceChildboundEnvelope, coerceHostboundEnvelope };
+
+//# sourceMappingURL=embeddedSurfaceProtocol.mjs.map

package/dist/lib/embeddedSurfaceProtocol.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"embeddedSurfaceProtocol.mjs","names":[],"sources":["../../lib/embeddedSurfaceProtocol.ts"],"sourcesContent":["export const EMBEDDED_SURFACE_CHANNEL = 'persona-embedded-surface';\nexport const EMBEDDED_SURFACE_PROTOCOL_VERSION = 1;\n\nexport type EmbeddedSurfaceKind = 'hello' | 'surfaceSnapshot' | 'welcome';\n\nexport type EmbeddedSurfacePayloads = {\n  hello: Record<string, never>;\n  surfaceSnapshot: {\n    epoch: string;\n    surfaces: Array<{ surfaceId: string }>;\n  };\n  welcome: {\n    epoch: string;\n  };\n};\n\nexport interface EmbeddedSurfaceEnvelope<K extends EmbeddedSurfaceKind = EmbeddedSurfaceKind> {\n  channel: typeof EMBEDDED_SURFACE_CHANNEL;\n  version: typeof EMBEDDED_SURFACE_PROTOCOL_VERSION;\n  connectionId: string;\n  kind: K;\n  payload: EmbeddedSurfacePayloads[K];\n}\n\nexport type EmbeddedSurfaceEnvelopeUnion = {\n  [K in EmbeddedSurfaceKind]: EmbeddedSurfaceEnvelope<K>;\n}[EmbeddedSurfaceKind];\n\nconst IDENTIFIER_PATTERN = /^[A-Za-z0-9_:-]+$/;\nconst MAX_IDENTIFIER_LENGTH = 64;\nconst MAX_SURFACE_IDS = 16;\n\nconst coerceIdentifier = (value: unknown): string | undefined => {\n  if (\n    typeof value !== 'string' ||\n    value.length < 1 ||\n    value.length > MAX_IDENTIFIER_LENGTH ||\n    !IDENTIFIER_PATTERN.test(value)\n  ) {\n    return undefined;\n  }\n  return value;\n};\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value != null && !Array.isArray(value);\n\nconst isKnownKind = (value: unknown): value is EmbeddedSurfaceKind =>\n  value === 'hello' || value === 'surfaceSnapshot' || value === 'welcome';\n\nconst getEnvelopeMetadata = (\n  value: Record<string, unknown>,\n): { connectionId: string } | undefined => {\n  if (\n    value.channel !== EMBEDDED_SURFACE_CHANNEL ||\n    value.version !== EMBEDDED_SURFACE_PROTOCOL_VERSION\n  ) {\n    return undefined;\n  }\n  const connectionId = coerceIdentifier(value.connectionId);\n  return connectionId != null ? { connectionId } : undefined;\n};\n\nexport const coerceHostboundEnvelope = (\n  value: unknown,\n): EmbeddedSurfaceEnvelopeUnion | undefined => {\n  if (!isRecord(value) || !isKnownKind(value.kind)) {\n    return undefined;\n  }\n  const metadata = getEnvelopeMetadata(value);\n  if (metadata == null) {\n    return undefined;\n  }\n  const payload = isRecord(value.payload) ? value.payload : undefined;\n  if (payload == null) {\n    return undefined;\n  }\n\n  switch (value.kind) {\n    case 'hello':\n      return {\n        channel: EMBEDDED_SURFACE_CHANNEL,\n        version: EMBEDDED_SURFACE_PROTOCOL_VERSION,\n        ...metadata,\n        kind: value.kind,\n        payload: {},\n      };\n    case 'surfaceSnapshot': {\n      const epoch = coerceIdentifier(payload.epoch);\n      if (\n        epoch == null ||\n        !Array.isArray(payload.surfaces) ||\n        payload.surfaces.length > MAX_SURFACE_IDS\n      ) {\n        return undefined;\n      }\n      const surfaces = [];\n      for (const surface of payload.surfaces) {\n        if (!isRecord(surface)) {\n          return undefined;\n        }\n        const surfaceId = coerceIdentifier(surface.surfaceId);\n        if (surfaceId == null) {\n          return undefined;\n        }\n        surfaces.push({ surfaceId });\n      }\n      return {\n        channel: EMBEDDED_SURFACE_CHANNEL,\n        version: EMBEDDED_SURFACE_PROTOCOL_VERSION,\n        ...metadata,\n        kind: value.kind,\n        payload: { epoch, surfaces },\n      };\n    }\n    case 'welcome':\n      return undefined;\n  }\n};\n\nexport const coerceChildboundEnvelope = (\n  value: unknown,\n): EmbeddedSurfaceEnvelopeUnion | undefined => {\n  if (!isRecord(value) || value.kind !== 'welcome') {\n    return undefined;\n  }\n  const metadata = getEnvelopeMetadata(value);\n  const payload = isRecord(value.payload) ? value.payload : undefined;\n  if (metadata == null || payload == null) {\n    return undefined;\n  }\n\n  const epoch = coerceIdentifier(payload.epoch);\n  if (epoch == null) {\n    return undefined;\n  }\n\n  return {\n    channel: EMBEDDED_SURFACE_CHANNEL,\n    version: EMBEDDED_SURFACE_PROTOCOL_VERSION,\n    ...metadata,\n    kind: value.kind,\n    payload: { epoch },\n  };\n};\n"],"mappings":";AAAA,MAAa,2BAA2B;AACxC,MAAa,oCAAoC;AA2BjD,MAAM,qBAAqB;AAC3B,MAAM,wBAAwB;AAC9B,MAAM,kBAAkB;AAExB,MAAM,oBAAoB,UAAuC;AAC/D,KACE,OAAO,UAAU,YACjB,MAAM,SAAS,KACf,MAAM,SAAS,yBACf,CAAC,mBAAmB,KAAK,MAAM,CAE/B;AAEF,QAAO;;AAGT,MAAM,YAAY,UAChB,OAAO,UAAU,YAAY,SAAS,QAAQ,CAAC,MAAM,QAAQ,MAAM;AAErE,MAAM,eAAe,UACnB,UAAU,WAAW,UAAU,qBAAqB,UAAU;AAEhE,MAAM,uBACJ,UACyC;AACzC,KACE,MAAM,YAAA,8BACN,MAAM,YAAA,EAEN;CAEF,MAAM,eAAe,iBAAiB,MAAM,aAAa;AACzD,QAAO,gBAAgB,OAAO,EAAE,cAAc,GAAG,KAAA;;AAGnD,MAAa,2BACX,UAC6C;AAC7C,KAAI,CAAC,SAAS,MAAM,IAAI,CAAC,YAAY,MAAM,KAAK,CAC9C;CAEF,MAAM,WAAW,oBAAoB,MAAM;AAC3C,KAAI,YAAY,KACd;CAEF,MAAM,UAAU,SAAS,MAAM,QAAQ,GAAG,MAAM,UAAU,KAAA;AAC1D,KAAI,WAAW,KACb;AAGF,SAAQ,MAAM,MAAd;EACE,KAAK,QACH,QAAO;GACL,SAAS;GACT,SAAA;GACA,GAAG;GACH,MAAM,MAAM;GACZ,SAAS,EAAE;GACZ;EACH,KAAK,mBAAmB;GACtB,MAAM,QAAQ,iBAAiB,QAAQ,MAAM;AAC7C,OACE,SAAS,QACT,CAAC,MAAM,QAAQ,QAAQ,SAAS,IAChC,QAAQ,SAAS,SAAS,gBAE1B;GAEF,MAAM,WAAW,EAAE;AACnB,QAAK,MAAM,WAAW,QAAQ,UAAU;AACtC,QAAI,CAAC,SAAS,QAAQ,CACpB;IAEF,MAAM,YAAY,iBAAiB,QAAQ,UAAU;AACrD,QAAI,aAAa,KACf;AAEF,aAAS,KAAK,EAAE,WAAW,CAAC;;AAE9B,UAAO;IACL,SAAS;IACT,SAAA;IACA,GAAG;IACH,MAAM,MAAM;IACZ,SAAS;KAAE;KAAO;KAAU;IAC7B;;EAEH,KAAK,UACH;;;AAIN,MAAa,4BACX,UAC6C;AAC7C,KAAI,CAAC,SAAS,MAAM,IAAI,MAAM,SAAS,UACrC;CAEF,MAAM,WAAW,oBAAoB,MAAM;CAC3C,MAAM,UAAU,SAAS,MAAM,QAAQ,GAAG,MAAM,UAAU,KAAA;AAC1D,KAAI,YAAY,QAAQ,WAAW,KACjC;CAGF,MAAM,QAAQ,iBAAiB,QAAQ,MAAM;AAC7C,KAAI,SAAS,KACX;AAGF,QAAO;EACL,SAAS;EACT,SAAA;EACA,GAAG;EACH,MAAM,MAAM;EACZ,SAAS,EAAE,OAAO;EACnB"}

package/dist/lib/embeddedSurfaceRegistry.d.mts

@@ -0,0 +1,11 @@
+//#region lib/embeddedSurfaceRegistry.d.ts
+interface EmbeddedSurfaceTransport {
+  send(message: unknown): void;
+  subscribe(callback: (message: unknown) => void): () => void;
+}
+declare const setEmbeddedSurfaceTransport: (nextTransport: EmbeddedSurfaceTransport | null) => void;
+declare const getEmbeddedSurfaceTransport: () => EmbeddedSurfaceTransport | null;
+declare const subscribeEmbeddedSurfaceTransportChanges: (callback: () => void) => (() => void);
+//#endregion
+export { EmbeddedSurfaceTransport, getEmbeddedSurfaceTransport, setEmbeddedSurfaceTransport, subscribeEmbeddedSurfaceTransportChanges };
+//# sourceMappingURL=embeddedSurfaceRegistry.d.mts.map

package/dist/lib/embeddedSurfaceRegistry.mjs

@@ -0,0 +1,19 @@
+//#region lib/embeddedSurfaceRegistry.ts
+let transport = null;
+const transportChangeSubscribers = /* @__PURE__ */ new Set();
+const setEmbeddedSurfaceTransport = (nextTransport) => {
+	if (transport === nextTransport) return;
+	transport = nextTransport;
+	transportChangeSubscribers.forEach((subscriber) => subscriber());
+};
+const getEmbeddedSurfaceTransport = () => transport;
+const subscribeEmbeddedSurfaceTransportChanges = (callback) => {
+	transportChangeSubscribers.add(callback);
+	return () => {
+		transportChangeSubscribers.delete(callback);
+	};
+};
+//#endregion
+export { getEmbeddedSurfaceTransport, setEmbeddedSurfaceTransport, subscribeEmbeddedSurfaceTransportChanges };
+
+//# sourceMappingURL=embeddedSurfaceRegistry.mjs.map

package/dist/lib/embeddedSurfaceRegistry.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"embeddedSurfaceRegistry.mjs","names":[],"sources":["../../lib/embeddedSurfaceRegistry.ts"],"sourcesContent":["export interface EmbeddedSurfaceTransport {\n  send(message: unknown): void;\n  subscribe(callback: (message: unknown) => void): () => void;\n}\n\nlet transport: EmbeddedSurfaceTransport | null = null;\nconst transportChangeSubscribers = new Set<() => void>();\n\nexport const setEmbeddedSurfaceTransport = (\n  nextTransport: EmbeddedSurfaceTransport | null,\n): void => {\n  if (transport === nextTransport) {\n    return;\n  }\n  transport = nextTransport;\n  transportChangeSubscribers.forEach((subscriber) => subscriber());\n};\n\nexport const getEmbeddedSurfaceTransport = (): EmbeddedSurfaceTransport | null => transport;\n\nexport const subscribeEmbeddedSurfaceTransportChanges = (callback: () => void): (() => void) => {\n  transportChangeSubscribers.add(callback);\n  return () => {\n    transportChangeSubscribers.delete(callback);\n  };\n};\n"],"mappings":";AAKA,IAAI,YAA6C;AACjD,MAAM,6CAA6B,IAAI,KAAiB;AAExD,MAAa,+BACX,kBACS;AACT,KAAI,cAAc,cAChB;AAEF,aAAY;AACZ,4BAA2B,SAAS,eAAe,YAAY,CAAC;;AAGlE,MAAa,oCAAqE;AAElF,MAAa,4CAA4C,aAAuC;AAC9F,4BAA2B,IAAI,SAAS;AACxC,cAAa;AACX,6BAA2B,OAAO,SAAS"}

package/dist/lib/message.d.mts

@@ -1,2 +1,2 @@
-import { t as MessageType } from "../message-CMHvlPGn.mjs";
+import { t as MessageType } from "../message-CsK3sIq0.mjs";
 export { MessageType };

package/dist/lib/pseudoClass.d.mts

@@ -1,4 +1,4 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-DLxPxo7T.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-CcSlKNev.mjs";
 
 //#region lib/pseudoClass.d.ts
 declare const isDisabled: ({

package/dist/lib/useEmbeddedSurface.d.mts

@@ -0,0 +1,6 @@
+//#region lib/useEmbeddedSurface.d.ts
+/** Mount-scoped because React Aria mounts overlay content only while it is open. */
+declare function useEmbeddedSurface(): void;
+//#endregion
+export { useEmbeddedSurface as default };
+//# sourceMappingURL=useEmbeddedSurface.d.mts.map

package/dist/lib/useEmbeddedSurface.mjs

@@ -0,0 +1,135 @@
+import { EMBEDDED_SURFACE_CHANNEL, coerceChildboundEnvelope } from "./embeddedSurfaceProtocol.mjs";
+import { getEmbeddedSurfaceTransport, subscribeEmbeddedSurfaceTransportChanges } from "./embeddedSurfaceRegistry.mjs";
+import { useEffect, useRef, useState } from "react";
+//#region lib/useEmbeddedSurface.ts
+const SURFACE_REANNOUNCE_INTERVAL_MS = 2e3;
+const HELLO_ROTATION_THRESHOLD = 2;
+let fallbackId = 0;
+const sessions = /* @__PURE__ */ new WeakMap();
+const mintId = (prefix) => {
+	const randomUUID = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : void 0;
+	if (randomUUID) return `${prefix}-${randomUUID}`;
+	fallbackId += 1;
+	return `${prefix}-${fallbackId.toString(36)}`;
+};
+const getSession = (transport) => {
+	const current = sessions.get(transport);
+	if (current) return current;
+	const session = {
+		connectionId: mintId("connection"),
+		surfaces: /* @__PURE__ */ new Set(),
+		unansweredHellos: 0
+	};
+	sessions.set(transport, session);
+	return session;
+};
+const send = (transport, session, kind, payload) => {
+	transport.send({
+		channel: EMBEDDED_SURFACE_CHANNEL,
+		version: 1,
+		connectionId: session.connectionId,
+		kind,
+		payload
+	});
+};
+const sendSnapshot = (transport, session) => {
+	if (session.epoch == null) return;
+	send(transport, session, "surfaceSnapshot", {
+		epoch: session.epoch,
+		surfaces: Array.from(session.surfaces, (surfaceId) => ({ surfaceId }))
+	});
+};
+const rotateConnection = (session) => {
+	session.connectionId = mintId("connection");
+	session.epoch = void 0;
+	session.unansweredHellos = 0;
+};
+const startSurfaceLease = (transport, session) => {
+	if (session.leaseTimer != null) return;
+	session.leaseTimer = window.setInterval(() => {
+		session.unansweredHellos += 1;
+		if (session.unansweredHellos >= HELLO_ROTATION_THRESHOLD) rotateConnection(session);
+		send(transport, session, "hello", {});
+		sendSnapshot(transport, session);
+	}, SURFACE_REANNOUNCE_INTERVAL_MS);
+};
+const stopSurfaceLease = (session) => {
+	if (session.leaseTimer == null) return;
+	window.clearInterval(session.leaseTimer);
+	session.leaseTimer = void 0;
+};
+const activateSession = (transport, session) => {
+	if (session.unsubscribe != null) return;
+	session.epoch = void 0;
+	session.unansweredHellos = 0;
+	session.unsubscribe = transport.subscribe((message) => {
+		const childbound = coerceChildboundEnvelope(message);
+		if (!childbound || childbound.connectionId !== session.connectionId) return;
+		session.unansweredHellos = 0;
+		session.epoch = childbound.payload.epoch;
+		sendSnapshot(transport, session);
+	});
+	send(transport, session, "hello", {});
+};
+const deactivateSession = (session) => {
+	session.unsubscribe?.();
+	session.unsubscribe = void 0;
+	stopSurfaceLease(session);
+	session.epoch = void 0;
+	session.unansweredHellos = 0;
+};
+/** Mount-scoped because React Aria mounts overlay content only while it is open. */
+function useEmbeddedSurface() {
+	const [transport, setTransport] = useState(getEmbeddedSurfaceTransport);
+	const surfaceIdRef = useRef(void 0);
+	useEffect(() => {
+		const unsubscribe = subscribeEmbeddedSurfaceTransportChanges(() => {
+			setTransport(getEmbeddedSurfaceTransport());
+		});
+		setTransport(getEmbeddedSurfaceTransport());
+		return unsubscribe;
+	}, []);
+	useEffect(() => {
+		if (!transport) return;
+		const surfaceId = surfaceIdRef.current ??= mintId("surface");
+		const session = getSession(transport);
+		activateSession(transport, session);
+		session.surfaces.add(surfaceId);
+		if (session.surfaces.size === 1) startSurfaceLease(transport, session);
+		if (session.epoch != null) sendSnapshot(transport, session);
+		return () => {
+			session.surfaces.delete(surfaceId);
+			if (session.surfaces.size === 0) {
+				if (session.epoch != null) sendSnapshot(transport, session);
+				deactivateSession(session);
+			} else sendSnapshot(transport, session);
+		};
+	}, [transport]);
+	useEffect(() => {
+		if (!transport) return;
+		let active = true;
+		let pendingAnimationFrame = null;
+		const handleFocusOut = (event) => {
+			if (event.relatedTarget != null) return;
+			event.stopImmediatePropagation();
+			if (!(event.target instanceof HTMLElement)) return;
+			const target = event.target;
+			if (pendingAnimationFrame != null) cancelAnimationFrame(pendingAnimationFrame);
+			pendingAnimationFrame = requestAnimationFrame(() => {
+				pendingAnimationFrame = null;
+				if (!active || !target.isConnected) return;
+				if (document.hasFocus() && (document.activeElement == null || document.activeElement === document.body)) target.focus();
+			});
+		};
+		document.addEventListener("focusout", handleFocusOut, true);
+		return () => {
+			active = false;
+			if (pendingAnimationFrame != null) cancelAnimationFrame(pendingAnimationFrame);
+			document.removeEventListener("focusout", handleFocusOut, true);
+		};
+	}, [transport]);
+}
+//#endregion
+export { useEmbeddedSurface as default };
+
+//# sourceMappingURL=useEmbeddedSurface.mjs.map

package/dist/lib/useEmbeddedSurface.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEmbeddedSurface.mjs","names":[],"sources":["../../lib/useEmbeddedSurface.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport {\n  EMBEDDED_SURFACE_PROTOCOL_VERSION,\n  EMBEDDED_SURFACE_CHANNEL,\n  coerceChildboundEnvelope,\n} from 'design-system/lib/embeddedSurfaceProtocol';\nimport {\n  getEmbeddedSurfaceTransport,\n  subscribeEmbeddedSurfaceTransportChanges,\n  type EmbeddedSurfaceTransport,\n} from 'design-system/lib/embeddedSurfaceRegistry';\n\nconst SURFACE_REANNOUNCE_INTERVAL_MS = 2000;\nconst HELLO_ROTATION_THRESHOLD = 2;\n\nlet fallbackId = 0;\ntype SurfaceSession = {\n  connectionId: string;\n  surfaces: Set<string>;\n  leaseTimer?: number;\n  unsubscribe?: () => void;\n  unansweredHellos: number;\n  epoch?: string;\n};\nconst sessions = new WeakMap<EmbeddedSurfaceTransport, SurfaceSession>();\n\nconst mintId = (prefix: string): string => {\n  const randomUUID =\n    typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'\n      ? crypto.randomUUID()\n      : undefined;\n  if (randomUUID) {\n    return `${prefix}-${randomUUID}`;\n  }\n  fallbackId += 1;\n  return `${prefix}-${fallbackId.toString(36)}`;\n};\n\nconst getSession = (transport: EmbeddedSurfaceTransport) => {\n  const current = sessions.get(transport);\n  if (current) {\n    return current;\n  }\n  const session: SurfaceSession = {\n    connectionId: mintId('connection'),\n    surfaces: new Set<string>(),\n    unansweredHellos: 0,\n  };\n  sessions.set(transport, session);\n  return session;\n};\n\nconst send = (\n  transport: EmbeddedSurfaceTransport,\n  session: SurfaceSession,\n  kind: 'hello' | 'surfaceSnapshot',\n  payload: Record<string, never> | { epoch: string; surfaces: Array<{ surfaceId: string }> },\n) => {\n  transport.send({\n    channel: EMBEDDED_SURFACE_CHANNEL,\n    version: EMBEDDED_SURFACE_PROTOCOL_VERSION,\n    connectionId: session.connectionId,\n    kind,\n    payload,\n  });\n};\n\nconst sendSnapshot = (transport: EmbeddedSurfaceTransport, session: SurfaceSession) => {\n  if (session.epoch == null) {\n    return;\n  }\n  send(transport, session, 'surfaceSnapshot', {\n    epoch: session.epoch,\n    surfaces: Array.from(session.surfaces, (surfaceId) => ({ surfaceId })),\n  });\n};\n\nconst rotateConnection = (session: SurfaceSession) => {\n  // The host may have retired this connectionId in its LRU, so hellos stay dropped\n  // until a fresh connectionId is minted.\n  session.connectionId = mintId('connection');\n  session.epoch = undefined;\n  session.unansweredHellos = 0;\n};\n\nconst startSurfaceLease = (transport: EmbeddedSurfaceTransport, session: SurfaceSession) => {\n  if (session.leaseTimer != null) {\n    return;\n  }\n  // Re-announces active surfaces to renew the host's lease. If the child stops\n  // running, announcements cease and the host releases shell effects after timeout.\n  session.leaseTimer = window.setInterval(() => {\n    session.unansweredHellos += 1;\n    if (session.unansweredHellos >= HELLO_ROTATION_THRESHOLD) {\n      rotateConnection(session);\n    }\n    send(transport, session, 'hello', {});\n    sendSnapshot(transport, session);\n  }, SURFACE_REANNOUNCE_INTERVAL_MS);\n};\n\nconst stopSurfaceLease = (session: SurfaceSession) => {\n  if (session.leaseTimer == null) {\n    return;\n  }\n  window.clearInterval(session.leaseTimer);\n  session.leaseTimer = undefined;\n};\n\nconst activateSession = (transport: EmbeddedSurfaceTransport, session: SurfaceSession) => {\n  if (session.unsubscribe != null) {\n    return;\n  }\n  session.epoch = undefined;\n  session.unansweredHellos = 0;\n  session.unsubscribe = transport.subscribe((message) => {\n    const childbound = coerceChildboundEnvelope(message);\n    if (!childbound || childbound.connectionId !== session.connectionId) {\n      return;\n    }\n    session.unansweredHellos = 0;\n    session.epoch = childbound.payload.epoch;\n    sendSnapshot(transport, session);\n  });\n  send(transport, session, 'hello', {});\n};\n\nconst deactivateSession = (session: SurfaceSession) => {\n  session.unsubscribe?.();\n  session.unsubscribe = undefined;\n  stopSurfaceLease(session);\n  session.epoch = undefined;\n  session.unansweredHellos = 0;\n};\n\n/** Mount-scoped because React Aria mounts overlay content only while it is open. */\nexport default function useEmbeddedSurface(): void {\n  const [transport, setTransport] = useState<EmbeddedSurfaceTransport | null>(\n    getEmbeddedSurfaceTransport,\n  );\n  const surfaceIdRef = useRef<string | undefined>(undefined);\n\n  useEffect(() => {\n    const unsubscribe = subscribeEmbeddedSurfaceTransportChanges(() => {\n      setTransport(getEmbeddedSurfaceTransport());\n    });\n    // A transport can register between render and this effect, and the registry only\n    // notifies on change, so reconcile once the subscription is installed.\n    setTransport(getEmbeddedSurfaceTransport());\n    return unsubscribe;\n  }, []);\n\n  useEffect(() => {\n    if (!transport) {\n      return;\n    }\n    const surfaceId = (surfaceIdRef.current ??= mintId('surface'));\n    const session = getSession(transport);\n    activateSession(transport, session);\n    session.surfaces.add(surfaceId);\n    const wasEmpty = session.surfaces.size === 1;\n    if (wasEmpty) {\n      startSurfaceLease(transport, session);\n    }\n    if (session.epoch != null) {\n      sendSnapshot(transport, session);\n    }\n\n    return () => {\n      session.surfaces.delete(surfaceId);\n      if (session.surfaces.size === 0) {\n        if (session.epoch != null) {\n          sendSnapshot(transport, session);\n        }\n        deactivateSession(session);\n      } else {\n        sendSnapshot(transport, session);\n      }\n    };\n  }, [transport]);\n\n  useEffect(() => {\n    if (!transport) {\n      return;\n    }\n    let active = true;\n    let pendingAnimationFrame: number | null = null;\n    const handleFocusOut = (event: FocusEvent) => {\n      if (event.relatedTarget != null) {\n        return;\n      }\n      event.stopImmediatePropagation();\n      if (!(event.target instanceof HTMLElement)) {\n        return;\n      }\n      const target = event.target;\n      if (pendingAnimationFrame != null) {\n        cancelAnimationFrame(pendingAnimationFrame);\n      }\n      pendingAnimationFrame = requestAnimationFrame(() => {\n        pendingAnimationFrame = null;\n        if (!active || !target.isConnected) {\n          return;\n        }\n        if (\n          document.hasFocus() &&\n          (document.activeElement == null || document.activeElement === document.body)\n        ) {\n          target.focus();\n        }\n      });\n    };\n    document.addEventListener('focusout', handleFocusOut, true);\n    return () => {\n      active = false;\n      if (pendingAnimationFrame != null) {\n        cancelAnimationFrame(pendingAnimationFrame);\n      }\n      document.removeEventListener('focusout', handleFocusOut, true);\n    };\n  }, [transport]);\n}\n"],"mappings":"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"}

package/dist/lib/zindex.d.mts

@@ -11,6 +11,8 @@ declare const Z_INDICES: {
   readonly banner: 2000;
   readonly sideNav: 3000;
   readonly topNavTooltip: 3001;
+  readonly embeddedSurfaceBackdrop: 9998;
+  readonly embeddedSurface: 9999;
   readonly modal: 10000;
   readonly modalElevated: 10001;
   readonly modalDropdown: 10010;

package/dist/lib/zindex.mjs

@@ -11,6 +11,8 @@ const Z_INDICES = {
 	banner: 2e3,
 	sideNav: 3e3,
 	topNavTooltip: 3001,
+	embeddedSurfaceBackdrop: 9998,
+	embeddedSurface: 9999,
 	modal: 1e4,
 	modalElevated: 10001,
 	modalDropdown: 10010,

package/dist/lib/zindex.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"zindex.mjs","names":[],"sources":["../../lib/zindex.ts"],"sourcesContent":["/*\n * Prefer adding these values together instead of adding new ones if possible.\n */\nexport const Z_INDICES = {\n  withShadow: 1,\n\n  sticky: 2,\n\n  loadingOverlays: 5,\n\n  tooltip: 10,\n\n  floatingBar: 100,\n\n  /*\n   * The main levels we have in dashboard\n   */\n  topNav: 1000,\n  dropdown: 1001,\n  layeredDropdown: 1002,\n  banner: 2000,\n  sideNav: 3000,\n  topNavTooltip: 3001,\n  modal: 10000,\n  /*\n   * For elements that should expand out of modals, but NOT cover things like dropdowns\n   */\n  modalElevated: 10001,\n  modalDropdown: 10010,\n  modalDropdownTooltip: 10020,\n  personaAssistant: 10011,\n  /*\n   * Full-app blocking modal overlays that must sit above in-app floating panels and\n   * their portaled UI (e.g. flow editor rule panels at Z_INDICES.modal).\n   */\n  modalBlocking: 10030,\n  toast: 100000,\n} as const;\n\nexport type ZIndex = (typeof Z_INDICES)[keyof typeof Z_INDICES];\n"],"mappings":";AAGA,MAAa,YAAY;CACvB,YAAY;CAEZ,QAAQ;CAER,iBAAiB;CAEjB,SAAS;CAET,aAAa;CAKb,QAAQ;CACR,UAAU;CACV,iBAAiB;CACjB,QAAQ;CACR,SAAS;CACT,eAAe;CACf,OAAO;CAIP,eAAe;CACf,eAAe;CACf,sBAAsB;CACtB,kBAAkB;CAKlB,eAAe;CACf,OAAO;CACR"}
+{"version":3,"file":"zindex.mjs","names":[],"sources":["../../lib/zindex.ts"],"sourcesContent":["/*\n * Prefer adding these values together instead of adding new ones if possible.\n */\nexport const Z_INDICES = {\n  withShadow: 1,\n\n  sticky: 2,\n\n  loadingOverlays: 5,\n\n  tooltip: 10,\n\n  floatingBar: 100,\n\n  /*\n   * The main levels we have in dashboard\n   */\n  topNav: 1000,\n  dropdown: 1001,\n  layeredDropdown: 1002,\n  banner: 2000,\n  sideNav: 3000,\n  topNavTooltip: 3001,\n  embeddedSurfaceBackdrop: 9998,\n  embeddedSurface: 9999,\n  modal: 10000,\n  /*\n   * For elements that should expand out of modals, but NOT cover things like dropdowns\n   */\n  modalElevated: 10001,\n  modalDropdown: 10010,\n  modalDropdownTooltip: 10020,\n  personaAssistant: 10011,\n  /*\n   * Full-app blocking modal overlays that must sit above in-app floating panels and\n   * their portaled UI (e.g. flow editor rule panels at Z_INDICES.modal).\n   */\n  modalBlocking: 10030,\n  toast: 100000,\n} as const;\n\nexport type ZIndex = (typeof Z_INDICES)[keyof typeof Z_INDICES];\n"],"mappings":";AAGA,MAAa,YAAY;CACvB,YAAY;CAEZ,QAAQ;CAER,iBAAiB;CAEjB,SAAS;CAET,aAAa;CAKb,QAAQ;CACR,UAAU;CACV,iBAAiB;CACjB,QAAQ;CACR,SAAS;CACT,eAAe;CACf,yBAAyB;CACzB,iBAAiB;CACjB,OAAO;CAIP,eAAe;CACf,eAAe;CACf,sBAAsB;CACtB,kBAAkB;CAKlB,eAAe;CACf,OAAO;CACR"}

package/dist/{message-CMHvlPGn.d.mts → message-CsK3sIq0.d.mts}

@@ -6,4 +6,4 @@ declare enum MessageType {
 }
 //#endregion
 export { MessageType as t };
-//# sourceMappingURL=message-CMHvlPGn.d.mts.map
+//# sourceMappingURL=message-CsK3sIq0.d.mts.map

package/dist/mixins/focus.d.mts

@@ -1,4 +1,4 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-DLxPxo7T.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-CcSlKNev.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region mixins/focus.d.ts

package/dist/mixins/hoverable.d.mts

@@ -1,5 +1,5 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-DLxPxo7T.mjs";
-import { i as Variant } from "../theme-BzBpJXhO.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-CcSlKNev.mjs";
+import { i as Variant } from "../theme-D9Y6NOzb.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region mixins/hoverable.d.ts

package/dist/mixins/input.d.mts

@@ -1,2 +1,2 @@
-import { n as InputSizes, r as inputMixin, t as InputMixinProps } from "../input-Bv5fKt5J.mjs";
+import { n as InputSizes, r as inputMixin, t as InputMixinProps } from "../input-D3Qd6dI8.mjs";
 export { InputMixinProps, InputSizes, inputMixin as default };

package/dist/mixins/menuItem.d.mts

@@ -1,5 +1,5 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-DLxPxo7T.mjs";
-import { i as Variant } from "../theme-BzBpJXhO.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-CcSlKNev.mjs";
+import { i as Variant } from "../theme-D9Y6NOzb.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region mixins/menuItem.d.ts

package/dist/mixins/text.d.mts

@@ -1,2 +1,2 @@
-import { a as displayMixins, c as paragraphMixins, i as ParagraphSize, n as HeadingSize, o as fontFamilyMixin, r as ParagraphMixinSize, s as headingMixins, t as DisplaySize } from "../text-B21s9mRZ.mjs";
+import { a as displayMixins, c as paragraphMixins, i as ParagraphSize, n as HeadingSize, o as fontFamilyMixin, r as ParagraphMixinSize, s as headingMixins, t as DisplaySize } from "../text-BaQdW8qa.mjs";
 export { DisplaySize, HeadingSize, ParagraphMixinSize, ParagraphSize, displayMixins, fontFamilyMixin, headingMixins, paragraphMixins };

package/dist/{operators-Bo31xlc2.d.mts → operators-C_xPzItk.d.mts}

@@ -1,4 +1,4 @@
-import { a as FilterField, c as FilterOperator, l as FilterRule, s as FilterFieldType, u as FilterRuleValue } from "./types-D58IoRx6.mjs";
+import { a as FilterField, c as FilterOperator, l as FilterRule, s as FilterFieldType, u as FilterRuleValue } from "./types-mb3woqzE.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/operators.d.ts
 declare function getOperatorsForType(type: FilterFieldType): ReadonlyArray<FilterOperator>;
@@ -40,4 +40,4 @@ declare function withValue(rule: FilterRule, value: FilterRuleValue): FilterRule
 declare function emptyValueForFieldType(type: FilterFieldType): FilterRuleValue;
 //#endregion
 export { getOperatorsForField as a, withValue as c, getOperatorLabel as i, fieldHasMultipleOperators as n, getOperatorsForType as o, getDefaultOperatorForType as r, isValuelessOperator as s, emptyValueForFieldType as t };
-//# sourceMappingURL=operators-Bo31xlc2.d.mts.map
+//# sourceMappingURL=operators-C_xPzItk.d.mts.map

package/dist/operators.d.mts

@@ -1,2 +1,2 @@
-import { a as getOperatorsForField, c as withValue, i as getOperatorLabel, n as fieldHasMultipleOperators, o as getOperatorsForType, r as getDefaultOperatorForType, s as isValuelessOperator, t as emptyValueForFieldType } from "./operators-Bo31xlc2.mjs";
+import { a as getOperatorsForField, c as withValue, i as getOperatorLabel, n as fieldHasMultipleOperators, o as getOperatorsForType, r as getDefaultOperatorForType, s as isValuelessOperator, t as emptyValueForFieldType } from "./operators-C_xPzItk.mjs";
 export { emptyValueForFieldType, fieldHasMultipleOperators, getDefaultOperatorForType, getOperatorLabel, getOperatorsForField, getOperatorsForType, isValuelessOperator, withValue };

package/dist/{layouts → patterns}/LayoutLoadingShimmer/index.mjs

@@ -1,12 +1,12 @@
-import { n as Stack, t as HStack } from "../../Stack-Bl54WmhY.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-Dsc_RCCf.mjs";
-import { t as Card_default } from "../../CardV2-C0fcOUdp.mjs";
-import { n as PageHeaderContainer } from "../../PageHeader-jSLud2JI.mjs";
-import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "../../Table-BfontAeY.mjs";
+import { n as Stack, t as HStack } from "../../Stack-ckRN7LrP.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-BPYPtFE1.mjs";
+import { t as Card_default } from "../../CardV2-m9yOInMU.mjs";
+import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "../../Table-C-mx8Uj0.mjs";
+import { n as PageHeaderContainer } from "../../PageHeader-Dq-J3san.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled from "styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region layouts/containers.tsx
+//#region patterns/containers.tsx
 const Layout = styled.div`
   position: relative;
   box-sizing: border-box;
@@ -20,7 +20,7 @@ const DetailLayout = styled.div`
   padding: ${Spacing[4]} ${Spacing[5]};
 `;
 //#endregion
-//#region layouts/LayoutLoadingShimmer/LayoutLoadingShimmer.tsx
+//#region patterns/LayoutLoadingShimmer/LayoutLoadingShimmer.tsx
 const DataTableShimmer = () => {
 	return /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(TableHeaderCell, { children: /* @__PURE__ */ jsx(LoadingShimmer, {
 		width: "100%",

package/dist/patterns/LayoutLoadingShimmer/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["CardV2"],"sources":["../../../patterns/containers.tsx","../../../patterns/LayoutLoadingShimmer/LayoutLoadingShimmer.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport const Layout = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  padding: ${Spacing[7]};\n`;\n\nexport const DetailLayout = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  padding: ${Spacing[4]} ${Spacing[5]};\n`;\n","import styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport CardV2 from 'design-system/components/CardV2';\nimport { LoadingShimmer } from 'design-system/components/LoadingShimmer';\nimport { PageHeaderContainer } from 'design-system/components/PageHeader';\nimport Stack, { HStack } from 'design-system/components/Stack';\nimport Table, {\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeaderCell,\n  TableRow,\n} from 'design-system/components/Table';\nimport { Layout, DetailLayout } from 'design-system/patterns/containers';\n\nexport const DataTableShimmer = () => {\n  return (\n    <Stack>\n      <Table>\n        <TableHead>\n          <TableRow>\n            {Array.from({ length: 5 }).map((_, i) => (\n              <TableHeaderCell key={i}>\n                <LoadingShimmer width='100%' height='20px' />\n              </TableHeaderCell>\n            ))}\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {Array.from({ length: 8 }).map((_, i) => (\n            <TableRow key={i} disableHoverBackground>\n              {Array.from({ length: 5 }).map((_, i) => (\n                <TableCell key={i}>\n                  <LoadingShimmer width='100%' height='24px' />\n                </TableCell>\n              ))}\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Stack>\n  );\n};\n\nconst HeaderShimmer = () => {\n  return (\n    <PageHeaderContainer>\n      <LoadingShimmer width='150px' height='30px' />\n      <HStack>\n        <LoadingShimmer width='80px' height='30px' />\n        <LoadingShimmer width='80px' height='30px' />\n      </HStack>\n    </PageHeaderContainer>\n  );\n};\n\n/**\n * Render a single full-width card with a loading state mimicking a DataTable.\n */\nexport const IndexViewLayoutShimmer = () => {\n  return (\n    <>\n      <HeaderShimmer />\n      <Layout>\n        <CardV2>\n          <CardV2.Section>\n            <DataTableShimmer />\n          </CardV2.Section>\n        </CardV2>\n      </Layout>\n    </>\n  );\n};\n\n/**\n * Render `cards.length` full-width cards of the specified height in a loading state.\n */\nexport const SimpleLayoutShimmer = ({ cards = [400] }: { cards?: number[] }) => {\n  return (\n    <>\n      <HeaderShimmer />\n      <Layout>\n        <Stack spacing={Spacing[4]}>\n          {cards.map((height, i) => (\n            <CardV2 key={i} loading loadingProps={{ height: `${height}px` }}>\n              <></>\n            </CardV2>\n          ))}\n        </Stack>\n      </Layout>\n    </>\n  );\n};\n\nconst TabsDivider = styled.hr`\n  border-top: 1px solid ${Color.BorderDivider};\n  margin: 0;\n`;\n\nconst TabsShimmer = () => {\n  return (\n    <Stack>\n      <HStack>\n        <LoadingShimmer variant='secondary' width='100px' height='20px' />\n        <LoadingShimmer variant='secondary' width='100px' height='20px' />\n      </HStack>\n      <TabsDivider />\n    </Stack>\n  );\n};\n\nconst MainColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${Spacing[4]};\n  flex: 2;\n`;\n\nconst RightColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${Spacing[4]};\n  flex: 1;\n`;\n\nexport const ShowViewLayoutShimmer = () => {\n  return (\n    <>\n      <HeaderShimmer />\n      <DetailLayout>\n        <Stack spacing={Spacing[4]}>\n          <TabsShimmer />\n          <HStack spacing={Spacing[4]}>\n            <MainColumn>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '100px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '400px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading>\n                <></>\n              </CardV2>\n            </MainColumn>\n            <RightColumn>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '400px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading>\n                <></>\n              </CardV2>\n            </RightColumn>\n          </HStack>\n        </Stack>\n      </DetailLayout>\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/patterns/PageLayout/index.d.mts

@@ -0,0 +1,2 @@
+import { Backdrop, Container, Section } from "../../PageLayout.mjs";
+export { Backdrop, Container, Section };

package/dist/patterns/PageLayout/index.mjs

@@ -0,0 +1,35 @@
+import { Spacing } from "@persona/design-tokens";
+import styled from "styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region patterns/PageLayout/PageLayout.tsx
+const Backdrop = styled.div`
+  position: relative;
+  width: 100%;
+  padding: ${Spacing[7]} ${Spacing[5]};
+
+  display: flex;
+  flex-direction: column;
+`;
+const StyledContainer = styled("div")`
+  position: relative;
+  width: 100%;
+  padding: 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const Container = ({ children, ...rest }) => {
+	return /* @__PURE__ */ jsx(StyledContainer, {
+		...rest,
+		children
+	});
+};
+const Section = styled("div")`
+  width: 100%;
+  padding: ${Spacing[7]};
+`;
+//#endregion
+export { Backdrop, Container, Section };
+
+//# sourceMappingURL=index.mjs.map

package/dist/patterns/PageLayout/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../patterns/PageLayout/PageLayout.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport const Backdrop = styled.div`\n  position: relative;\n  width: 100%;\n  padding: ${Spacing[7]} ${Spacing[5]};\n\n  display: flex;\n  flex-direction: column;\n`;\n\nconst StyledContainer = styled('div')`\n  position: relative;\n  width: 100%;\n  padding: 0;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n\nexport const Container = ({\n  children,\n  ...rest\n}: { children: ReactNode } & ComponentPropsWithoutRef<'div'>) => {\n  return <StyledContainer {...rest}>{children}</StyledContainer>;\n};\n\nexport const Section = styled('div')`\n  width: 100%;\n  padding: ${Spacing[7]};\n`;\n"],"mappings":";;;;AAKA,MAAa,WAAW,OAAO,GAAG;;;aAGrB,QAAQ,GAAG,GAAG,QAAQ,GAAG;;;;;AAMtC,MAAM,kBAAkB,OAAO,MAAM;;;;;;;;;AAUrC,MAAa,aAAa,EACxB,UACA,GAAG,WAC4D;AAC/D,QAAO,oBAAC,iBAAD;EAAiB,GAAI;EAAO;EAA2B,CAAA;;AAGhE,MAAa,UAAU,OAAO,MAAM;;aAEvB,QAAQ,GAAG"}

package/dist/{text-B21s9mRZ.d.mts → text-BaQdW8qa.d.mts}

@@ -11,4 +11,4 @@ type ParagraphSize = 'lg' | 'md' | 'sm' | 'xs';
 declare const paragraphMixins: Record<ParagraphMixinSize, FlattenInterpolation<ThemeProps<DefaultTheme>>>;
 //#endregion
 export { displayMixins as a, paragraphMixins as c, ParagraphSize as i, HeadingSize as n, fontFamilyMixin as o, ParagraphMixinSize as r, headingMixins as s, DisplaySize as t };
-//# sourceMappingURL=text-B21s9mRZ.d.mts.map
+//# sourceMappingURL=text-BaQdW8qa.d.mts.map

package/dist/{theme-BzBpJXhO.d.mts → theme-D9Y6NOzb.d.mts}

@@ -151,4 +151,4 @@ declare const darkTheme: PersonaTheme;
 declare const marketingFontTheme: PersonaTheme;
 //#endregion
 export { darkTheme as a, Variant as i, PersonaTheme as n, defaultTheme as o, TextColors as r, marketingFontTheme as s, BackgroundColors as t };
-//# sourceMappingURL=theme-BzBpJXhO.d.mts.map
+//# sourceMappingURL=theme-D9Y6NOzb.d.mts.map

package/dist/theme.d.mts

@@ -1,2 +1,2 @@
-import { a as darkTheme, i as Variant, n as PersonaTheme, o as defaultTheme, r as TextColors, s as marketingFontTheme, t as BackgroundColors } from "./theme-BzBpJXhO.mjs";
+import { a as darkTheme, i as Variant, n as PersonaTheme, o as defaultTheme, r as TextColors, s as marketingFontTheme, t as BackgroundColors } from "./theme-D9Y6NOzb.mjs";
 export { BackgroundColors, PersonaTheme, TextColors, Variant, darkTheme, defaultTheme as default, marketingFontTheme };

package/dist/{types-D7ppqnNj.d.mts → types-BKEwt0uq.d.mts}

@@ -1,4 +1,4 @@
-import { a as FilterField, c as FilterOperator, u as FilterRuleValue } from "./types-D58IoRx6.mjs";
+import { a as FilterField, c as FilterOperator, u as FilterRuleValue } from "./types-mb3woqzE.mjs";
 import { ReactElement } from "react";
 
 //#region components/DataTable/TableControls/FiltersV2/value-controls/types.d.ts
@@ -42,4 +42,4 @@ interface ValueControlProps {
 }
 //#endregion
 export { ValueControlProps as t };
-//# sourceMappingURL=types-D7ppqnNj.d.mts.map
+//# sourceMappingURL=types-BKEwt0uq.d.mts.map

package/dist/{types-DEh_pXgS.d.mts → types-CjHuZoVJ.d.mts}

@@ -22,4 +22,4 @@ interface BaseActiveFilter<TFilter extends BaseFilterConfig = BaseFilterConfig>
 }
 //#endregion
 export { BaseActiveFilter as n, BaseFilterConfig as r, AttributeColumn as t };
-//# sourceMappingURL=types-DEh_pXgS.d.mts.map
+//# sourceMappingURL=types-CjHuZoVJ.d.mts.map

package/dist/{types-TV9nVfSe.d.mts → types-DVsBRqjZ.d.mts}

@@ -7,4 +7,4 @@ interface PaginationParams {
 }
 //#endregion
 export { PaginationParams as t };
-//# sourceMappingURL=types-TV9nVfSe.d.mts.map
+//# sourceMappingURL=types-DVsBRqjZ.d.mts.map

package/dist/{types-D58IoRx6.d.mts → types-mb3woqzE.d.mts}

@@ -3,14 +3,13 @@
  * Filter UI v2 — client-side state shape.
  *
  * Conceptual predicate (what the user sees in the bar):
- *   AND_perField(...topLevelRules) AND OR(...compound.groups)
+ *   AND(...topLevelRules) AND OR(...compound.groups)
  * where each `AndGroup` inside `compound.groups` is itself AND'd internally.
  *
- * - Simple pills compose into `topLevelRules`. Pills on DIFFERENT fields
- *   are AND'd together; multiple pills on the SAME field are OR'd
- *   together. AND'ing two equality predicates on a single field would
- *   always return zero rows, so multi-pill-per-field naturally means
- *   "is any of these values".
+ * - Simple pills compose into `topLevelRules` and every one of them
+ *   narrows the result set, on the same field as much as across fields.
+ *   OR lives inside a single pill's multi-select value ("is any of these
+ *   values") or in the Rules pill.
  * - The Rules pill owns `compound.groups` (OR-of-AND / DNF).
  */
 /** All available field types we render type-aware controls + operators for. */
@@ -155,4 +154,4 @@ type FilterSize = 'sm' | 'md';
 declare const EMPTY_FILTER_STATE: FilterStateV2;
 //#endregion
 export { FilterField as a, FilterOperator as c, FilterSize as d, FilterStateV2 as f, EMPTY_FILTER_STATE as i, FilterRule as l, CompoundExpression as n, FilterFieldSource as o, TopLevelFilterRule as p, DateRangeFilterValue as r, FilterFieldType as s, AndGroup as t, FilterRuleValue as u };
-//# sourceMappingURL=types-D58IoRx6.d.mts.map
+//# sourceMappingURL=types-mb3woqzE.d.mts.map

package/dist/types.d.mts

@@ -1,2 +1,2 @@
-import { n as BaseActiveFilter, r as BaseFilterConfig, t as AttributeColumn } from "./types-DEh_pXgS.mjs";
+import { n as BaseActiveFilter, r as BaseFilterConfig, t as AttributeColumn } from "./types-CjHuZoVJ.mjs";
 export { AttributeColumn, BaseActiveFilter, BaseFilterConfig };

package/dist/types2.d.mts

@@ -1,2 +1,2 @@
-import { a as FilterField, c as FilterOperator, d as FilterSize, f as FilterStateV2, i as EMPTY_FILTER_STATE, l as FilterRule, n as CompoundExpression, o as FilterFieldSource, p as TopLevelFilterRule, r as DateRangeFilterValue, s as FilterFieldType, t as AndGroup, u as FilterRuleValue } from "./types-D58IoRx6.mjs";
+import { a as FilterField, c as FilterOperator, d as FilterSize, f as FilterStateV2, i as EMPTY_FILTER_STATE, l as FilterRule, n as CompoundExpression, o as FilterFieldSource, p as TopLevelFilterRule, r as DateRangeFilterValue, s as FilterFieldType, t as AndGroup, u as FilterRuleValue } from "./types-mb3woqzE.mjs";
 export { AndGroup, CompoundExpression, DateRangeFilterValue, EMPTY_FILTER_STATE, FilterField, FilterFieldSource, FilterFieldType, FilterOperator, FilterRule, FilterRuleValue, FilterSize, FilterStateV2, TopLevelFilterRule };

package/dist/types3.d.mts

@@ -1,2 +1,2 @@
-import { t as ValueControlProps } from "./types-D7ppqnNj.mjs";
+import { t as ValueControlProps } from "./types-BKEwt0uq.mjs";
 export { ValueControlProps };

package/dist/types4.d.mts

@@ -1,2 +1,2 @@
-import { t as PaginationParams } from "./types-TV9nVfSe.mjs";
+import { t as PaginationParams } from "./types-DVsBRqjZ.mjs";
 export { PaginationParams };

package/dist/useComboboxFooterAction.d.mts

@@ -1,4 +1,4 @@
-import { p as FooterAction } from "./ComboboxBase-BsPf8BZh.mjs";
+import { p as FooterAction } from "./ComboboxBase-Dmzn8a53.mjs";
 import { KeyboardEvent } from "react";
 
 //#region components/Combobox/useComboboxFooterAction.d.ts

package/dist/{useFilterStateV2-DCQghouq.d.mts → useFilterStateV2-CGzRyv0i.d.mts}

@@ -1,5 +1,5 @@
-import { f as FilterStateV2, l as FilterRule, n as CompoundExpression } from "./types-D58IoRx6.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-rqSkjchY.mjs";
+import { f as FilterStateV2, l as FilterRule, n as CompoundExpression } from "./types-mb3woqzE.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-COyIA4VU.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/useFilterStateV2.d.ts
 interface UseFilterStateV2Options {
@@ -90,4 +90,4 @@ interface UseFilterStateV2Result {
 declare function useFilterStateV2(options: UseFilterStateV2Options): UseFilterStateV2Result;
 //#endregion
 export { UseFilterStateV2Result as n, useFilterStateV2 as r, UseFilterStateV2Options as t };
-//# sourceMappingURL=useFilterStateV2-DCQghouq.d.mts.map
+//# sourceMappingURL=useFilterStateV2-CGzRyv0i.d.mts.map

package/dist/useFilterStateV2.d.mts

@@ -1,2 +1,2 @@
-import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "./useFilterStateV2-DCQghouq.mjs";
+import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "./useFilterStateV2-CGzRyv0i.mjs";
 export { UseFilterStateV2Options, UseFilterStateV2Result, useFilterStateV2 };