@informedai/react 0.4.24 → 0.4.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +199 -24
  2. package/dist/index.mjs +199 -24
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -2472,6 +2472,168 @@ function MatchCard({ match, theme }) {
2472
2472
  const name = match.name || "Match";
2473
2473
  const score = match.score;
2474
2474
  const reasons = match.matchReasons || [];
2475
+ const cardMarkerStr = match.cardMarker;
2476
+ const parsedCard = cardMarkerStr ? parseCardMarker(cardMarkerStr) : null;
2477
+ const cardData = parsedCard ? extractCardDisplayData(parsedCard) : null;
2478
+ if (cardData) {
2479
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2480
+ "div",
2481
+ {
2482
+ style: {
2483
+ border: "1px solid #e5e7eb",
2484
+ borderRadius: "8px",
2485
+ overflow: "hidden",
2486
+ backgroundColor: "#fff"
2487
+ },
2488
+ children: [
2489
+ cardData.imageUrl && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2490
+ "div",
2491
+ {
2492
+ style: {
2493
+ width: "100%",
2494
+ height: "140px",
2495
+ backgroundColor: "#f3f4f6",
2496
+ overflow: "hidden"
2497
+ },
2498
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2499
+ "img",
2500
+ {
2501
+ src: cardData.imageUrl,
2502
+ alt: cardData.title,
2503
+ style: {
2504
+ width: "100%",
2505
+ height: "100%",
2506
+ objectFit: "cover"
2507
+ },
2508
+ onError: (e) => {
2509
+ e.target.style.display = "none";
2510
+ }
2511
+ }
2512
+ )
2513
+ }
2514
+ ),
2515
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { padding: "12px" }, children: [
2516
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "6px" }, children: [
2517
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2518
+ "div",
2519
+ {
2520
+ style: {
2521
+ display: "inline-block",
2522
+ fontSize: "10px",
2523
+ fontWeight: 600,
2524
+ textTransform: "uppercase",
2525
+ letterSpacing: "0.5px",
2526
+ color: theme.primaryColor,
2527
+ backgroundColor: `${theme.primaryColor}15`,
2528
+ padding: "2px 6px",
2529
+ borderRadius: "4px"
2530
+ },
2531
+ children: parsedCard.type
2532
+ }
2533
+ ),
2534
+ score != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2535
+ "div",
2536
+ {
2537
+ style: {
2538
+ fontSize: "11px",
2539
+ fontWeight: 600,
2540
+ color: theme.primaryColor,
2541
+ backgroundColor: `${theme.primaryColor}15`,
2542
+ padding: "2px 8px",
2543
+ borderRadius: "10px"
2544
+ },
2545
+ children: [
2546
+ score,
2547
+ "%"
2548
+ ]
2549
+ }
2550
+ )
2551
+ ] }),
2552
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2553
+ "div",
2554
+ {
2555
+ style: {
2556
+ fontSize: "15px",
2557
+ fontWeight: 600,
2558
+ color: "#1f2937",
2559
+ marginBottom: "4px",
2560
+ lineHeight: "1.3"
2561
+ },
2562
+ children: cardData.title
2563
+ }
2564
+ ),
2565
+ cardData.subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2566
+ "div",
2567
+ {
2568
+ style: {
2569
+ fontSize: "13px",
2570
+ color: "#6b7280",
2571
+ marginBottom: "6px"
2572
+ },
2573
+ children: cardData.subtitle
2574
+ }
2575
+ ),
2576
+ cardData.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2577
+ "div",
2578
+ {
2579
+ style: {
2580
+ fontSize: "13px",
2581
+ color: "#4b5563",
2582
+ lineHeight: "1.4",
2583
+ marginBottom: "8px"
2584
+ },
2585
+ children: cardData.description
2586
+ }
2587
+ ),
2588
+ cardData.actionUrl && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2589
+ "a",
2590
+ {
2591
+ href: cardData.actionUrl,
2592
+ target: "_blank",
2593
+ rel: "noopener noreferrer",
2594
+ style: {
2595
+ display: "inline-flex",
2596
+ alignItems: "center",
2597
+ gap: "4px",
2598
+ fontSize: "13px",
2599
+ fontWeight: 500,
2600
+ color: theme.primaryColor,
2601
+ textDecoration: "none",
2602
+ padding: "6px 12px",
2603
+ borderRadius: "6px",
2604
+ backgroundColor: `${theme.primaryColor}10`,
2605
+ marginBottom: "8px"
2606
+ },
2607
+ children: [
2608
+ cardData.actionLabel || "View",
2609
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
2610
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
2611
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "15 3 21 3 21 9" }),
2612
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
2613
+ ] })
2614
+ ]
2615
+ }
2616
+ ),
2617
+ reasons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px", marginTop: cardData.actionUrl ? "0" : "4px" }, children: reasons.map((reason, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2618
+ "span",
2619
+ {
2620
+ style: {
2621
+ fontSize: "11px",
2622
+ color: "#4b5563",
2623
+ backgroundColor: "#f3f4f6",
2624
+ padding: "3px 8px",
2625
+ borderRadius: "10px",
2626
+ lineHeight: "1.3"
2627
+ },
2628
+ children: reason
2629
+ },
2630
+ i
2631
+ )) })
2632
+ ] })
2633
+ ]
2634
+ }
2635
+ );
2636
+ }
2475
2637
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2476
2638
  "div",
2477
2639
  {
@@ -2502,7 +2664,21 @@ function MatchCard({ match, theme }) {
2502
2664
  }
2503
2665
  )
2504
2666
  ] }),
2505
- reasons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "13px", color: "#6b7280", lineHeight: "1.4" }, children: reasons.join(" \u2022 ") })
2667
+ reasons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px", marginTop: "4px" }, children: reasons.map((reason, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2668
+ "span",
2669
+ {
2670
+ style: {
2671
+ fontSize: "11px",
2672
+ color: "#4b5563",
2673
+ backgroundColor: "#f3f4f6",
2674
+ padding: "3px 8px",
2675
+ borderRadius: "10px",
2676
+ lineHeight: "1.3"
2677
+ },
2678
+ children: reason
2679
+ },
2680
+ i
2681
+ )) })
2506
2682
  ] })
2507
2683
  }
2508
2684
  );
@@ -3020,7 +3196,7 @@ function SmartQuestionnaire({ className, ...config }) {
3020
3196
  }
3021
3197
  ) }),
3022
3198
  phase === "results" && matches && matches.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px", maxWidth: "90%" }, children: matches.map((match, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MatchCard, { match, theme }, i)) }),
3023
- showOptions && currentStep.options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "6px", maxWidth: "85%" }, children: currentStep.multiSelect ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
3199
+ showOptions && currentStep.options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "6px", maxWidth: "90%" }, children: currentStep.multiSelect ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
3024
3200
  currentStep.options.map((opt) => {
3025
3201
  const isSelected = multiSelectChoices.has(opt);
3026
3202
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -3033,16 +3209,16 @@ function SmartQuestionnaire({ className, ...config }) {
3033
3209
  setMultiSelectChoices(next);
3034
3210
  },
3035
3211
  style: {
3036
- padding: "8px 14px",
3212
+ padding: "6px 12px",
3037
3213
  borderRadius: "8px",
3038
- border: `1.5px solid ${isSelected ? theme.primaryColor : "#d1d5db"}`,
3039
- backgroundColor: isSelected ? `${theme.primaryColor}10` : "white",
3040
- color: isSelected ? theme.primaryColor : "#374151",
3041
- fontSize: "13px",
3214
+ border: "none",
3215
+ backgroundColor: isSelected ? `${theme.primaryColor}20` : "#f5f5f5",
3216
+ color: isSelected ? theme.primaryColor : "#525252",
3217
+ fontSize: "12px",
3218
+ fontWeight: 500,
3042
3219
  cursor: "pointer",
3043
- textAlign: "left",
3044
3220
  fontFamily: "var(--sq-font)",
3045
- transition: "all 0.15s ease"
3221
+ transition: "all 0.15s"
3046
3222
  },
3047
3223
  children: [
3048
3224
  isSelected ? "\u2611 " : "\u2610 ",
@@ -3057,16 +3233,15 @@ function SmartQuestionnaire({ className, ...config }) {
3057
3233
  {
3058
3234
  onClick: handleMultiSelectConfirm,
3059
3235
  style: {
3060
- padding: "8px 14px",
3236
+ padding: "6px 12px",
3061
3237
  borderRadius: "8px",
3062
3238
  border: "none",
3063
3239
  backgroundColor: "var(--sq-primary)",
3064
3240
  color: "white",
3065
- fontSize: "13px",
3241
+ fontSize: "12px",
3066
3242
  fontWeight: 600,
3067
3243
  cursor: "pointer",
3068
- fontFamily: "var(--sq-font)",
3069
- marginTop: "4px"
3244
+ fontFamily: "var(--sq-font)"
3070
3245
  },
3071
3246
  children: [
3072
3247
  "Confirm (",
@@ -3080,24 +3255,24 @@ function SmartQuestionnaire({ className, ...config }) {
3080
3255
  {
3081
3256
  onClick: () => handleOptionClick(opt),
3082
3257
  style: {
3083
- padding: "8px 14px",
3258
+ padding: "6px 12px",
3084
3259
  borderRadius: "8px",
3085
- border: "1.5px solid #d1d5db",
3086
- backgroundColor: "white",
3087
- color: "#374151",
3088
- fontSize: "13px",
3260
+ border: "none",
3261
+ backgroundColor: "#f5f5f5",
3262
+ color: "#525252",
3263
+ fontSize: "12px",
3264
+ fontWeight: 500,
3089
3265
  cursor: "pointer",
3090
- textAlign: "left",
3091
3266
  fontFamily: "var(--sq-font)",
3092
- transition: "all 0.15s ease"
3267
+ transition: "all 0.15s"
3093
3268
  },
3094
3269
  onMouseEnter: (e) => {
3095
- e.currentTarget.style.borderColor = theme.primaryColor || "#8b5cf6";
3096
- e.currentTarget.style.backgroundColor = `${theme.primaryColor}08`;
3270
+ e.currentTarget.style.backgroundColor = `${theme.primaryColor}20`;
3271
+ e.currentTarget.style.color = theme.primaryColor || "#8b5cf6";
3097
3272
  },
3098
3273
  onMouseLeave: (e) => {
3099
- e.currentTarget.style.borderColor = "#d1d5db";
3100
- e.currentTarget.style.backgroundColor = "white";
3274
+ e.currentTarget.style.backgroundColor = "#f5f5f5";
3275
+ e.currentTarget.style.color = "#525252";
3101
3276
  },
3102
3277
  children: opt
3103
3278
  },
package/dist/index.mjs CHANGED
@@ -2439,6 +2439,168 @@ function MatchCard({ match, theme }) {
2439
2439
  const name = match.name || "Match";
2440
2440
  const score = match.score;
2441
2441
  const reasons = match.matchReasons || [];
2442
+ const cardMarkerStr = match.cardMarker;
2443
+ const parsedCard = cardMarkerStr ? parseCardMarker(cardMarkerStr) : null;
2444
+ const cardData = parsedCard ? extractCardDisplayData(parsedCard) : null;
2445
+ if (cardData) {
2446
+ return /* @__PURE__ */ jsxs4(
2447
+ "div",
2448
+ {
2449
+ style: {
2450
+ border: "1px solid #e5e7eb",
2451
+ borderRadius: "8px",
2452
+ overflow: "hidden",
2453
+ backgroundColor: "#fff"
2454
+ },
2455
+ children: [
2456
+ cardData.imageUrl && /* @__PURE__ */ jsx5(
2457
+ "div",
2458
+ {
2459
+ style: {
2460
+ width: "100%",
2461
+ height: "140px",
2462
+ backgroundColor: "#f3f4f6",
2463
+ overflow: "hidden"
2464
+ },
2465
+ children: /* @__PURE__ */ jsx5(
2466
+ "img",
2467
+ {
2468
+ src: cardData.imageUrl,
2469
+ alt: cardData.title,
2470
+ style: {
2471
+ width: "100%",
2472
+ height: "100%",
2473
+ objectFit: "cover"
2474
+ },
2475
+ onError: (e) => {
2476
+ e.target.style.display = "none";
2477
+ }
2478
+ }
2479
+ )
2480
+ }
2481
+ ),
2482
+ /* @__PURE__ */ jsxs4("div", { style: { padding: "12px" }, children: [
2483
+ /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "6px" }, children: [
2484
+ /* @__PURE__ */ jsx5(
2485
+ "div",
2486
+ {
2487
+ style: {
2488
+ display: "inline-block",
2489
+ fontSize: "10px",
2490
+ fontWeight: 600,
2491
+ textTransform: "uppercase",
2492
+ letterSpacing: "0.5px",
2493
+ color: theme.primaryColor,
2494
+ backgroundColor: `${theme.primaryColor}15`,
2495
+ padding: "2px 6px",
2496
+ borderRadius: "4px"
2497
+ },
2498
+ children: parsedCard.type
2499
+ }
2500
+ ),
2501
+ score != null && /* @__PURE__ */ jsxs4(
2502
+ "div",
2503
+ {
2504
+ style: {
2505
+ fontSize: "11px",
2506
+ fontWeight: 600,
2507
+ color: theme.primaryColor,
2508
+ backgroundColor: `${theme.primaryColor}15`,
2509
+ padding: "2px 8px",
2510
+ borderRadius: "10px"
2511
+ },
2512
+ children: [
2513
+ score,
2514
+ "%"
2515
+ ]
2516
+ }
2517
+ )
2518
+ ] }),
2519
+ /* @__PURE__ */ jsx5(
2520
+ "div",
2521
+ {
2522
+ style: {
2523
+ fontSize: "15px",
2524
+ fontWeight: 600,
2525
+ color: "#1f2937",
2526
+ marginBottom: "4px",
2527
+ lineHeight: "1.3"
2528
+ },
2529
+ children: cardData.title
2530
+ }
2531
+ ),
2532
+ cardData.subtitle && /* @__PURE__ */ jsx5(
2533
+ "div",
2534
+ {
2535
+ style: {
2536
+ fontSize: "13px",
2537
+ color: "#6b7280",
2538
+ marginBottom: "6px"
2539
+ },
2540
+ children: cardData.subtitle
2541
+ }
2542
+ ),
2543
+ cardData.description && /* @__PURE__ */ jsx5(
2544
+ "div",
2545
+ {
2546
+ style: {
2547
+ fontSize: "13px",
2548
+ color: "#4b5563",
2549
+ lineHeight: "1.4",
2550
+ marginBottom: "8px"
2551
+ },
2552
+ children: cardData.description
2553
+ }
2554
+ ),
2555
+ cardData.actionUrl && /* @__PURE__ */ jsxs4(
2556
+ "a",
2557
+ {
2558
+ href: cardData.actionUrl,
2559
+ target: "_blank",
2560
+ rel: "noopener noreferrer",
2561
+ style: {
2562
+ display: "inline-flex",
2563
+ alignItems: "center",
2564
+ gap: "4px",
2565
+ fontSize: "13px",
2566
+ fontWeight: 500,
2567
+ color: theme.primaryColor,
2568
+ textDecoration: "none",
2569
+ padding: "6px 12px",
2570
+ borderRadius: "6px",
2571
+ backgroundColor: `${theme.primaryColor}10`,
2572
+ marginBottom: "8px"
2573
+ },
2574
+ children: [
2575
+ cardData.actionLabel || "View",
2576
+ /* @__PURE__ */ jsxs4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
2577
+ /* @__PURE__ */ jsx5("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
2578
+ /* @__PURE__ */ jsx5("polyline", { points: "15 3 21 3 21 9" }),
2579
+ /* @__PURE__ */ jsx5("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
2580
+ ] })
2581
+ ]
2582
+ }
2583
+ ),
2584
+ reasons.length > 0 && /* @__PURE__ */ jsx5("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px", marginTop: cardData.actionUrl ? "0" : "4px" }, children: reasons.map((reason, i) => /* @__PURE__ */ jsx5(
2585
+ "span",
2586
+ {
2587
+ style: {
2588
+ fontSize: "11px",
2589
+ color: "#4b5563",
2590
+ backgroundColor: "#f3f4f6",
2591
+ padding: "3px 8px",
2592
+ borderRadius: "10px",
2593
+ lineHeight: "1.3"
2594
+ },
2595
+ children: reason
2596
+ },
2597
+ i
2598
+ )) })
2599
+ ] })
2600
+ ]
2601
+ }
2602
+ );
2603
+ }
2442
2604
  return /* @__PURE__ */ jsx5(
2443
2605
  "div",
2444
2606
  {
@@ -2469,7 +2631,21 @@ function MatchCard({ match, theme }) {
2469
2631
  }
2470
2632
  )
2471
2633
  ] }),
2472
- reasons.length > 0 && /* @__PURE__ */ jsx5("div", { style: { fontSize: "13px", color: "#6b7280", lineHeight: "1.4" }, children: reasons.join(" \u2022 ") })
2634
+ reasons.length > 0 && /* @__PURE__ */ jsx5("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px", marginTop: "4px" }, children: reasons.map((reason, i) => /* @__PURE__ */ jsx5(
2635
+ "span",
2636
+ {
2637
+ style: {
2638
+ fontSize: "11px",
2639
+ color: "#4b5563",
2640
+ backgroundColor: "#f3f4f6",
2641
+ padding: "3px 8px",
2642
+ borderRadius: "10px",
2643
+ lineHeight: "1.3"
2644
+ },
2645
+ children: reason
2646
+ },
2647
+ i
2648
+ )) })
2473
2649
  ] })
2474
2650
  }
2475
2651
  );
@@ -2987,7 +3163,7 @@ function SmartQuestionnaire({ className, ...config }) {
2987
3163
  }
2988
3164
  ) }),
2989
3165
  phase === "results" && matches && matches.length > 0 && /* @__PURE__ */ jsx5("div", { style: { display: "flex", flexDirection: "column", gap: "8px", maxWidth: "90%" }, children: matches.map((match, i) => /* @__PURE__ */ jsx5(MatchCard, { match, theme }, i)) }),
2990
- showOptions && currentStep.options.length > 0 && /* @__PURE__ */ jsx5("div", { style: { display: "flex", flexDirection: "column", gap: "6px", maxWidth: "85%" }, children: currentStep.multiSelect ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
3166
+ showOptions && currentStep.options.length > 0 && /* @__PURE__ */ jsx5("div", { style: { display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "6px", maxWidth: "90%" }, children: currentStep.multiSelect ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
2991
3167
  currentStep.options.map((opt) => {
2992
3168
  const isSelected = multiSelectChoices.has(opt);
2993
3169
  return /* @__PURE__ */ jsxs4(
@@ -3000,16 +3176,16 @@ function SmartQuestionnaire({ className, ...config }) {
3000
3176
  setMultiSelectChoices(next);
3001
3177
  },
3002
3178
  style: {
3003
- padding: "8px 14px",
3179
+ padding: "6px 12px",
3004
3180
  borderRadius: "8px",
3005
- border: `1.5px solid ${isSelected ? theme.primaryColor : "#d1d5db"}`,
3006
- backgroundColor: isSelected ? `${theme.primaryColor}10` : "white",
3007
- color: isSelected ? theme.primaryColor : "#374151",
3008
- fontSize: "13px",
3181
+ border: "none",
3182
+ backgroundColor: isSelected ? `${theme.primaryColor}20` : "#f5f5f5",
3183
+ color: isSelected ? theme.primaryColor : "#525252",
3184
+ fontSize: "12px",
3185
+ fontWeight: 500,
3009
3186
  cursor: "pointer",
3010
- textAlign: "left",
3011
3187
  fontFamily: "var(--sq-font)",
3012
- transition: "all 0.15s ease"
3188
+ transition: "all 0.15s"
3013
3189
  },
3014
3190
  children: [
3015
3191
  isSelected ? "\u2611 " : "\u2610 ",
@@ -3024,16 +3200,15 @@ function SmartQuestionnaire({ className, ...config }) {
3024
3200
  {
3025
3201
  onClick: handleMultiSelectConfirm,
3026
3202
  style: {
3027
- padding: "8px 14px",
3203
+ padding: "6px 12px",
3028
3204
  borderRadius: "8px",
3029
3205
  border: "none",
3030
3206
  backgroundColor: "var(--sq-primary)",
3031
3207
  color: "white",
3032
- fontSize: "13px",
3208
+ fontSize: "12px",
3033
3209
  fontWeight: 600,
3034
3210
  cursor: "pointer",
3035
- fontFamily: "var(--sq-font)",
3036
- marginTop: "4px"
3211
+ fontFamily: "var(--sq-font)"
3037
3212
  },
3038
3213
  children: [
3039
3214
  "Confirm (",
@@ -3047,24 +3222,24 @@ function SmartQuestionnaire({ className, ...config }) {
3047
3222
  {
3048
3223
  onClick: () => handleOptionClick(opt),
3049
3224
  style: {
3050
- padding: "8px 14px",
3225
+ padding: "6px 12px",
3051
3226
  borderRadius: "8px",
3052
- border: "1.5px solid #d1d5db",
3053
- backgroundColor: "white",
3054
- color: "#374151",
3055
- fontSize: "13px",
3227
+ border: "none",
3228
+ backgroundColor: "#f5f5f5",
3229
+ color: "#525252",
3230
+ fontSize: "12px",
3231
+ fontWeight: 500,
3056
3232
  cursor: "pointer",
3057
- textAlign: "left",
3058
3233
  fontFamily: "var(--sq-font)",
3059
- transition: "all 0.15s ease"
3234
+ transition: "all 0.15s"
3060
3235
  },
3061
3236
  onMouseEnter: (e) => {
3062
- e.currentTarget.style.borderColor = theme.primaryColor || "#8b5cf6";
3063
- e.currentTarget.style.backgroundColor = `${theme.primaryColor}08`;
3237
+ e.currentTarget.style.backgroundColor = `${theme.primaryColor}20`;
3238
+ e.currentTarget.style.color = theme.primaryColor || "#8b5cf6";
3064
3239
  },
3065
3240
  onMouseLeave: (e) => {
3066
- e.currentTarget.style.borderColor = "#d1d5db";
3067
- e.currentTarget.style.backgroundColor = "white";
3241
+ e.currentTarget.style.backgroundColor = "#f5f5f5";
3242
+ e.currentTarget.style.color = "#525252";
3068
3243
  },
3069
3244
  children: opt
3070
3245
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@informedai/react",
3
- "version": "0.4.24",
3
+ "version": "0.4.26",
4
4
  "description": "React SDK for InformedAI Assistant - AI-powered content creation widget",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",