@syntrologie/adapt-faq 2.11.0 → 2.13.0

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.
@@ -7,54 +7,9 @@
7
7
  * Demonstrates the compositional action pattern where child actions
8
8
  * (faq:question) serve as configuration data for the parent widget.
9
9
  */
10
- import type { DecisionStrategy, FAQConfig } from './types';
11
- export interface FAQWidgetRuntime {
12
- evaluateSync: <T>(strategy: DecisionStrategy<T>) => {
13
- value: T;
14
- isFallback: boolean;
15
- };
16
- context: {
17
- subscribe: (callback: () => void) => () => void;
18
- };
19
- events: {
20
- publish: (name: string, props?: Record<string, unknown>) => void;
21
- subscribe?: (filterOrCallback: {
22
- names?: string[];
23
- patterns?: string[];
24
- sources?: string[];
25
- } | ((event: {
26
- name: string;
27
- props?: Record<string, unknown>;
28
- ts: number;
29
- }) => void), maybeCallback?: (event: {
30
- name: string;
31
- props?: Record<string, unknown>;
32
- ts: number;
33
- }) => void) => () => void;
34
- getRecent?: (filter?: {
35
- names?: string[];
36
- patterns?: string[];
37
- }, limit?: number) => Array<{
38
- name: string;
39
- props?: Record<string, unknown>;
40
- ts: number;
41
- }>;
42
- };
43
- state?: {
44
- get: (key: string) => unknown;
45
- set: (key: string, value: unknown) => void;
46
- };
47
- /** Event accumulator for reactive triggerWhen re-evaluation */
48
- accumulator?: {
49
- subscribe: (callback: () => void) => () => void;
50
- register: (key: string, predicate: (event: any) => boolean) => void;
51
- };
52
- }
53
- interface FAQWidgetProps {
54
- config: FAQConfig;
55
- runtime: FAQWidgetRuntime;
56
- instanceId: string;
57
- }
10
+ import type { FAQWidgetProps, FAQWidgetRuntime } from './faq-types';
11
+ import type { FAQConfig } from './types';
12
+ export type { FAQWidgetRuntime } from './faq-types';
58
13
  /**
59
14
  * FAQWidget - Renders a collapsible Q&A accordion with per-item activation.
60
15
  *
@@ -72,7 +27,7 @@ export declare const FAQMountableWidget: {
72
27
  mount(container: HTMLElement, config?: FAQConfig & {
73
28
  runtime?: FAQWidgetRuntime;
74
29
  instanceId?: string;
75
- }): () => void;
30
+ }): (() => void) | undefined;
76
31
  };
77
32
  export default FAQWidget;
78
33
  //# sourceMappingURL=FAQWidget.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"FAQWidget.d.ts","sourceRoot":"","sources":["../src/FAQWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AASH,OAAO,KAAK,EACV,gBAAgB,EAEhB,SAAS,EAIV,MAAM,SAAS,CAAC;AA+CjB,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC;IACtF,OAAO,EAAE;QAAE,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAA;KAAE,CAAC;IAC7D,MAAM,EAAE;QACN,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;QACjE,SAAS,CAAC,EAAE,CACV,gBAAgB,EACZ;YAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;YAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;YAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;SAAE,GAC7D,CAAC,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,CAAC,EACpF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,KAC3F,MAAM,IAAI,CAAC;QAChB,SAAS,CAAC,EAAE,CACV,MAAM,CAAC,EAAE;YAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;YAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;SAAE,EAClD,KAAK,CAAC,EAAE,MAAM,KACX,KAAK,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KAC3E,CAAC;IACF,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;QAAC,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE,CAAC;IACtF,+DAA+D;IAC/D,WAAW,CAAC,EAAE;QACZ,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;QAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,KAAK,IAAI,CAAC;KACrE,CAAC;CACH;AAED,UAAU,cAAc;IACtB,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;CACpB;AA+TD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,cAAc,2CA8VxE;AAMD;;GAEG;AACH,eAAO,MAAM,kBAAkB;qBAEhB,WAAW,WACb,SAAS,GAAG;QAAE,OAAO,CAAC,EAAE,gBAAgB,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE;CAiD3E,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"FAQWidget.d.ts","sourceRoot":"","sources":["../src/FAQWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAUH,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,KAAK,EAEV,SAAS,EAIV,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AA2KpD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,cAAc,2CA8VxE;AAMD;;GAEG;AACH,eAAO,MAAM,kBAAkB;qBAEhB,WAAW,WACb,SAAS,GAAG;QAAE,OAAO,CAAC,EAAE,gBAAgB,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE;CA4B3E,CAAC;AAEF,eAAe,SAAS,CAAC"}
package/dist/FAQWidget.js CHANGED
@@ -8,11 +8,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
8
8
  * Demonstrates the compositional action pattern where child actions
9
9
  * (faq:question) serve as configuration data for the parent widget.
10
10
  */
11
- import { purple, slateGrey } from '@syntro/design-system/tokens';
11
+ import { purple } from '@syntro/design-system/tokens';
12
12
  import { Marked } from 'marked';
13
13
  import React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
14
14
  import { createRoot } from 'react-dom/client';
15
15
  const marked = new Marked({ async: false, gfm: true, breaks: true });
16
+ import { baseStyles, themeStyles } from './faq-styles';
16
17
  // ============================================================================
17
18
  // Helpers
18
19
  // ============================================================================
@@ -27,7 +28,10 @@ function getAnswerText(answer) {
27
28
  /** Render an FAQAnswer based on its type */
28
29
  function renderAnswer(answer) {
29
30
  if (typeof answer === 'string') {
30
- return _jsx("p", { style: { margin: 0 }, children: answer });
31
+ const html = marked.parse(answer);
32
+ return (
33
+ // biome-ignore lint/security/noDangerouslySetInnerHtml: content is CMS/config content, not user-controlled input
34
+ _jsx("div", { style: { margin: 0 }, "data-faq-markdown": "", dangerouslySetInnerHTML: { __html: html } }));
31
35
  }
32
36
  if (answer.type === 'rich') {
33
37
  // biome-ignore lint/security/noDangerouslySetInnerHtml: content is pre-sanitized by backend — FAQAnswer.html is CMS/config content, not user-controlled input
@@ -52,200 +56,6 @@ function resolveFeedbackConfig(feedback) {
52
56
  function getFeedbackPrompt(feedbackConfig) {
53
57
  return feedbackConfig.prompt || 'Was this helpful?';
54
58
  }
55
- // ============================================================================
56
- // Styles
57
- // ============================================================================
58
- const baseStyles = {
59
- container: {
60
- fontFamily: 'var(--sc-font-family, system-ui, -apple-system, sans-serif)',
61
- maxWidth: '800px',
62
- margin: '0 auto',
63
- },
64
- searchWrapper: {
65
- marginBottom: '8px',
66
- },
67
- searchInput: {
68
- width: '100%',
69
- padding: '12px 16px',
70
- borderRadius: '8px',
71
- fontSize: '14px',
72
- outline: 'none',
73
- transition: 'border-color 0.15s ease',
74
- backgroundColor: 'var(--sc-content-search-background)',
75
- color: 'var(--sc-content-search-color)',
76
- },
77
- accordion: {
78
- display: 'flex',
79
- flexDirection: 'column',
80
- gap: 'var(--sc-content-item-gap, 6px)',
81
- },
82
- item: {
83
- borderRadius: 'var(--sc-content-border-radius, 8px)',
84
- overflow: 'hidden',
85
- transition: 'box-shadow 0.15s ease',
86
- },
87
- question: {
88
- width: '100%',
89
- padding: 'var(--sc-content-item-padding, 12px 16px)',
90
- display: 'flex',
91
- alignItems: 'center',
92
- justifyContent: 'space-between',
93
- border: 'none',
94
- cursor: 'pointer',
95
- fontSize: 'var(--sc-content-item-font-size, 15px)',
96
- fontWeight: 500,
97
- textAlign: 'left',
98
- transition: 'background-color 0.15s ease',
99
- },
100
- chevron: {
101
- fontSize: '20px',
102
- transition: 'transform 0.2s ease',
103
- color: 'var(--sc-content-chevron-color, currentColor)',
104
- },
105
- answer: {
106
- padding: 'var(--sc-content-body-padding, 0 16px 12px 16px)',
107
- fontSize: 'var(--sc-content-body-font-size, 14px)',
108
- lineHeight: 1.6,
109
- overflow: 'hidden',
110
- transition: 'max-height 0.2s ease, padding 0.2s ease',
111
- },
112
- category: {
113
- display: 'inline-block',
114
- fontSize: '11px',
115
- fontWeight: 600,
116
- textTransform: 'uppercase',
117
- letterSpacing: '0.05em',
118
- padding: '4px 8px',
119
- borderRadius: '4px',
120
- marginBottom: '8px',
121
- },
122
- categoryHeader: {
123
- fontSize: 'var(--sc-content-category-font-size, 12px)',
124
- fontWeight: 700,
125
- textTransform: 'uppercase',
126
- letterSpacing: '0.05em',
127
- padding: 'var(--sc-content-category-padding, 8px 4px 4px 4px)',
128
- marginTop: 'var(--sc-content-category-gap, 4px)',
129
- },
130
- feedback: {
131
- display: 'flex',
132
- alignItems: 'center',
133
- gap: '8px',
134
- marginTop: '12px',
135
- paddingTop: '10px',
136
- borderTop: '1px solid rgba(0, 0, 0, 0.08)',
137
- fontSize: '13px',
138
- },
139
- feedbackButton: {
140
- background: 'none',
141
- border: '1px solid transparent',
142
- cursor: 'pointer',
143
- fontSize: '16px',
144
- padding: '4px 8px',
145
- borderRadius: '4px',
146
- transition: 'background-color 0.15s ease, border-color 0.15s ease',
147
- },
148
- feedbackButtonSelected: {
149
- borderColor: 'rgba(0, 0, 0, 0.2)',
150
- backgroundColor: 'rgba(0, 0, 0, 0.04)',
151
- },
152
- emptyState: {
153
- textAlign: 'center',
154
- padding: '48px 24px',
155
- fontSize: '14px',
156
- },
157
- noResults: {
158
- textAlign: 'center',
159
- padding: '32px 16px',
160
- fontSize: '14px',
161
- },
162
- };
163
- const themeStyles = {
164
- light: {
165
- container: {
166
- backgroundColor: 'transparent',
167
- color: 'inherit',
168
- },
169
- searchInput: {
170
- border: `1px solid ${slateGrey[11]}`,
171
- },
172
- item: {
173
- backgroundColor: 'var(--sc-content-background)',
174
- borderTop: 'var(--sc-content-border)',
175
- borderRight: 'var(--sc-content-border)',
176
- borderBottom: 'var(--sc-content-border)',
177
- borderLeft: 'var(--sc-content-border)',
178
- },
179
- itemExpanded: {
180
- boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
181
- },
182
- question: {
183
- backgroundColor: 'transparent',
184
- color: 'var(--sc-content-text-color)',
185
- },
186
- questionHover: {
187
- backgroundColor: 'var(--sc-content-background-hover)',
188
- },
189
- answer: {
190
- color: 'var(--sc-content-text-secondary-color)',
191
- },
192
- category: {
193
- backgroundColor: purple[8],
194
- color: purple[2],
195
- },
196
- categoryHeader: {
197
- color: slateGrey[7],
198
- },
199
- emptyState: {
200
- color: slateGrey[8],
201
- },
202
- feedbackPrompt: {
203
- color: slateGrey[7],
204
- },
205
- },
206
- dark: {
207
- container: {
208
- backgroundColor: 'transparent',
209
- color: 'inherit',
210
- },
211
- searchInput: {
212
- border: `1px solid ${slateGrey[5]}`,
213
- },
214
- item: {
215
- backgroundColor: 'var(--sc-content-background)',
216
- borderTop: 'var(--sc-content-border)',
217
- borderRight: 'var(--sc-content-border)',
218
- borderBottom: 'var(--sc-content-border)',
219
- borderLeft: 'var(--sc-content-border)',
220
- },
221
- itemExpanded: {
222
- boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
223
- },
224
- question: {
225
- backgroundColor: 'transparent',
226
- color: 'var(--sc-content-text-color)',
227
- },
228
- questionHover: {
229
- backgroundColor: 'var(--sc-content-background-hover)',
230
- },
231
- answer: {
232
- color: 'var(--sc-content-text-secondary-color)',
233
- },
234
- category: {
235
- backgroundColor: purple[0],
236
- color: purple[6],
237
- },
238
- categoryHeader: {
239
- color: slateGrey[8],
240
- },
241
- emptyState: {
242
- color: slateGrey[7],
243
- },
244
- feedbackPrompt: {
245
- color: slateGrey[8],
246
- },
247
- },
248
- };
249
59
  function FAQItem({ item, isExpanded, isHighlighted, isLast, onToggle, theme, feedbackConfig, feedbackValue, onFeedback, }) {
250
60
  const [isHovered, setIsHovered] = useState(false);
251
61
  const colors = themeStyles[theme];
@@ -256,7 +66,8 @@ function FAQItem({ item, isExpanded, isHighlighted, isLast, onToggle, theme, fee
256
66
  ...(isExpanded ? colors.itemExpanded : {}),
257
67
  ...(isHighlighted
258
68
  ? {
259
- boxShadow: '0 0 0 2px #6366f1, 0 0 12px rgba(99, 102, 241, 0.4)',
69
+ // purple[4] = #6a59ce design system primary purple
70
+ boxShadow: `0 0 0 2px ${purple[4]}, 0 0 12px rgba(106, 89, 206, 0.4)`,
260
71
  transition: 'box-shadow 0.3s ease',
261
72
  }
262
73
  : {}),
@@ -413,7 +224,7 @@ export function FAQWidget({ config, runtime, instanceId }) {
413
224
  }, [runtime, instanceId]);
414
225
  // Filter visible questions based on per-item triggerWhen
415
226
  // biome-ignore lint/correctness/useExhaustiveDependencies: renderTick is intentionally included to force re-evaluation when the runtime's mutable context changes (subscribed above via forceUpdate)
416
- const visibleQuestions = useMemo(() => config.actions.filter((q) => {
227
+ const visibleQuestions = useMemo(() => (config.actions ?? []).filter((q) => {
417
228
  // No triggerWhen = always visible
418
229
  if (!q.triggerWhen)
419
230
  return true;
@@ -559,23 +370,6 @@ export const FAQMountableWidget = {
559
370
  root.unmount();
560
371
  };
561
372
  }
562
- // HTML fallback when React is not available
563
- const questions = faqConfig.actions || [];
564
- container.innerHTML = `
565
- <div style="font-family: system-ui; max-width: 800px;">
566
- ${questions
567
- .map((q) => `
568
- <div style="margin-bottom: 8px; padding: 16px; background: ${slateGrey[12]}; border-radius: 8px;">
569
- <strong>${q.config.question}</strong>
570
- <p style="margin-top: 8px; color: ${slateGrey[6]};">${getAnswerText(q.config.answer)}</p>
571
- </div>
572
- `)
573
- .join('')}
574
- </div>
575
- `;
576
- return () => {
577
- container.innerHTML = '';
578
- };
579
373
  },
580
374
  };
581
375
  export default FAQWidget;
package/dist/cdn.d.ts CHANGED
@@ -29,9 +29,9 @@ export declare const manifest: {
29
29
  id: string;
30
30
  component: {
31
31
  mount(container: HTMLElement, config?: import("./types").FAQConfig & {
32
- runtime?: import("./FAQWidget").FAQWidgetRuntime;
32
+ runtime?: import("./faq-types").FAQWidgetRuntime;
33
33
  instanceId?: string;
34
- }): () => void;
34
+ }): (() => void) | undefined;
35
35
  };
36
36
  metadata: {
37
37
  name: string;
package/dist/cdn.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"cdn.d.ts","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,SAA0B,MAAM,UAAU,CAAC;AAGlD;;;GAGG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;2BAoCiouB,CAAC;8BAA8B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAtB3puB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;;CAQjD,CAAC;AAaF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"cdn.d.ts","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,SAA0B,MAAM,UAAU,CAAC;AAGlD;;;GAGG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;2BAoCg4iB,CAAC;8BAA8B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAtB15iB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;;CAQjD,CAAC;AAaF,eAAe,QAAQ,CAAC"}
@@ -0,0 +1,198 @@
1
+ /**
2
+ * Adaptive FAQ - Styles
3
+ *
4
+ * BaseStyles object (font, layout, colors, animations) and theme integration
5
+ * for the FAQWidget component.
6
+ */
7
+ export declare const baseStyles: {
8
+ readonly container: {
9
+ readonly fontFamily: "var(--sc-font-family, system-ui, -apple-system, sans-serif)";
10
+ readonly maxWidth: "800px";
11
+ readonly margin: "0 auto";
12
+ };
13
+ readonly searchWrapper: {
14
+ readonly marginBottom: "8px";
15
+ };
16
+ readonly searchInput: {
17
+ readonly width: "100%";
18
+ readonly padding: "12px 16px";
19
+ readonly borderRadius: "8px";
20
+ readonly fontSize: "14px";
21
+ readonly outline: "none";
22
+ readonly transition: "border-color 0.15s ease";
23
+ readonly backgroundColor: "var(--sc-content-search-background)";
24
+ readonly color: "var(--sc-content-search-color)";
25
+ };
26
+ readonly accordion: {
27
+ readonly display: "flex";
28
+ readonly flexDirection: "column";
29
+ readonly gap: "var(--sc-content-item-gap, 6px)";
30
+ };
31
+ readonly item: {
32
+ readonly borderRadius: "var(--sc-content-border-radius, 8px)";
33
+ readonly overflow: "hidden";
34
+ readonly transition: "box-shadow 0.15s ease";
35
+ };
36
+ readonly question: {
37
+ readonly width: "100%";
38
+ readonly padding: "var(--sc-content-item-padding, 12px 16px)";
39
+ readonly display: "flex";
40
+ readonly alignItems: "center";
41
+ readonly justifyContent: "space-between";
42
+ readonly border: "none";
43
+ readonly cursor: "pointer";
44
+ readonly fontSize: "var(--sc-content-item-font-size, 15px)";
45
+ readonly fontWeight: 500;
46
+ readonly textAlign: "left";
47
+ readonly transition: "background-color 0.15s ease";
48
+ };
49
+ readonly chevron: {
50
+ readonly fontSize: "20px";
51
+ readonly transition: "transform 0.2s ease";
52
+ readonly color: "var(--sc-content-chevron-color, currentColor)";
53
+ };
54
+ readonly answer: {
55
+ readonly padding: "var(--sc-content-body-padding, 0 16px 12px 16px)";
56
+ readonly fontSize: "var(--sc-content-body-font-size, 14px)";
57
+ readonly lineHeight: 1.6;
58
+ readonly overflow: "hidden";
59
+ readonly transition: "max-height 0.2s ease, padding 0.2s ease";
60
+ };
61
+ readonly category: {
62
+ readonly display: "inline-block";
63
+ readonly fontSize: "11px";
64
+ readonly fontWeight: 600;
65
+ readonly textTransform: "uppercase";
66
+ readonly letterSpacing: "0.05em";
67
+ readonly padding: "4px 8px";
68
+ readonly borderRadius: "4px";
69
+ readonly marginBottom: "8px";
70
+ };
71
+ readonly categoryHeader: {
72
+ readonly fontSize: "var(--sc-content-category-font-size, 12px)";
73
+ readonly fontWeight: 700;
74
+ readonly textTransform: "uppercase";
75
+ readonly letterSpacing: "0.05em";
76
+ readonly padding: "var(--sc-content-category-padding, 8px 4px 4px 4px)";
77
+ readonly marginTop: "var(--sc-content-category-gap, 4px)";
78
+ };
79
+ readonly feedback: {
80
+ readonly display: "flex";
81
+ readonly alignItems: "center";
82
+ readonly gap: "8px";
83
+ readonly marginTop: "12px";
84
+ readonly paddingTop: "10px";
85
+ readonly borderTop: "1px solid rgba(0, 0, 0, 0.08)";
86
+ readonly fontSize: "13px";
87
+ };
88
+ readonly feedbackButton: {
89
+ readonly background: "none";
90
+ readonly border: "1px solid transparent";
91
+ readonly cursor: "pointer";
92
+ readonly fontSize: "16px";
93
+ readonly padding: "4px 8px";
94
+ readonly borderRadius: "4px";
95
+ readonly transition: "background-color 0.15s ease, border-color 0.15s ease";
96
+ };
97
+ readonly feedbackButtonSelected: {
98
+ readonly borderColor: "rgba(0, 0, 0, 0.2)";
99
+ readonly backgroundColor: "rgba(0, 0, 0, 0.04)";
100
+ };
101
+ readonly emptyState: {
102
+ readonly textAlign: "center";
103
+ readonly padding: "48px 24px";
104
+ readonly fontSize: "14px";
105
+ };
106
+ readonly noResults: {
107
+ readonly textAlign: "center";
108
+ readonly padding: "32px 16px";
109
+ readonly fontSize: "14px";
110
+ };
111
+ };
112
+ export declare const themeStyles: {
113
+ light: {
114
+ container: {
115
+ backgroundColor: string;
116
+ color: string;
117
+ };
118
+ searchInput: {
119
+ border: string;
120
+ };
121
+ item: {
122
+ backgroundColor: string;
123
+ borderTop: string;
124
+ borderRight: string;
125
+ borderBottom: string;
126
+ borderLeft: string;
127
+ };
128
+ itemExpanded: {
129
+ boxShadow: string;
130
+ };
131
+ question: {
132
+ backgroundColor: string;
133
+ color: string;
134
+ };
135
+ questionHover: {
136
+ backgroundColor: string;
137
+ };
138
+ answer: {
139
+ color: string;
140
+ };
141
+ category: {
142
+ backgroundColor: "#e1def5";
143
+ color: "#40357c";
144
+ };
145
+ categoryHeader: {
146
+ color: "#677384";
147
+ };
148
+ emptyState: {
149
+ color: "#87919f";
150
+ };
151
+ feedbackPrompt: {
152
+ color: "#677384";
153
+ };
154
+ };
155
+ dark: {
156
+ container: {
157
+ backgroundColor: string;
158
+ color: string;
159
+ };
160
+ searchInput: {
161
+ border: string;
162
+ };
163
+ item: {
164
+ backgroundColor: string;
165
+ borderTop: string;
166
+ borderRight: string;
167
+ borderBottom: string;
168
+ borderLeft: string;
169
+ };
170
+ itemExpanded: {
171
+ boxShadow: string;
172
+ };
173
+ question: {
174
+ backgroundColor: string;
175
+ color: string;
176
+ };
177
+ questionHover: {
178
+ backgroundColor: string;
179
+ };
180
+ answer: {
181
+ color: string;
182
+ };
183
+ category: {
184
+ backgroundColor: "#151229";
185
+ color: "#a69be2";
186
+ };
187
+ categoryHeader: {
188
+ color: "#87919f";
189
+ };
190
+ emptyState: {
191
+ color: "#677384";
192
+ };
193
+ feedbackPrompt: {
194
+ color: "#87919f";
195
+ };
196
+ };
197
+ };
198
+ //# sourceMappingURL=faq-styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"faq-styles.d.ts","sourceRoot":"","sources":["../src/faq-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAQH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGb,CAAC;AAMX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFvB,CAAC"}