@experiaapp/webchat-react-native 2.0.1

package/lib/ui/Header.js

@@ -0,0 +1,236 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = Header;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const dir_1 = require("../theme/dir");
+const i18n_1 = require("../i18n");
+const Icon_1 = require("./Icon");
+const themeFactory_1 = require("../theme/themeFactory");
+/**
+ * Lazily resolve `react-native-svg`. Returns `null` when the optional peer is
+ * not installed so the caller renders the styled-View fallback instead of
+ * crashing. The require is wrapped so a missing module (or a metro/jest resolve
+ * miss) degrades gracefully rather than throwing at render.
+ */
+function loadSvg() {
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const svg = require("react-native-svg");
+        if (svg && svg.Svg) {
+            return { Svg: svg.Svg, Circle: svg.Circle, Path: svg.Path };
+        }
+        return null;
+    }
+    catch {
+        return null;
+    }
+}
+// Web's headset glyph (DigitalGovernmentHeader HeadsetIcon), drawn in a 0 0 32 32
+// viewBox with evenodd fill so the ear-cups read as cut-outs.
+const DG_HEADSET_PATH = "M5.01806 14.031C5.34737 8.25166 10.1382 3.66667 16 3.66667C21.8618 3.66667 26.6526 8.25166 26.9819 14.031C25.851 12.9777 24.3341 12.3333 22.6667 12.3333C20.6416 12.3333 19 13.975 19 16V21.3333C19 23.3584 20.6416 25 22.6667 25C24.3355 25 25.8536 24.3545 26.9849 23.2996C26.9766 23.6312 26.9638 23.9278 26.944 24.198C26.8893 24.9429 26.7852 25.4076 26.6182 25.7785C26.1837 26.744 25.4107 27.517 24.4451 27.9516C24.0742 28.1185 23.6095 28.2226 22.8646 28.2773C22.1098 28.3327 21.1485 28.3333 19.7949 28.3333H16C15.4477 28.3333 15 28.7811 15 29.3333C15 29.8856 15.4477 30.3333 16 30.3333H19.8343C21.1398 30.3333 22.1745 30.3333 23.0111 30.2719C23.8661 30.2091 24.5929 30.0783 25.2659 29.7754C26.6771 29.1403 27.8069 28.0105 28.442 26.5993C28.745 25.9262 28.8758 25.1994 28.9386 24.3444C29 23.5078 29 22.4732 29 21.1677V14.6667C29 7.48697 23.1797 1.66667 16 1.66667C8.8203 1.66667 3 7.48697 3 14.6667V18.6667C3 22.1645 5.83553 25 9.33333 25C11.3584 25 13 23.3584 13 21.3333V16C13 13.975 11.3584 12.3333 9.33333 12.3333C7.66594 12.3333 6.14905 12.9777 5.01806 14.031ZM5 18.6667C5 21.0599 6.9401 23 9.33333 23C10.2538 23 11 22.2538 11 21.3333V16C11 15.0795 10.2538 14.3333 9.33333 14.3333C6.9401 14.3333 5 16.2734 5 18.6667ZM27 18.6667C27 16.2734 25.0599 14.3333 22.6667 14.3333C21.7462 14.3333 21 15.0795 21 16V21.3333C21 22.2538 21.7462 23 22.6667 23C25.0599 23 27 21.0599 27 18.6667Z";
+/**
+ * No-avatar placeholder — WEB PARITY (DigitalGovernmentHeader's HeadsetIcon): a
+ * headset glyph inside a soft grey roundel with a white ring (NOT a "DG" monogram).
+ * The svg peer is optional, so the glyph is lazy-required and degrades to a 🎧 Text
+ * fallback when react-native-svg is absent.
+ */
+function DigitalGovernmentLogo({ color, size = 40 }) {
+    const svg = loadSvg();
+    const glyph = Math.round(size * 0.8);
+    let inner;
+    if (svg) {
+        const { Svg, Path } = svg;
+        inner = ((0, jsx_runtime_1.jsx)(Svg, { width: glyph, height: glyph, viewBox: "0 0 32 32", children: (0, jsx_runtime_1.jsx)(Path, { d: DG_HEADSET_PATH, fill: color, fillRule: "evenodd" }) }));
+    }
+    else {
+        inner = (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color, fontSize: glyph - 6 }, children: "\uD83C\uDFA7" });
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "dg-logo", accessibilityRole: "image", accessibilityLabel: "agent avatar", style: {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            backgroundColor: "#F3F4F6",
+            borderWidth: 2,
+            borderColor: "#FFFFFF",
+            alignItems: "center",
+            justifyContent: "center",
+            overflow: "hidden",
+        }, children: inner }));
+}
+/**
+ * Agent avatar (item 25, web parity — Header.tsx renders the agent `avatar` image
+ * sized via the headerSectionStyle avatar* keys with an online/offline status dot
+ * overlaid). The image is sized/shaped from theme.header.avatar* (width/height/
+ * borderRadius/objectFit); the status dot sits on the trailing-bottom corner and
+ * tracks connection state with the theme online/offline colors. RN <Image> (no
+ * new lib). Only rendered when a url is present — otherwise the caller falls back
+ * to the built-in DG logo/monogram.
+ */
+function AgentAvatar({ avatar, theme, connected, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const h = (_a = theme === null || theme === void 0 ? void 0 : theme.header) !== null && _a !== void 0 ? _a : {};
+    const width = (_b = h.avatarWidth) !== null && _b !== void 0 ? _b : 32;
+    const height = (_c = h.avatarHeight) !== null && _c !== void 0 ? _c : 32;
+    const borderRadius = (_d = h.avatarBorderRadius) !== null && _d !== void 0 ? _d : 16;
+    // web object-fit cover/contain maps 1:1 onto RN resizeMode.
+    const resizeMode = ((_e = h.avatarObjectFit) !== null && _e !== void 0 ? _e : "cover");
+    const dotColor = connected
+        ? (_f = h.onlineStatus) !== null && _f !== void 0 ? _f : "#085D3A"
+        : (_g = h.offlineStatus) !== null && _g !== void 0 ? _g : "#912018";
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: "header-avatar-wrap", style: { width, height }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Image, { testID: "header-avatar", accessibilityRole: "image", accessibilityLabel: (_h = avatar.name) !== null && _h !== void 0 ? _h : "agent avatar", source: { uri: avatar.url }, resizeMode: resizeMode, style: { width, height, borderRadius } }), (0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "header-avatar-dot", style: {
+                    position: "absolute",
+                    right: 0,
+                    bottom: 0,
+                    width: 10,
+                    height: 10,
+                    borderRadius: 5,
+                    backgroundColor: dotColor,
+                    borderWidth: 1.5,
+                    borderColor: "#FFFFFF",
+                } })] }));
+}
+/**
+ * Online/offline status pill — web parity (DigitalGovernmentHeader renders a
+ * rounded pill with a colored dot + "Online"/"Offline" text under the title).
+ * Colors come from the theme (onlineStatus / offlineStatus); the pill background
+ * is a soft tint so it reads on the colored header bar.
+ */
+function StatusIndicator({ connected, theme, t, position, }) {
+    var _a, _b, _c, _d;
+    const dot = connected
+        ? (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a.onlineStatus) !== null && _b !== void 0 ? _b : "#085D3A"
+        : (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.header) === null || _c === void 0 ? void 0 : _c.offlineStatus) !== null && _d !== void 0 ? _d : "#912018";
+    const pillBg = connected ? "#ECFDF3" : "#FEF3F2";
+    const textColor = connected ? "#085D3A" : "#912018";
+    // Map the web positional hint onto an RN alignSelf. "right" keeps the pill on
+    // the trailing edge, "center" centers it, anything else (incl. the default
+    // "top-right" / "left") leaves it on the leading edge under the title.
+    const pos = (position !== null && position !== void 0 ? position : "").toLowerCase();
+    const alignSelf = pos.includes("right")
+        ? "flex-end"
+        : pos.includes("center")
+            ? "center"
+            : "flex-start";
+    // i18n keys online/offline are not in the bundled strings yet; makeT returns
+    // the key itself when missing, so fall back to a Capitalized English label.
+    const label = (key, fallback) => {
+        const s = t(key);
+        return s === key ? fallback : s;
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: "header-status", style: {
+            backgroundColor: pillBg,
+            borderRadius: 9999,
+            height: 20,
+            flexDirection: "row",
+            alignItems: "center",
+            alignSelf,
+            paddingHorizontal: 8,
+            marginTop: 4,
+        }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "header-status-dot", style: {
+                    width: 10,
+                    height: 10,
+                    borderRadius: 5,
+                    backgroundColor: dot,
+                    marginEnd: 8,
+                } }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: textColor, fontSize: 10, fontWeight: "500", lineHeight: 14 }, children: connected ? label("online", "Online") : label("offline", "Offline") })] }));
+}
+/**
+ * Connecting banner — web parity (Header renders a configurable "connecting"
+ * banner while the socket is not yet up). Text comes from `config.connectingText`;
+ * its color/background/alignment/size/weight all read off the theme.header
+ * connecting* tokens (web headerSectionStyle connectingText* keys).
+ */
+function ConnectingBanner({ text, theme, dir, }) {
+    var _a, _b, _c, _d, _e;
+    const h = (_a = theme === null || theme === void 0 ? void 0 : theme.header) !== null && _a !== void 0 ? _a : {};
+    const color = (_c = (_b = h.connectingColor) !== null && _b !== void 0 ? _b : h.titleColor) !== null && _c !== void 0 ? _c : "#FFFFFF";
+    const bg = (_d = h.connectingBg) !== null && _d !== void 0 ? _d : "#B5B5B5";
+    // web alignConnectingText maps onto RN textAlign; default center (web default).
+    const align = ((_e = h.connectingAlign) !== null && _e !== void 0 ? _e : "center");
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "header-connecting", style: { backgroundColor: bg, paddingHorizontal: 12, paddingVertical: 4 }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: {
+                color,
+                textAlign: align,
+                // undefined size/weight => RN's defaults (web parity: tokens optional).
+                fontSize: h.connectingFontSize,
+                fontWeight: h.connectingFontWeight,
+                writingDirection: dir === "rtl" ? "rtl" : "ltr",
+            }, children: text }) }));
+}
+function Header({ variant, dir = "ltr", theme, title, subtitle, language, onClose, showClose = true, onStartCall, connected = false, statusIndicator = true, connectingText, avatar, showAvatar = true, closeImage, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    const d = (0, dir_1.dirStyles)(dir);
+    const t = (0, i18n_1.makeT)(language);
+    // Safe-area: keep the bar background under the status bar/notch but push the
+    // CONTENT below it (audit: header/video button sat under the status bar).
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    // Header palette comes from the resolved theme (server headerSectionStyle wins),
+    // never hardcoded: bg/title/close/video colors all read off theme.header.
+    const primary = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) !== null && _b !== void 0 ? _b : "#0B7A4B";
+    const bg = (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.header) === null || _c === void 0 ? void 0 : _c.bg) !== null && _d !== void 0 ? _d : primary;
+    const titleColor = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.header) === null || _e === void 0 ? void 0 : _e.titleColor) !== null && _f !== void 0 ? _f : "#FFFFFF";
+    const titleWeight = ((_h = (_g = theme === null || theme === void 0 ? void 0 : theme.header) === null || _g === void 0 ? void 0 : _g.titleWeight) !== null && _h !== void 0 ? _h : "700");
+    // Subtitle color/weight are distinct tokens (web subTitleColor / fontWeightSubTitle);
+    // both fall back to the title token / 400 when unset (see buildTheme).
+    const subTitleColor = (_k = (_j = theme === null || theme === void 0 ? void 0 : theme.header) === null || _j === void 0 ? void 0 : _j.subTitleColor) !== null && _k !== void 0 ? _k : titleColor;
+    const subTitleWeight = ((_m = (_l = theme === null || theme === void 0 ? void 0 : theme.header) === null || _l === void 0 ? void 0 : _l.subTitleWeight) !== null && _m !== void 0 ? _m : "400");
+    // Tenant custom font (item 28): resolve the loaded RN family for the title /
+    // subtitle weight. `undefined` => omit fontFamily (system font, today's look).
+    const familyMap = (_o = theme === null || theme === void 0 ? void 0 : theme.font) === null || _o === void 0 ? void 0 : _o.familyMap;
+    const titleFontFamily = (0, themeFactory_1.resolveFontFamily)(familyMap, titleWeight);
+    const subTitleFontFamily = (0, themeFactory_1.resolveFontFamily)(familyMap, subTitleWeight);
+    const closeColor = (_q = (_p = theme === null || theme === void 0 ? void 0 : theme.header) === null || _p === void 0 ? void 0 : _p.closeColor) !== null && _q !== void 0 ? _q : "#FFFFFF";
+    const videoColor = (_s = (_r = theme === null || theme === void 0 ? void 0 : theme.header) === null || _r === void 0 ? void 0 : _r.videoColor) !== null && _s !== void 0 ? _s : "#FFFFFF";
+    const fontSize = (_u = (_t = theme === null || theme === void 0 ? void 0 : theme.font) === null || _t === void 0 ? void 0 : _t.size) !== null && _u !== void 0 ? _u : 14;
+    // Explicit title/subtitle sizes (web fontSizeTitle / fontSizeSubTitle) override
+    // the derived size+offset; undefined => keep the historical derived size.
+    const titleSizeToken = (_v = theme === null || theme === void 0 ? void 0 : theme.header) === null || _v === void 0 ? void 0 : _v.titleSize;
+    const subTitleSize = (_x = (_w = theme === null || theme === void 0 ? void 0 : theme.header) === null || _w === void 0 ? void 0 : _w.subTitleSize) !== null && _x !== void 0 ? _x : fontSize;
+    // Status-pill placement (web statusIndicatorPosition); read off the theme token.
+    const statusPosition = (_y = theme === null || theme === void 0 ? void 0 : theme.header) === null || _y === void 0 ? void 0 : _y.statusIndicatorPosition;
+    // Connecting banner shows only when configured AND the surface is not connected.
+    const showConnecting = !!connectingText && !connected;
+    // The video-call button sits on the trailing edge, BEFORE the close button —
+    // web parity (DigitalGovernmentHeader renders the Join pill then the ✕). Keeps
+    // the historical `webchat-start-call` testID so existing call flows still drive
+    // it; it just lives in the header now instead of floating over the surface.
+    const callButton = onStartCall ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "webchat-start-call", accessibilityRole: "button", accessibilityLabel: t("start_video_call"), onPress: onStartCall, 
+        // `color` is carried on the Pressable style purely so consumers/tests can
+        // read the resolved video tint off the button (the glyph itself is colored
+        // via the Icon below). ViewStyle has no `color` key, hence the cast.
+        style: { color: videoColor, paddingHorizontal: 6 }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "videocam", color: videoColor, size: fontSize + 4 }) })) : null;
+    // The close (✕) affordance sits on the trailing edge; under RTL dirStyles' row
+    // reversal moves it to the visual leading edge. Gated by showClose (default on).
+    // Custom close image (item 29, web `config.closeImage`): when a url is present it
+    // replaces the built-in ✕ Icon with an <Image>; otherwise the Icon is used.
+    const closeGlyph = (closeImage === null || closeImage === void 0 ? void 0 : closeImage.url) ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { testID: "header-close-image", accessibilityRole: "image", source: { uri: closeImage.url }, resizeMode: "contain", style: { width: fontSize + 6, height: fontSize + 6 } })) : ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", color: closeColor, size: fontSize + 6 }));
+    const closeButton = showClose && onClose ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "header-close", accessibilityRole: "button", accessibilityLabel: t("close"), onPress: onClose, 
+        // `color` carried on the style so consumers/tests can read the resolved
+        // close tint off the button; the glyph is colored via the Icon below.
+        style: { color: closeColor, paddingHorizontal: 6 }, children: closeGlyph })) : null;
+    // Agent avatar (item 25): render the configured avatar image (with status dot) in
+    // place of the DG logo when showAvatar && a url is present; else fall back to the
+    // built-in logo/monogram.
+    const showAgentAvatar = showAvatar && Boolean(avatar === null || avatar === void 0 ? void 0 : avatar.url);
+    if (variant === "digitalGovernment") {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: "header-digitalGovernment", style: { paddingTop: insets.top, backgroundColor: bg }, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: d.rowDirection, alignItems: "center", backgroundColor: bg, paddingHorizontal: 12, paddingVertical: 8 }, children: [showAgentAvatar ? ((0, jsx_runtime_1.jsx)(AgentAvatar, { avatar: avatar, theme: theme, connected: connected })) : ((0, jsx_runtime_1.jsx)(DigitalGovernmentLogo, { color: primary })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1, marginHorizontal: 10 }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityRole: "header", numberOfLines: 1, style: {
+                                        color: titleColor,
+                                        fontSize: titleSizeToken !== null && titleSizeToken !== void 0 ? titleSizeToken : fontSize + 4,
+                                        fontWeight: titleWeight,
+                                        fontFamily: titleFontFamily,
+                                        textAlign: d.textAlign,
+                                    }, children: title }), subtitle ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { testID: "header-subtitle", numberOfLines: 1, style: { color: subTitleColor, fontSize: subTitleSize, fontWeight: subTitleWeight, fontFamily: subTitleFontFamily, textAlign: d.textAlign }, children: subtitle })) : null, statusIndicator ? ((0, jsx_runtime_1.jsx)(StatusIndicator, { connected: connected, theme: theme, t: t, position: statusPosition })) : null] }), callButton, closeButton] }), showConnecting ? ((0, jsx_runtime_1.jsx)(ConnectingBanner, { text: connectingText, theme: theme, dir: dir })) : null] }));
+    }
+    // experia (default) — the historical flat primary bar, now with the trailing
+    // video-call + close buttons in the header (web parity). The bar keeps its
+    // testID/paddingTop on the OUTER container so existing assertions hold; the
+    // connecting banner (when shown) renders below the bar row.
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: "header-experia", style: { backgroundColor: bg, paddingTop: insets.top + 12 }, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                    flexDirection: d.rowDirection,
+                    alignItems: "center",
+                    backgroundColor: bg,
+                    paddingBottom: 12,
+                    paddingHorizontal: 12,
+                }, children: [showAgentAvatar ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { marginEnd: 10 }, children: (0, jsx_runtime_1.jsx)(AgentAvatar, { avatar: avatar, theme: theme, connected: connected }) })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityRole: "header", style: { color: titleColor, fontSize: titleSizeToken !== null && titleSizeToken !== void 0 ? titleSizeToken : fontSize + 2, fontWeight: titleWeight, fontFamily: titleFontFamily, textAlign: d.textAlign }, children: title }), subtitle ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { testID: "header-subtitle", numberOfLines: 1, style: { color: subTitleColor, fontSize: subTitleSize, fontWeight: subTitleWeight, fontFamily: subTitleFontFamily, textAlign: d.textAlign }, children: subtitle })) : null, statusIndicator ? ((0, jsx_runtime_1.jsx)(StatusIndicator, { connected: connected, theme: theme, t: t, position: statusPosition })) : null] }), callButton, closeButton] }), showConnecting ? ((0, jsx_runtime_1.jsx)(ConnectingBanner, { text: connectingText, theme: theme, dir: dir })) : null] }));
+}

package/lib/ui/Icon.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The semantic icon set we need across the chat + call surfaces. Each maps to a
+ * Material icon shape (see PATHS below). Adding an icon = add a name here + a
+ * path/glyph entry; consumers get the new option type-checked for free.
+ */
+export type IconName = "chat" | "send" | "attach" | "image" | "document" | "emoji" | "mic" | "micOff" | "videocam" | "videocamOff" | "callEnd" | "close" | "back" | "cameraSwitch" | "speaker" | "speakerOff" | "play" | "pause" | "stop" | "thumbUp" | "thumbDown";
+export interface IconProps {
+    /** which Material shape to draw */
+    name: IconName;
+    /** fill color for the path (and color of the Text fallback) */
+    color?: string;
+    /** width === height in px; also the fallback font size. Default 24. */
+    size?: number;
+}
+/**
+ * A themeable Material-style icon. Pass a semantic `name` plus `color`/`size`.
+ * Renders an SVG path when `react-native-svg` is available, otherwise a tiny
+ * Text glyph in the same color/size — never throws on a missing peer.
+ */
+export declare function Icon({ name, color, size }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default Icon;

package/lib/ui/Icon.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = Icon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+/**
+ * Standard 24x24 Material `d` path data (reasonable approximations). Each renders
+ * inside a 0 0 24 24 viewBox so `size` scales it uniformly.
+ */
+const PATHS = {
+    // chat — speech bubble (Material `chat-bubble`)
+    chat: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z",
+    // send — paper plane (Material `send`)
+    send: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z",
+    // attach — paperclip (Material `attach-file`)
+    attach: "M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5S13.5 3.62 13.5 5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z",
+    // image — landscape with sun (Material `image`)
+    image: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z",
+    // document — file with folded corner (Material `insert-drive-file`)
+    document: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z",
+    // emoji — insert-emoticon (outline)
+    emoji: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z",
+    // mic — microphone (Material `mic`)
+    mic: "M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5-3c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z",
+    // micOff — microphone with slash (Material `mic-off`)
+    micOff: "M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z",
+    // videocam — video camera (Material `videocam`)
+    videocam: "M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z",
+    // videocamOff — video camera with slash (Material `videocam-off`)
+    videocamOff: "M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z",
+    // callEnd — call-end handset (Material `call-end`)
+    callEnd: "M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z",
+    // close — x (Material `close`)
+    close: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
+    // back — arrow-back (Material `arrow-back`)
+    back: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z",
+    // cameraSwitch — flip-camera (Material `flip-camera-android` approximation)
+    cameraSwitch: "M12 5c-3.31 0-6 2.69-6 6 0 1.01.25 1.97.7 2.8L5.24 15.26C4.46 14.03 4 12.57 4 11c0-4.42 3.58-8 8-8V0l4 4-4 4V5zm6.76.74L17.3 7.2c.45.83.7 1.79.7 2.8 0 4.42-3.58 8-8 8v3l-4-4 4-4v3c3.31 0 6-2.69 6-6 0-1.57-.46-3.03-1.24-4.26z",
+    // speaker — volume-up (Material `volume-up`)
+    speaker: "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z",
+    // speakerOff — volume-off (Material `volume-off`)
+    speakerOff: "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z",
+    // play — play arrow (Material `play-arrow`)
+    play: "M8 5v14l11-7z",
+    // pause — two bars (Material `pause`)
+    pause: "M6 19h4V5H6v14zm8-14v14h4V5h-4z",
+    // stop — square (Material `stop`)
+    stop: "M6 6h12v12H6z",
+    // thumbUp — like, filled (Material `thumb-up`)
+    thumbUp: "M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z",
+    // thumbDown — dislike, filled (Material `thumb-down`)
+    thumbDown: "M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z",
+};
+/** Minimal single-char fallback glyphs (used only when react-native-svg is absent). */
+const GLYPHS = {
+    chat: "💬",
+    send: "➤",
+    attach: "📎",
+    image: "🖼",
+    document: "📄",
+    emoji: "🙂",
+    mic: "🎤",
+    micOff: "🔇",
+    videocam: "📹",
+    videocamOff: "📷",
+    callEnd: "📞",
+    close: "✕",
+    back: "‹",
+    cameraSwitch: "🔄",
+    speaker: "🔊",
+    speakerOff: "🔈",
+    play: "▶",
+    pause: "⏸",
+    stop: "⏹",
+    thumbUp: "👍",
+    thumbDown: "👎",
+};
+/**
+ * Lazily resolve `react-native-svg`. Returns `null` when the optional peer is
+ * not installed (or fails to resolve) so the caller renders the <Text> glyph
+ * fallback instead of crashing. Mirrors Header.tsx's loadSvg().
+ */
+function loadSvg() {
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const svg = require("react-native-svg");
+        if (svg && svg.Svg && svg.Path) {
+            return { Svg: svg.Svg, Path: svg.Path };
+        }
+        return null;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * A themeable Material-style icon. Pass a semantic `name` plus `color`/`size`.
+ * Renders an SVG path when `react-native-svg` is available, otherwise a tiny
+ * Text glyph in the same color/size — never throws on a missing peer.
+ */
+function Icon({ name, color = "currentColor", size = 24 }) {
+    const svg = loadSvg();
+    if (svg) {
+        const { Svg, Path } = svg;
+        return ((0, jsx_runtime_1.jsx)(Svg, { testID: `icon-${name}`, width: size, height: size, viewBox: "0 0 24 24", accessibilityRole: "image", children: (0, jsx_runtime_1.jsx)(Path, { d: PATHS[name], fill: color }) }));
+    }
+    // Fallback: a single-char glyph sized to match (no native svg dependency).
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { testID: `icon-${name}`, accessibilityRole: "image", style: { color, fontSize: size, lineHeight: size }, children: GLYPHS[name] }));
+}
+exports.default = Icon;

package/lib/ui/ImageBubble.d.ts

@@ -0,0 +1,11 @@
+export interface ImageBubbleProps {
+    /** hosted URL or data-URL for the image */
+    uri: string;
+    /** alt/label for screen readers */
+    name?: string;
+    theme: any;
+    testID?: string;
+    /** optional: override the default tap-to-enlarge behavior */
+    onPress?: () => void;
+}
+export declare function ImageBubble({ uri, name, theme, testID, onPress }: ImageBubbleProps): import("react/jsx-runtime").JSX.Element;

package/lib/ui/ImageBubble.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageBubble = ImageBubble;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// src/ui/ImageBubble.tsx
+// Received-image preview. Source is the hosted mediaUrl (after UPDATE_MSG) or a
+// data-URL fallback. Tap-to-enlarge is optional and opt-in via onPress.
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+function ImageBubble({ uri, name, theme, testID, onPress }) {
+    var _a;
+    const [enlarged, setEnlarged] = (0, react_1.useState)(false);
+    const label = name || "image attachment";
+    const handlePress = onPress !== null && onPress !== void 0 ? onPress : (() => setEnlarged(true));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: testID, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: testID ? `${testID}-press` : undefined, accessibilityRole: "imagebutton", accessibilityLabel: label, onPress: handlePress, children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { testID: testID ? `${testID}-image` : undefined, accessibilityLabel: label, source: { uri }, resizeMode: "cover", style: { width: 200, height: 150, borderRadius: 8, backgroundColor: (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.surface } }) }), !onPress && ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: enlarged, transparent: true, animationType: "fade", onRequestClose: () => setEnlarged(false), children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: testID ? `${testID}-overlay` : undefined, onPress: () => setEnlarged(false), style: { flex: 1, backgroundColor: "rgba(0,0,0,0.85)", justifyContent: "center", alignItems: "center" }, children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { accessibilityLabel: label, source: { uri }, resizeMode: "contain", style: { width: "100%", height: "80%" } }) }) }))] }));
+}

package/lib/ui/MediaUploadMenu.d.ts

@@ -0,0 +1,23 @@
+import { type IconName } from "./Icon";
+export interface MediaUploadOption {
+    /** stable key + React key */
+    key: "image" | "video" | "document" | "audio";
+    /** themed leading icon */
+    icon: IconName;
+    /** localized row label */
+    label: string;
+    /** RNTL query handle, e.g. "media-option-image" */
+    testID: string;
+    /** invoked when the row is pressed (the menu also closes) */
+    onPress: () => void;
+}
+export interface MediaUploadMenuProps {
+    visible: boolean;
+    onClose: () => void;
+    options: MediaUploadOption[];
+    dir: "ltr" | "rtl";
+    theme: any;
+    language?: string;
+}
+export declare function MediaUploadMenu({ visible, onClose, options, dir, theme, language, }: MediaUploadMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export default MediaUploadMenu;

package/lib/ui/MediaUploadMenu.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaUploadMenu = MediaUploadMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const dir_1 = require("../theme/dir");
+const i18n_1 = require("../i18n");
+const Icon_1 = require("./Icon");
+// Reads the same server-driven send tokens the Composer uses, defensively (unit
+// tests pass a minimal { colors, font } theme). Mirrors Composer.sendTokens.
+function tokens(theme) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const s = (_a = theme === null || theme === void 0 ? void 0 : theme.send) !== null && _a !== void 0 ? _a : {};
+    const primary = (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) !== null && _c !== void 0 ? _c : "#1B8354";
+    return {
+        surface: (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.surface) !== null && _e !== void 0 ? _e : "#FCFCFD",
+        text: (_h = (_f = s.fieldColor) !== null && _f !== void 0 ? _f : (_g = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _g === void 0 ? void 0 : _g.text) !== null && _h !== void 0 ? _h : "#2d2d2d",
+        radius: (_j = s.fieldRadius) !== null && _j !== void 0 ? _j : 4,
+        iconColor: (_k = s.iconColor) !== null && _k !== void 0 ? _k : primary,
+    };
+}
+function MediaUploadMenu({ visible, onClose, options, dir, theme, language, }) {
+    var _a, _b;
+    const d = (0, dir_1.dirStyles)(dir);
+    const t = (0, i18n_1.makeT)(language);
+    const k = tokens(theme);
+    const fontSize = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.font) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 14;
+    if (!visible)
+        return null;
+    const select = (opt) => {
+        opt.onPress();
+        onClose();
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "media-menu-backdrop", accessibilityRole: "button", accessibilityLabel: t("close"), onPress: onClose, style: {
+                flex: 1,
+                backgroundColor: "rgba(0,0,0,0.35)",
+                justifyContent: "flex-end",
+            }, children: (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { testID: "media-menu-sheet", accessibilityViewIsModal: true, accessibilityRole: "menu", onPress: () => { }, style: {
+                    backgroundColor: k.surface,
+                    borderTopLeftRadius: 12,
+                    borderTopRightRadius: 12,
+                    paddingVertical: 8,
+                }, children: [options.map((opt) => ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { testID: opt.testID, accessibilityRole: "menuitem", accessibilityLabel: opt.label, onPress: () => select(opt), style: {
+                            flexDirection: d.rowDirection,
+                            alignItems: "center",
+                            gap: 12,
+                            paddingVertical: 14,
+                            paddingHorizontal: 20,
+                        }, children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: opt.icon, color: k.iconColor, size: fontSize + 8 }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                                    color: k.text,
+                                    fontSize: fontSize + 2,
+                                    textAlign: d.textAlign,
+                                    flex: 1,
+                                }, children: opt.label })] }, opt.key))), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "media-menu-cancel", accessibilityRole: "button", accessibilityLabel: t("cancel"), onPress: onClose, style: {
+                            flexDirection: d.rowDirection,
+                            alignItems: "center",
+                            paddingVertical: 14,
+                            paddingHorizontal: 20,
+                            borderTopWidth: 1,
+                            borderTopColor: "rgba(0,0,0,0.08)",
+                        }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                                color: k.iconColor,
+                                fontSize: fontSize + 2,
+                                textAlign: d.textAlign,
+                                flex: 1,
+                            }, children: t("cancel") }) })] }) }) }));
+}
+exports.default = MediaUploadMenu;

package/lib/ui/MessageList.d.ts

@@ -0,0 +1 @@
+export declare function MessageList({ messages, dir, theme, send, audioAdapter, react, showMessageDate, showTyping, showAvatar, avatar, }: any): import("react/jsx-runtime").JSX.Element;

package/lib/ui/MessageList.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageList = MessageList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const Bubble_1 = require("./Bubble");
+const TypingIndicator_1 = require("./TypingIndicator");
+const useWebchat_1 = require("../state/useWebchat");
+// MessageList owns the quick-reply -> send wiring (audit #3): selecting a chip
+// sends { text: title, payload } so the title shows in the user echo while the
+// backend receives the payload as the message body.
+//
+// Per the context contract, UI consumers read live values from useWebchat();
+// `send` (and the optional received-voice `audioAdapter`) are sourced from there
+// so the wiring stays live regardless of which props the surface threads down.
+// Explicit props still win (testability / override).
+//
+// Typing indicator (item 23): rendered at the visual BOTTOM of the thread (the
+// list is `inverted`, so the header slot is the bottom) when `showTyping` is true.
+// The Surface gates that on `resolvedConfig.displayTypingIndication && awaitingReply`
+// (web Body/index.tsx:134); avatar/showAvatar thread to each received Bubble (item 25).
+function MessageList({ messages, dir, theme, send, audioAdapter, react, showMessageDate = true, showTyping = false, showAvatar = false, avatar, }) {
+    var _a, _b, _c, _d;
+    const ctx = (0, useWebchat_1.useWebchat)();
+    const doSend = send !== null && send !== void 0 ? send : ctx.send;
+    const adapter = audioAdapter !== null && audioAdapter !== void 0 ? audioAdapter : ctx.audioAdapter;
+    // Feedback handler sourced from context like send (Section 4); an explicit prop wins.
+    const doReact = react !== null && react !== void 0 ? react : ctx.react;
+    // Web body sits on a flat chat background (theme.chat.bg / web bgChatColor) — the
+    // list inherits it so a white received bubble reads as a card on the surface
+    // rather than blending in. Falls back to the surface colour for legacy themes.
+    const chatBg = (_d = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.chat) === null || _a === void 0 ? void 0 : _a.bg) !== null && _b !== void 0 ? _b : (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.surface) !== null && _d !== void 0 ? _d : "#FFFFFF";
+    const data = [...messages].reverse();
+    const onQuickReply = (q) => doSend === null || doSend === void 0 ? void 0 : doSend({ text: q.title, payload: q.payload });
+    return ((0, jsx_runtime_1.jsx)(react_native_1.FlatList, { inverted: true, data: data, 
+        // Suffix with the index so a duplicate client `key` (legacy persisted data)
+        // can never produce a duplicate React key. Messages are append-only here, so
+        // the index is stable for existing rows.
+        keyExtractor: (m, i) => `${m.key}-${i}`, style: { backgroundColor: chatBg }, 
+        // Vertical breathing room between bubbles + edge padding (web pads each
+        // message row ~20px and the body bottom ~10px).
+        contentContainerStyle: { paddingVertical: 10 }, ItemSeparatorComponent: () => (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { height: 12 } }), 
+        // The list is inverted, so ListHeaderComponent renders at the visual BOTTOM —
+        // exactly where the typing bubble belongs (newest, under the last message).
+        ListHeaderComponent: showTyping ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { paddingBottom: 12 }, children: (0, jsx_runtime_1.jsx)(TypingIndicator_1.TypingIndicator, { theme: theme, dir: dir }) })) : null, renderItem: ({ item }) => ((0, jsx_runtime_1.jsx)(Bubble_1.Bubble, { message: item, dir: dir, theme: theme, audioAdapter: adapter, onQuickReply: onQuickReply, react: doReact, showMessageDate: showMessageDate, showAvatar: showAvatar, avatar: avatar })) }));
+}

package/lib/ui/PoweredBy.d.ts

@@ -0,0 +1,8 @@
+interface PoweredByProps {
+    theme: any;
+    /** label text (web localized `powered_experia`; default English copy). */
+    label?: string;
+    testID?: string;
+}
+export declare function PoweredBy({ theme, label, testID }: PoweredByProps): import("react/jsx-runtime").JSX.Element;
+export default PoweredBy;

package/lib/ui/PoweredBy.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PoweredBy = PoweredBy;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const openLink_1 = require("./openLink");
+const POWERED_URL = "https://experiaapp.com/";
+function PoweredBy({ theme, label = "Powered by Experia", testID = "powered-by" }) {
+    var _a, _b;
+    // muted label color: prefer a dedicated chat date color, else a neutral grey.
+    const color = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.chat) === null || _a === void 0 ? void 0 : _a.dateColor) !== null && _b !== void 0 ? _b : "#9AA0A6";
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: testID, style: { alignItems: "center", justifyContent: "center", paddingVertical: 8 }, children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "link", accessibilityLabel: label, onPress: () => (0, openLink_1.openLink)(POWERED_URL), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color, fontSize: 12 }, children: label }) }) }));
+}
+exports.default = PoweredBy;

package/lib/ui/PrechatForm.d.ts

@@ -0,0 +1 @@
+export declare function PrechatForm({ fields, onSubmit, dir, theme, headline, submitLabel, language, }: any): import("react/jsx-runtime").JSX.Element;