@persona/design-system 0.2.0 → 0.2.1

package/dist/{index-Doptc4HI.d.mts → index-DJn4AeE4.d.mts}

@@ -1,8 +1,8 @@
 import { t as TableHeaderCell } from "./TableHeaderCell-CWTMf2Fe.mjs";
 import { n as TableRowProps } from "./TableRow-lvjbVccA.mjs";
+import * as _$styled_components0 from "styled-components";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
-import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/Table/TableTH.d.ts
@@ -72,4 +72,4 @@ declare const TableTR: _$styled_components0.StyledComponent<"tr", any, {
 }, "role">;
 //#endregion
 export { TableCellProps as a, TableTD as c, TableTHProps as d, TableCell as i, TableTR as l, StickyTH as n, TableCellTitle as o, TableActionTD as r, TableIconTD as s, StickyTD as t, TableTH as u };
-//# sourceMappingURL=index-Doptc4HI.d.mts.map
+//# sourceMappingURL=index-DJn4AeE4.d.mts.map

package/dist/index.d.mts

@@ -1,2 +1,2 @@
-import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "./Header-BxTdWg0Q.mjs";
+import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "./Header-OLZuv8fF.mjs";
 export { ActionsContainer, HeaderContainer, HeaderProps, Root, Title, TitleContainer, Header as default };

package/dist/inputFields.d.mts

@@ -1,11 +1,11 @@
 import { n as CheckboxProps } from "./Checkbox-Bmm-r5ei.mjs";
-import { a as InputProps } from "./Input-CEcoDtTu.mjs";
-import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-KJarhRm4.mjs";
-import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-CcIGaphR.mjs";
-import { n as FormFieldBaseProps } from "./FormField-BruK7Des.mjs";
+import { a as InputProps } from "./Input-DsS4J78T.mjs";
+import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-BLKUKNEW.mjs";
+import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-Kpl-iOok.mjs";
+import { n as FormFieldBaseProps } from "./FormField-8rlT8pm0.mjs";
 import { n as RadioGroupProps } from "./RadioGroup-Xn46ovrV.mjs";
 import { i as SegmentedControlProps } from "./SegmentedControl-DckAdhcD.mjs";
-import { i as SelectProps } from "./Select-COT4bkPb.mjs";
+import { i as SelectProps } from "./Select-BmJ1OjXA.mjs";
 import { t as TextAreaProps } from "./TextArea-DiKEhpfD.mjs";
 import { n as ToggleProps } from "./Toggle-oukvAn6V.mjs";
 import * as _$react from "react";

package/dist/{intersperse-vOYvFOfF.mjs → intersperse-yd3oMrQl.mjs}

@@ -18,4 +18,4 @@ function intersperse(arr, separator) {
 //#endregion
 export { intersperse as t };
 
-//# sourceMappingURL=intersperse-vOYvFOfF.mjs.map
+//# sourceMappingURL=intersperse-yd3oMrQl.mjs.map

package/dist/{intersperse-vOYvFOfF.mjs.map → intersperse-yd3oMrQl.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"intersperse-vOYvFOfF.mjs","names":[],"sources":["../lib/intersperse.ts"],"sourcesContent":["/**\n * @name intersperse\n *\n * Inserts an element between array items using a separator function. The\n * separator function is passed the previous index, the previous element, and\n * the next element.\n *\n * ```typescript\n * const nodeList: React.ReactNode[] = [...]\n * const commaSeparatedList = intersperse(nodeList, () => ', ')\n * const advancedSeparatedList = intersperse(nodeList, i => <Separator key={i}/>)\n * ```\n */\nexport function intersperse<T>(arr: T[], separator: (n: number, prev: T, curr: T) => T): T[] {\n  return arr.flatMap((a, i) => (i > 0 ? [separator(i - 1, arr[i - 1], a), a] : [a]));\n}\n"],"mappings":";;;;;;;;;;;;;;AAaA,SAAgB,YAAe,KAAU,WAAoD;AAC3F,QAAO,IAAI,SAAS,GAAG,MAAO,IAAI,IAAI,CAAC,UAAU,IAAI,GAAG,IAAI,IAAI,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,CAAE"}
+{"version":3,"file":"intersperse-yd3oMrQl.mjs","names":[],"sources":["../lib/intersperse.ts"],"sourcesContent":["/**\n * @name intersperse\n *\n * Inserts an element between array items using a separator function. The\n * separator function is passed the previous index, the previous element, and\n * the next element.\n *\n * ```typescript\n * const nodeList: React.ReactNode[] = [...]\n * const commaSeparatedList = intersperse(nodeList, () => ', ')\n * const advancedSeparatedList = intersperse(nodeList, i => <Separator key={i}/>)\n * ```\n */\nexport function intersperse<T>(arr: T[], separator: (n: number, prev: T, curr: T) => T): T[] {\n  return arr.flatMap((a, i) => (i > 0 ? [separator(i - 1, arr[i - 1], a), a] : [a]));\n}\n"],"mappings":";;;;;;;;;;;;;;AAaA,SAAgB,YAAe,KAAU,WAAoD;AAC3F,QAAO,IAAI,SAAS,GAAG,MAAO,IAAI,IAAI,CAAC,UAAU,IAAI,GAAG,IAAI,IAAI,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,CAAE"}

package/dist/lib/MiddleTruncatedText.mjs

@@ -1,2 +1,2 @@
-import { t as MiddleTruncatedText } from "../MiddleTruncatedText-DjsUk8HM.mjs";
+import { t as MiddleTruncatedText } from "../MiddleTruncatedText-Bzpg3zAU.mjs";
 export { MiddleTruncatedText, MiddleTruncatedText as default };

package/dist/lib/TruncatedText.d.mts

@@ -1,2 +1,2 @@
-import { n as TruncatedText, r as TruncatedTextProps, t as OverflowEllipsisSpan } from "../TruncatedText-D2R7uy_y.mjs";
+import { n as TruncatedText, r as TruncatedTextProps, t as OverflowEllipsisSpan } from "../TruncatedText-CdeU19Ev.mjs";
 export { OverflowEllipsisSpan, TruncatedText, TruncatedText as default, TruncatedTextProps };

package/dist/lib/TruncatedText.mjs

@@ -1,6 +1,6 @@
 import { useIsOverflow } from "./useIsOverflow.mjs";
-import { useRef } from "react";
 import styled from "styled-components";
+import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region lib/TruncatedText.tsx
 const OverflowEllipsisSpan = styled.span`

package/dist/lib/TruncatedTextWithTooltip.d.mts

@@ -1,4 +1,4 @@
-import { n as Tooltip } from "../Tooltip-DZVPqxai.mjs";
+import { n as Tooltip } from "../Tooltip-0iXDCV2O.mjs";
 import { ComponentProps, ComponentPropsWithoutRef, FC } from "react";
 
 //#region lib/TruncatedTextWithTooltip.d.ts

package/dist/lib/TruncatedTextWithTooltip.mjs

@@ -1,6 +1,6 @@
 import { useIsOverflow } from "./useIsOverflow.mjs";
 import { OverflowEllipsisSpan } from "./TruncatedText.mjs";
-import { a as Tooltip } from "../Tooltip-B-DDlRMw.mjs";
+import { a as Tooltip } from "../Tooltip-CDvOu1UN.mjs";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region lib/TruncatedTextWithTooltip.tsx

package/dist/lib/embeddedSurfaceProtocol.d.mts

@@ -0,0 +1,29 @@
+//#region lib/embeddedSurfaceProtocol.d.ts
+declare const EMBEDDED_SURFACE_CHANNEL = "persona-embedded-surface";
+declare const EMBEDDED_SURFACE_PROTOCOL_VERSION = 1;
+type EmbeddedSurfaceKind = 'hello' | 'surfaceSnapshot' | 'welcome';
+type EmbeddedSurfacePayloads = {
+  hello: Record<string, never>;
+  surfaceSnapshot: {
+    epoch: string;
+    surfaces: Array<{
+      surfaceId: string;
+    }>;
+  };
+  welcome: {
+    epoch: string;
+  };
+};
+interface EmbeddedSurfaceEnvelope<K extends EmbeddedSurfaceKind = EmbeddedSurfaceKind> {
+  channel: typeof EMBEDDED_SURFACE_CHANNEL;
+  version: typeof EMBEDDED_SURFACE_PROTOCOL_VERSION;
+  connectionId: string;
+  kind: K;
+  payload: EmbeddedSurfacePayloads[K];
+}
+type EmbeddedSurfaceEnvelopeUnion = { [K in EmbeddedSurfaceKind]: EmbeddedSurfaceEnvelope<K> }[EmbeddedSurfaceKind];
+declare const coerceHostboundEnvelope: (value: unknown) => EmbeddedSurfaceEnvelopeUnion | undefined;
+declare const coerceChildboundEnvelope: (value: unknown) => EmbeddedSurfaceEnvelopeUnion | undefined;
+//#endregion
+export { EMBEDDED_SURFACE_CHANNEL, EMBEDDED_SURFACE_PROTOCOL_VERSION, EmbeddedSurfaceEnvelope, EmbeddedSurfaceEnvelopeUnion, EmbeddedSurfaceKind, EmbeddedSurfacePayloads, coerceChildboundEnvelope, coerceHostboundEnvelope };
+//# sourceMappingURL=embeddedSurfaceProtocol.d.mts.map

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/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/mixins/hoverable.mjs

@@ -1,7 +1,7 @@
-import "../variables/transitions.mjs";
 import { isDisabled, isHovered, isNotDisabled } from "../lib/pseudoClass.mjs";
 import { focusOutlineControlled } from "./focus.mjs";
 import "../variables/effect.mjs";
+import "../variables/transitions.mjs";
 import { css } from "styled-components";
 //#region mixins/hoverable.ts
 const hoverMixin = css`

package/dist/mixins/input.mjs

@@ -1,6 +1,6 @@
-import "../variables/transitions.mjs";
 import { isDisabled, isHovered, isNotDisabled } from "../lib/pseudoClass.mjs";
 import { focusOutlineControlled } from "./focus.mjs";
+import "../variables/transitions.mjs";
 import { printMixins } from "./print/index.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import { css } from "styled-components";

package/dist/patterns/LayoutLoadingShimmer/index.mjs

@@ -1,8 +1,8 @@
 import { n as Stack, t as HStack } from "../../Stack-ckRN7LrP.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-Dsc_RCCf.mjs";
-import { t as Card_default } from "../../CardV2-_GfXFd3d.mjs";
-import { n as PageHeaderContainer } from "../../PageHeader-BI2gxol5.mjs";
-import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "../../Table-BnYZVCLj.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";

package/dist/useComboboxFooterAction.d.mts

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

package/dist/{useFormField-DhYd6bNn.mjs → useFormField-eftOPiXj.mjs}

@@ -1,4 +1,4 @@
-import { n as useFormGroup } from "./useFormGroup-DWVW7A9f.mjs";
+import { n as useFormGroup } from "./useFormGroup-BMukAMAd.mjs";
 import { createContext, useContext } from "react";
 //#region components/FormControl/useFormField.ts
 const FormControlContext = createContext({});
@@ -22,4 +22,4 @@ const useFormField = (props) => {
 //#endregion
 export { useFormField as n, FormControlContext as t };
 
-//# sourceMappingURL=useFormField-DhYd6bNn.mjs.map
+//# sourceMappingURL=useFormField-eftOPiXj.mjs.map

package/dist/{useFormField-DhYd6bNn.mjs.map → useFormField-eftOPiXj.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"useFormField-DhYd6bNn.mjs","names":[],"sources":["../components/FormControl/useFormField.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport type ErrorProps from 'design-system/types/ErrorProps';\n\nexport interface FormControlContextProps extends ErrorProps {\n  inputId?: string;\n  helperTextId?: string;\n  errorTextId?: string;\n  warningTextId?: string;\n  labelId?: string;\n  disabled?: boolean;\n  maxLength?: number;\n  configField?: boolean;\n}\n\nexport const FormControlContext = createContext<FormControlContextProps>({});\n\nconst useFormField = (props: Partial<FormControlContextProps>) => {\n  const group = useFormGroup();\n  const field = useContext(FormControlContext);\n\n  const inputId = props.inputId ?? field.inputId;\n\n  return {\n    configField: props.configField ?? group.configField,\n    hasError: props.hasError ?? field.hasError,\n    hasWarning: props.hasWarning ?? field.hasWarning,\n    inputId,\n    helperTextId: props.helperTextId ?? field.helperTextId,\n    errorTextId: props.errorTextId ?? field.errorTextId,\n    warningTextId: props.warningTextId ?? field.warningTextId,\n    labelId: props.labelId ?? field.labelId,\n    disabled: props.disabled ?? field.disabled,\n    maxLength: props.maxLength ?? field.maxLength,\n  };\n};\n\nexport default useFormField;\n"],"mappings":";;;AAgBA,MAAa,qBAAqB,cAAuC,EAAE,CAAC;AAE5E,MAAM,gBAAgB,UAA4C;CAChE,MAAM,QAAQ,cAAc;CAC5B,MAAM,QAAQ,WAAW,mBAAmB;CAE5C,MAAM,UAAU,MAAM,WAAW,MAAM;AAEvC,QAAO;EACL,aAAa,MAAM,eAAe,MAAM;EACxC,UAAU,MAAM,YAAY,MAAM;EAClC,YAAY,MAAM,cAAc,MAAM;EACtC;EACA,cAAc,MAAM,gBAAgB,MAAM;EAC1C,aAAa,MAAM,eAAe,MAAM;EACxC,eAAe,MAAM,iBAAiB,MAAM;EAC5C,SAAS,MAAM,WAAW,MAAM;EAChC,UAAU,MAAM,YAAY,MAAM;EAClC,WAAW,MAAM,aAAa,MAAM;EACrC"}
+{"version":3,"file":"useFormField-eftOPiXj.mjs","names":[],"sources":["../components/FormControl/useFormField.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport type ErrorProps from 'design-system/types/ErrorProps';\n\nexport interface FormControlContextProps extends ErrorProps {\n  inputId?: string;\n  helperTextId?: string;\n  errorTextId?: string;\n  warningTextId?: string;\n  labelId?: string;\n  disabled?: boolean;\n  maxLength?: number;\n  configField?: boolean;\n}\n\nexport const FormControlContext = createContext<FormControlContextProps>({});\n\nconst useFormField = (props: Partial<FormControlContextProps>) => {\n  const group = useFormGroup();\n  const field = useContext(FormControlContext);\n\n  const inputId = props.inputId ?? field.inputId;\n\n  return {\n    configField: props.configField ?? group.configField,\n    hasError: props.hasError ?? field.hasError,\n    hasWarning: props.hasWarning ?? field.hasWarning,\n    inputId,\n    helperTextId: props.helperTextId ?? field.helperTextId,\n    errorTextId: props.errorTextId ?? field.errorTextId,\n    warningTextId: props.warningTextId ?? field.warningTextId,\n    labelId: props.labelId ?? field.labelId,\n    disabled: props.disabled ?? field.disabled,\n    maxLength: props.maxLength ?? field.maxLength,\n  };\n};\n\nexport default useFormField;\n"],"mappings":";;;AAgBA,MAAa,qBAAqB,cAAuC,EAAE,CAAC;AAE5E,MAAM,gBAAgB,UAA4C;CAChE,MAAM,QAAQ,cAAc;CAC5B,MAAM,QAAQ,WAAW,mBAAmB;CAE5C,MAAM,UAAU,MAAM,WAAW,MAAM;AAEvC,QAAO;EACL,aAAa,MAAM,eAAe,MAAM;EACxC,UAAU,MAAM,YAAY,MAAM;EAClC,YAAY,MAAM,cAAc,MAAM;EACtC;EACA,cAAc,MAAM,gBAAgB,MAAM;EAC1C,aAAa,MAAM,eAAe,MAAM;EACxC,eAAe,MAAM,iBAAiB,MAAM;EAC5C,SAAS,MAAM,WAAW,MAAM;EAChC,UAAU,MAAM,YAAY,MAAM;EAClC,WAAW,MAAM,aAAa,MAAM;EACrC"}

package/dist/{useFormGroup-DWVW7A9f.mjs → useFormGroup-BMukAMAd.mjs}

@@ -11,4 +11,4 @@ const useFormGroup = (props) => {
 //#endregion
 export { useFormGroup as n, FormGroupContext as t };
 
-//# sourceMappingURL=useFormGroup-DWVW7A9f.mjs.map
+//# sourceMappingURL=useFormGroup-BMukAMAd.mjs.map

package/dist/{useFormGroup-DWVW7A9f.mjs.map → useFormGroup-BMukAMAd.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"useFormGroup-DWVW7A9f.mjs","names":[],"sources":["../components/ConfigFormGroup/useFormGroup.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface FormGroupContextProps {\n  configField?: boolean;\n  /**\n   * The z-index to use when labels are rendered as tooltips (e.g. when configField is true).\n   */\n  labelTooltipZIndex?: number;\n}\n\nexport const FormGroupContext = createContext<FormGroupContextProps>({});\n\nconst useFormGroup = (props?: Partial<FormGroupContextProps>) => {\n  const field = useContext(FormGroupContext);\n\n  return {\n    configField: props?.configField ?? field.configField,\n    labelTooltipZIndex: props?.labelTooltipZIndex ?? field.labelTooltipZIndex,\n  };\n};\n\nexport default useFormGroup;\n"],"mappings":";;AAUA,MAAa,mBAAmB,cAAqC,EAAE,CAAC;AAExE,MAAM,gBAAgB,UAA2C;CAC/D,MAAM,QAAQ,WAAW,iBAAiB;AAE1C,QAAO;EACL,aAAa,OAAO,eAAe,MAAM;EACzC,oBAAoB,OAAO,sBAAsB,MAAM;EACxD"}
+{"version":3,"file":"useFormGroup-BMukAMAd.mjs","names":[],"sources":["../components/ConfigFormGroup/useFormGroup.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface FormGroupContextProps {\n  configField?: boolean;\n  /**\n   * The z-index to use when labels are rendered as tooltips (e.g. when configField is true).\n   */\n  labelTooltipZIndex?: number;\n}\n\nexport const FormGroupContext = createContext<FormGroupContextProps>({});\n\nconst useFormGroup = (props?: Partial<FormGroupContextProps>) => {\n  const field = useContext(FormGroupContext);\n\n  return {\n    configField: props?.configField ?? field.configField,\n    labelTooltipZIndex: props?.labelTooltipZIndex ?? field.labelTooltipZIndex,\n  };\n};\n\nexport default useFormGroup;\n"],"mappings":";;AAUA,MAAa,mBAAmB,cAAqC,EAAE,CAAC;AAExE,MAAM,gBAAgB,UAA2C;CAC/D,MAAM,QAAQ,WAAW,iBAAiB;AAE1C,QAAO;EACL,aAAa,OAAO,eAAe,MAAM;EACzC,oBAAoB,OAAO,sBAAsB,MAAM;EACxD"}

package/dist/useTruncation.d.mts

@@ -1,4 +1,4 @@
-import { i as ComboboxOption } from "./ComboboxBase-B8evOZpf.mjs";
+import { i as ComboboxOption } from "./ComboboxBase-Dmzn8a53.mjs";
 import { MutableRefObject, RefObject } from "react";
 
 //#region components/Combobox/useTruncation.d.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@persona/design-system",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "React components for Persona UI",
   "keywords": [
     "tanstack-intent"
@@ -76,6 +76,8 @@
     "./lib/ConfigContext": "./dist/lib/ConfigContext.mjs",
     "./lib/copyTextToClipboard": "./dist/lib/copyTextToClipboard.mjs",
     "./lib/datePickerHelper": "./dist/lib/datePickerHelper.mjs",
+    "./lib/embeddedSurfaceProtocol": "./dist/lib/embeddedSurfaceProtocol.mjs",
+    "./lib/embeddedSurfaceRegistry": "./dist/lib/embeddedSurfaceRegistry.mjs",
     "./lib/GlobalStyles": "./dist/lib/GlobalStyles.mjs",
     "./lib/HeadlessAriaButton": "./dist/lib/HeadlessAriaButton.mjs",
     "./lib/message": "./dist/lib/message.mjs",
@@ -87,6 +89,7 @@
     "./lib/TruncatedText": "./dist/lib/TruncatedText.mjs",
     "./lib/TruncatedTextWithTooltip": "./dist/lib/TruncatedTextWithTooltip.mjs",
     "./lib/useControlled": "./dist/lib/useControlled.mjs",
+    "./lib/useEmbeddedSurface": "./dist/lib/useEmbeddedSurface.mjs",
     "./lib/useIsOverflow": "./dist/lib/useIsOverflow.mjs",
     "./lib/useOutsideClick": "./dist/lib/useOutsideClick.mjs",
     "./lib/useScrollOverflow": "./dist/lib/useScrollOverflow.mjs",
@@ -255,6 +258,8 @@
       "./lib/ConfigContext": "./dist/lib/ConfigContext.mjs",
       "./lib/copyTextToClipboard": "./dist/lib/copyTextToClipboard.mjs",
       "./lib/datePickerHelper": "./dist/lib/datePickerHelper.mjs",
+      "./lib/embeddedSurfaceProtocol": "./dist/lib/embeddedSurfaceProtocol.mjs",
+      "./lib/embeddedSurfaceRegistry": "./dist/lib/embeddedSurfaceRegistry.mjs",
       "./lib/GlobalStyles": "./dist/lib/GlobalStyles.mjs",
       "./lib/HeadlessAriaButton": "./dist/lib/HeadlessAriaButton.mjs",
       "./lib/message": "./dist/lib/message.mjs",
@@ -266,6 +271,7 @@
       "./lib/TruncatedText": "./dist/lib/TruncatedText.mjs",
       "./lib/TruncatedTextWithTooltip": "./dist/lib/TruncatedTextWithTooltip.mjs",
       "./lib/useControlled": "./dist/lib/useControlled.mjs",
+      "./lib/useEmbeddedSurface": "./dist/lib/useEmbeddedSurface.mjs",
       "./lib/useIsOverflow": "./dist/lib/useIsOverflow.mjs",
       "./lib/useOutsideClick": "./dist/lib/useOutsideClick.mjs",
       "./lib/useScrollOverflow": "./dist/lib/useScrollOverflow.mjs",

package/skills/ui-authoring/SKILL.md

@@ -3,7 +3,7 @@ name: ui-authoring
 description: Use when implementing UI, styling React components, working with design tokens, or making frontend changes, or when file paths include design-system/components/ or styled-components.
 metadata:
   library: '@persona/design-system'
-  library_version: '0.2.0'
+  library_version: '0.2.1'
 ---
 
 # UI Authoring