admesh-ui-sdk
Version:
Beautiful, modern React components for displaying AI-powered product recommendations with citation-based conversation ads, auto-triggered widgets, floating chat, conversational interfaces, persistent sidebar, and built-in tracking
1,407 lines (1,318 loc) • 173 kB
JavaScript
import we, { useState as R, useMemo as te, useCallback as J, useRef as re, useEffect as O } from "react";
function je(t) {
return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
}
var se = { exports: {} }, Z = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ue;
function Ne() {
if (ue) return Z;
ue = 1;
var t = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
function s(i, n, a) {
var d = null;
if (a !== void 0 && (d = "" + a), n.key !== void 0 && (d = "" + n.key), "key" in n) {
a = {};
for (var c in n)
c !== "key" && (a[c] = n[c]);
} else a = n;
return n = a.ref, {
$$typeof: t,
type: i,
key: d,
ref: n !== void 0 ? n : null,
props: a
};
}
return Z.Fragment = r, Z.jsx = s, Z.jsxs = s, Z;
}
var ee = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ge;
function _e() {
return ge || (ge = 1, process.env.NODE_ENV !== "production" && function() {
function t(l) {
if (l == null) return null;
if (typeof l == "function")
return l.$$typeof === z ? null : l.displayName || l.name || null;
if (typeof l == "string") return l;
switch (l) {
case h:
return "Fragment";
case v:
return "Profiler";
case g:
return "StrictMode";
case M:
return "Suspense";
case T:
return "SuspenseList";
case I:
return "Activity";
}
if (typeof l == "object")
switch (typeof l.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), l.$$typeof) {
case k:
return "Portal";
case _:
return (l.displayName || "Context") + ".Provider";
case f:
return (l._context.displayName || "Context") + ".Consumer";
case S:
var j = l.render;
return l = l.displayName, l || (l = j.displayName || j.name || "", l = l !== "" ? "ForwardRef(" + l + ")" : "ForwardRef"), l;
case w:
return j = l.displayName || null, j !== null ? j : t(l.type) || "Memo";
case L:
j = l._payload, l = l._init;
try {
return t(l(j));
} catch {
}
}
return null;
}
function r(l) {
return "" + l;
}
function s(l) {
try {
r(l);
var j = !1;
} catch {
j = !0;
}
if (j) {
j = console;
var A = j.error, B = typeof Symbol == "function" && Symbol.toStringTag && l[Symbol.toStringTag] || l.constructor.name || "Object";
return A.call(
j,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
B
), r(l);
}
}
function i(l) {
if (l === h) return "<>";
if (typeof l == "object" && l !== null && l.$$typeof === L)
return "<...>";
try {
var j = t(l);
return j ? "<" + j + ">" : "<...>";
} catch {
return "<...>";
}
}
function n() {
var l = E.A;
return l === null ? null : l.getOwner();
}
function a() {
return Error("react-stack-top-frame");
}
function d(l) {
if ($.call(l, "key")) {
var j = Object.getOwnPropertyDescriptor(l, "key").get;
if (j && j.isReactWarning) return !1;
}
return l.key !== void 0;
}
function c(l, j) {
function A() {
y || (y = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
j
));
}
A.isReactWarning = !0, Object.defineProperty(l, "key", {
get: A,
configurable: !0
});
}
function p() {
var l = t(this.type);
return P[l] || (P[l] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), l = this.props.ref, l !== void 0 ? l : null;
}
function m(l, j, A, B, Y, D, oe, ne) {
return A = D.ref, l = {
$$typeof: b,
type: l,
key: j,
props: D,
_owner: Y
}, (A !== void 0 ? A : null) !== null ? Object.defineProperty(l, "ref", {
enumerable: !1,
get: p
}) : Object.defineProperty(l, "ref", { enumerable: !1, value: null }), l._store = {}, Object.defineProperty(l._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(l, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(l, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: oe
}), Object.defineProperty(l, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: ne
}), Object.freeze && (Object.freeze(l.props), Object.freeze(l)), l;
}
function u(l, j, A, B, Y, D, oe, ne) {
var W = j.children;
if (W !== void 0)
if (B)
if (U(W)) {
for (B = 0; B < W.length; B++)
x(W[B]);
Object.freeze && Object.freeze(W);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else x(W);
if ($.call(j, "key")) {
W = t(l);
var K = Object.keys(j).filter(function(ve) {
return ve !== "key";
});
B = 0 < K.length ? "{key: someKey, " + K.join(": ..., ") + ": ...}" : "{key: someKey}", X[W + B] || (K = 0 < K.length ? "{" + K.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
B,
W,
K,
W
), X[W + B] = !0);
}
if (W = null, A !== void 0 && (s(A), W = "" + A), d(j) && (s(j.key), W = "" + j.key), "key" in j) {
A = {};
for (var le in j)
le !== "key" && (A[le] = j[le]);
} else A = j;
return W && c(
A,
typeof l == "function" ? l.displayName || l.name || "Unknown" : l
), m(
l,
W,
D,
Y,
n(),
A,
oe,
ne
);
}
function x(l) {
typeof l == "object" && l !== null && l.$$typeof === b && l._store && (l._store.validated = 1);
}
var o = we, b = Symbol.for("react.transitional.element"), k = Symbol.for("react.portal"), h = Symbol.for("react.fragment"), g = Symbol.for("react.strict_mode"), v = Symbol.for("react.profiler"), f = Symbol.for("react.consumer"), _ = Symbol.for("react.context"), S = Symbol.for("react.forward_ref"), M = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), w = Symbol.for("react.memo"), L = Symbol.for("react.lazy"), I = Symbol.for("react.activity"), z = Symbol.for("react.client.reference"), E = o.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, $ = Object.prototype.hasOwnProperty, U = Array.isArray, N = console.createTask ? console.createTask : function() {
return null;
};
o = {
"react-stack-bottom-frame": function(l) {
return l();
}
};
var y, P = {}, F = o["react-stack-bottom-frame"].bind(
o,
a
)(), Q = N(i(a)), X = {};
ee.Fragment = h, ee.jsx = function(l, j, A, B, Y) {
var D = 1e4 > E.recentlyCreatedOwnerStacks++;
return u(
l,
j,
A,
!1,
B,
Y,
D ? Error("react-stack-top-frame") : F,
D ? N(i(l)) : Q
);
}, ee.jsxs = function(l, j, A, B, Y) {
var D = 1e4 > E.recentlyCreatedOwnerStacks++;
return u(
l,
j,
A,
!0,
B,
Y,
D ? Error("react-stack-top-frame") : F,
D ? N(i(l)) : Q
);
};
}()), ee;
}
var fe;
function Ce() {
return fe || (fe = 1, process.env.NODE_ENV === "production" ? se.exports = Ne() : se.exports = _e()), se.exports;
}
var e = Ce(), ie = { exports: {} };
/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
var be;
function Me() {
return be || (be = 1, function(t) {
(function() {
var r = {}.hasOwnProperty;
function s() {
for (var a = "", d = 0; d < arguments.length; d++) {
var c = arguments[d];
c && (a = n(a, i(c)));
}
return a;
}
function i(a) {
if (typeof a == "string" || typeof a == "number")
return a;
if (typeof a != "object")
return "";
if (Array.isArray(a))
return s.apply(null, a);
if (a.toString !== Object.prototype.toString && !a.toString.toString().includes("[native code]"))
return a.toString();
var d = "";
for (var c in a)
r.call(a, c) && a[c] && (d = n(d, c));
return d;
}
function n(a, d) {
return d ? a ? a + " " + d : a + d : a;
}
t.exports ? (s.default = s, t.exports = s) : window.classNames = s;
})();
}(ie)), ie.exports;
}
var Se = Me();
const C = /* @__PURE__ */ je(Se), Le = "https://api.useadmesh.com/track";
let ce = {
apiBaseUrl: Le,
enabled: !0,
debug: !1,
retryAttempts: 3,
retryDelay: 1e3
};
const qe = (t) => {
ce = { ...ce, ...t };
}, Te = (t) => {
const [r, s] = R(!1), [i, n] = R(null), a = te(() => ({ ...ce, ...t }), [t]), d = J((x, o) => {
a.debug && console.log(`[AdMesh Tracker] ${x}`, o);
}, [a.debug]), c = J(async (x, o) => {
if (!a.enabled) {
d("Tracking disabled, skipping event", { eventType: x, data: o });
return;
}
if (!o.adId || !o.admeshLink) {
const g = "Missing required tracking data: adId and admeshLink are required";
d(g, o), n(g);
return;
}
s(!0), n(null);
const b = {
event_type: x,
ad_id: o.adId,
admesh_link: o.admeshLink,
product_id: o.productId,
user_id: o.userId,
session_id: o.sessionId,
revenue: o.revenue,
conversion_type: o.conversionType,
metadata: o.metadata,
timestamp: (/* @__PURE__ */ new Date()).toISOString(),
user_agent: navigator.userAgent,
referrer: document.referrer,
page_url: window.location.href
};
d(`Sending ${x} event`, b);
let k = null;
for (let g = 1; g <= (a.retryAttempts || 3); g++)
try {
const v = await fetch(`${a.apiBaseUrl}/events`, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(b)
});
if (!v.ok)
throw new Error(`HTTP ${v.status}: ${v.statusText}`);
const f = await v.json();
d(`${x} event tracked successfully`, f), s(!1);
return;
} catch (v) {
k = v, d(`Attempt ${g} failed for ${x} event`, v), g < (a.retryAttempts || 3) && await new Promise(
(f) => setTimeout(f, (a.retryDelay || 1e3) * g)
);
}
const h = `Failed to track ${x} event after ${a.retryAttempts} attempts: ${k == null ? void 0 : k.message}`;
d(h, k), n(h), s(!1);
}, [a, d]), p = J(async (x) => c("click", x), [c]), m = J(async (x) => c("view", x), [c]), u = J(async (x) => (!x.revenue && !x.conversionType && d("Warning: Conversion tracking without revenue or conversion type", x), c("conversion", x)), [c, d]);
return {
trackClick: p,
trackView: m,
trackConversion: u,
isTracking: r,
error: i
};
}, Ye = (t, r, s) => {
try {
const i = new URL(t);
return i.searchParams.set("ad_id", r), i.searchParams.set("utm_source", "admesh"), i.searchParams.set("utm_medium", "recommendation"), s && Object.entries(s).forEach(([n, a]) => {
i.searchParams.set(n, a);
}), i.toString();
} catch (i) {
return console.warn("[AdMesh] Invalid URL provided to buildAdMeshLink:", t, i), t;
}
}, He = (t, r) => ({
adId: t.ad_id,
admeshLink: t.admesh_link,
productId: t.product_id,
...r
}), V = ({
adId: t,
admeshLink: r,
productId: s,
children: i,
trackingData: n,
className: a,
style: d
}) => {
const { trackClick: c, trackView: p } = Te(), m = re(null), u = re(!1);
O(() => {
if (!m.current || u.current) return;
const o = new IntersectionObserver(
(b) => {
b.forEach((k) => {
k.isIntersecting && !u.current && (u.current = !0, p({
adId: t,
admeshLink: r,
productId: s,
...n
}).catch(console.error));
});
},
{
threshold: 0.5,
// Track when 50% of the element is visible
rootMargin: "0px"
}
);
return o.observe(m.current), () => {
o.disconnect();
};
}, [t, r, s, n, p]);
const x = J(async (o) => {
try {
await c({
adId: t,
admeshLink: r,
productId: s,
...n
});
} catch (h) {
console.error("Failed to track click:", h);
}
o.target.closest("a") || window.open(r, "_blank", "noopener,noreferrer");
}, [t, r, s, n, c]);
return /* @__PURE__ */ e.jsx(
"div",
{
ref: m,
className: a,
onClick: x,
style: {
cursor: "pointer",
...d
},
children: i
}
);
};
V.displayName = "AdMeshLinkTracker";
const Re = `
/* AdMesh UI SDK - Complete Self-Contained Styles */
/* CSS Reset for AdMesh components */
.admesh-component, .admesh-component * {
box-sizing: border-box;
}
/* CSS Variables */
.admesh-component {
--admesh-primary: #6366f1;
--admesh-primary-hover: #4f46e5;
--admesh-secondary: #8b5cf6;
--admesh-accent: #06b6d4;
--admesh-background: #ffffff;
--admesh-surface: #ffffff;
--admesh-border: #e2e8f0;
--admesh-text: #0f172a;
--admesh-text-muted: #64748b;
--admesh-text-light: #94a3b8;
--admesh-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--admesh-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--admesh-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--admesh-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--admesh-radius: 0.75rem;
--admesh-radius-sm: 0.375rem;
--admesh-radius-lg: 1rem;
--admesh-radius-xl: 1.5rem;
}
.admesh-component[data-admesh-theme="dark"] {
--admesh-background: #111827;
--admesh-surface: #1f2937;
--admesh-border: #374151;
--admesh-text: #f9fafb;
--admesh-text-muted: #9ca3af;
--admesh-text-light: #6b7280;
--admesh-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
--admesh-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
--admesh-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
--admesh-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
}
/* Layout Styles */
.admesh-layout {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--admesh-text);
background-color: var(--admesh-background);
border-radius: var(--admesh-radius);
padding: 1.5rem;
box-shadow: var(--admesh-shadow);
border: 1px solid var(--admesh-border);
}
.admesh-layout__header {
margin-bottom: 1.5rem;
text-align: center;
}
.admesh-layout__title {
font-size: 1.25rem;
font-weight: 600;
color: var(--admesh-text);
margin-bottom: 0.5rem;
}
.admesh-layout__subtitle {
font-size: 0.875rem;
color: var(--admesh-text-muted);
}
.admesh-layout__cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.admesh-layout__more-indicator {
text-align: center;
padding: 1rem;
color: var(--admesh-text-muted);
font-size: 0.875rem;
}
.admesh-layout__empty {
text-align: center;
padding: 3rem 1rem;
}
.admesh-layout__empty-content h3 {
font-size: 1.125rem;
font-weight: 600;
color: var(--admesh-text-muted);
margin-bottom: 0.5rem;
}
.admesh-layout__empty-content p {
font-size: 0.875rem;
color: var(--admesh-text-muted);
}
/* Product Card Styles */
.admesh-product-card {
background-color: var(--admesh-surface);
border: 1px solid var(--admesh-border);
border-radius: var(--admesh-radius);
padding: 1.5rem;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
}
.admesh-product-card:hover {
box-shadow: var(--admesh-shadow-lg);
transform: translateY(-2px);
border-color: var(--admesh-primary);
}
.admesh-product-card__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.admesh-product-card__title {
font-size: 1.125rem;
font-weight: 600;
color: var(--admesh-text);
margin-bottom: 0.5rem;
line-height: 1.4;
}
.admesh-product-card__reason {
font-size: 0.875rem;
color: var(--admesh-text-muted);
line-height: 1.5;
margin-bottom: 1rem;
}
.admesh-product-card__match-score {
margin-bottom: 1rem;
}
.admesh-product-card__match-score-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
color: var(--admesh-text-muted);
margin-bottom: 0.25rem;
}
.admesh-product-card__match-score-bar {
width: 100%;
height: 0.375rem;
background-color: var(--admesh-border);
border-radius: var(--admesh-radius-sm);
overflow: hidden;
}
.admesh-product-card__match-score-fill {
height: 100%;
background: linear-gradient(90deg, var(--admesh-primary), #8b5cf6);
border-radius: var(--admesh-radius-sm);
transition: width 0.3s ease-in-out;
}
.admesh-product-card__badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.admesh-product-card__badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.5rem;
background-color: var(--admesh-primary);
color: white;
font-size: 0.75rem;
font-weight: 500;
border-radius: var(--admesh-radius-sm);
}
.admesh-product-card__badge--secondary {
background-color: var(--admesh-secondary);
}
.admesh-product-card__keywords {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
margin-bottom: 1rem;
}
.admesh-product-card__keyword {
padding: 0.125rem 0.375rem;
background-color: var(--admesh-border);
color: var(--admesh-text-muted);
font-size: 0.75rem;
border-radius: var(--admesh-radius-sm);
}
/* Dark mode specific enhancements */
.admesh-component[data-admesh-theme="dark"] .admesh-product-card__keyword {
background-color: #4b5563;
color: #d1d5db;
}
.admesh-component[data-admesh-theme="dark"] .admesh-product-card:hover {
border-color: var(--admesh-primary);
background-color: #374151;
}
.admesh-component[data-admesh-theme="dark"] .admesh-product-card__button:hover {
background: linear-gradient(90deg, var(--admesh-primary-hover), var(--admesh-primary));
}
.admesh-product-card__footer {
display: flex;
justify-content: flex-end;
margin-top: 1.5rem;
}
/* Mobile-specific sidebar improvements */
@media (max-width: 640px) {
.admesh-sidebar {
/* Ensure proper mobile viewport handling */
height: 100vh !important;
height: 100dvh !important; /* Dynamic viewport height for mobile browsers */
max-height: 100vh !important;
max-height: 100dvh !important;
width: 100vw !important;
max-width: 90vw !important;
overflow: hidden !important;
}
.admesh-sidebar.relative {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
}
/* Improve touch scrolling */
.admesh-sidebar .overflow-y-auto {
-webkit-overflow-scrolling: touch !important;
overscroll-behavior: contain !important;
scroll-behavior: smooth !important;
}
/* Prevent body scroll when sidebar is open */
body:has(.admesh-sidebar[data-mobile-open="true"]) {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
}
}
/* Tablet improvements */
@media (min-width: 641px) and (max-width: 1024px) {
.admesh-sidebar {
max-width: 400px !important;
}
}
/* Mobile responsiveness improvements for all components */
@media (max-width: 640px) {
/* Product cards mobile optimization */
.admesh-card {
padding: 0.75rem !important;
margin-bottom: 0.75rem !important;
}
/* Inline recommendations mobile optimization */
.admesh-inline-recommendation {
padding: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
/* Conversation summary mobile optimization */
.admesh-conversation-summary {
padding: 1rem !important;
}
/* Percentage text mobile improvements */
.admesh-component .text-xs {
font-size: 0.75rem !important;
line-height: 1rem !important;
}
.admesh-component .text-sm {
font-size: 0.875rem !important;
line-height: 1.25rem !important;
}
/* Button mobile improvements */
.admesh-component button {
padding: 0.375rem 0.75rem !important;
font-size: 0.75rem !important;
min-height: 2rem !important;
touch-action: manipulation !important;
}
/* Badge mobile improvements */
.admesh-component .rounded-full {
padding: 0.25rem 0.5rem !important;
font-size: 0.625rem !important;
line-height: 1rem !important;
}
/* Progress bar mobile improvements */
.admesh-component .bg-gray-200,
.admesh-component .bg-slate-600 {
height: 0.25rem !important;
}
/* Flex layout mobile improvements */
.admesh-component .flex {
flex-wrap: wrap !important;
}
.admesh-component .gap-2 {
gap: 0.375rem !important;
}
.admesh-component .gap-3 {
gap: 0.5rem !important;
}
}
.admesh-product-card__button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(90deg, var(--admesh-primary), var(--admesh-primary-hover));
color: white;
font-size: 0.875rem;
font-weight: 500;
border: none;
border-radius: var(--admesh-radius);
cursor: pointer;
transition: all 0.2s ease-in-out;
text-decoration: none;
}
.admesh-product-card__button:hover {
transform: translateY(-1px);
box-shadow: var(--admesh-shadow-lg);
}
/* Utility Classes */
.admesh-text-xs { font-size: 0.75rem; }
.admesh-text-sm { font-size: 0.875rem; }
.admesh-text-base { font-size: 1rem; }
.admesh-text-lg { font-size: 1.125rem; }
.admesh-text-xl { font-size: 1.25rem; }
.admesh-font-medium { font-weight: 500; }
.admesh-font-semibold { font-weight: 600; }
.admesh-font-bold { font-weight: 700; }
.admesh-text-muted { color: var(--admesh-text-muted); }
/* Comparison Table Styles */
.admesh-compare-table {
width: 100%;
border-collapse: collapse;
background-color: var(--admesh-surface);
border: 1px solid var(--admesh-border);
border-radius: var(--admesh-radius);
overflow: hidden;
}
.admesh-compare-table th,
.admesh-compare-table td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid var(--admesh-border);
}
.admesh-compare-table th {
background-color: var(--admesh-background);
font-weight: 600;
color: var(--admesh-text);
font-size: 0.875rem;
}
.admesh-compare-table td {
color: var(--admesh-text);
font-size: 0.875rem;
}
.admesh-compare-table tr:hover {
background-color: var(--admesh-border);
}
/* Dark mode table enhancements */
.admesh-component[data-admesh-theme="dark"] .admesh-compare-table th {
background-color: #374151;
}
.admesh-component[data-admesh-theme="dark"] .admesh-compare-table tr:hover {
background-color: #4b5563;
}
/* Responsive Design */
@media (max-width: 768px) {
.admesh-layout {
padding: 1rem;
}
.admesh-layout__cards-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.admesh-product-card {
padding: 1rem;
}
.admesh-compare-table {
font-size: 0.75rem;
}
.admesh-compare-table th,
.admesh-compare-table td {
padding: 0.5rem;
}
}
/* Essential Utility Classes for Self-Contained SDK - High Specificity */
.admesh-component .relative { position: relative !important; }
.admesh-component .absolute { position: absolute !important; }
.admesh-component .flex { display: flex !important; }
.admesh-component .inline-flex { display: inline-flex !important; }
.admesh-component .grid { display: grid !important; }
.admesh-component .hidden { display: none !important; }
.admesh-component .block { display: block !important; }
.admesh-component .inline-block { display: inline-block !important; }
/* Flexbox utilities */
.admesh-component .flex-col { flex-direction: column !important; }
.admesh-component .flex-row { flex-direction: row !important; }
.admesh-component .flex-wrap { flex-wrap: wrap !important; }
.admesh-component .items-center { align-items: center !important; }
.admesh-component .items-start { align-items: flex-start !important; }
.admesh-component .items-end { align-items: flex-end !important; }
.admesh-component .justify-center { justify-content: center !important; }
.admesh-component .justify-between { justify-content: space-between !important; }
.admesh-component .justify-end { justify-content: flex-end !important; }
.admesh-component .flex-1 { flex: 1 1 0% !important; }
.admesh-component .flex-shrink-0 { flex-shrink: 0 !important; }
/* Grid utilities */
.admesh-component .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.admesh-component .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admesh-component .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Spacing utilities */
.admesh-component .gap-1 { gap: 0.25rem; }
.admesh-component .gap-2 { gap: 0.5rem; }
.admesh-component .gap-3 { gap: 0.75rem; }
.admesh-component .gap-4 { gap: 1rem; }
.admesh-component .gap-6 { gap: 1.5rem; }
.admesh-component .gap-8 { gap: 2rem; }
/* Padding utilities */
.admesh-component .p-1 { padding: 0.25rem; }
.admesh-component .p-2 { padding: 0.5rem; }
.admesh-component .p-3 { padding: 0.75rem; }
.admesh-component .p-4 { padding: 1rem; }
.admesh-component .p-5 { padding: 1.25rem; }
.admesh-component .p-6 { padding: 1.5rem; }
.admesh-component .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.admesh-component .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.admesh-component .px-4 { padding-left: 1rem; padding-right: 1rem; }
.admesh-component .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.admesh-component .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.admesh-component .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.admesh-component .pt-2 { padding-top: 0.5rem; }
.admesh-component .pt-3 { padding-top: 0.75rem; }
.admesh-component .pb-2 { padding-bottom: 0.5rem; }
.admesh-component .pb-3 { padding-bottom: 0.75rem; }
/* Margin utilities */
.admesh-component .m-0 { margin: 0; }
.admesh-component .mb-1 { margin-bottom: 0.25rem; }
.admesh-component .mb-2 { margin-bottom: 0.5rem; }
.admesh-component .mb-3 { margin-bottom: 0.75rem; }
.admesh-component .mb-4 { margin-bottom: 1rem; }
.admesh-component .mb-6 { margin-bottom: 1.5rem; }
.admesh-component .mt-1 { margin-top: 0.25rem; }
.admesh-component .mt-2 { margin-top: 0.5rem; }
.admesh-component .mt-4 { margin-top: 1rem; }
.admesh-component .mt-6 { margin-top: 1.5rem; }
.admesh-component .mt-auto { margin-top: auto; }
.admesh-component .ml-1 { margin-left: 0.25rem; }
.admesh-component .mr-1 { margin-right: 0.25rem; }
.admesh-component .mr-2 { margin-right: 0.5rem; }
/* Width and height utilities */
.admesh-component .w-2 { width: 0.5rem; }
.admesh-component .w-3 { width: 0.75rem; }
.admesh-component .w-4 { width: 1rem; }
.admesh-component .w-5 { width: 1.25rem; }
.admesh-component .w-6 { width: 1.5rem; }
.admesh-component .w-full { width: 100%; }
.admesh-component .w-fit { width: fit-content; }
.admesh-component .h-2 { height: 0.5rem; }
.admesh-component .h-3 { height: 0.75rem; }
.admesh-component .h-4 { height: 1rem; }
.admesh-component .h-5 { height: 1.25rem; }
.admesh-component .h-6 { height: 1.5rem; }
.admesh-component .h-full { height: 100%; }
.admesh-component .min-w-0 { min-width: 0px; }
/* Border utilities */
.admesh-component .border { border-width: 1px; }
.admesh-component .border-t { border-top-width: 1px; }
.admesh-component .border-gray-100 { border-color: #f3f4f6; }
.admesh-component .border-gray-200 { border-color: #e5e7eb; }
.admesh-component .border-gray-300 { border-color: #d1d5db; }
.admesh-component .border-blue-200 { border-color: #bfdbfe; }
.admesh-component .border-green-200 { border-color: #bbf7d0; }
/* Border radius utilities */
.admesh-component .rounded { border-radius: 0.25rem !important; }
.admesh-component .rounded-md { border-radius: 0.375rem !important; }
.admesh-component .rounded-lg { border-radius: 0.5rem !important; }
.admesh-component .rounded-xl { border-radius: 0.75rem !important; }
.admesh-component .rounded-full { border-radius: 9999px !important; }
/* Background utilities */
.admesh-component .bg-white { background-color: #ffffff; }
.admesh-component .bg-gray-50 { background-color: #f9fafb; }
.admesh-component .bg-gray-100 { background-color: #f3f4f6; }
.admesh-component .bg-blue-50 { background-color: #eff6ff; }
.admesh-component .bg-blue-100 { background-color: #dbeafe; }
.admesh-component .bg-green-100 { background-color: #dcfce7; }
.admesh-component .bg-green-500 { background-color: #22c55e; }
.admesh-component .bg-blue-500 { background-color: #3b82f6; }
/* Gradients */
.admesh-component .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.admesh-component .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.admesh-component .from-white { --tw-gradient-from: #ffffff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0)); }
.admesh-component .to-gray-50 { --tw-gradient-to: #f9fafb; }
.admesh-component .from-purple-500 { --tw-gradient-from: #a855f7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168, 85, 247, 0)); }
.admesh-component .to-pink-500 { --tw-gradient-to: #ec4899; }
.admesh-component .from-green-400 { --tw-gradient-from: #4ade80; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(74, 222, 128, 0)); }
.admesh-component .to-blue-500 { --tw-gradient-to: #3b82f6; }
/* Text utilities */
.admesh-component .text-xs { font-size: 0.75rem; line-height: 1rem; }
.admesh-component .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.admesh-component .text-base { font-size: 1rem; line-height: 1.5rem; }
.admesh-component .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.admesh-component .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.admesh-component .font-medium { font-weight: 500; }
.admesh-component .font-semibold { font-weight: 600; }
.admesh-component .font-bold { font-weight: 700; }
.admesh-component .leading-relaxed { line-height: 1.625; }
/* Text colors */
.admesh-component .text-white { color: #ffffff; }
.admesh-component .text-gray-400 { color: #9ca3af; }
.admesh-component .text-gray-500 { color: #6b7280; }
.admesh-component .text-gray-600 { color: #4b5563; }
.admesh-component .text-gray-700 { color: #374151; }
.admesh-component .text-gray-800 { color: #1f2937; }
.admesh-component .text-blue-600 { color: #2563eb; }
.admesh-component .text-blue-700 { color: #1d4ed8; }
.admesh-component .text-green-700 { color: #15803d; }
/* Shadow utilities */
.admesh-component .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.admesh-component .shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.admesh-component .shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.admesh-component .shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.admesh-component .shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
/* Transition utilities */
.admesh-component .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.admesh-component .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.admesh-component .duration-200 { transition-duration: 200ms; }
.admesh-component .duration-300 { transition-duration: 300ms; }
/* Transform utilities */
.admesh-component .hover\\:-translate-y-1:hover { transform: translateY(-0.25rem); }
.admesh-component .hover\\:scale-105:hover { transform: scale(1.05); }
/* Hover utilities */
.admesh-component .hover\\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.admesh-component .hover\\:bg-gray-100:hover { background-color: #f3f4f6; }
.admesh-component .hover\\:text-blue-800:hover { color: #1e40af; }
/* Cursor utilities */
.admesh-component .cursor-pointer { cursor: pointer; }
/* Overflow utilities */
.admesh-component .overflow-hidden { overflow: hidden; }
.admesh-component .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Text decoration */
.admesh-component .underline { text-decoration-line: underline; }
/* Whitespace */
.admesh-component .whitespace-nowrap { white-space: nowrap; }
/* Dark mode utilities */
@media (prefers-color-scheme: dark) {
.admesh-component .dark\\:bg-slate-800 { background-color: #1e293b; }
.admesh-component .dark\\:bg-slate-900 { background-color: #0f172a; }
.admesh-component .dark\\:border-slate-700 { border-color: #334155; }
.admesh-component .dark\\:text-white { color: #ffffff; }
.admesh-component .dark\\:text-gray-200 { color: #e5e7eb; }
.admesh-component .dark\\:text-gray-300 { color: #d1d5db; }
.admesh-component .dark\\:text-gray-400 { color: #9ca3af; }
.admesh-component .dark\\:text-blue-400 { color: #60a5fa; }
}
/* Responsive utilities */
@media (min-width: 640px) {
.admesh-component .sm\\:p-5 { padding: 1.25rem; }
.admesh-component .sm\\:text-base { font-size: 1rem; line-height: 1.5rem; }
.admesh-component .sm\\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.admesh-component .sm\\:flex-row { flex-direction: row; }
.admesh-component .sm\\:items-center { align-items: center; }
.admesh-component .sm\\:justify-between { justify-content: space-between; }
}
@media (min-width: 768px) {
.admesh-component .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.admesh-component .lg\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admesh-component .lg\\:col-span-1 { grid-column: span 1 / span 1; }
}
`;
let de = !1;
const me = () => {
O(() => {
if (de) return;
const t = document.createElement("style");
return t.id = "admesh-ui-sdk-styles", t.textContent = Re, document.getElementById("admesh-ui-sdk-styles") || (document.head.appendChild(t), de = !0), () => {
const r = document.getElementById("admesh-ui-sdk-styles");
r && document.head.contains(r) && (document.head.removeChild(r), de = !1);
};
}, []);
}, H = (t, r = {}) => {
const s = t.intent_match_score || 0, i = r.customLabels || {};
return s >= 0.8 ? i.smartPick || "Smart Pick" : s >= 0.6 ? i.partnerMatch || "Partner Match" : s >= 0.3 ? i.promotedOption || "Promoted Option" : i.relatedOption || "Related Option";
}, ae = (t, r) => {
const s = t.intent_match_score || 0;
return s >= 0.8 ? "This recommendation is from a partner who compensates us when you engage. We've matched it to your needs based on your query." : s >= 0.6 ? "Top-rated partner solution matched to your specific requirements. Partner compensates us for qualified referrals." : s >= 0.3 ? "This partner solution may be relevant to your needs. The partner compensates us when you take qualifying actions." : "This solution is somewhat related to your query. While not a perfect match, it might still be helpful. This partner compensates us for qualified referrals.";
}, Ge = (t = !0, r = !1) => t ? r ? "These curated recommendations are from partners who compensate us for referrals." : "Personalized Partner Recommendations: All results are from vetted partners who compensate us for qualified matches. We've ranked them based on relevance to your specific needs." : "Expanded Results: While these don't perfectly match your query, they're related solutions from our partner network. All partners compensate us for referrals.", xe = (t, r = !1) => {
const s = t.intent_match_score || 0;
return r ? "Promoted" : s >= 0.8 ? "Smart Recommendation" : s >= 0.6 ? "Partner Match" : "Promoted";
}, he = () => "We've partnered with trusted providers to bring you relevant solutions. These partners compensate us for qualified referrals, which helps us keep our service free.", Ae = (t) => ({
"Top Match": "Top Match",
"Smart Pick": "Smart Pick",
"Perfect Fit": "Perfect Fit",
"Great Match": "Great Match",
Recommended: "Recommended",
"Good Fit": "Good Fit",
Featured: "Featured",
"Popular Choice": "Popular Choice",
"Premium Pick": "Premium Pick",
"Free Tier": "Free Tier",
"AI Powered": "AI Powered",
Popular: "Popular",
New: "New",
"Trial Available": "Trial Available",
"Related Option": "Related Option",
"Alternative Solution": "Alternative Solution",
"Expanded Match": "Expanded Match"
})[t] || t, Ke = (t, r = "button") => {
const s = t.recommendation_title || t.title;
return r === "link" ? s : t.trial_days && t.trial_days > 0 ? `Try ${s}` : "Learn More";
}, Je = (t) => t.some((r) => (r.intent_match_score || 0) >= 0.8), Qe = (t = !1) => t ? "Powered by AdMesh" : "Recommendations powered by AdMesh", pe = ({
recommendation: t,
theme: r,
showMatchScore: s = !1,
showBadges: i = !0,
variation: n = "default",
expandable: a = !1,
className: d,
style: c
}) => {
var f, _, S, M, T, w, L, I, z, E, $, U, N;
me();
const [p, m] = R(!1), u = te(() => {
var X;
const y = [];
H(t) === "Smart Pick" && y.push("Top Match"), t.trial_days && t.trial_days > 0 && y.push("Trial Available");
const F = ["ai", "artificial intelligence", "machine learning", "ml", "automation"];
return (((X = t.keywords) == null ? void 0 : X.some(
(l) => F.some((j) => l.toLowerCase().includes(j))
)) || t.title.toLowerCase().includes("ai")) && y.push("AI Powered"), t.badges && t.badges.length > 0 && t.badges.forEach((l) => {
["Top Match", "Free Tier", "AI Powered", "Popular", "New", "Trial Available"].includes(l) && !y.includes(l) && y.push(l);
}), y;
}, [t]), x = xe(t, !1), o = he(), b = Math.round(t.intent_match_score * 100), h = (() => {
const y = t.content_variations;
return n === "simple" ? {
title: t.recommendation_title || t.title,
description: t.recommendation_description || t.description || t.reason,
ctaText: t.recommendation_title || t.title,
isSimple: !0
} : n === "question" && (y != null && y.question) ? {
title: y.question.cta || t.recommendation_title || t.title,
description: y.question.text,
ctaText: y.question.cta || t.recommendation_title || t.title
} : n === "statement" && (y != null && y.statement) ? {
title: t.recommendation_title || t.title,
description: y.statement.text,
ctaText: y.statement.cta || t.recommendation_title || t.title
} : {
title: t.recommendation_title || t.title,
description: t.recommendation_description || t.description || t.reason,
ctaText: t.recommendation_title || t.title
};
})(), g = C(
"admesh-component",
"admesh-card",
"relative p-4 sm:p-5 rounded-xl bg-gradient-to-br from-white to-gray-50 dark:from-slate-800 dark:to-slate-900 border border-gray-200/50 dark:border-slate-700/50 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1",
d
), v = r ? {
"--admesh-primary": r.primaryColor || r.accentColor || "#3b82f6",
"--admesh-secondary": r.secondaryColor || "#10b981",
"--admesh-accent": r.accentColor || "#3b82f6",
"--admesh-background": r.backgroundColor,
"--admesh-surface": r.surfaceColor,
"--admesh-border": r.borderColor,
"--admesh-text": r.textColor,
"--admesh-text-secondary": r.textSecondaryColor,
"--admesh-radius": r.borderRadius || "12px",
"--admesh-shadow-sm": (f = r.shadows) == null ? void 0 : f.small,
"--admesh-shadow-md": (_ = r.shadows) == null ? void 0 : _.medium,
"--admesh-shadow-lg": (S = r.shadows) == null ? void 0 : S.large,
"--admesh-spacing-sm": (M = r.spacing) == null ? void 0 : M.small,
"--admesh-spacing-md": (T = r.spacing) == null ? void 0 : T.medium,
"--admesh-spacing-lg": (w = r.spacing) == null ? void 0 : w.large,
"--admesh-font-size-sm": (L = r.fontSize) == null ? void 0 : L.small,
"--admesh-font-size-base": (I = r.fontSize) == null ? void 0 : I.base,
"--admesh-font-size-lg": (z = r.fontSize) == null ? void 0 : z.large,
"--admesh-font-size-title": (E = r.fontSize) == null ? void 0 : E.title,
fontFamily: r.fontFamily
} : void 0;
return n === "simple" ? /* @__PURE__ */ e.jsxs(
"div",
{
className: C(
"admesh-component admesh-simple-ad",
"inline-block text-sm leading-relaxed",
d
),
style: {
fontFamily: (r == null ? void 0 : r.fontFamily) || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
...($ = r == null ? void 0 : r.components) == null ? void 0 : $.productCard,
...c
},
"data-admesh-theme": r == null ? void 0 : r.mode,
children: [
/* @__PURE__ */ e.jsx(
"span",
{
style: {
fontSize: "11px",
fontWeight: "600",
color: (r == null ? void 0 : r.accentColor) || "#2563eb",
backgroundColor: (r == null ? void 0 : r.mode) === "dark" ? "#374151" : "#f3f4f6",
padding: "2px 6px",
borderRadius: "4px",
marginRight: "8px"
},
title: ae(t, H(t)),
children: H(t)
}
),
/* @__PURE__ */ e.jsxs(
"span",
{
style: {
color: (r == null ? void 0 : r.mode) === "dark" ? "#f3f4f6" : "#374151",
marginRight: "4px"
},
children: [
h.description,
" "
]
}
),
/* @__PURE__ */ e.jsx(
V,
{
adId: t.ad_id,
admeshLink: t.admesh_link,
productId: t.product_id,
trackingData: {
title: t.title,
matchScore: t.intent_match_score,
component: "simple_ad_cta"
},
children: /* @__PURE__ */ e.jsx(
"span",
{
style: {
color: (r == null ? void 0 : r.accentColor) || "#2563eb",
textDecoration: "underline",
cursor: "pointer",
fontSize: "inherit",
fontFamily: "inherit"
},
children: h.ctaText
}
)
}
),
/* @__PURE__ */ e.jsxs(
"span",
{
style: {
fontSize: "10px",
color: (r == null ? void 0 : r.mode) === "dark" ? "#9ca3af" : "#6b7280",
marginLeft: "8px"
},
title: o,
children: [
"(",
x,
")"
]
}
)
]
}
) : n === "question" || n === "statement" ? /* @__PURE__ */ e.jsx(
"div",
{
className: C(
"admesh-component admesh-expandable-variation transition-all duration-300",
a && p ? "p-4 sm:p-5 rounded-xl bg-gradient-to-br from-white to-gray-50 dark:from-slate-800 dark:to-slate-900 border border-gray-200/50 dark:border-slate-700/50 shadow-lg" : "p-4 rounded-lg bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 shadow-sm hover:shadow-md",
d
),
style: {
fontFamily: (r == null ? void 0 : r.fontFamily) || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
...(U = r == null ? void 0 : r.components) == null ? void 0 : U.productCard,
...c
},
"data-admesh-theme": r == null ? void 0 : r.mode,
children: !a || !p ? (
// Simple inline layout with top label (or non-expandable layout)
/* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx("div", { className: "mb-2", children: /* @__PURE__ */ e.jsx(
"span",
{
style: {
fontSize: "11px",
fontWeight: "600",
color: (r == null ? void 0 : r.accentColor) || "#2563eb",
backgroundColor: (r == null ? void 0 : r.mode) === "dark" ? "#374151" : "#f3f4f6",
padding: "2px 6px",
borderRadius: "4px"
},
title: ae(t, H(t)),
children: H(t)
}
) }),
/* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
/* @__PURE__ */ e.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ e.jsxs("p", { className: "text-sm text-gray-700 dark:text-gray-300 leading-relaxed", children: [
h.description,
" ",
/* @__PURE__ */ e.jsx(
V,
{
adId: t.ad_id,
admeshLink: t.admesh_link,
productId: t.product_id,
trackingData: {
title: t.title,
matchScore: t.intent_match_score,
component: "simple_variation_cta"
},
children: /* @__PURE__ */ e.jsx(
"span",
{
className: "text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 underline cursor-pointer font-medium transition-colors",
children: h.ctaText
}
)
}
)
] }) }),
a && /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: /* @__PURE__ */ e.jsxs(
"button",
{
onClick: () => m(!0),
className: "flex items-center gap-2 px-3 py-2 text-xs font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all duration-200 border border-blue-200 dark:border-blue-700 hover:border-blue-300 dark:hover:border-blue-600",
title: "View more details",
children: [
/* @__PURE__ */ e.jsx("span", { children: "More Details" }),
/* @__PURE__ */ e.jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
]
}
) })
] })
] })
) : (
// Expanded full card layout (same as default variation)
/* @__PURE__ */ e.jsxs(
"div",
{
className: "h-full flex flex-col",
style: v,
"data-admesh-theme": r == null ? void 0 : r.mode,
children: [
/* @__PURE__ */ e.jsxs("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3 mb-4", children: [
/* @__PURE__ */ e.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 flex-1 min-w-0", children: [
i && u.includes("Top Match") && /* @__PURE__ */ e.jsx(
"span",
{
className: "text-xs font-semibold text-white px-3 py-1 rounded-full w-fit shadow-md",
style: {
backgroundColor: (r == null ? void 0 : r.primaryColor) || (r == null ? void 0 : r.accentColor) || "#f59e0b",
borderRadius: (r == null ? void 0 : r.borderRadius) || "9999px"
},
title: ae(t),
children: Ae("Top Match")
}
),
/* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
t.product_logo && /* @__PURE__ */ e.jsx(