@ably/ui 17.13.0-dev.de27db52 → 17.13.1
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/AGENTS.md +337 -0
- package/core/Accordion/types.js.map +1 -1
- package/core/Accordion.js +1 -1
- package/core/Accordion.js.map +1 -1
- package/core/Expander.js +1 -1
- package/core/Expander.js.map +1 -1
- package/core/Icon/components/icon-display-ephemeral-messages-dark-col.js +2 -0
- package/core/Icon/components/icon-display-ephemeral-messages-dark-col.js.map +1 -0
- package/core/Icon/components/icon-display-message-annotations-dark-col.js +2 -0
- package/core/Icon/components/icon-display-message-annotations-dark-col.js.map +1 -0
- package/core/Icon/components/icon-gui-checklist-checked.js +1 -1
- package/core/Icon/components/icon-gui-checklist-checked.js.map +1 -1
- package/core/Icon/components/icon-gui-code-doc.js +1 -1
- package/core/Icon/components/icon-gui-code-doc.js.map +1 -1
- package/core/Icon/components/icon-gui-cursor.js +1 -1
- package/core/Icon/components/icon-gui-cursor.js.map +1 -1
- package/core/Icon/components/icon-gui-expand.js +1 -1
- package/core/Icon/components/icon-gui-expand.js.map +1 -1
- package/core/Icon/components/icon-gui-filter-flow-step-0.js +1 -1
- package/core/Icon/components/icon-gui-filter-flow-step-0.js.map +1 -1
- package/core/Icon/components/icon-gui-flower-growth.js +1 -1
- package/core/Icon/components/icon-gui-flower-growth.js.map +1 -1
- package/core/Icon/components/icon-gui-glasses.js +1 -1
- package/core/Icon/components/icon-gui-glasses.js.map +1 -1
- package/core/Icon/components/icon-gui-mouse.js +1 -1
- package/core/Icon/components/icon-gui-mouse.js.map +1 -1
- package/core/Icon/components/icon-gui-pitfall.js +1 -1
- package/core/Icon/components/icon-gui-pitfall.js.map +1 -1
- package/core/Icon/components/icon-gui-quote-marks-fill.js +1 -1
- package/core/Icon/components/icon-gui-quote-marks-fill.js.map +1 -1
- package/core/Icon/components/index.js +1 -1
- package/core/Icon/components/index.js.map +1 -1
- package/core/Icon/computed-icons/display-icons.js +1 -1
- package/core/Icon/computed-icons/display-icons.js.map +1 -1
- package/core/hooks/use-content-height.js +1 -1
- package/core/hooks/use-content-height.js.map +1 -1
- package/core/hooks/use-themed-scrollpoints.js +1 -1
- package/core/hooks/use-themed-scrollpoints.js.map +1 -1
- package/core/hooks/use-themed-scrollpoints.test.js +1 -1
- package/core/hooks/use-themed-scrollpoints.test.js.map +1 -1
- package/core/icons/display/icon-display-ephemeral-messages-dark-col.svg +6 -0
- package/core/icons/display/icon-display-message-annotations-dark-col.svg +11 -0
- package/core/icons/gui/icon-gui-checklist-checked.svg +1 -1
- package/core/icons/gui/icon-gui-code-doc.svg +1 -1
- package/core/icons/gui/icon-gui-cursor.svg +1 -1
- package/core/icons/gui/icon-gui-expand.svg +1 -1
- package/core/icons/gui/icon-gui-filter-flow-step-0.svg +3 -3
- package/core/icons/gui/icon-gui-flower-growth.svg +1 -1
- package/core/icons/gui/icon-gui-glasses.svg +1 -1
- package/core/icons/gui/icon-gui-mouse.svg +1 -1
- package/core/icons/gui/icon-gui-pitfall.svg +1 -1
- package/core/icons/gui/icon-gui-quote-marks-fill.svg +2 -2
- package/core/insights/posthog.js +1 -1
- package/core/insights/posthog.js.map +1 -1
- package/core/sprites-display.svg +1 -1
- package/core/sprites-gui.svg +1 -1
- package/index.d.ts +38 -13
- package/package.json +8 -8
- package/core/CookieMessage/component.css +0 -15
- package/core/CookieMessage.js +0 -2
- package/core/CookieMessage.js.map +0 -1
package/AGENTS.md
CHANGED
|
@@ -39,6 +39,34 @@ This project is intended to primarily be consumed by the Ably website, voltaire
|
|
|
39
39
|
- **Error Handling**: Wrap external service calls in try-catch, log with logger module
|
|
40
40
|
- **Comments**: JSDoc for props, inline comments for complex logic
|
|
41
41
|
|
|
42
|
+
### Custom Hooks
|
|
43
|
+
|
|
44
|
+
- **Naming**: `use` prefix with descriptive name (e.g., `useContentHeight`, `useThemedScrollpoints`)
|
|
45
|
+
- **JSDoc**: Always include for custom hooks, especially performance-related ones
|
|
46
|
+
- **Parameters**: Document with `@param` including types and defaults
|
|
47
|
+
- **Returns**: Document with `@returns` including type and semantic meaning
|
|
48
|
+
- **Performance rationale**: Include "why" in JSDoc when optimizing (e.g., "eliminates forced reflows")
|
|
49
|
+
- **Cleanup**: Always return cleanup function to prevent memory leaks
|
|
50
|
+
- **Shared constants**: Import from `src/core/utils/heights.ts` instead of duplicating
|
|
51
|
+
|
|
52
|
+
Example:
|
|
53
|
+
|
|
54
|
+
```typescript
|
|
55
|
+
/**
|
|
56
|
+
* Tracks element height using ResizeObserver to avoid forced reflows.
|
|
57
|
+
*
|
|
58
|
+
* @param ref - React ref to the element to observe
|
|
59
|
+
* @param initialHeight - Initial height value (default: 0)
|
|
60
|
+
* @returns Current height in pixels
|
|
61
|
+
*/
|
|
62
|
+
export function useContentHeight(
|
|
63
|
+
ref: RefObject<HTMLElement>,
|
|
64
|
+
initialHeight = 0,
|
|
65
|
+
): number {
|
|
66
|
+
// Implementation...
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
42
70
|
Keep emojis in the code to a minimum, only introduce them if there is precedent
|
|
43
71
|
in the file you're working on.
|
|
44
72
|
|
|
@@ -51,6 +79,9 @@ this is a given for how we work.
|
|
|
51
79
|
files in CI and don't want preventable failures. `pnpm lint:fix` should also
|
|
52
80
|
apply our formatting rules while trying to fix most things for you
|
|
53
81
|
- Run tests with `pnpm test` after making file changes
|
|
82
|
+
- When testing with Storybook, use Chrome DevTools Performance tab to verify no forced reflows
|
|
83
|
+
- For performance-related changes, compare before/after metrics and include in commit/PR
|
|
84
|
+
- Use Chrome MCP at `http://localhost:6006` (Storybook) or `http://localhost:4000` (Voltaire) for visual verification
|
|
54
85
|
|
|
55
86
|
## Styling Guide
|
|
56
87
|
|
|
@@ -188,6 +219,312 @@ Here's a complete button component demonstrating all patterns:
|
|
|
188
219
|
>
|
|
189
220
|
```
|
|
190
221
|
|
|
222
|
+
## Performance Optimization Guidelines
|
|
223
|
+
|
|
224
|
+
### When to Optimize
|
|
225
|
+
|
|
226
|
+
Optimize when Chrome DevTools Performance profiling shows:
|
|
227
|
+
|
|
228
|
+
- Forced reflows/layouts in event handlers (scroll, resize, input)
|
|
229
|
+
- Long tasks blocking the main thread (>50ms)
|
|
230
|
+
- CPU throttling causing device overheating (especially iOS)
|
|
231
|
+
|
|
232
|
+
Common anti-patterns causing forced reflows:
|
|
233
|
+
|
|
234
|
+
- `getBoundingClientRect()` in scroll/resize handlers
|
|
235
|
+
- `clientHeight/scrollHeight/offsetHeight` reads during interactions
|
|
236
|
+
- Synchronous layout queries followed by style changes
|
|
237
|
+
- DOM queries inside throttled/debounced callbacks
|
|
238
|
+
|
|
239
|
+
### Observer API Patterns
|
|
240
|
+
|
|
241
|
+
#### IntersectionObserver (Scroll Position Detection)
|
|
242
|
+
|
|
243
|
+
Use for detecting when elements enter/exit viewport or cross specific boundaries.
|
|
244
|
+
|
|
245
|
+
**Example:** Header theme changes based on which section is visible
|
|
246
|
+
|
|
247
|
+
**Key patterns:**
|
|
248
|
+
|
|
249
|
+
```typescript
|
|
250
|
+
const observerRef = useRef<IntersectionObserver | null>(null);
|
|
251
|
+
const intersectingElementsRef = useRef<Map<string, IntersectionObserverEntry>>(new Map());
|
|
252
|
+
|
|
253
|
+
useEffect(() => {
|
|
254
|
+
const intersectingElements = intersectingElementsRef.current;
|
|
255
|
+
|
|
256
|
+
observerRef.current = new IntersectionObserver(
|
|
257
|
+
(entries) => {
|
|
258
|
+
requestAnimationFrame(() => {
|
|
259
|
+
// Update tracking map
|
|
260
|
+
for (const entry of entries) {
|
|
261
|
+
if (entry.isIntersecting) {
|
|
262
|
+
intersectingElements.set(entry.target.id, entry);
|
|
263
|
+
} else {
|
|
264
|
+
intersectingElements.delete(entry.target.id);
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
// Find best match from ALL intersecting elements
|
|
269
|
+
// (observer only reports changes, not all intersecting)
|
|
270
|
+
let bestMatch = null;
|
|
271
|
+
for (const [id, entry] of intersectingElements) {
|
|
272
|
+
const rect = entry.boundingClientRect ?? entry.target.getBoundingClientRect();
|
|
273
|
+
// Calculate match quality...
|
|
274
|
+
if (isBetterMatch) bestMatch = {...};
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
// Only update state if changed
|
|
278
|
+
if (bestMatch && bestMatch.value !== previousValueRef.current) {
|
|
279
|
+
previousValueRef.current = bestMatch.value;
|
|
280
|
+
setState(bestMatch.value);
|
|
281
|
+
}
|
|
282
|
+
});
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
rootMargin: "-64px 0px 0px 0px", // Adjust for fixed header
|
|
286
|
+
threshold: 0,
|
|
287
|
+
}
|
|
288
|
+
);
|
|
289
|
+
|
|
290
|
+
// Observe elements
|
|
291
|
+
elements.forEach(el => observerRef.current?.observe(el));
|
|
292
|
+
|
|
293
|
+
// CRITICAL: Manual initial state check
|
|
294
|
+
// IntersectionObserver callbacks only fire on CHANGES, not initial observation
|
|
295
|
+
const timeoutId = setTimeout(() => {
|
|
296
|
+
// Check which elements currently intersect
|
|
297
|
+
// Set initial state
|
|
298
|
+
}, 0);
|
|
299
|
+
|
|
300
|
+
return () => {
|
|
301
|
+
clearTimeout(timeoutId);
|
|
302
|
+
observerRef.current?.disconnect();
|
|
303
|
+
observerRef.current = null;
|
|
304
|
+
intersectingElements.clear();
|
|
305
|
+
};
|
|
306
|
+
}, [deps]);
|
|
307
|
+
```
|
|
308
|
+
|
|
309
|
+
**Critical points:**
|
|
310
|
+
|
|
311
|
+
- Observer only reports state CHANGES, not all intersecting elements
|
|
312
|
+
- Use Map to track currently intersecting elements
|
|
313
|
+
- Manual initial check with `setTimeout(..., 0)` required
|
|
314
|
+
- Batch updates with `requestAnimationFrame()`
|
|
315
|
+
- Track previous value to skip redundant setState
|
|
316
|
+
- **Tiebreaker logic**: When multiple elements have equal distances, use array order (earlier in array wins)
|
|
317
|
+
- Clean up timeout, observer, and Map
|
|
318
|
+
|
|
319
|
+
**Tiebreaker pattern:**
|
|
320
|
+
|
|
321
|
+
```typescript
|
|
322
|
+
// When distances are equal, use scrollpoints array order
|
|
323
|
+
if (
|
|
324
|
+
!bestMatch ||
|
|
325
|
+
distance < bestMatch.distance ||
|
|
326
|
+
(distance === bestMatch.distance && scrollpointIndex < bestMatch.index)
|
|
327
|
+
) {
|
|
328
|
+
bestMatch = { scrollpoint, distance, index: scrollpointIndex };
|
|
329
|
+
}
|
|
330
|
+
```
|
|
331
|
+
|
|
332
|
+
**Why this matters:** In Voltaire, both `meganav` (transparent) and `main-theme-dark` (with border) start at position 0, giving identical distances. Without a tiebreaker, the header unpredictably showed the border. Array order ensures `meganav` (listed first) always wins.
|
|
333
|
+
|
|
334
|
+
#### ResizeObserver (Height/Size Tracking)
|
|
335
|
+
|
|
336
|
+
Use for tracking element dimensions without synchronous layout reads.
|
|
337
|
+
|
|
338
|
+
**Example:** Expander content height for expand/collapse animations
|
|
339
|
+
|
|
340
|
+
**Key patterns:**
|
|
341
|
+
|
|
342
|
+
```typescript
|
|
343
|
+
const rafIdRef = useRef<number | null>(null);
|
|
344
|
+
const observerRef = useRef<ResizeObserver | null>(null);
|
|
345
|
+
|
|
346
|
+
useEffect(() => {
|
|
347
|
+
let isMounted = true;
|
|
348
|
+
|
|
349
|
+
observerRef.current = new ResizeObserver((entries) => {
|
|
350
|
+
// Cancel any pending RAF to avoid stale updates
|
|
351
|
+
if (rafIdRef.current !== null) {
|
|
352
|
+
cancelAnimationFrame(rafIdRef.current);
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
rafIdRef.current = requestAnimationFrame(() => {
|
|
356
|
+
rafIdRef.current = null;
|
|
357
|
+
|
|
358
|
+
// Guard against updates after unmount
|
|
359
|
+
if (!isMounted) return;
|
|
360
|
+
|
|
361
|
+
const entry = entries[0];
|
|
362
|
+
if (entry && entry.contentRect) {
|
|
363
|
+
const newHeight = Math.round(entry.contentRect.height);
|
|
364
|
+
setState(newHeight);
|
|
365
|
+
}
|
|
366
|
+
});
|
|
367
|
+
});
|
|
368
|
+
|
|
369
|
+
observerRef.current.observe(element);
|
|
370
|
+
|
|
371
|
+
return () => {
|
|
372
|
+
isMounted = false;
|
|
373
|
+
// Cancel pending RAF to prevent setState after unmount
|
|
374
|
+
if (rafIdRef.current !== null) {
|
|
375
|
+
cancelAnimationFrame(rafIdRef.current);
|
|
376
|
+
rafIdRef.current = null;
|
|
377
|
+
}
|
|
378
|
+
observerRef.current?.disconnect();
|
|
379
|
+
observerRef.current = null;
|
|
380
|
+
};
|
|
381
|
+
}, [ref]);
|
|
382
|
+
```
|
|
383
|
+
|
|
384
|
+
**Critical points:**
|
|
385
|
+
|
|
386
|
+
- Always capture RAF ID and cancel on cleanup
|
|
387
|
+
- Use `isMounted` flag to guard setState calls
|
|
388
|
+
- Cancel pending RAF before scheduling new one
|
|
389
|
+
- ResizeObserver doesn't need initial check (fires immediately on observe)
|
|
390
|
+
- Round numeric values for consistency
|
|
391
|
+
|
|
392
|
+
### Testing Async Hooks
|
|
393
|
+
|
|
394
|
+
#### Setup Pattern
|
|
395
|
+
|
|
396
|
+
```typescript
|
|
397
|
+
describe("useMyHook", () => {
|
|
398
|
+
let originalIntersectionObserver: typeof IntersectionObserver;
|
|
399
|
+
let originalRequestAnimationFrame: typeof requestAnimationFrame;
|
|
400
|
+
|
|
401
|
+
beforeEach(() => {
|
|
402
|
+
vi.useFakeTimers();
|
|
403
|
+
|
|
404
|
+
// CRITICAL: Save originals BEFORE mocking
|
|
405
|
+
originalIntersectionObserver = global.IntersectionObserver;
|
|
406
|
+
originalRequestAnimationFrame = global.requestAnimationFrame;
|
|
407
|
+
|
|
408
|
+
// Mock global APIs
|
|
409
|
+
global.IntersectionObserver = vi.fn((callback) => ({
|
|
410
|
+
observe: vi.fn(),
|
|
411
|
+
disconnect: vi.fn(),
|
|
412
|
+
})) as unknown as typeof IntersectionObserver;
|
|
413
|
+
|
|
414
|
+
global.requestAnimationFrame = vi.fn((cb) => {
|
|
415
|
+
cb(0);
|
|
416
|
+
return 0;
|
|
417
|
+
});
|
|
418
|
+
});
|
|
419
|
+
|
|
420
|
+
afterEach(() => {
|
|
421
|
+
vi.clearAllMocks();
|
|
422
|
+
vi.useRealTimers();
|
|
423
|
+
document.body.innerHTML = "";
|
|
424
|
+
|
|
425
|
+
// CRITICAL: Restore originals to prevent test pollution
|
|
426
|
+
global.IntersectionObserver = originalIntersectionObserver;
|
|
427
|
+
global.requestAnimationFrame = originalRequestAnimationFrame;
|
|
428
|
+
});
|
|
429
|
+
});
|
|
430
|
+
```
|
|
431
|
+
|
|
432
|
+
#### Testing Observer Callbacks
|
|
433
|
+
|
|
434
|
+
```typescript
|
|
435
|
+
it("updates state when observer fires", () => {
|
|
436
|
+
const elem = document.createElement("div");
|
|
437
|
+
elem.id = "test";
|
|
438
|
+
elem.getBoundingClientRect = vi.fn().mockReturnValue({ top: 0, bottom: 200 });
|
|
439
|
+
document.body.appendChild(elem);
|
|
440
|
+
|
|
441
|
+
const { result } = renderHook(() => useMyHook());
|
|
442
|
+
|
|
443
|
+
// Advance timers for initial check
|
|
444
|
+
act(() => {
|
|
445
|
+
vi.runAllTimers();
|
|
446
|
+
});
|
|
447
|
+
|
|
448
|
+
// Simulate observer callback
|
|
449
|
+
act(() => {
|
|
450
|
+
observerCallback(
|
|
451
|
+
[
|
|
452
|
+
{
|
|
453
|
+
target: elem,
|
|
454
|
+
isIntersecting: true,
|
|
455
|
+
boundingClientRect: {
|
|
456
|
+
top: 0,
|
|
457
|
+
bottom: 200,
|
|
458
|
+
left: 0,
|
|
459
|
+
right: 0,
|
|
460
|
+
x: 0,
|
|
461
|
+
y: 0,
|
|
462
|
+
width: 0,
|
|
463
|
+
height: 200,
|
|
464
|
+
},
|
|
465
|
+
} as unknown as IntersectionObserverEntry,
|
|
466
|
+
],
|
|
467
|
+
{} as IntersectionObserver,
|
|
468
|
+
);
|
|
469
|
+
});
|
|
470
|
+
|
|
471
|
+
expect(result.current).toBe("expected-value");
|
|
472
|
+
});
|
|
473
|
+
```
|
|
474
|
+
|
|
475
|
+
**Key points:**
|
|
476
|
+
|
|
477
|
+
- Mock `getBoundingClientRect` on test elements
|
|
478
|
+
- Provide `boundingClientRect` in IntersectionObserverEntry mocks
|
|
479
|
+
- Wrap timer advances and callback calls in `act()`
|
|
480
|
+
- Test both initial state and subsequent updates
|
|
481
|
+
|
|
482
|
+
### Common Pitfalls Checklist
|
|
483
|
+
|
|
484
|
+
When writing performance-optimized hooks:
|
|
485
|
+
|
|
486
|
+
- [ ] RAF cleanup: Store ID, cancel in cleanup
|
|
487
|
+
- [ ] isMounted guard: Prevent setState after unmount
|
|
488
|
+
- [ ] Initial state check: Manual check for IntersectionObserver
|
|
489
|
+
- [ ] Previous value tracking: Skip redundant setState
|
|
490
|
+
- [ ] Map/Set cleanup: Clear in cleanup function
|
|
491
|
+
- [ ] Test mock restoration: Save originals, restore in afterEach
|
|
492
|
+
- [ ] Console warnings: For missing DOM elements (not errors)
|
|
493
|
+
- [ ] Tiebreaker logic: When multiple candidates have equal scores
|
|
494
|
+
|
|
495
|
+
## Storybook Development
|
|
496
|
+
|
|
497
|
+
### Testing Interactive Components
|
|
498
|
+
|
|
499
|
+
- Use `http://localhost:6006` when developing/testing components
|
|
500
|
+
- Create stories that simulate production patterns (e.g., overlapping scrollpoints like Voltaire)
|
|
501
|
+
- Test edge cases in stories (empty arrays, missing DOM elements, rapid state changes)
|
|
502
|
+
|
|
503
|
+
### Performance Testing in Storybook
|
|
504
|
+
|
|
505
|
+
1. Open Chrome DevTools → Performance tab
|
|
506
|
+
2. Start recording while interacting with component
|
|
507
|
+
3. Search for forced reflow indicators:
|
|
508
|
+
- `getBoundingClientRect`
|
|
509
|
+
- `clientHeight`/`scrollHeight`/`offsetHeight`
|
|
510
|
+
- "Forced reflow" warnings
|
|
511
|
+
4. Measure total time in layout/reflow (should be <5ms for interactions)
|
|
512
|
+
|
|
513
|
+
### Simulating Production Patterns
|
|
514
|
+
|
|
515
|
+
When creating stories for layout-dependent components, replicate real-world scenarios:
|
|
516
|
+
|
|
517
|
+
Example - Overlapping scrollpoints (like Voltaire):
|
|
518
|
+
|
|
519
|
+
```tsx
|
|
520
|
+
<div className="relative">
|
|
521
|
+
<div id="hero" className="absolute top-0 h-32" />
|
|
522
|
+
<div id="main" className="relative pt-32 h-screen" />
|
|
523
|
+
</div>
|
|
524
|
+
```
|
|
525
|
+
|
|
526
|
+
This allows testing tiebreaker logic and initial state detection. Storybook stories should replicate production layout patterns to catch bugs like the tiebreaker issue. The original simple sequential zones didn't expose the Voltaire bug where elements start at the same position.
|
|
527
|
+
|
|
191
528
|
## Git workflow
|
|
192
529
|
|
|
193
530
|
- Always do work on a new branch, start the branch on the HEAD of `origin/main`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/Accordion/types.ts"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { IconName, IconSize } from \"../Icon/types\";\nimport { ColorThemeSet } from \"../styles/colors/types\";\n\n/**\n * Represents the data structure for an Accordion component.\n */\nexport type AccordionData = {\n /**\n * The name of the accordion item.\n */\n name: string;\n\n /**\n * The optional icon name to be displayed alongside the accordion item.\n */\n icon?: IconName | AccordionIcon;\n\n /**\n * The content to be displayed when the accordion item is expanded.\n */\n content: ReactNode;\n\n /**\n * Optional click handler function that is called when the accordion item is clicked.\n * @param index - The index of the clicked accordion item.\n */\n onClick?: (index: number) => void;\n\n /**\n * Indicates whether the accordion item is interactive.\n * When false, the item cannot be expanded or collapsed by user interaction.\n * @default true\n */\n interactive?: boolean;\n};\n\nexport type AccordionIcon = {\n name: IconName;\n css?: string;\n};\n\nexport type AccordionIcons = {\n closed: AccordionIcon;\n open: AccordionIcon;\n};\n\nexport const accordionThemes = [\"default\", \"transparent\", \"static\"] as const;\n\nexport type AccordionTheme = (typeof accordionThemes)[number];\n\n/**\n * Represents the theme colors for an accordion component.\n */\nexport type AccordionThemeColors = {\n /**\n * Background color class for the accordion.\n */\n bg: ColorThemeSet;\n\n /**\n * Background color when the accordion item is hovered.\n */\n hoverBg: ColorThemeSet;\n\n /**\n * Text color class for the accordion.\n */\n text: ColorThemeSet;\n\n /**\n * Color class for the toggle icon of the accordion.\n */\n toggleIconColor: ColorThemeSet;\n\n /**\n * Optional background color class for selectable accordion items.\n */\n selectableBg?: ColorThemeSet;\n\n /**\n * Optional text color class for selectable accordion items.\n */\n selectableText?: ColorThemeSet;\n\n /**\n * Optional border color for the accordion.\n */\n border?: string;\n};\n\n/**\n * Options for configuring the Accordion component.\n */\nexport type AccordionOptions = {\n /**\n * If true, only one accordion item can be open at a time.\n * @default false\n */\n autoClose?: boolean;\n\n /**\n * If true, accordion items can be selected.\n * @default false\n */\n selectable?: boolean;\n\n /**\n * If true, the accordion header will stick to the top when scrolling.\n * @default false\n */\n sticky?: boolean;\n\n /**\n * An array of indexes indicating which accordion items should be open by default.\n * @default []\n */\n defaultOpenIndexes?: number[];\n\n /**\n * If true, all accordion items will be fully open.\n * @default false\n */\n fullyOpen?: boolean;\n\n /**\n * Custom CSS class to apply to the accordion header.\n * @default \"\"\n */\n headerCSS?: string;\n\n /**\n * If true, borders between accordion items will be hidden.\n * @default false\n */\n hideBorders?: boolean;\n\n /**\n * Size of the row icon.\n * @default \"32px\"\n */\n rowIconSize?: IconSize;\n\n /**\n * Size of the accordion icon.\n * @default \"16px\"\n */\n iconSize?: IconSize;\n\n /**\n * Custom CSS classes to apply to the selected accordion header.\n * @default \"\"\n */\n selectedHeaderCSS?: string;\n\n /**\n * Custom CSS classes to apply to the accordion content.\n * @default \"\"\n */\n contentCSS?: string;\n};\n"],"names":["accordionThemes"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/core/Accordion/types.ts"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { IconName, IconSize } from \"../Icon/types\";\nimport { ColorThemeSet } from \"../styles/colors/types\";\n\n/**\n * Represents the data structure for an Accordion component.\n */\nexport type AccordionData = {\n /**\n * The name of the accordion item.\n */\n name: string;\n\n /**\n * Custom heading content. If provided, this will be used instead of `name`.\n * Can be a ReactNode or a function that receives the index and isOpen state\n * and returns ReactNode.\n */\n heading?: ReactNode | ((index: number, isOpen: boolean) => ReactNode);\n\n /**\n * The optional icon name to be displayed alongside the accordion item.\n */\n icon?: IconName | AccordionIcon;\n\n /**\n * The content to be displayed when the accordion item is expanded.\n */\n content: ReactNode;\n\n /**\n * Optional click handler function that is called when the accordion item is clicked.\n * @param index - The index of the clicked accordion item.\n */\n onClick?: (index: number) => void;\n\n /**\n * Indicates whether the accordion item is interactive.\n * When false, the item cannot be expanded or collapsed by user interaction.\n * @default true\n */\n interactive?: boolean;\n};\n\nexport type AccordionIcon = {\n name: IconName;\n css?: string;\n};\n\nexport type AccordionIcons = {\n closed: AccordionIcon;\n open: AccordionIcon;\n};\n\nexport const accordionThemes = [\"default\", \"transparent\", \"static\"] as const;\n\nexport type AccordionTheme = (typeof accordionThemes)[number];\n\n/**\n * Represents the theme colors for an accordion component.\n */\nexport type AccordionThemeColors = {\n /**\n * Background color class for the accordion.\n */\n bg: ColorThemeSet;\n\n /**\n * Background color when the accordion item is hovered.\n */\n hoverBg: ColorThemeSet;\n\n /**\n * Text color class for the accordion.\n */\n text: ColorThemeSet;\n\n /**\n * Color class for the toggle icon of the accordion.\n */\n toggleIconColor: ColorThemeSet;\n\n /**\n * Optional background color class for selectable accordion items.\n */\n selectableBg?: ColorThemeSet;\n\n /**\n * Optional text color class for selectable accordion items.\n */\n selectableText?: ColorThemeSet;\n\n /**\n * Optional border color for the accordion.\n */\n border?: string;\n};\n\n/**\n * Options for configuring the Accordion component.\n */\nexport type AccordionOptions = {\n /**\n * If true, only one accordion item can be open at a time.\n * @default false\n */\n autoClose?: boolean;\n\n /**\n * If true, accordion items can be selected.\n * @default false\n */\n selectable?: boolean;\n\n /**\n * If true, the accordion header will stick to the top when scrolling.\n * @default false\n */\n sticky?: boolean;\n\n /**\n * An array of indexes indicating which accordion items should be open by default.\n * @default []\n */\n defaultOpenIndexes?: number[];\n\n /**\n * If true, all accordion items will be fully open.\n * @default false\n */\n fullyOpen?: boolean;\n\n /**\n * Custom CSS class to apply to the accordion header.\n * @default \"\"\n */\n headerCSS?: string;\n\n /**\n * If true, borders between accordion items will be hidden.\n * @default false\n */\n hideBorders?: boolean;\n\n /**\n * Size of the row icon.\n * @default \"32px\"\n */\n rowIconSize?: IconSize;\n\n /**\n * Size of the accordion icon.\n * @default \"16px\"\n */\n iconSize?: IconSize;\n\n /**\n * Custom CSS classes to apply to the selected accordion header.\n * @default \"\"\n */\n selectedHeaderCSS?: string;\n\n /**\n * Custom CSS classes to apply to the accordion content.\n * @default \"\"\n */\n contentCSS?: string;\n\n /**\n * Custom CSS classes to apply to the accordion item wrapper when it is open/active.\n * @default \"\"\n */\n selectedItemCSS?: string;\n};\n"],"names":["accordionThemes"],"mappings":"AAsDA,OAAO,MAAMA,gBAAkB,CAAC,UAAW,cAAe,SAAS,AAAU"}
|
package/core/Accordion.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{useMemo,useState,forwardRef,useEffect}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues,rowInteractive=true})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;return React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none":true,"px-4 mb-4 rounded-lg":isNonTransparentTheme(theme),"px-0 rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-base":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?React.createElement(Icon,{name:typeof rowIcon==="object"?rowIcon.name:rowIcon,color:textClass,additionalCSS:typeof rowIcon==="object"&&rowIcon.css?rowIcon.css:"",size:options?.rowIconSize??"32px"}):null,
|
|
1
|
+
import React,{useMemo,useState,forwardRef,useEffect}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,heading,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues,rowInteractive=true})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;const renderHeading=()=>{if(heading){if(typeof heading==="function"){return heading(index,isOpen)}return heading}return React.createElement("span",null,name)};return React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders,[`${options?.selectedItemCSS}`]:options?.selectedItemCSS&&isOpen})},React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none":true,"px-4 mb-4 rounded-lg":isNonTransparentTheme(theme),"px-0 rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-base":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?React.createElement(Icon,{name:typeof rowIcon==="object"?rowIcon.name:rowIcon,color:textClass,additionalCSS:typeof rowIcon==="object"&&rowIcon.css?rowIcon.css:"",size:options?.rowIconSize??"32px"}):null,renderHeading(),!selectable&&!isStaticTheme(theme)&&rowInteractive?React.createElement("span",{className:"flex-1 justify-end flex items-center"},React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,additionalCSS:isOpen?typeof toggleIcons.open==="object"&&toggleIcons.open.css||"":typeof toggleIcons.closed==="object"&&toggleIcons.closed.css||"",size:options?.iconSize??"16px"})):null),rowInteractive&&React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},React.createElement("div",{className:"pb-4"},children)))};const Accordion=forwardRef(({data,theme="transparent",icons={closed:{name:"icon-gui-plus-outline"},open:{name:"icon-gui-minus-outline"}},options,...props},ref)=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[data,options?.fullyOpen,options?.defaultOpenIndexes]);const[openRowValues,setOpenRowValues]=useState(openIndexes);useEffect(()=>{setOpenRowValues(openIndexes)},[openIndexes]);const innerAccordion=data.map((item,index)=>React.createElement(AccordionRow,{key:item.name,name:item.name,heading:item.heading,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues,rowInteractive:item.interactive},item.content));return React.createElement("div",{ref:ref,...props},options?.autoClose?React.createElement(RadixAccordion,{type:"single",collapsible:true,value:openRowValues[0],onValueChange:values=>setOpenRowValues([values])},innerAccordion):React.createElement(RadixAccordion,{type:"multiple",value:openRowValues,onValueChange:values=>setOpenRowValues(values)},innerAccordion))});Accordion.displayName="Accordion";export default Accordion;
|
|
2
2
|
//# sourceMappingURL=Accordion.js.map
|
package/core/Accordion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/Accordion.tsx"],"sourcesContent":["import React, {\n ReactNode,\n useMemo,\n useState,\n forwardRef,\n useEffect,\n} from \"react\";\nimport {\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n Accordion as RadixAccordion,\n} from \"@radix-ui/react-accordion\";\n\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport type {\n AccordionData,\n AccordionIcon,\n AccordionIcons,\n AccordionOptions,\n AccordionTheme,\n} from \"./Accordion/types\";\nimport {\n themeClasses,\n isNonTransparentTheme,\n isStaticTheme,\n} from \"./Accordion/utils\";\nimport cn from \"./utils/cn\";\n\ntype AccordionRowProps = {\n children: ReactNode;\n name: string;\n rowIcon?: IconName | AccordionIcon;\n theme: AccordionTheme;\n toggleIcons: AccordionIcons;\n options?: AccordionOptions;\n index: number;\n onClick: () => void;\n openRowValues: string[];\n rowInteractive?: boolean;\n};\n\nexport type AccordionProps = {\n /**\n * The data for the accordion items.\n */\n data: AccordionData[];\n\n /**\n * Icons for the accordion toggle.\n */\n icons?: AccordionIcons;\n\n /**\n * Theme for the accordion.\n */\n theme?: AccordionTheme;\n\n /**\n * Options for the accordion behavior.\n */\n options?: AccordionOptions;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst AccordionRow = ({\n name,\n children,\n rowIcon,\n options,\n toggleIcons,\n theme,\n index,\n onClick,\n openRowValues,\n rowInteractive = true,\n}: AccordionRowProps) => {\n const { selectable, sticky } = options || {};\n const rowKey = `accordion-item-${index}`;\n const isOpen = openRowValues.includes(rowKey);\n\n const {\n text,\n bg,\n hoverBg,\n selectableBg,\n selectableText,\n border,\n toggleIconColor,\n } = themeClasses[theme];\n\n const textClass = (selectable && isOpen && selectableText) || text;\n\n return (\n <AccordionItem\n value={rowKey}\n className={cn({\n [`${border}`]: border && !options?.hideBorders,\n })}\n >\n <AccordionTrigger\n onClick={onClick}\n className={cn({\n \"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none\": true,\n \"px-4 mb-4 rounded-lg\": isNonTransparentTheme(theme),\n \"px-0 rounded-none\": !isNonTransparentTheme(theme),\n \"pointer-events-none focus-visible:outline-none\":\n isStaticTheme(theme),\n \"focus-base\": !isStaticTheme(theme),\n \"sticky top-0\": sticky,\n [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),\n [`${selectableBg} ${selectableText}`]: selectable && isOpen,\n [options?.headerCSS ?? \"\"]: options?.headerCSS,\n [options?.selectedHeaderCSS ?? \"\"]:\n options?.selectedHeaderCSS && isOpen,\n })}\n >\n {rowIcon ? (\n <Icon\n name={typeof rowIcon === \"object\" ? rowIcon.name : rowIcon}\n color={textClass}\n additionalCSS={\n typeof rowIcon === \"object\" && rowIcon.css ? rowIcon.css : \"\"\n }\n size={options?.rowIconSize ?? \"32px\"}\n />\n ) : null}\n <span>{name}</span>\n {!selectable && !isStaticTheme(theme) && rowInteractive ? (\n <span className=\"flex-1 justify-end flex items-center\">\n <Icon\n name={isOpen ? toggleIcons.open.name : toggleIcons.closed.name}\n color={toggleIconColor}\n size={options?.iconSize ?? \"16px\"}\n />\n </span>\n ) : null}\n </AccordionTrigger>\n {rowInteractive && (\n <AccordionContent\n className={cn({\n \"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\": true,\n [options?.contentCSS ?? \"\"]: options?.contentCSS,\n })}\n >\n <div className=\"pb-4\">{children}</div>\n </AccordionContent>\n )}\n </AccordionItem>\n );\n};\n\nconst Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n (\n {\n data,\n theme = \"transparent\",\n icons = {\n closed: { name: \"icon-gui-plus-outline\" },\n open: { name: \"icon-gui-minus-outline\" },\n },\n options,\n ...props\n },\n ref,\n ) => {\n const openIndexes = useMemo(() => {\n const indexValues = data.map((_, i) => `accordion-item-${i}`);\n return options?.fullyOpen\n ? indexValues\n : indexValues.filter((_, index) =>\n options?.defaultOpenIndexes?.includes(index),\n );\n }, [data, options?.fullyOpen, options?.defaultOpenIndexes]);\n\n const [openRowValues, setOpenRowValues] = useState<string[]>(openIndexes);\n\n useEffect(() => {\n setOpenRowValues(openIndexes);\n }, [openIndexes]);\n\n const innerAccordion = data.map((item, index) => (\n <AccordionRow\n key={item.name}\n name={item.name}\n rowIcon={item.icon}\n toggleIcons={icons}\n theme={theme}\n options={options}\n index={index}\n onClick={() => {\n item.onClick?.(index);\n }}\n openRowValues={openRowValues}\n rowInteractive={item.interactive}\n >\n {item.content}\n </AccordionRow>\n ));\n\n return (\n <div ref={ref} {...props}>\n {options?.autoClose ? (\n <RadixAccordion\n type=\"single\"\n collapsible\n value={openRowValues[0]}\n onValueChange={(values) => setOpenRowValues([values])}\n >\n {innerAccordion}\n </RadixAccordion>\n ) : (\n <RadixAccordion\n type=\"multiple\"\n value={openRowValues}\n onValueChange={(values) => setOpenRowValues(values)}\n >\n {innerAccordion}\n </RadixAccordion>\n )}\n </div>\n );\n },\n);\n\nAccordion.displayName = \"Accordion\";\n\nexport default Accordion;\n"],"names":["React","useMemo","useState","forwardRef","useEffect","AccordionContent","AccordionItem","AccordionTrigger","Accordion","RadixAccordion","Icon","themeClasses","isNonTransparentTheme","isStaticTheme","cn","AccordionRow","name","children","rowIcon","options","toggleIcons","theme","index","onClick","openRowValues","rowInteractive","selectable","sticky","rowKey","isOpen","includes","text","bg","hoverBg","selectableBg","selectableText","border","toggleIconColor","textClass","value","className","hideBorders","headerCSS","selectedHeaderCSS","color","additionalCSS","css","size","rowIconSize","span","open","closed","iconSize","contentCSS","div","data","icons","props","ref","openIndexes","indexValues","map","_","i","fullyOpen","filter","defaultOpenIndexes","setOpenRowValues","innerAccordion","item","key","icon","interactive","content","autoClose","type","collapsible","onValueChange","values","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/core/Accordion.tsx"],"sourcesContent":["import React, {\n ReactNode,\n useMemo,\n useState,\n forwardRef,\n useEffect,\n} from \"react\";\nimport {\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n Accordion as RadixAccordion,\n} from \"@radix-ui/react-accordion\";\n\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport type {\n AccordionData,\n AccordionIcon,\n AccordionIcons,\n AccordionOptions,\n AccordionTheme,\n} from \"./Accordion/types\";\nimport {\n themeClasses,\n isNonTransparentTheme,\n isStaticTheme,\n} from \"./Accordion/utils\";\nimport cn from \"./utils/cn\";\n\ntype AccordionRowProps = {\n children: ReactNode;\n name: string;\n heading?: ReactNode | ((index: number, isOpen: boolean) => ReactNode);\n rowIcon?: IconName | AccordionIcon;\n theme: AccordionTheme;\n toggleIcons: AccordionIcons;\n options?: AccordionOptions;\n index: number;\n onClick: () => void;\n openRowValues: string[];\n rowInteractive?: boolean;\n};\n\nexport type AccordionProps = {\n /**\n * The data for the accordion items.\n */\n data: AccordionData[];\n\n /**\n * Icons for the accordion toggle.\n */\n icons?: AccordionIcons;\n\n /**\n * Theme for the accordion.\n */\n theme?: AccordionTheme;\n\n /**\n * Options for the accordion behavior.\n */\n options?: AccordionOptions;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst AccordionRow = ({\n name,\n heading,\n children,\n rowIcon,\n options,\n toggleIcons,\n theme,\n index,\n onClick,\n openRowValues,\n rowInteractive = true,\n}: AccordionRowProps) => {\n const { selectable, sticky } = options || {};\n const rowKey = `accordion-item-${index}`;\n const isOpen = openRowValues.includes(rowKey);\n\n const {\n text,\n bg,\n hoverBg,\n selectableBg,\n selectableText,\n border,\n toggleIconColor,\n } = themeClasses[theme];\n\n const textClass = (selectable && isOpen && selectableText) || text;\n\n // Render custom heading or fallback to name\n const renderHeading = () => {\n if (heading) {\n if (typeof heading === \"function\") {\n return heading(index, isOpen);\n }\n return heading;\n }\n return <span>{name}</span>;\n };\n\n return (\n <AccordionItem\n value={rowKey}\n className={cn({\n [`${border}`]: border && !options?.hideBorders,\n [`${options?.selectedItemCSS}`]: options?.selectedItemCSS && isOpen,\n })}\n >\n <AccordionTrigger\n onClick={onClick}\n className={cn({\n \"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none\": true,\n \"px-4 mb-4 rounded-lg\": isNonTransparentTheme(theme),\n \"px-0 rounded-none\": !isNonTransparentTheme(theme),\n \"pointer-events-none focus-visible:outline-none\":\n isStaticTheme(theme),\n \"focus-base\": !isStaticTheme(theme),\n \"sticky top-0\": sticky,\n [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),\n [`${selectableBg} ${selectableText}`]: selectable && isOpen,\n [options?.headerCSS ?? \"\"]: options?.headerCSS,\n [options?.selectedHeaderCSS ?? \"\"]:\n options?.selectedHeaderCSS && isOpen,\n })}\n >\n {rowIcon ? (\n <Icon\n name={typeof rowIcon === \"object\" ? rowIcon.name : rowIcon}\n color={textClass}\n additionalCSS={\n typeof rowIcon === \"object\" && rowIcon.css ? rowIcon.css : \"\"\n }\n size={options?.rowIconSize ?? \"32px\"}\n />\n ) : null}\n {renderHeading()}\n {!selectable && !isStaticTheme(theme) && rowInteractive ? (\n <span className=\"flex-1 justify-end flex items-center\">\n <Icon\n name={isOpen ? toggleIcons.open.name : toggleIcons.closed.name}\n color={toggleIconColor}\n additionalCSS={\n isOpen\n ? (typeof toggleIcons.open === \"object\" &&\n toggleIcons.open.css) ||\n \"\"\n : (typeof toggleIcons.closed === \"object\" &&\n toggleIcons.closed.css) ||\n \"\"\n }\n size={options?.iconSize ?? \"16px\"}\n />\n </span>\n ) : null}\n </AccordionTrigger>\n {rowInteractive && (\n <AccordionContent\n className={cn({\n \"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\": true,\n [options?.contentCSS ?? \"\"]: options?.contentCSS,\n })}\n >\n <div className=\"pb-4\">{children}</div>\n </AccordionContent>\n )}\n </AccordionItem>\n );\n};\n\nconst Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n (\n {\n data,\n theme = \"transparent\",\n icons = {\n closed: { name: \"icon-gui-plus-outline\" },\n open: { name: \"icon-gui-minus-outline\" },\n },\n options,\n ...props\n },\n ref,\n ) => {\n const openIndexes = useMemo(() => {\n const indexValues = data.map((_, i) => `accordion-item-${i}`);\n return options?.fullyOpen\n ? indexValues\n : indexValues.filter((_, index) =>\n options?.defaultOpenIndexes?.includes(index),\n );\n }, [data, options?.fullyOpen, options?.defaultOpenIndexes]);\n\n const [openRowValues, setOpenRowValues] = useState<string[]>(openIndexes);\n\n useEffect(() => {\n setOpenRowValues(openIndexes);\n }, [openIndexes]);\n\n const innerAccordion = data.map((item, index) => (\n <AccordionRow\n key={item.name}\n name={item.name}\n heading={item.heading}\n rowIcon={item.icon}\n toggleIcons={icons}\n theme={theme}\n options={options}\n index={index}\n onClick={() => {\n item.onClick?.(index);\n }}\n openRowValues={openRowValues}\n rowInteractive={item.interactive}\n >\n {item.content}\n </AccordionRow>\n ));\n\n return (\n <div ref={ref} {...props}>\n {options?.autoClose ? (\n <RadixAccordion\n type=\"single\"\n collapsible\n value={openRowValues[0]}\n onValueChange={(values) => setOpenRowValues([values])}\n >\n {innerAccordion}\n </RadixAccordion>\n ) : (\n <RadixAccordion\n type=\"multiple\"\n value={openRowValues}\n onValueChange={(values) => setOpenRowValues(values)}\n >\n {innerAccordion}\n </RadixAccordion>\n )}\n </div>\n );\n },\n);\n\nAccordion.displayName = \"Accordion\";\n\nexport default Accordion;\n"],"names":["React","useMemo","useState","forwardRef","useEffect","AccordionContent","AccordionItem","AccordionTrigger","Accordion","RadixAccordion","Icon","themeClasses","isNonTransparentTheme","isStaticTheme","cn","AccordionRow","name","heading","children","rowIcon","options","toggleIcons","theme","index","onClick","openRowValues","rowInteractive","selectable","sticky","rowKey","isOpen","includes","text","bg","hoverBg","selectableBg","selectableText","border","toggleIconColor","textClass","renderHeading","span","value","className","hideBorders","selectedItemCSS","headerCSS","selectedHeaderCSS","color","additionalCSS","css","size","rowIconSize","open","closed","iconSize","contentCSS","div","data","icons","props","ref","openIndexes","indexValues","map","_","i","fullyOpen","filter","defaultOpenIndexes","setOpenRowValues","innerAccordion","item","key","icon","interactive","content","autoClose","type","collapsible","onValueChange","values","displayName"],"mappings":"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"}
|
package/core/Expander.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{useMemo,useRef,useState}from"react";import*as RadixCollapsible from"@radix-ui/react-collapsible";import cn from"./utils/cn";import{useContentHeight}from"./hooks/use-content-height";const Expander=({heightThreshold=200,className,fadeClassName,controlsClassName,controlsOpenedLabel,controlsClosedLabel,children})=>{const innerRef=useRef(null);const[expanded,setExpanded]=useState(false);const contentHeight=useContentHeight(innerRef,heightThreshold);const showControls=useMemo(()=>contentHeight>=heightThreshold,[contentHeight,heightThreshold]);const height=useMemo(()=>contentHeight<heightThreshold?"auto":expanded?contentHeight:heightThreshold,[contentHeight,heightThreshold,expanded]);return React.createElement(RadixCollapsible.Root,{open:expanded,onOpenChange:setExpanded},React.createElement("div",{style:{height},"data-testid":"expander-container",className:cn("overflow-hidden transition-all relative",className)},showControls&&!expanded&&React.createElement("div",{className:cn("h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0",fadeClassName)}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement(RadixCollapsible.Trigger,{asChild:true},React.createElement("button",{"data-testid":"expander-controls",className:cn(heightThreshold===0&&!expanded?"":"mt-4","cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light",controlsClassName)},expanded?controlsOpenedLabel??"View less -":controlsClosedLabel??"View all +")))};export default Expander;
|
|
1
|
+
import React,{useMemo,useRef,useState}from"react";import*as RadixCollapsible from"@radix-ui/react-collapsible";import cn from"./utils/cn";import{useContentHeight}from"./hooks/use-content-height";const Expander=({heightThreshold=200,className,fadeClassName,controlsClassName,controlsOpenedLabel,controlsClosedLabel,children})=>{const innerRef=useRef(null);const[expanded,setExpanded]=useState(false);const contentHeight=useContentHeight(innerRef,heightThreshold);const showControls=useMemo(()=>contentHeight>=heightThreshold,[contentHeight,heightThreshold]);const height=useMemo(()=>contentHeight<heightThreshold?"auto":expanded?contentHeight:heightThreshold,[contentHeight,heightThreshold,expanded]);return React.createElement(RadixCollapsible.Root,{open:expanded,onOpenChange:setExpanded},React.createElement("div",{style:{height},"data-testid":"expander-container",className:cn("overflow-hidden transition-all relative",className)},showControls&&!expanded&&React.createElement("div",{className:cn("h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0",fadeClassName)}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement(RadixCollapsible.Trigger,{asChild:true},React.createElement("button",{"data-testid":"expander-controls",className:cn(heightThreshold===0&&!expanded?"":"mt-4","cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light focus-base transition-colors",controlsClassName)},expanded?controlsOpenedLabel??"View less -":controlsClosedLabel??"View all +")))};export default Expander;
|
|
2
2
|
//# sourceMappingURL=Expander.js.map
|
package/core/Expander.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/Expander.tsx"],"sourcesContent":["import React, {\n PropsWithChildren,\n ReactNode,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport * as RadixCollapsible from \"@radix-ui/react-collapsible\";\nimport cn from \"./utils/cn\";\nimport { useContentHeight } from \"./hooks/use-content-height\";\n\ntype ExpanderProps = {\n heightThreshold?: number;\n className?: string;\n fadeClassName?: string;\n controlsClassName?: string;\n controlsOpenedLabel?: string | ReactNode;\n controlsClosedLabel?: string | ReactNode;\n};\n\nconst Expander = ({\n heightThreshold = 200,\n className,\n fadeClassName,\n controlsClassName,\n controlsOpenedLabel,\n controlsClosedLabel,\n children,\n}: PropsWithChildren<ExpanderProps>) => {\n const innerRef = useRef<HTMLDivElement>(null);\n const [expanded, setExpanded] = useState(false);\n\n const contentHeight = useContentHeight(innerRef, heightThreshold);\n\n const showControls = useMemo(\n () => contentHeight >= heightThreshold,\n [contentHeight, heightThreshold],\n );\n\n const height = useMemo(\n () =>\n contentHeight < heightThreshold\n ? \"auto\"\n : expanded\n ? contentHeight\n : heightThreshold,\n [contentHeight, heightThreshold, expanded],\n );\n\n return (\n <RadixCollapsible.Root open={expanded} onOpenChange={setExpanded}>\n <div\n style={{ height }}\n data-testid=\"expander-container\"\n className={cn(\"overflow-hidden transition-all relative\", className)}\n >\n {showControls && !expanded && (\n <div\n className={cn(\n \"h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0\",\n fadeClassName,\n )}\n ></div>\n )}\n <div ref={innerRef}>{children}</div>\n </div>\n {showControls && (\n <RadixCollapsible.Trigger asChild>\n <button\n data-testid=\"expander-controls\"\n className={cn(\n heightThreshold === 0 && !expanded ? \"\" : \"mt-4\",\n \"cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light\",\n controlsClassName,\n )}\n >\n {expanded\n ? (controlsOpenedLabel ?? \"View less -\")\n : (controlsClosedLabel ?? \"View all +\")}\n </button>\n </RadixCollapsible.Trigger>\n )}\n </RadixCollapsible.Root>\n );\n};\n\nexport default Expander;\n"],"names":["React","useMemo","useRef","useState","RadixCollapsible","cn","useContentHeight","Expander","heightThreshold","className","fadeClassName","controlsClassName","controlsOpenedLabel","controlsClosedLabel","children","innerRef","expanded","setExpanded","contentHeight","showControls","height","Root","open","onOpenChange","div","style","data-testid","ref","Trigger","asChild","button"],"mappings":"AAAA,OAAOA,OAGLC,OAAO,CACPC,MAAM,CACNC,QAAQ,KACH,OAAQ,AACf,WAAYC,qBAAsB,6BAA8B,AAChE,QAAOC,OAAQ,YAAa,AAC5B,QAASC,gBAAgB,KAAQ,4BAA6B,CAW9D,MAAMC,SAAW,CAAC,CAChBC,gBAAkB,GAAG,CACrBC,SAAS,CACTC,aAAa,CACbC,iBAAiB,CACjBC,mBAAmB,CACnBC,mBAAmB,CACnBC,QAAQ,CACyB,IACjC,MAAMC,SAAWb,OAAuB,MACxC,KAAM,CAACc,SAAUC,YAAY,CAAGd,SAAS,OAEzC,MAAMe,cAAgBZ,iBAAiBS,SAAUP,iBAEjD,MAAMW,aAAelB,QACnB,IAAMiB,eAAiBV,gBACvB,CAACU,cAAeV,gBAAgB,EAGlC,MAAMY,OAASnB,QACb,IACEiB,cAAgBV,gBACZ,OACAQ,SACEE,cACAV,gBACR,CAACU,cAAeV,gBAAiBQ,SAAS,EAG5C,OACE,oBAACZ,iBAAiBiB,IAAI,EAACC,KAAMN,SAAUO,aAAcN,aACnD,oBAACO,OACCC,MAAO,CAAEL,MAAO,EAChBM,cAAY,qBACZjB,UAAWJ,GAAG,0CAA2CI,YAExDU,cAAgB,CAACH,UAChB,oBAACQ,OACCf,UAAWJ,GACT,0FACAK,iBAIN,oBAACc,OAAIG,IAAKZ,UAAWD,WAEtBK,cACC,oBAACf,iBAAiBwB,OAAO,EAACC,QAAAA,MACxB,oBAACC,UACCJ,cAAY,oBACZjB,UAAWJ,GACTG,kBAAoB,GAAK,CAACQ,SAAW,GAAK,OAC1C,
|
|
1
|
+
{"version":3,"sources":["../../src/core/Expander.tsx"],"sourcesContent":["import React, {\n PropsWithChildren,\n ReactNode,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport * as RadixCollapsible from \"@radix-ui/react-collapsible\";\nimport cn from \"./utils/cn\";\nimport { useContentHeight } from \"./hooks/use-content-height\";\n\ntype ExpanderProps = {\n heightThreshold?: number;\n className?: string;\n fadeClassName?: string;\n controlsClassName?: string;\n controlsOpenedLabel?: string | ReactNode;\n controlsClosedLabel?: string | ReactNode;\n};\n\nconst Expander = ({\n heightThreshold = 200,\n className,\n fadeClassName,\n controlsClassName,\n controlsOpenedLabel,\n controlsClosedLabel,\n children,\n}: PropsWithChildren<ExpanderProps>) => {\n const innerRef = useRef<HTMLDivElement>(null);\n const [expanded, setExpanded] = useState(false);\n\n const contentHeight = useContentHeight(innerRef, heightThreshold);\n\n const showControls = useMemo(\n () => contentHeight >= heightThreshold,\n [contentHeight, heightThreshold],\n );\n\n const height = useMemo(\n () =>\n contentHeight < heightThreshold\n ? \"auto\"\n : expanded\n ? contentHeight\n : heightThreshold,\n [contentHeight, heightThreshold, expanded],\n );\n\n return (\n <RadixCollapsible.Root open={expanded} onOpenChange={setExpanded}>\n <div\n style={{ height }}\n data-testid=\"expander-container\"\n className={cn(\"overflow-hidden transition-all relative\", className)}\n >\n {showControls && !expanded && (\n <div\n className={cn(\n \"h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0\",\n fadeClassName,\n )}\n ></div>\n )}\n <div ref={innerRef}>{children}</div>\n </div>\n {showControls && (\n <RadixCollapsible.Trigger asChild>\n <button\n data-testid=\"expander-controls\"\n className={cn(\n heightThreshold === 0 && !expanded ? \"\" : \"mt-4\",\n \"cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light focus-base transition-colors\",\n controlsClassName,\n )}\n >\n {expanded\n ? (controlsOpenedLabel ?? \"View less -\")\n : (controlsClosedLabel ?? \"View all +\")}\n </button>\n </RadixCollapsible.Trigger>\n )}\n </RadixCollapsible.Root>\n );\n};\n\nexport default Expander;\n"],"names":["React","useMemo","useRef","useState","RadixCollapsible","cn","useContentHeight","Expander","heightThreshold","className","fadeClassName","controlsClassName","controlsOpenedLabel","controlsClosedLabel","children","innerRef","expanded","setExpanded","contentHeight","showControls","height","Root","open","onOpenChange","div","style","data-testid","ref","Trigger","asChild","button"],"mappings":"AAAA,OAAOA,OAGLC,OAAO,CACPC,MAAM,CACNC,QAAQ,KACH,OAAQ,AACf,WAAYC,qBAAsB,6BAA8B,AAChE,QAAOC,OAAQ,YAAa,AAC5B,QAASC,gBAAgB,KAAQ,4BAA6B,CAW9D,MAAMC,SAAW,CAAC,CAChBC,gBAAkB,GAAG,CACrBC,SAAS,CACTC,aAAa,CACbC,iBAAiB,CACjBC,mBAAmB,CACnBC,mBAAmB,CACnBC,QAAQ,CACyB,IACjC,MAAMC,SAAWb,OAAuB,MACxC,KAAM,CAACc,SAAUC,YAAY,CAAGd,SAAS,OAEzC,MAAMe,cAAgBZ,iBAAiBS,SAAUP,iBAEjD,MAAMW,aAAelB,QACnB,IAAMiB,eAAiBV,gBACvB,CAACU,cAAeV,gBAAgB,EAGlC,MAAMY,OAASnB,QACb,IACEiB,cAAgBV,gBACZ,OACAQ,SACEE,cACAV,gBACR,CAACU,cAAeV,gBAAiBQ,SAAS,EAG5C,OACE,oBAACZ,iBAAiBiB,IAAI,EAACC,KAAMN,SAAUO,aAAcN,aACnD,oBAACO,OACCC,MAAO,CAAEL,MAAO,EAChBM,cAAY,qBACZjB,UAAWJ,GAAG,0CAA2CI,YAExDU,cAAgB,CAACH,UAChB,oBAACQ,OACCf,UAAWJ,GACT,0FACAK,iBAIN,oBAACc,OAAIG,IAAKZ,UAAWD,WAEtBK,cACC,oBAACf,iBAAiBwB,OAAO,EAACC,QAAAA,MACxB,oBAACC,UACCJ,cAAY,oBACZjB,UAAWJ,GACTG,kBAAoB,GAAK,CAACQ,SAAW,GAAK,OAC1C,oHACAL,oBAGDK,SACIJ,qBAAuB,cACvBC,qBAAuB,eAMxC,CAEA,gBAAeN,QAAS"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as React from"react";import{forwardRef}from"react";const IconDisplayEphemeralMessagesDarkCol=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:44,height:44,fill:"none",viewBox:"0 0 44 44",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{stroke:"#FF5416",strokeDasharray:"1.5 5",strokeLinecap:"round",strokeWidth:1.5,d:"M.75 21.75c0 11.598 9.402 21 21 21s21-9.402 21-21-9.402-21-21-21"}),React.createElement("rect",{width:22,height:16,x:10.75,y:13.75,stroke:"#C6CED9",strokeWidth:1.607,rx:1.863}),React.createElement("path",{stroke:"#C6CED9",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"m11.75 14.75 10.31 7 9.69-7"}),React.createElement("path",{stroke:"#FF5416",strokeDasharray:"1.5 5",strokeLinecap:"round",strokeWidth:1.5,d:"M.75 21.75c0-11.598 9.402-21 21-21"}));const ForwardRef=forwardRef(IconDisplayEphemeralMessagesDarkCol);export default ForwardRef;
|
|
2
|
+
//# sourceMappingURL=icon-display-ephemeral-messages-dark-col.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/core/Icon/components/icon-display-ephemeral-messages-dark-col.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nconst IconDisplayEphemeralMessagesDarkCol = ({\n title,\n titleId,\n ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={44} height={44} fill=\"none\" viewBox=\"0 0 44 44\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke=\"#FF5416\" strokeDasharray=\"1.5 5\" strokeLinecap=\"round\" strokeWidth={1.5} d=\"M.75 21.75c0 11.598 9.402 21 21 21s21-9.402 21-21-9.402-21-21-21\" /><rect width={22} height={16} x={10.75} y={13.75} stroke=\"#C6CED9\" strokeWidth={1.607} rx={1.863} /><path stroke=\"#C6CED9\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"m11.75 14.75 10.31 7 9.69-7\" /><path stroke=\"#FF5416\" strokeDasharray=\"1.5 5\" strokeLinecap=\"round\" strokeWidth={1.5} d=\"M.75 21.75c0-11.598 9.402-21 21-21\" /></svg>;\nconst ForwardRef = forwardRef(IconDisplayEphemeralMessagesDarkCol);\nexport default ForwardRef;"],"names":["React","forwardRef","IconDisplayEphemeralMessagesDarkCol","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","path","stroke","strokeDasharray","strokeLinecap","strokeWidth","d","rect","x","y","rx","strokeLinejoin","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,oCAAsC,CAAC,CAC3CC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,GAAIC,OAAQ,GAAIC,KAAK,OAAOC,QAAQ,YAAYN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,QAAKC,OAAO,UAAUC,gBAAgB,QAAQC,cAAc,QAAQC,YAAa,IAAKC,EAAE,qEAAqE,oBAACC,QAAKZ,MAAO,GAAIC,OAAQ,GAAIY,EAAG,MAAOC,EAAG,MAAOP,OAAO,UAAUG,YAAa,MAAOK,GAAI,QAAS,oBAACT,QAAKC,OAAO,UAAUE,cAAc,QAAQO,eAAe,QAAQN,YAAa,IAAKC,EAAE,gCAAgC,oBAACL,QAAKC,OAAO,UAAUC,gBAAgB,QAAQC,cAAc,QAAQC,YAAa,IAAKC,EAAE,wCACxtB,MAAMM,WAAazB,WAAWC,oCAC9B,gBAAewB,UAAW"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as React from"react";import{forwardRef}from"react";const IconDisplayMessageAnnotationsDarkCol=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:45,height:48,fill:"none",viewBox:"0 0 45 48",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{fill:"#C6CED9",fillRule:"evenodd",d:"M16.137 42.326a.75.75 0 0 1-1.024.275l-.01-.006a.75.75 0 0 1 .75-1.299l.01.006a.75.75 0 0 1 .274 1.024m12.726 0a.75.75 0 0 1 .275-1.024l.01-.006a.75.75 0 0 1 .75 1.299l-.01.006a.75.75 0 0 1-1.025-.275m5.018-2.897a.75.75 0 0 1 .274-1.024l.01-.006a.75.75 0 1 1 .75 1.3l-.01.005a.75.75 0 0 1-1.024-.275m-22.761 0a.75.75 0 0 1-1.025.275l-.01-.006a.75.75 0 0 1 .75-1.299l.01.006a.75.75 0 0 1 .275 1.024m30.433-11.776a.75.75 0 0 1-.75-.75v-.012a.75.75 0 1 1 1.5 0v.012a.75.75 0 0 1-.75.75m-38.105 0a.75.75 0 0 1-.75-.75v-.012a.75.75 0 0 1 1.5 0v.012a.75.75 0 0 1-.75.75m38.105-5.794a.75.75 0 0 1-.75-.75v-.012a.75.75 0 0 1 1.5 0v.012a.75.75 0 0 1-.75.75m-38.105 0a.75.75 0 0 1-.75-.75v-.012a.75.75 0 0 1 1.5 0v.012a.75.75 0 0 1-.75.75M35.19 9.326a.75.75 0 0 1-1.025.275l-.01-.006a.75.75 0 0 1 .75-1.299l.01.006a.75.75 0 0 1 .275 1.024m-25.38 0a.75.75 0 0 1 .275-1.024l.01-.006a.75.75 0 0 1 .75 1.299l-.01.006a.75.75 0 0 1-1.024-.275M30.173 6.43a.75.75 0 0 1-1.024.275l-.01-.006a.75.75 0 0 1 .75-1.299l.01.006a.75.75 0 0 1 .274 1.024m-15.344 0a.75.75 0 0 1 .275-1.024l.01-.006a.75.75 0 1 1 .75 1.3l-.01.005a.75.75 0 0 1-1.025-.275",clipRule:"evenodd"}),React.createElement("path",{fill:"#FF5416",fillRule:"evenodd",d:"M22.5 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8",clipRule:"evenodd"}),React.createElement("path",{fill:"#FF5416",d:"M40.5 38a4 4 0 1 0 0-8 4 4 0 0 0 0 8"}),React.createElement("path",{fill:"#FF5416",fillRule:"evenodd",d:"M1.91 10a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1zM19.5 40a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1zM41.366 10.5a1 1 0 0 0-1.732 0l-3.464 6a1 1 0 0 0 .866 1.5h6.928a1 1 0 0 0 .866-1.5zM5.332 30.5a1 1 0 0 0-1.732 0l-3.465 6a1 1 0 0 0 .866 1.5H7.93a1 1 0 0 0 .866-1.5z",clipRule:"evenodd"}),React.createElement("rect",{width:20.125,height:14,x:12.688,y:17,stroke:"#C6CED9",strokeWidth:1.5,rx:1.75}),React.createElement("path",{stroke:"#C6CED9",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"m13.344 17.656 9.698 6.782 9.114-6.782"}));const ForwardRef=forwardRef(IconDisplayMessageAnnotationsDarkCol);export default ForwardRef;
|
|
2
|
+
//# sourceMappingURL=icon-display-message-annotations-dark-col.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/core/Icon/components/icon-display-message-annotations-dark-col.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nconst IconDisplayMessageAnnotationsDarkCol = ({\n title,\n titleId,\n ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={45} height={48} fill=\"none\" viewBox=\"0 0 45 48\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill=\"#C6CED9\" fillRule=\"evenodd\" d=\"M16.137 42.326a.75.75 0 0 1-1.024.275l-.01-.006a.75.75 0 0 1 .75-1.299l.01.006a.75.75 0 0 1 .274 1.024m12.726 0a.75.75 0 0 1 .275-1.024l.01-.006a.75.75 0 0 1 .75 1.299l-.01.006a.75.75 0 0 1-1.025-.275m5.018-2.897a.75.75 0 0 1 .274-1.024l.01-.006a.75.75 0 1 1 .75 1.3l-.01.005a.75.75 0 0 1-1.024-.275m-22.761 0a.75.75 0 0 1-1.025.275l-.01-.006a.75.75 0 0 1 .75-1.299l.01.006a.75.75 0 0 1 .275 1.024m30.433-11.776a.75.75 0 0 1-.75-.75v-.012a.75.75 0 1 1 1.5 0v.012a.75.75 0 0 1-.75.75m-38.105 0a.75.75 0 0 1-.75-.75v-.012a.75.75 0 0 1 1.5 0v.012a.75.75 0 0 1-.75.75m38.105-5.794a.75.75 0 0 1-.75-.75v-.012a.75.75 0 0 1 1.5 0v.012a.75.75 0 0 1-.75.75m-38.105 0a.75.75 0 0 1-.75-.75v-.012a.75.75 0 0 1 1.5 0v.012a.75.75 0 0 1-.75.75M35.19 9.326a.75.75 0 0 1-1.025.275l-.01-.006a.75.75 0 0 1 .75-1.299l.01.006a.75.75 0 0 1 .275 1.024m-25.38 0a.75.75 0 0 1 .275-1.024l.01-.006a.75.75 0 0 1 .75 1.299l-.01.006a.75.75 0 0 1-1.024-.275M30.173 6.43a.75.75 0 0 1-1.024.275l-.01-.006a.75.75 0 0 1 .75-1.299l.01.006a.75.75 0 0 1 .274 1.024m-15.344 0a.75.75 0 0 1 .275-1.024l.01-.006a.75.75 0 1 1 .75 1.3l-.01.005a.75.75 0 0 1-1.025-.275\" clipRule=\"evenodd\" /><path fill=\"#FF5416\" fillRule=\"evenodd\" d=\"M22.5 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8\" clipRule=\"evenodd\" /><path fill=\"#FF5416\" d=\"M40.5 38a4 4 0 1 0 0-8 4 4 0 0 0 0 8\" /><path fill=\"#FF5416\" fillRule=\"evenodd\" d=\"M1.91 10a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1zM19.5 40a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1zM41.366 10.5a1 1 0 0 0-1.732 0l-3.464 6a1 1 0 0 0 .866 1.5h6.928a1 1 0 0 0 .866-1.5zM5.332 30.5a1 1 0 0 0-1.732 0l-3.465 6a1 1 0 0 0 .866 1.5H7.93a1 1 0 0 0 .866-1.5z\" clipRule=\"evenodd\" /><rect width={20.125} height={14} x={12.688} y={17} stroke=\"#C6CED9\" strokeWidth={1.5} rx={1.75} /><path stroke=\"#C6CED9\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"m13.344 17.656 9.698 6.782 9.114-6.782\" /></svg>;\nconst ForwardRef = forwardRef(IconDisplayMessageAnnotationsDarkCol);\nexport default ForwardRef;"],"names":["React","forwardRef","IconDisplayMessageAnnotationsDarkCol","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","path","fillRule","d","clipRule","rect","x","y","stroke","strokeWidth","rx","strokeLinecap","strokeLinejoin","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,qCAAuC,CAAC,CAC5CC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,GAAIC,OAAQ,GAAIC,KAAK,OAAOC,QAAQ,YAAYN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,QAAKJ,KAAK,UAAUK,SAAS,UAAUC,EAAE,smCAAsmCC,SAAS,YAAY,oBAACH,QAAKJ,KAAK,UAAUK,SAAS,UAAUC,EAAE,sCAAsCC,SAAS,YAAY,oBAACH,QAAKJ,KAAK,UAAUM,EAAE,yCAAyC,oBAACF,QAAKJ,KAAK,UAAUK,SAAS,UAAUC,EAAE,yTAAyTC,SAAS,YAAY,oBAACC,QAAKV,MAAO,OAAQC,OAAQ,GAAIU,EAAG,OAAQC,EAAG,GAAIC,OAAO,UAAUC,YAAa,IAAKC,GAAI,OAAQ,oBAACT,QAAKO,OAAO,UAAUG,cAAc,QAAQC,eAAe,QAAQH,YAAa,IAAKN,EAAE,4CACloE,MAAMU,WAAa1B,WAAWC,qCAC9B,gBAAeyB,UAAW"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as React from"react";import{forwardRef}from"react";const IconGuiChecklistChecked=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{fill:"
|
|
1
|
+
import*as React from"react";import{forwardRef}from"react";const IconGuiChecklistChecked=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M2.75 4c0-.69.56-1.25 1.25-1.25h11a.75.75 0 0 0 0-1.5H4A2.75 2.75 0 0 0 1.25 4v16A2.75 2.75 0 0 0 4 22.75h16A2.75 2.75 0 0 0 22.75 20V9.476a.75.75 0 0 0-1.5 0V20c0 .69-.56 1.25-1.25 1.25H4c-.69 0-1.25-.56-1.25-1.25zm17.874-.584a.75.75 0 1 0-1.248-.832l-7.431 11.147-3.36-4.2a.75.75 0 0 0-1.17.938l4 5a.75.75 0 0 0 1.209-.053z",clipRule:"evenodd"}));const ForwardRef=forwardRef(IconGuiChecklistChecked);export default ForwardRef;
|
|
2
2
|
//# sourceMappingURL=icon-gui-checklist-checked.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/core/Icon/components/icon-gui-checklist-checked.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nconst IconGuiChecklistChecked = ({\n title,\n titleId,\n ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} fill=\"none\" viewBox=\"0 0 24 24\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill=\"
|
|
1
|
+
{"version":3,"sources":["../../../../src/core/Icon/components/icon-gui-checklist-checked.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nconst IconGuiChecklistChecked = ({\n title,\n titleId,\n ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} fill=\"none\" viewBox=\"0 0 24 24\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill=\"currentColor\" fillRule=\"evenodd\" d=\"M2.75 4c0-.69.56-1.25 1.25-1.25h11a.75.75 0 0 0 0-1.5H4A2.75 2.75 0 0 0 1.25 4v16A2.75 2.75 0 0 0 4 22.75h16A2.75 2.75 0 0 0 22.75 20V9.476a.75.75 0 0 0-1.5 0V20c0 .69-.56 1.25-1.25 1.25H4c-.69 0-1.25-.56-1.25-1.25zm17.874-.584a.75.75 0 1 0-1.248-.832l-7.431 11.147-3.36-4.2a.75.75 0 0 0-1.17.938l4 5a.75.75 0 0 0 1.209-.053z\" clipRule=\"evenodd\" /></svg>;\nconst ForwardRef = forwardRef(IconGuiChecklistChecked);\nexport default ForwardRef;"],"names":["React","forwardRef","IconGuiChecklistChecked","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","path","fillRule","d","clipRule","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,wBAA0B,CAAC,CAC/BC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,GAAIC,OAAQ,GAAIC,KAAK,OAAOC,QAAQ,YAAYN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,QAAKJ,KAAK,eAAeK,SAAS,UAAUC,EAAE,wUAAwUC,SAAS,aACtoB,MAAMC,WAAalB,WAAWC,wBAC9B,gBAAeiB,UAAW"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as React from"react";import{forwardRef}from"react";const IconGuiCodeDoc=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{fill:"
|
|
1
|
+
import*as React from"react";import{forwardRef}from"react";const IconGuiCodeDoc=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M20 22.5H4a.5.5 0 0 1-.5-.5V2a.5.5 0 0 1 .5-.5h10.757a1.5 1.5 0 0 1 1.061.44l4.243 4.242a1.5 1.5 0 0 1 .439 1.06V22a.5.5 0 0 1-.5.5m1.121-17.379L16.88.88A3 3 0 0 0 14.757 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7.243a3 3 0 0 0-.879-2.122M9.481 8.076a.75.75 0 0 0-.961-1.152l-3 2.5a.75.75 0 0 0 0 1.152l3 2.5a.75.75 0 1 0 .96-1.152L7.172 10zm4.235-1.794a.75.75 0 0 1 .502.933l-3 10a.75.75 0 0 1-1.436-.43l3-10a.75.75 0 0 1 .934-.503m.804 5.794a.75.75 0 0 1 .96-1.152l3 2.5a.75.75 0 0 1 0 1.152l-3 2.5a.75.75 0 1 1-.96-1.152L16.828 14z",clipRule:"evenodd"}));const ForwardRef=forwardRef(IconGuiCodeDoc);export default ForwardRef;
|
|
2
2
|
//# sourceMappingURL=icon-gui-code-doc.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/core/Icon/components/icon-gui-code-doc.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nconst IconGuiCodeDoc = ({\n title,\n titleId,\n ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} fill=\"none\" viewBox=\"0 0 24 24\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill=\"
|
|
1
|
+
{"version":3,"sources":["../../../../src/core/Icon/components/icon-gui-code-doc.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nconst IconGuiCodeDoc = ({\n title,\n titleId,\n ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} fill=\"none\" viewBox=\"0 0 24 24\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill=\"currentColor\" fillRule=\"evenodd\" d=\"M20 22.5H4a.5.5 0 0 1-.5-.5V2a.5.5 0 0 1 .5-.5h10.757a1.5 1.5 0 0 1 1.061.44l4.243 4.242a1.5 1.5 0 0 1 .439 1.06V22a.5.5 0 0 1-.5.5m1.121-17.379L16.88.88A3 3 0 0 0 14.757 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7.243a3 3 0 0 0-.879-2.122M9.481 8.076a.75.75 0 0 0-.961-1.152l-3 2.5a.75.75 0 0 0 0 1.152l3 2.5a.75.75 0 1 0 .96-1.152L7.172 10zm4.235-1.794a.75.75 0 0 1 .502.933l-3 10a.75.75 0 0 1-1.436-.43l3-10a.75.75 0 0 1 .934-.503m.804 5.794a.75.75 0 0 1 .96-1.152l3 2.5a.75.75 0 0 1 0 1.152l-3 2.5a.75.75 0 1 1-.96-1.152L16.828 14z\" clipRule=\"evenodd\" /></svg>;\nconst ForwardRef = forwardRef(IconGuiCodeDoc);\nexport default ForwardRef;"],"names":["React","forwardRef","IconGuiCodeDoc","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","path","fillRule","d","clipRule","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,eAAiB,CAAC,CACtBC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,GAAIC,OAAQ,GAAIC,KAAK,OAAOC,QAAQ,YAAYN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,QAAKJ,KAAK,eAAeK,SAAS,UAAUC,EAAE,oiBAAoiBC,SAAS,aACl2B,MAAMC,WAAalB,WAAWC,eAC9B,gBAAeiB,UAAW"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as React from"react";import{forwardRef}from"react";const IconGuiCursor=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{stroke:"
|
|
1
|
+
import*as React from"react";import{forwardRef}from"react";const IconGuiCursor=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{stroke:"currentColor",strokeLinejoin:"round",strokeWidth:1.5,d:"m3.135 2.056 18.315 6.96c.703.268.742 1.277.06 1.6l-7.14 3.387a.86.86 0 0 0-.442.503l-2.325 6.911a.833.833 0 0 1-1.562.071L2.076 3.223c-.305-.7.36-1.433 1.06-1.167Z"}));const ForwardRef=forwardRef(IconGuiCursor);export default ForwardRef;
|
|
2
2
|
//# sourceMappingURL=icon-gui-cursor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/core/Icon/components/icon-gui-cursor.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nconst IconGuiCursor = ({\n title,\n titleId,\n ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} fill=\"none\" viewBox=\"0 0 24 24\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke=\"
|
|
1
|
+
{"version":3,"sources":["../../../../src/core/Icon/components/icon-gui-cursor.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nconst IconGuiCursor = ({\n title,\n titleId,\n ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} fill=\"none\" viewBox=\"0 0 24 24\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke=\"currentColor\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"m3.135 2.056 18.315 6.96c.703.268.742 1.277.06 1.6l-7.14 3.387a.86.86 0 0 0-.442.503l-2.325 6.911a.833.833 0 0 1-1.562.071L2.076 3.223c-.305-.7.36-1.433 1.06-1.167Z\" /></svg>;\nconst ForwardRef = forwardRef(IconGuiCursor);\nexport default ForwardRef;"],"names":["React","forwardRef","IconGuiCursor","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","path","stroke","strokeLinejoin","strokeWidth","d","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,cAAgB,CAAC,CACrBC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,GAAIC,OAAQ,GAAIC,KAAK,OAAOC,QAAQ,YAAYN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,QAAKC,OAAO,eAAeC,eAAe,QAAQC,YAAa,IAAKC,EAAE,0KAC7U,MAAMC,WAAanB,WAAWC,cAC9B,gBAAekB,UAAW"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as React from"react";import{forwardRef}from"react";const IconGuiExpand=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{fill:"
|
|
1
|
+
import*as React from"react";import{forwardRef}from"react";const IconGuiExpand=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M16.117 16.434a.801.801 0 1 0 1.191 1.072l4.474-4.971a.8.8 0 0 0 .01-1.088l-4.484-4.982a.801.801 0 1 0-1.19 1.072l3.282 3.648H6.246a.801.801 0 0 0 0 1.602H19.4z",clipRule:"evenodd"}),React.createElement("path",{stroke:"#000",strokeLinecap:"round",strokeWidth:1.5,d:"M2 18.7V5.223"}));const ForwardRef=forwardRef(IconGuiExpand);export default ForwardRef;
|
|
2
2
|
//# sourceMappingURL=icon-gui-expand.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/core/Icon/components/icon-gui-expand.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nconst IconGuiExpand = ({\n title,\n titleId,\n ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} fill=\"none\" viewBox=\"0 0 24 24\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill=\"
|
|
1
|
+
{"version":3,"sources":["../../../../src/core/Icon/components/icon-gui-expand.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nconst IconGuiExpand = ({\n title,\n titleId,\n ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} fill=\"none\" viewBox=\"0 0 24 24\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill=\"currentColor\" fillRule=\"evenodd\" d=\"M16.117 16.434a.801.801 0 1 0 1.191 1.072l4.474-4.971a.8.8 0 0 0 .01-1.088l-4.484-4.982a.801.801 0 1 0-1.19 1.072l3.282 3.648H6.246a.801.801 0 0 0 0 1.602H19.4z\" clipRule=\"evenodd\" /><path stroke=\"#000\" strokeLinecap=\"round\" strokeWidth={1.5} d=\"M2 18.7V5.223\" /></svg>;\nconst ForwardRef = forwardRef(IconGuiExpand);\nexport default ForwardRef;"],"names":["React","forwardRef","IconGuiExpand","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","path","fillRule","d","clipRule","stroke","strokeLinecap","strokeWidth","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,cAAgB,CAAC,CACrBC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,GAAIC,OAAQ,GAAIC,KAAK,OAAOC,QAAQ,YAAYN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,QAAKJ,KAAK,eAAeK,SAAS,UAAUC,EAAE,mKAAmKC,SAAS,YAAY,oBAACH,QAAKI,OAAO,OAAOC,cAAc,QAAQC,YAAa,IAAKJ,EAAE,mBAC3iB,MAAMK,WAAarB,WAAWC,cAC9B,gBAAeoB,UAAW"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as React from"react";import{forwardRef}from"react";const IconGuiFilterFlowStep0=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{fill:"
|
|
1
|
+
import*as React from"react";import{forwardRef}from"react";const IconGuiFilterFlowStep0=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M22.394 2.248H1.682zm-20.712 0H1.68m20.712 0c.26 0 .51.076.725.212.214.137.383.327.497.545a1.53 1.53 0 0 1 .006 1.404l-.004.007-2.071 3.932a.75.75 0 0 1-.664.4H3.195a.75.75 0 0 1-.663-.4L.458 4.412A1.52 1.52 0 0 1 .46 3.008c.114-.218.282-.409.496-.546s.465-.214.725-.214m20.594 1.5H1.805l1.843 3.5H20.43zM3.565 10.248H20.51c.236 0 .464.067.66.19a1.3 1.3 0 0 1 .457.49 1.36 1.36 0 0 1 .006 1.273l-.004.008-1.694 3.145a.75.75 0 0 1-.66.394H4.802a.75.75 0 0 1-.66-.394l-1.697-3.15a1.36 1.36 0 0 1 .002-1.274 1.3 1.3 0 0 1 .456-.491c.196-.123.424-.19.66-.191m16.61 1.5-1.348 2.5H5.252l-1.347-2.5zM5.447 17.248zh13.18a1.15 1.15 0 0 1 1.01.599 1.2 1.2 0 0 1 .006 1.15l-.004.008-1.318 2.359a.75.75 0 0 1-.655.384H6.411a.75.75 0 0 1-.655-.384L4.436 19a1.193 1.193 0 0 1 .42-1.587c.177-.107.381-.165.59-.165m12.618 1.5H6.013l.838 1.5h10.376z",clipRule:"evenodd"}));const ForwardRef=forwardRef(IconGuiFilterFlowStep0);export default ForwardRef;
|
|
2
2
|
//# sourceMappingURL=icon-gui-filter-flow-step-0.js.map
|