@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.
Files changed (61) hide show
  1. package/AGENTS.md +337 -0
  2. package/core/Accordion/types.js.map +1 -1
  3. package/core/Accordion.js +1 -1
  4. package/core/Accordion.js.map +1 -1
  5. package/core/Expander.js +1 -1
  6. package/core/Expander.js.map +1 -1
  7. package/core/Icon/components/icon-display-ephemeral-messages-dark-col.js +2 -0
  8. package/core/Icon/components/icon-display-ephemeral-messages-dark-col.js.map +1 -0
  9. package/core/Icon/components/icon-display-message-annotations-dark-col.js +2 -0
  10. package/core/Icon/components/icon-display-message-annotations-dark-col.js.map +1 -0
  11. package/core/Icon/components/icon-gui-checklist-checked.js +1 -1
  12. package/core/Icon/components/icon-gui-checklist-checked.js.map +1 -1
  13. package/core/Icon/components/icon-gui-code-doc.js +1 -1
  14. package/core/Icon/components/icon-gui-code-doc.js.map +1 -1
  15. package/core/Icon/components/icon-gui-cursor.js +1 -1
  16. package/core/Icon/components/icon-gui-cursor.js.map +1 -1
  17. package/core/Icon/components/icon-gui-expand.js +1 -1
  18. package/core/Icon/components/icon-gui-expand.js.map +1 -1
  19. package/core/Icon/components/icon-gui-filter-flow-step-0.js +1 -1
  20. package/core/Icon/components/icon-gui-filter-flow-step-0.js.map +1 -1
  21. package/core/Icon/components/icon-gui-flower-growth.js +1 -1
  22. package/core/Icon/components/icon-gui-flower-growth.js.map +1 -1
  23. package/core/Icon/components/icon-gui-glasses.js +1 -1
  24. package/core/Icon/components/icon-gui-glasses.js.map +1 -1
  25. package/core/Icon/components/icon-gui-mouse.js +1 -1
  26. package/core/Icon/components/icon-gui-mouse.js.map +1 -1
  27. package/core/Icon/components/icon-gui-pitfall.js +1 -1
  28. package/core/Icon/components/icon-gui-pitfall.js.map +1 -1
  29. package/core/Icon/components/icon-gui-quote-marks-fill.js +1 -1
  30. package/core/Icon/components/icon-gui-quote-marks-fill.js.map +1 -1
  31. package/core/Icon/components/index.js +1 -1
  32. package/core/Icon/components/index.js.map +1 -1
  33. package/core/Icon/computed-icons/display-icons.js +1 -1
  34. package/core/Icon/computed-icons/display-icons.js.map +1 -1
  35. package/core/hooks/use-content-height.js +1 -1
  36. package/core/hooks/use-content-height.js.map +1 -1
  37. package/core/hooks/use-themed-scrollpoints.js +1 -1
  38. package/core/hooks/use-themed-scrollpoints.js.map +1 -1
  39. package/core/hooks/use-themed-scrollpoints.test.js +1 -1
  40. package/core/hooks/use-themed-scrollpoints.test.js.map +1 -1
  41. package/core/icons/display/icon-display-ephemeral-messages-dark-col.svg +6 -0
  42. package/core/icons/display/icon-display-message-annotations-dark-col.svg +11 -0
  43. package/core/icons/gui/icon-gui-checklist-checked.svg +1 -1
  44. package/core/icons/gui/icon-gui-code-doc.svg +1 -1
  45. package/core/icons/gui/icon-gui-cursor.svg +1 -1
  46. package/core/icons/gui/icon-gui-expand.svg +1 -1
  47. package/core/icons/gui/icon-gui-filter-flow-step-0.svg +3 -3
  48. package/core/icons/gui/icon-gui-flower-growth.svg +1 -1
  49. package/core/icons/gui/icon-gui-glasses.svg +1 -1
  50. package/core/icons/gui/icon-gui-mouse.svg +1 -1
  51. package/core/icons/gui/icon-gui-pitfall.svg +1 -1
  52. package/core/icons/gui/icon-gui-quote-marks-fill.svg +2 -2
  53. package/core/insights/posthog.js +1 -1
  54. package/core/insights/posthog.js.map +1 -1
  55. package/core/sprites-display.svg +1 -1
  56. package/core/sprites-gui.svg +1 -1
  57. package/index.d.ts +38 -13
  58. package/package.json +8 -8
  59. package/core/CookieMessage/component.css +0 -15
  60. package/core/CookieMessage.js +0 -2
  61. 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":"AA+CA,OAAO,MAAMA,gBAAkB,CAAC,UAAW,cAAe,SAAS,AAAU"}
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,React.createElement("span",null,name),!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,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,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;
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
@@ -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
@@ -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,uFACAL,oBAGDK,SACIJ,qBAAuB,cACvBC,qBAAuB,eAMxC,CAEA,gBAAeN,QAAS"}
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:"#03020D",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;
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=\"#03020D\" 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,UAAUK,SAAS,UAAUC,EAAE,wUAAwUC,SAAS,aACjoB,MAAMC,WAAalB,WAAWC,wBAC9B,gBAAeiB,UAAW"}
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:"#03020D",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;
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=\"#03020D\" 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,UAAUK,SAAS,UAAUC,EAAE,oiBAAoiBC,SAAS,aAC71B,MAAMC,WAAalB,WAAWC,eAC9B,gBAAeiB,UAAW"}
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:"#03020D",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;
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=\"#03020D\" 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,UAAUC,eAAe,QAAQC,YAAa,IAAKC,EAAE,0KACxU,MAAMC,WAAanB,WAAWC,cAC9B,gBAAekB,UAAW"}
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:"#03020D",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;
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=\"#03020D\" 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,UAAUK,SAAS,UAAUC,EAAE,mKAAmKC,SAAS,YAAY,oBAACH,QAAKI,OAAO,OAAOC,cAAc,QAAQC,YAAa,IAAKJ,EAAE,mBACtiB,MAAMK,WAAarB,WAAWC,cAC9B,gBAAeoB,UAAW"}
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:"#03020D",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;
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