UNPKG

mind-link-ai-widget

Version:

A react widget for React Web and React-Native Mobile integrations.

544 lines (543 loc) 27.3 kB
import e, { useState as R, useRef as I, useCallback as ge, useEffect as N } from "react"; const g = []; for (let n = 0; n < 256; ++n) g.push((n + 256).toString(16).slice(1)); function ue(n, i = 0) { return (g[n[i + 0]] + g[n[i + 1]] + g[n[i + 2]] + g[n[i + 3]] + "-" + g[n[i + 4]] + g[n[i + 5]] + "-" + g[n[i + 6]] + g[n[i + 7]] + "-" + g[n[i + 8]] + g[n[i + 9]] + "-" + g[n[i + 10]] + g[n[i + 11]] + g[n[i + 12]] + g[n[i + 13]] + g[n[i + 14]] + g[n[i + 15]]).toLowerCase(); } let U; const fe = new Uint8Array(16); function pe() { if (!U) { if (typeof crypto > "u" || !crypto.getRandomValues) throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported"); U = crypto.getRandomValues.bind(crypto); } return U(fe); } const me = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), oe = { randomUUID: me }; function ye(n, i, u) { if (oe.randomUUID && !n) return oe.randomUUID(); n = n || {}; const m = n.random ?? n.rng?.() ?? pe(); if (m.length < 16) throw new Error("Random bytes length must be >= 16"); return m[6] = m[6] & 15 | 64, m[8] = m[8] & 63 | 128, ue(m); } const we = w(); function w() { return ye(); } function be() { const n = (/* @__PURE__ */ new Date()).getHours(); return n < 12 ? "Good Morning" : n < 18 ? "Good Afternoon" : "Good Evening"; } function V(n, i = 1) { return n.slice().sort(() => 0.5 - Math.random()).slice(0, i); } function ae(n) { return n.replace(/\w\S*/g, (i) => i.charAt(0).toUpperCase() + i.slice(1).toLowerCase()); } let B = null, j = !1; function Ee(n) { j = n; } function Se(n) { j && console.log("[API-RN] setApiConfig:", n), B = n ? { ...n, apiHost: n.apiHost ?? "https://uat.api-az.carelonhealth.com/mindlink/api/v1" } : null; } const G = () => B || { apiHost: "", senderApp: "", apiKey: "" }; async function xe(n, i) { const u = G(), m = `${u.apiHost}/behive/intents-and-entities`; j && console.log("[API-RN] fetchIntentsAndEntities - URL:", m, "query:", i, "token:", n, "config:", JSON.stringify(u)); const f = await fetch(m, { method: "POST", headers: { Authorization: `Bearer ${n}`, apikey: u.apiKey, "sender-app": u.senderApp, "Content-Type": "application/json", accept: "application/json", "x-csid": we }, body: JSON.stringify({ query: i }) }); if (!f.ok) { const b = await f.text().catch(() => ""); throw new Error(`fetchIntentsAndEntities failed (${f.status}): ${b}`); } return f.json(); } async function re(n, i) { const u = G(), m = `${u.apiHost}/behive/crediblemind/suggest`, f = await fetch(m, { method: "POST", headers: { Authorization: `Bearer ${n}`, apikey: u.apiKey, "sender-app": u.senderApp, "Content-Type": "application/json", accept: "application/json" }, body: JSON.stringify({ query: i }) }); if (!f.ok) { const b = await f.text().catch(() => ""); throw new Error(`fetchCredibleMindSuggestions failed (${f.status}): ${b}`); } return f.json(); } async function Ce(n, i) { const u = G(), m = `${u.apiHost}/behive/providers/search`, f = await fetch(m, { method: "POST", headers: { Authorization: `Bearer ${n}`, apikey: u.apiKey, "sender-app": u.senderApp, "Content-Type": "application/json", accept: "application/json" }, body: JSON.stringify(i) }); if (!f.ok) { const b = await f.text().catch(() => ""); throw new Error(`fetchProviderSearch failed (${f.status}): ${b}`); } return f.json(); } const { View: c, Text: r, TextInput: Re, TouchableOpacity: S, ScrollView: M, Linking: D, Image: ke } = (() => { try { return require("react-native"); } catch { return { View: "div", Text: "span", TextInput: "input", TouchableOpacity: "button", ScrollView: "div", Linking: { openURL: (n) => window.open(n, "_blank") }, Image: "img" }; } })(), o = { carelonPurple: "#6C47FF", white: "#ffffff", black: "#2f2f2f", borderGrey: "#baadff", lightPurple: "#ececff", textGrey: "#666666", shadowColor: "#000000" }; function Te(n) { e.useEffect(() => { n.debug && Ee(!0), n.config && Se(n.config); }, [n.debug, n.config]); const { greetingName: i, greetingText: u, greetingSet: m, chips: f } = e.useMemo(() => { const t = n.user?.fname ? `${n.user.fname}!` : "there!", s = V(["Hi", "Hey", "Hello", be()]), a = V(["How can I help you today?", "What can I do for you today?"]), l = V([ "I feel stressed", "Tips for anxiety", "My benefits", "Work-life balance advice", "Mindfulness techniques", "Dealing with burnout", "Healthy habits", "Managing emotions", "Productivity tips", "Positive thinking", "Social support", "Self care routines", "Goal setting", "Time management", "Sleep hygiene", "Stress relief", "Mental wellness", "Emotional balance", "Find therapists near me", "Find counselors near me" ], 4); return { greetingName: t, greetingText: s, greetingSet: a, chips: l }; }, [n.user?.fname]), [b, ie] = R(!1), [h, E] = R([]), [p, O] = R([]), [P, q] = R(""), [k, F] = R(!1), [W, J] = R([]), [K, Y] = R(!0), [Q, X] = R(!1), [H, le] = R([1, 0.5, 0.3]), se = I(null), Z = I(null), ee = I(null), _ = I(null), v = I(null), te = 30, ce = (t = /* @__PURE__ */ new Date()) => t.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: !1 }), de = (t) => { A(t); }, $ = (t) => { n.onSchemeNavigate?.(t); }, A = ge(async (t) => { if (!(t || P.trim()) || k) return; b || ie(!0); const s = t || P, a = { id: w() + "-user", sender: "user", text: s, timestamp: /* @__PURE__ */ new Date() }; E((l) => [...l, a]), q(""), F(!0), J([]), Y(!0); try { se.current = Z.current, ee.current = _.current; const l = await xe(n.token, s); Z.current = l.intent, _.current = l.slots.specialty; const y = l?.slots_fulfillment?.status ?? !0; Y(y); const d = l?.followup?.prompt ?? null, z = l?.followup?.options ?? []; J(z); const ne = l.smalltalk, L = l.hybridtalk; if (y && l.intent !== "provider_search_intent" && E((x) => [...x, { id: w() + "-bot-smalltalk", sender: "bot", text: ne || L, timestamp: /* @__PURE__ */ new Date() }]), y && l.intent === "health_content_intent" && l.slots.content_query) { const x = await re(n.token, l.slots.content_query); x?.crediblemind?.length ? E((T) => [...T, { id: w() + "-bot-healthcontent-richinfo", sender: "bot", crediblemind: x.crediblemind, timestamp: /* @__PURE__ */ new Date() }]) : E((T) => [...T, { id: w() + "-bot-smalltalk", sender: "bot", text: "Sorry! There are no health content suggestions for your query.", timestamp: /* @__PURE__ */ new Date() }]); } else if (y && l.intent === "provider_search_intent") { let x = null; ee.current !== _.current && (x = await re(n.token, l.query)), x?.crediblemind?.length ? E((C) => [...C, { id: w() + "-bot-healthcontent-richinfo-with-text", sender: "bot", text: L, crediblemind: x.crediblemind, timestamp: /* @__PURE__ */ new Date() }]) : E((C) => [...C, { id: w() + "-bot-smalltalk", sender: "bot", text: ne || L, timestamp: /* @__PURE__ */ new Date() }]); const T = await Ce(n.token, { gender: l.slots.gender, specialty: l.slots.specialty, provider_type: l.slots.provider_type, location: l.slots.location, language: l.slots.language }); T?.providers?.length ? E((C) => [...C, { id: w() + "-bot-providersearch-richinfo", sender: "bot", providers: T.providers, timestamp: /* @__PURE__ */ new Date() }]) : (E((C) => [...C, { id: w() + "-bot-smalltalk", sender: "bot", text: "Sorry! There are no providers available for your search criteria.", timestamp: /* @__PURE__ */ new Date() }]), E((C) => [...C, { id: w() + "-bot-navigation-suggestion", sender: "bot", text: "Would you like to explore more provider options?", showNavigationButton: !0, timestamp: /* @__PURE__ */ new Date() }])); } d && E((x) => [...x, { id: w() + "-bot-followup", sender: "bot", text: d, timestamp: /* @__PURE__ */ new Date() }]); } catch (l) { console.error("[BehiveApp] sendMessage error:", l), E((y) => [...y, { id: w() + "-bot-smalltalk", sender: "bot", text: "Sorry! There was a problem interacting with my system. Please try again in a while.", timestamp: /* @__PURE__ */ new Date() }]); } finally { F(!1); } }, [P, k, b, n.token]); N(() => { if (!Q && b && h.length > p.length) { const t = h[p.length]; if (t.sender === "bot") { let s = "", a = 0; X(!0); const l = typeof t.text == "string" ? t.text : "", y = () => { l && a < l.length ? (s += l[a], O((d) => { const z = [...d]; return z[z.length - 1] = { ...t, text: s }, z; }), a++, setTimeout(y, te)) : X(!1); }; O((d) => [...d, { ...t, text: "" }]), setTimeout(y, te); } else O((s) => [...s, t]); } }, [h, b, p, p.length, Q]), N(() => { v.current && v.current.scrollToEnd({ animated: !0 }); }, [p]), N(() => { if (!k) return; const t = setInterval(() => { le((s) => [s[2], s[0], s[1]]); }, 400); return () => clearInterval(t); }, [k]); const he = (() => { if (!W || W.length === 0 || p.length === 0) return !1; const t = p[p.length - 1]; return t.sender === "bot" && t.id.includes("-bot-followup") && t.text && h.length === p.length && h[h.length - 1].id === t.id && h[h.length - 1].text === t.text; })(); return e.createElement( c, { style: { flex: 1, backgroundColor: o.white } }, e.createElement( M, { ref: v, style: { flex: 1 }, contentContainerStyle: { padding: 16 } }, b ? e.createElement( c, { style: { flex: 1 } }, p.map( (t, s) => e.createElement( c, { key: t.id + "-" + s, style: { marginVertical: 6 } }, t.text && e.createElement( c, { style: { maxWidth: "80%", alignSelf: t.sender === "user" ? "flex-end" : "flex-start", marginBottom: 8 } }, e.createElement( c, { style: { paddingHorizontal: 16, paddingVertical: 12, borderRadius: 18, backgroundColor: t.sender === "user" ? o.carelonPurple : o.white, shadowColor: o.shadowColor, shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.1, shadowRadius: 2, elevation: 1 } }, e.createElement(r, { style: { color: t.sender === "user" ? o.white : o.black, fontSize: 14, lineHeight: 20 } }, t.text), t.showNavigationButton && t.sender === "bot" && e.createElement( S, { style: { marginTop: 12, backgroundColor: o.carelonPurple, paddingVertical: 10, paddingHorizontal: 16, borderRadius: 12, alignSelf: "flex-start" }, onPress: () => $("page::counselor-search") }, e.createElement(r, { style: { color: o.white, fontSize: 13, fontWeight: "600" } }, "Explore Provider Options") ), t.timestamp && (!t.id.includes("-bot-") || h.length > s && p.length > s && h[s].id === t.id && h[s].text === t.text && p[s].text === t.text) && e.createElement(r, { style: { fontSize: 10, color: t.sender === "user" ? "rgba(255,255,255,0.7)" : o.textGrey, marginTop: 4, textAlign: "right" } }, ce(new Date(t.timestamp))) ) ), K && t.crediblemind && Array.isArray(t.crediblemind) && t.crediblemind.length > 0 && (!t.id.includes("-bot-smalltalk") && !t.id.includes("-bot-healthcontent-richinfo-with-text") || h.length > s && p.length > s && h[s].id === t.id && h[s].text === t.text && p[s].text === t.text) && e.createElement( c, { style: { marginTop: 16, marginLeft: -16, marginRight: -16 } }, e.createElement(r, { style: { fontSize: 15, fontWeight: "600", marginBottom: 12, marginLeft: 16, color: o.carelonPurple } }, "📚 Helpful Resources"), e.createElement( M, { horizontal: !0, showsHorizontalScrollIndicator: !1, contentContainerStyle: { paddingHorizontal: 16 } }, t.crediblemind.map( (a) => e.createElement( S, { key: a.entry_id, style: { width: 280, marginRight: 12, backgroundColor: o.white, borderRadius: 16, overflow: "hidden", shadowColor: o.shadowColor, shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.1, shadowRadius: 12, elevation: 4 }, onPress: () => D.openURL(a.content_url) }, e.createElement( c, { style: { position: "relative", height: 160 } }, e.createElement(ke, { source: { uri: a.image_url }, style: { width: "100%", height: "100%", backgroundColor: "#e0e0e0" } }), e.createElement( c, { style: { position: "absolute", top: 12, right: 12, backgroundColor: o.carelonPurple, paddingHorizontal: 12, paddingVertical: 6, borderRadius: 20 } }, e.createElement(r, { style: { color: o.white, fontSize: 11, fontWeight: "500" } }, a.content_type) ) ), e.createElement( c, { style: { backgroundColor: a.content_type === "Video" ? "#6c3eb6" : a.content_type === "Article" ? "#5a2d9f" : a.content_type === "Podcast" ? "#7b4bc7" : "#8a5dd1", padding: 16 } }, e.createElement(r, { style: { fontSize: 16, fontWeight: "600", color: o.white, marginBottom: 12, lineHeight: 22 } }, a.title), e.createElement(r, { style: { fontSize: 13, color: o.white, fontWeight: "800" } }, a.content_type === "Video" ? "Watch →" : "Read →") ) ) ) ) ), K && t.providers && Array.isArray(t.providers) && t.providers.length > 0 && (!t.id.includes("-bot-smalltalk") && !t.id.includes("-bot-healthcontent-richinfo") && !t.id.includes("-bot-healthcontent-richinfo-with-text") || h.length > s && p.length > s && h[s].id === t.id && h[s].text === t.text && p[s].text === t.text) && e.createElement( c, { style: { marginTop: 16, marginLeft: -16, marginRight: -16 } }, e.createElement(r, { style: { fontSize: 15, fontWeight: "600", marginBottom: 12, marginLeft: 16, color: o.carelonPurple } }, "👩 Healthcare Providers"), e.createElement( M, { horizontal: !0, showsHorizontalScrollIndicator: !1, contentContainerStyle: { paddingHorizontal: 16 } }, t.providers.map((a, l) => { const y = `${a.name.firstName?.[0] || ""}${a.name.lastName?.[0] || ""}`.toUpperCase(); return e.createElement( c, { key: `${t.id}-provider-${a.providerId || l}-${l}`, style: { width: 300, marginRight: 12, backgroundColor: o.white, borderRadius: 16, padding: 19, borderWidth: 2, borderColor: o.borderGrey, shadowColor: o.shadowColor, shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 12, elevation: 3 } }, e.createElement( c, { style: { flexDirection: "row", alignItems: "center", marginBottom: 12 } }, e.createElement( c, { style: { width: 40, height: 40, borderRadius: 20, backgroundColor: o.carelonPurple, alignItems: "center", justifyContent: "center", marginRight: 12 } }, e.createElement(r, { style: { color: o.white, fontSize: 14, fontWeight: "700" } }, y) ), e.createElement( c, { style: { flex: 1 } }, e.createElement( r, { style: { fontSize: 15, fontWeight: "700", color: o.black, flexWrap: "wrap" } }, `${a.name.firstName} ${a.name.lastName}` ) ) ), e.createElement( c, { style: { backgroundColor: o.lightPurple, paddingHorizontal: 12, paddingVertical: 2, borderRadius: 12, alignSelf: "flex-start", marginBottom: 12 } }, e.createElement(r, { style: { fontSize: 14, fontWeight: "500", color: o.black } }, a.title) ), a.contact.address && e.createElement( S, { style: { flexDirection: "row", alignItems: "flex-start", marginBottom: 10 }, onPress: () => { const d = `${a.contact.address.addr1}, ${a.contact.address.city}, ${a.contact.address.state} ${a.contact.address.zip}`; D.openURL(`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(d)}`); } }, e.createElement(r, { style: { fontSize: 16, color: o.carelonPurple, marginRight: 8 } }, "📍"), e.createElement( r, { style: { fontSize: 13, color: o.carelonPurple, fontWeight: "500", flex: 1 } }, `${a.contact.address.addr1}, ${a.contact.address.city}, ${a.contact.address.state}` ) ), a.contact.phone && a.contact.phone !== "Not Available" && e.createElement( S, { style: { flexDirection: "row", alignItems: "center", marginBottom: 10 }, onPress: () => D.openURL(`tel:${a.contact.phone}`) }, e.createElement(r, { style: { fontSize: 16, color: o.carelonPurple, marginRight: 8 } }, "📞"), e.createElement(r, { style: { fontSize: 13, color: o.carelonPurple, fontWeight: "500" } }, a.contact.phone) ), a.contact.officeEmail && a.contact.officeEmail !== "Not Available" && e.createElement( S, { style: { flexDirection: "row", alignItems: "center", marginBottom: 10 }, onPress: () => D.openURL(`mailto:${a.contact.officeEmail}`) }, e.createElement(r, { style: { fontSize: 16, color: o.carelonPurple, marginRight: 8 } }, "✉️"), e.createElement(r, { style: { fontSize: 13, color: o.black } }, a.contact.officeEmail) ), a.contact.website && a.contact.website !== "Not Available" && e.createElement( S, { style: { flexDirection: "row", alignItems: "center", marginBottom: 10 }, onPress: () => D.openURL(a.contact.website.startsWith("http") ? a.contact.website : `https://${a.contact.website}`) }, e.createElement(r, { style: { fontSize: 16, color: o.carelonPurple, marginRight: 8 } }, "🌐"), e.createElement(r, { style: { fontSize: 13, color: o.black, flex: 1 }, numberOfLines: 1 }, a.contact.website) ), a.languages && a.languages.length > 0 && e.createElement( c, { style: { flexDirection: "row", alignItems: "center", marginTop: 10 } }, e.createElement(r, { style: { fontSize: 16, color: o.carelonPurple, marginRight: 8 } }, "🗣️"), e.createElement(r, { style: { fontSize: 13, color: o.black } }, a.languages.map((d) => ae(d)).join(", ")) ), a.yellowLabels && a.yellowLabels.length > 0 && e.createElement( c, { style: { flexDirection: "row", flexWrap: "wrap", marginTop: 16, gap: 8 } }, a.yellowLabels.filter((d) => !d.notAvailable).map( (d) => e.createElement( c, { key: d.icon, style: { backgroundColor: o.lightPurple, paddingHorizontal: 10, paddingVertical: 6, borderRadius: 10 } }, e.createElement( r, { style: { fontSize: 13, color: o.carelonPurple, fontWeight: "600" } }, d.icon === "accepting-new-patients" ? "✓ New Patients" : d.icon === "public-transportation" ? "🚌 Transit" : d.icon === "wheelchair-accessible" ? "♿ Accessible" : d.icon === "telehealth-provider" ? "📹 Telehealth" : d.icon === "medicaid-provider" ? "🏥 Medicaid" : ae(d.label || d.icon) ) ) ) ), a.onlineAppointmentScheduleFlag == 1 && e.createElement( S, { style: { marginTop: 19, backgroundColor: o.carelonPurple, paddingVertical: 11, paddingHorizontal: 35, borderRadius: 16, alignSelf: "center", shadowColor: o.carelonPurple, shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 8, elevation: 2 }, onPress: () => $("page::counselor-appointments") }, e.createElement(r, { style: { color: o.white, fontSize: 14, fontWeight: "600" } }, "Request an appointment") ) ); }) ), e.createElement( S, { style: { marginTop: 16, marginLeft: 16, marginRight: 16, backgroundColor: o.white, borderWidth: 1.5, borderColor: o.carelonPurple, paddingVertical: 12, paddingHorizontal: 24, borderRadius: 16, alignItems: "center", shadowColor: o.shadowColor, shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 8, elevation: 2 }, onPress: () => $("page::counselor-search") }, e.createElement(r, { style: { color: o.carelonPurple, fontSize: 15, fontWeight: "600" } }, "Find More Providers") ) ) ) ), he && e.createElement( c, { style: { flexDirection: "row", flexWrap: "wrap", marginTop: 16 } }, W.map( (t) => e.createElement(S, { key: t, style: { backgroundColor: o.white, borderWidth: 1, borderColor: o.carelonPurple, paddingHorizontal: 12, paddingVertical: 8, borderRadius: 32, margin: 4, shadowColor: o.shadowColor, shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 8, elevation: 1 }, onPress: () => A(t) }, e.createElement(r, { style: { color: o.black, fontSize: 14, fontWeight: "400" } }, t)) ) ), k && e.createElement( c, { style: { alignSelf: "flex-start", paddingHorizontal: 16, paddingVertical: 12, backgroundColor: o.white, borderRadius: 18, marginVertical: 8, flexDirection: "row", gap: 4 } }, e.createElement(r, { style: { fontSize: 20, color: o.carelonPurple, opacity: H[0] } }, "•"), e.createElement(r, { style: { fontSize: 20, color: o.carelonPurple, opacity: H[1] } }, "•"), e.createElement(r, { style: { fontSize: 20, color: o.carelonPurple, opacity: H[2] } }, "•") ) ) : e.createElement( c, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 32 } }, e.createElement( c, { style: { alignItems: "center", marginBottom: 32 } }, e.createElement( r, { style: { fontSize: 28, fontWeight: "600", color: o.carelonPurple, textAlign: "center" } }, u + ", ", e.createElement(r, { style: { fontWeight: "800" } }, i) ), e.createElement(r, { style: { fontSize: 16, color: o.black, marginTop: 10, textAlign: "center", fontWeight: "600" } }, m) ), e.createElement( c, { style: { flexDirection: "row", flexWrap: "wrap", justifyContent: "center" } }, f.map( (t) => e.createElement(S, { key: t, style: { backgroundColor: o.white, borderWidth: 1.5, borderColor: o.carelonPurple, paddingHorizontal: 18, paddingVertical: 12, borderRadius: 32, margin: 8, shadowColor: o.shadowColor, shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 8, elevation: 2 }, onPress: () => de(t) }, e.createElement(r, { style: { color: o.black, fontSize: 14, fontWeight: "500" } }, t)) ) ) ) ), e.createElement( c, { style: { padding: 16, borderTopWidth: 1, borderTopColor: "#ececff", backgroundColor: o.white, shadowColor: o.shadowColor, shadowOffset: { width: 0, height: -2 }, shadowOpacity: 0.1, shadowRadius: 16, elevation: 5 } }, e.createElement( c, { style: { flexDirection: "row", alignItems: "center" } }, e.createElement(Re, { style: { flex: 1, borderWidth: 1.5, borderColor: "#ececff", borderRadius: 32, paddingHorizontal: 16, paddingVertical: 12, fontSize: 14, marginRight: 8, backgroundColor: "#fafafd" }, placeholder: "Ask anything", value: P, onChangeText: q, onSubmitEditing: () => A(), editable: !k }), e.createElement(S, { style: { backgroundColor: P.trim() ? o.carelonPurple : "#d1caff", width: 44, height: 44, borderRadius: 22, alignItems: "center", justifyContent: "center", shadowColor: o.shadowColor, shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.3, shadowRadius: 8, elevation: 3 }, onPress: () => A(), disabled: k || !P.trim() }, e.createElement(r, { style: { color: o.white, fontSize: 18, fontWeight: "600" } }, "↑")) ) ) ); } export { Te as default };