@syntrologie/adapt-faq 2.11.0 → 2.12.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.
- package/dist/FAQWidget.d.ts +4 -49
- package/dist/FAQWidget.d.ts.map +1 -1
- package/dist/FAQWidget.js +9 -215
- package/dist/cdn.d.ts +2 -2
- package/dist/cdn.d.ts.map +1 -1
- package/dist/faq-styles.d.ts +198 -0
- package/dist/faq-styles.d.ts.map +1 -0
- package/dist/faq-styles.js +204 -0
- package/dist/faq-types.d.ts +55 -0
- package/dist/faq-types.d.ts.map +1 -0
- package/dist/faq-types.js +7 -0
- package/dist/runtime.d.ts +2 -2
- package/dist/runtime.d.ts.map +1 -1
- package/dist/schema.d.ts +84 -84
- package/node_modules/@syntrologie/sdk-contracts/package.json +2 -2
- package/node_modules/marked/LICENSE.md +44 -0
- package/node_modules/marked/README.md +107 -0
- package/node_modules/marked/bin/main.js +283 -0
- package/node_modules/marked/bin/marked.js +16 -0
- package/node_modules/marked/lib/marked.d.ts +759 -0
- package/node_modules/marked/lib/marked.esm.js +72 -0
- package/node_modules/marked/lib/marked.esm.js.map +7 -0
- package/node_modules/marked/lib/marked.umd.js +74 -0
- package/node_modules/marked/lib/marked.umd.js.map +7 -0
- package/node_modules/marked/man/marked.1 +113 -0
- package/node_modules/marked/man/marked.1.md +93 -0
- package/node_modules/marked/package.json +103 -0
- package/package.json +13 -13
package/dist/FAQWidget.d.ts
CHANGED
|
@@ -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 {
|
|
11
|
-
|
|
12
|
-
|
|
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
|
package/dist/FAQWidget.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FAQWidget.d.ts","sourceRoot":"","sources":["../src/FAQWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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("./
|
|
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;;;;;;;;;;;;;;;;;;;;
|
|
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"}
|