@ably/ui 17.13.0-dev.d6a24f68 → 17.13.1-dev.5fb54a0a

package/AGENTS.md

@@ -39,6 +39,34 @@ This project is intended to primarily be consumed by the Ably website, voltaire
 - **Error Handling**: Wrap external service calls in try-catch, log with logger module
 - **Comments**: JSDoc for props, inline comments for complex logic
 
+### Custom Hooks
+
+- **Naming**: `use` prefix with descriptive name (e.g., `useContentHeight`, `useThemedScrollpoints`)
+- **JSDoc**: Always include for custom hooks, especially performance-related ones
+- **Parameters**: Document with `@param` including types and defaults
+- **Returns**: Document with `@returns` including type and semantic meaning
+- **Performance rationale**: Include "why" in JSDoc when optimizing (e.g., "eliminates forced reflows")
+- **Cleanup**: Always return cleanup function to prevent memory leaks
+- **Shared constants**: Import from `src/core/utils/heights.ts` instead of duplicating
+
+Example:
+
+```typescript
+/**
+ * Tracks element height using ResizeObserver to avoid forced reflows.
+ *
+ * @param ref - React ref to the element to observe
+ * @param initialHeight - Initial height value (default: 0)
+ * @returns Current height in pixels
+ */
+export function useContentHeight(
+  ref: RefObject<HTMLElement>,
+  initialHeight = 0,
+): number {
+  // Implementation...
+}
+```
+
 Keep emojis in the code to a minimum, only introduce them if there is precedent
 in the file you're working on.
 
@@ -51,6 +79,9 @@ this is a given for how we work.
   files in CI and don't want preventable failures. `pnpm lint:fix` should also
   apply our formatting rules while trying to fix most things for you
 - Run tests with `pnpm test` after making file changes
+- When testing with Storybook, use Chrome DevTools Performance tab to verify no forced reflows
+- For performance-related changes, compare before/after metrics and include in commit/PR
+- Use Chrome MCP at `http://localhost:6006` (Storybook) or `http://localhost:4000` (Voltaire) for visual verification
 
 ## Styling Guide
 
@@ -188,6 +219,312 @@ Here's a complete button component demonstrating all patterns:
 >
 ```
 
+## Performance Optimization Guidelines
+
+### When to Optimize
+
+Optimize when Chrome DevTools Performance profiling shows:
+
+- Forced reflows/layouts in event handlers (scroll, resize, input)
+- Long tasks blocking the main thread (>50ms)
+- CPU throttling causing device overheating (especially iOS)
+
+Common anti-patterns causing forced reflows:
+
+- `getBoundingClientRect()` in scroll/resize handlers
+- `clientHeight/scrollHeight/offsetHeight` reads during interactions
+- Synchronous layout queries followed by style changes
+- DOM queries inside throttled/debounced callbacks
+
+### Observer API Patterns
+
+#### IntersectionObserver (Scroll Position Detection)
+
+Use for detecting when elements enter/exit viewport or cross specific boundaries.
+
+**Example:** Header theme changes based on which section is visible
+
+**Key patterns:**
+
+```typescript
+const observerRef = useRef<IntersectionObserver | null>(null);
+const intersectingElementsRef = useRef<Map<string, IntersectionObserverEntry>>(new Map());
+
+useEffect(() => {
+  const intersectingElements = intersectingElementsRef.current;
+
+  observerRef.current = new IntersectionObserver(
+    (entries) => {
+      requestAnimationFrame(() => {
+        // Update tracking map
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            intersectingElements.set(entry.target.id, entry);
+          } else {
+            intersectingElements.delete(entry.target.id);
+          }
+        }
+
+        // Find best match from ALL intersecting elements
+        // (observer only reports changes, not all intersecting)
+        let bestMatch = null;
+        for (const [id, entry] of intersectingElements) {
+          const rect = entry.boundingClientRect ?? entry.target.getBoundingClientRect();
+          // Calculate match quality...
+          if (isBetterMatch) bestMatch = {...};
+        }
+
+        // Only update state if changed
+        if (bestMatch && bestMatch.value !== previousValueRef.current) {
+          previousValueRef.current = bestMatch.value;
+          setState(bestMatch.value);
+        }
+      });
+    },
+    {
+      rootMargin: "-64px 0px 0px 0px", // Adjust for fixed header
+      threshold: 0,
+    }
+  );
+
+  // Observe elements
+  elements.forEach(el => observerRef.current?.observe(el));
+
+  // CRITICAL: Manual initial state check
+  // IntersectionObserver callbacks only fire on CHANGES, not initial observation
+  const timeoutId = setTimeout(() => {
+    // Check which elements currently intersect
+    // Set initial state
+  }, 0);
+
+  return () => {
+    clearTimeout(timeoutId);
+    observerRef.current?.disconnect();
+    observerRef.current = null;
+    intersectingElements.clear();
+  };
+}, [deps]);
+```
+
+**Critical points:**
+
+- Observer only reports state CHANGES, not all intersecting elements
+- Use Map to track currently intersecting elements
+- Manual initial check with `setTimeout(..., 0)` required
+- Batch updates with `requestAnimationFrame()`
+- Track previous value to skip redundant setState
+- **Tiebreaker logic**: When multiple elements have equal distances, use array order (earlier in array wins)
+- Clean up timeout, observer, and Map
+
+**Tiebreaker pattern:**
+
+```typescript
+// When distances are equal, use scrollpoints array order
+if (
+  !bestMatch ||
+  distance < bestMatch.distance ||
+  (distance === bestMatch.distance && scrollpointIndex < bestMatch.index)
+) {
+  bestMatch = { scrollpoint, distance, index: scrollpointIndex };
+}
+```
+
+**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.
+
+#### ResizeObserver (Height/Size Tracking)
+
+Use for tracking element dimensions without synchronous layout reads.
+
+**Example:** Expander content height for expand/collapse animations
+
+**Key patterns:**
+
+```typescript
+const rafIdRef = useRef<number | null>(null);
+const observerRef = useRef<ResizeObserver | null>(null);
+
+useEffect(() => {
+  let isMounted = true;
+
+  observerRef.current = new ResizeObserver((entries) => {
+    // Cancel any pending RAF to avoid stale updates
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+    }
+
+    rafIdRef.current = requestAnimationFrame(() => {
+      rafIdRef.current = null;
+
+      // Guard against updates after unmount
+      if (!isMounted) return;
+
+      const entry = entries[0];
+      if (entry && entry.contentRect) {
+        const newHeight = Math.round(entry.contentRect.height);
+        setState(newHeight);
+      }
+    });
+  });
+
+  observerRef.current.observe(element);
+
+  return () => {
+    isMounted = false;
+    // Cancel pending RAF to prevent setState after unmount
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = null;
+    }
+    observerRef.current?.disconnect();
+    observerRef.current = null;
+  };
+}, [ref]);
+```
+
+**Critical points:**
+
+- Always capture RAF ID and cancel on cleanup
+- Use `isMounted` flag to guard setState calls
+- Cancel pending RAF before scheduling new one
+- ResizeObserver doesn't need initial check (fires immediately on observe)
+- Round numeric values for consistency
+
+### Testing Async Hooks
+
+#### Setup Pattern
+
+```typescript
+describe("useMyHook", () => {
+  let originalIntersectionObserver: typeof IntersectionObserver;
+  let originalRequestAnimationFrame: typeof requestAnimationFrame;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+
+    // CRITICAL: Save originals BEFORE mocking
+    originalIntersectionObserver = global.IntersectionObserver;
+    originalRequestAnimationFrame = global.requestAnimationFrame;
+
+    // Mock global APIs
+    global.IntersectionObserver = vi.fn((callback) => ({
+      observe: vi.fn(),
+      disconnect: vi.fn(),
+    })) as unknown as typeof IntersectionObserver;
+
+    global.requestAnimationFrame = vi.fn((cb) => {
+      cb(0);
+      return 0;
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.useRealTimers();
+    document.body.innerHTML = "";
+
+    // CRITICAL: Restore originals to prevent test pollution
+    global.IntersectionObserver = originalIntersectionObserver;
+    global.requestAnimationFrame = originalRequestAnimationFrame;
+  });
+});
+```
+
+#### Testing Observer Callbacks
+
+```typescript
+it("updates state when observer fires", () => {
+  const elem = document.createElement("div");
+  elem.id = "test";
+  elem.getBoundingClientRect = vi.fn().mockReturnValue({ top: 0, bottom: 200 });
+  document.body.appendChild(elem);
+
+  const { result } = renderHook(() => useMyHook());
+
+  // Advance timers for initial check
+  act(() => {
+    vi.runAllTimers();
+  });
+
+  // Simulate observer callback
+  act(() => {
+    observerCallback(
+      [
+        {
+          target: elem,
+          isIntersecting: true,
+          boundingClientRect: {
+            top: 0,
+            bottom: 200,
+            left: 0,
+            right: 0,
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 200,
+          },
+        } as unknown as IntersectionObserverEntry,
+      ],
+      {} as IntersectionObserver,
+    );
+  });
+
+  expect(result.current).toBe("expected-value");
+});
+```
+
+**Key points:**
+
+- Mock `getBoundingClientRect` on test elements
+- Provide `boundingClientRect` in IntersectionObserverEntry mocks
+- Wrap timer advances and callback calls in `act()`
+- Test both initial state and subsequent updates
+
+### Common Pitfalls Checklist
+
+When writing performance-optimized hooks:
+
+- [ ] RAF cleanup: Store ID, cancel in cleanup
+- [ ] isMounted guard: Prevent setState after unmount
+- [ ] Initial state check: Manual check for IntersectionObserver
+- [ ] Previous value tracking: Skip redundant setState
+- [ ] Map/Set cleanup: Clear in cleanup function
+- [ ] Test mock restoration: Save originals, restore in afterEach
+- [ ] Console warnings: For missing DOM elements (not errors)
+- [ ] Tiebreaker logic: When multiple candidates have equal scores
+
+## Storybook Development
+
+### Testing Interactive Components
+
+- Use `http://localhost:6006` when developing/testing components
+- Create stories that simulate production patterns (e.g., overlapping scrollpoints like Voltaire)
+- Test edge cases in stories (empty arrays, missing DOM elements, rapid state changes)
+
+### Performance Testing in Storybook
+
+1. Open Chrome DevTools → Performance tab
+2. Start recording while interacting with component
+3. Search for forced reflow indicators:
+   - `getBoundingClientRect`
+   - `clientHeight`/`scrollHeight`/`offsetHeight`
+   - "Forced reflow" warnings
+4. Measure total time in layout/reflow (should be <5ms for interactions)
+
+### Simulating Production Patterns
+
+When creating stories for layout-dependent components, replicate real-world scenarios:
+
+Example - Overlapping scrollpoints (like Voltaire):
+
+```tsx
+<div className="relative">
+  <div id="hero" className="absolute top-0 h-32" />
+  <div id="main" className="relative pt-32 h-screen" />
+</div>
+```
+
+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.
+
 ## Git workflow
 
 - Always do work on a new branch, start the branch on the HEAD of `origin/main`

package/core/Expander.js

@@ -1,2 +1,2 @@
-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;
+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;
 //# sourceMappingURL=Expander.js.map

package/core/Expander.js.map

@@ -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"}
+{"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"}

package/core/Flash.js

@@ -1,2 +1,2 @@
-import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{getRemoteDataStore}from"./remote-data-store.js";import ConnectStateWrapper from"./ConnectStateWrapper";import Icon from"./Icon";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[type,closeFlash])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{if(id){removeFlash(id)}},100)};useAutoHide(type,closeFlash);const animateEntry=!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method"],ALLOWED_URI_REGEXP:/^\/[^/]/});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-check-outline",error:"icon-gui-exclamation-triangle-outline",alert:"icon-gui-exclamation-triangle-outline",info:""};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white",info:""};return React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash","data-testid":"ui-flash"},React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-8 flex align-center rounded shadow-container-subtle`},withIcons[type]&&iconColor[type]&&React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-4 self-baseline"}),React.createElement("p",{className:`ui-text-p1 mr-4 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},iconColor[type]&&React.createElement(Icon,{name:"icon-gui-x-mark-outline",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=({flashes})=>{const[flashesWithIds,setFlashesWithIds]=useState([]);const removeFlash=flashId=>setFlashesWithIds(items=>items.filter(item=>item.id!==flashId));useEffect(()=>{if(!flashes?.items?.length)return;setFlashesWithIds(state=>{const newFlashes=(flashes.items??[]).filter(flash=>!state.some(existing=>existing.content===flash.content&&existing.type===flash.type)).map(flash=>({...flash,id:Math.random().toString(36).slice(2),removed:false,removeFlash}));return newFlashes.length>0?[...state,...newFlashes]:state})},[flashes]);return React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>React.createElement(Flash,{key:flash.id,...flash})))};const BackendFlashes=({flashes})=>{useEffect(()=>{const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type,content}})||[];if(transformedFlashes.length>0){const store=getRemoteDataStore();store.dispatch({type:"flash/push",payload:transformedFlashes})}},[flashes]);const WrappedFlashes=ConnectStateWrapper(Flashes,{flashes:selectFlashes});return React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;
+import React,{useEffect,useState,useRef,createContext,useContext,useCallback,useMemo}from"react";import DOMPurify from"dompurify";import Icon from"./Icon";import cn from"./utils/cn";const FLASH_DATA_ID="ui-flashes";const FlashContext=createContext(undefined);const FlashProvider=({children})=>{const[flashes,setFlashes]=useState([]);const removeFlash=useCallback(flashId=>{setFlashes(prev=>prev.filter(item=>item.id!==flashId))},[]);const addFlashes=useCallback(newFlashes=>{setFlashes(prev=>{const withIds=newFlashes.filter(flash=>!prev.some(existing=>existing.content===flash.content&&existing.type===flash.type)).map(flash=>({...flash,id:Math.random().toString(36).slice(2),removed:false,removeFlash}));return[...prev,...withIds]})},[removeFlash]);const contextValue=useMemo(()=>({flashes,addFlashes,removeFlash}),[flashes,addFlashes,removeFlash]);return React.createElement(FlashContext.Provider,{value:contextValue},children)};const useFlashContext=()=>{const context=useContext(FlashContext);if(context===undefined){throw new Error("useFlashContext must be used within FlashProvider")}return context};const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-green-400",notice:"bg-blue-400",info:"bg-blue-400",alert:"bg-orange-600"};const FLASH_TEXT_COLOR={error:"text-neutral-000",success:"text-neutral-1300",notice:"text-neutral-1300",info:"text-neutral-1300",alert:"text-neutral-000"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[type,closeFlash])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{if(id){removeFlash(id)}},100)};useAutoHide(type,closeFlash);const animateEntry=!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method"],ALLOWED_URI_REGEXP:/^\/[^/]/});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-check-outline",error:"icon-gui-exclamation-triangle-outline",alert:"icon-gui-exclamation-triangle-outline",info:""};const iconColor={notice:FLASH_TEXT_COLOR.notice,success:FLASH_TEXT_COLOR.success,error:FLASH_TEXT_COLOR.error,alert:FLASH_TEXT_COLOR.alert,info:""};return React.createElement("div",{className:cn("ui-flash-message ui-grid-px",animateEntry&&"ui-flash-message-enter"),style:style,ref:ref,"data-id":"ui-flash","data-testid":"ui-flash"},React.createElement("div",{className:cn(FLASH_BG_COLOR[type],"p-8 flex align-center rounded shadow-container-subtle")},withIcons[type]&&iconColor[type]&&React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-4 self-baseline"}),React.createElement("p",{className:cn("ui-text-p1 mr-4",FLASH_TEXT_COLOR[type]),dangerouslySetInnerHTML:{__html:safeContent}}),React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},iconColor[type]&&React.createElement(Icon,{name:"icon-gui-x-mark-outline",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=()=>{const{flashes,removeFlash}=useFlashContext();return React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashes.filter(item=>!item.removed).map(flash=>React.createElement(Flash,{key:flash.id,...flash,removeFlash:removeFlash})))};const BackendFlashes=({flashes})=>{const context=useContext(FlashContext);useEffect(()=>{if(!context){console.warn("BackendFlashes must be used within FlashProvider");return}const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type:type,content}});if(transformedFlashes.length>0){context.addFlashes(transformedFlashes)}},[flashes]);if(!context)return null;return React.createElement(Flashes,null)};export{FLASH_DATA_ID,Flashes,FlashProvider,useFlashContext};export default BackendFlashes;
 //# sourceMappingURL=Flash.js.map

package/core/Flash.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Flash.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from \"react\";\nimport DOMPurify from \"dompurify\";\nimport { getRemoteDataStore } from \"./remote-data-store.js\";\nimport ConnectStateWrapper from \"./ConnectStateWrapper\";\nimport Icon from \"./Icon\";\nimport { ColorClass } from \"./styles/colors/types\";\nimport { IconName } from \"./Icon/types\";\n\ntype FlashPropsType = \"error\" | \"success\" | \"notice\" | \"info\" | \"alert\";\n\ntype FlashProps = {\n  id: string;\n  removed: boolean;\n  type: FlashPropsType;\n  content: string;\n  removeFlash: (id: string) => void;\n};\n\ntype FlashesProps = {\n  flashes: { items: Pick<FlashProps, \"type\" | \"content\">[] };\n};\n\ntype BackendFlashesProps = {\n  flashes: string[][];\n};\n\nconst REDUCER_KEY = \"flashes\";\nconst FLASH_DATA_ID = \"ui-flashes\";\n\nconst initialState = { items: [] };\n\nconst reducerFlashes = {\n  [REDUCER_KEY]: (\n    state: {\n      items: FlashProps[];\n    } = initialState,\n    action: { type: string; payload: FlashProps | FlashProps[] },\n  ) => {\n    switch (action.type) {\n      case \"flash/push\": {\n        const flashes = Array.isArray(action.payload)\n          ? action.payload\n          : [action.payload];\n        return { items: [...state.items, ...flashes] };\n      }\n      default:\n        return state;\n    }\n  },\n};\n\n// Not cool but redux isn't a long term plan here\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst selectFlashes = (store: any): { items: FlashProps[] } =>\n  store.getState()[REDUCER_KEY];\n\nconst FLASH_BG_COLOR = {\n  error: \"bg-gui-error\",\n  success: \"bg-zingy-green\",\n  notice: \"bg-electric-cyan\",\n  info: \"bg-electric-cyan\",\n  alert: \"bg-active-orange\",\n};\n\nconst FLASH_TEXT_COLOR = {\n  error: \"text-white\",\n  success: \"text-cool-black\",\n  notice: \"text-cool-black\",\n  info: \"text-cool-black\",\n  alert: \"text-white\",\n};\n\nconst AUTO_HIDE = [\"success\", \"info\", \"notice\"];\nconst AUTO_HIDE_TIME = 8000;\n\nconst useAutoHide = (type: string, closeFlash: () => void) => {\n  const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (AUTO_HIDE.includes(type)) {\n      timeoutId.current = setTimeout(() => {\n        closeFlash();\n      }, AUTO_HIDE_TIME);\n    }\n\n    return () => {\n      if (timeoutId.current) {\n        clearTimeout(timeoutId.current);\n      }\n    };\n  }, [type, closeFlash]);\n};\n\nconst Flash = ({ id, type, content, removeFlash }: FlashProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [closed, setClosed] = useState(false);\n  const [flashHeight, setFlashHeight] = useState(0);\n\n  const closeFlash = () => {\n    if (ref.current) {\n      setFlashHeight(ref.current.getBoundingClientRect().height);\n    }\n\n    setClosed(true);\n\n    setTimeout(() => {\n      if (id) {\n        removeFlash(id);\n      }\n    }, 100);\n  };\n\n  useAutoHide(type, closeFlash);\n\n  const animateEntry = !closed;\n\n  let style;\n\n  if (flashHeight && !closed) {\n    style = { height: `${flashHeight}px` };\n  } else if (closed) {\n    style = { height: 0, marginTop: 0, zIndex: -1 };\n  } else {\n    style = {};\n  }\n\n  const safeContent = DOMPurify.sanitize(content, {\n    ALLOWED_TAGS: [\"a\"],\n    ALLOWED_ATTR: [\"href\", \"data-method\"],\n    ALLOWED_URI_REGEXP: /^\\/[^/]/,\n  });\n\n  const withIcons: Record<FlashPropsType, IconName | \"\"> = {\n    notice: \"icon-gui-ably-badge\",\n    success: \"icon-gui-check-outline\",\n    error: \"icon-gui-exclamation-triangle-outline\",\n    alert: \"icon-gui-exclamation-triangle-outline\",\n    info: \"\",\n  };\n\n  const iconColor: Record<FlashPropsType, ColorClass | \"\"> = {\n    notice: \"text-cool-black\",\n    success: \"text-cool-black\",\n    error: \"text-white\",\n    alert: \"text-white\",\n    info: \"\",\n  };\n\n  return (\n    <div\n      className={`ui-flash-message ui-grid-px ${\n        animateEntry ? \"ui-flash-message-enter\" : \"\"\n      }`}\n      style={style}\n      ref={ref}\n      data-id=\"ui-flash\"\n      data-testid=\"ui-flash\"\n    >\n      <div\n        className={`${FLASH_BG_COLOR[type]} p-8 flex align-center rounded shadow-container-subtle`}\n      >\n        {withIcons[type] && iconColor[type] && (\n          <Icon\n            name={withIcons[type]}\n            color={iconColor[type]}\n            size=\"1.5rem\"\n            additionalCSS=\"mr-4 self-baseline\"\n          />\n        )}\n        <p\n          className={`ui-text-p1 mr-4 ${FLASH_TEXT_COLOR[type]}`}\n          dangerouslySetInnerHTML={{ __html: safeContent }}\n        />\n        <button\n          type=\"button\"\n          className=\"p-0 ml-auto self-start focus:outline-none\"\n          onClick={closeFlash}\n        >\n          {iconColor[type] && (\n            <Icon\n              name=\"icon-gui-x-mark-outline\"\n              color={iconColor[type]}\n              size=\"1.5rem\"\n              additionalCSS=\"transition-colors\"\n            />\n          )}\n        </button>\n      </div>\n    </div>\n  );\n};\n\nconst Flashes = ({ flashes }: FlashesProps) => {\n  const [flashesWithIds, setFlashesWithIds] = useState<FlashProps[]>([]);\n\n  const removeFlash = (flashId: string) =>\n    setFlashesWithIds((items) => items.filter((item) => item.id !== flashId));\n\n  useEffect(() => {\n    if (!flashes?.items?.length) return;\n\n    setFlashesWithIds((state) => {\n      const newFlashes = (flashes.items ?? [])\n        .filter(\n          (flash) =>\n            !state.some(\n              (existing) =>\n                existing.content === flash.content &&\n                existing.type === flash.type,\n            ),\n        )\n        .map((flash) => ({\n          ...flash,\n          id: Math.random().toString(36).slice(2),\n          removed: false,\n          removeFlash,\n        }));\n\n      return newFlashes.length > 0 ? [...state, ...newFlashes] : state;\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [flashes]);\n\n  return (\n    <div className=\"ui-flash\" data-id={FLASH_DATA_ID}>\n      {flashesWithIds\n        .filter((item) => !item.removed)\n        .map((flash) => (\n          <Flash key={flash.id} {...flash} />\n        ))}\n    </div>\n  );\n};\n\nconst BackendFlashes = ({ flashes }: BackendFlashesProps) => {\n  useEffect(() => {\n    const transformedFlashes =\n      flashes.map((flash) => {\n        const [type, content] = flash;\n        return { type, content };\n      }) || [];\n\n    if (transformedFlashes.length > 0) {\n      const store = getRemoteDataStore();\n\n      store.dispatch({\n        type: \"flash/push\",\n        payload: transformedFlashes,\n      });\n    }\n  }, [flashes]);\n\n  const WrappedFlashes = ConnectStateWrapper(Flashes, {\n    flashes: selectFlashes,\n  });\n\n  return <WrappedFlashes />;\n};\n\nexport { reducerFlashes, FLASH_DATA_ID, Flashes };\nexport default BackendFlashes;\n"],"names":["React","useEffect","useState","useRef","DOMPurify","getRemoteDataStore","ConnectStateWrapper","Icon","REDUCER_KEY","FLASH_DATA_ID","initialState","items","reducerFlashes","state","action","type","flashes","Array","isArray","payload","selectFlashes","store","getState","FLASH_BG_COLOR","error","success","notice","info","alert","FLASH_TEXT_COLOR","AUTO_HIDE","AUTO_HIDE_TIME","useAutoHide","closeFlash","timeoutId","includes","current","setTimeout","clearTimeout","Flash","id","content","removeFlash","ref","closed","setClosed","flashHeight","setFlashHeight","getBoundingClientRect","height","animateEntry","style","marginTop","zIndex","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","ALLOWED_URI_REGEXP","withIcons","iconColor","div","className","data-id","data-testid","name","color","size","additionalCSS","p","dangerouslySetInnerHTML","__html","button","onClick","Flashes","flashesWithIds","setFlashesWithIds","flashId","filter","item","length","newFlashes","flash","some","existing","map","Math","random","toString","slice","removed","key","BackendFlashes","transformedFlashes","dispatch","WrappedFlashes"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,QAAQ,CAAEC,MAAM,KAAQ,OAAQ,AAC3D,QAAOC,cAAe,WAAY,AAClC,QAASC,kBAAkB,KAAQ,wBAAyB,AAC5D,QAAOC,wBAAyB,uBAAwB,AACxD,QAAOC,SAAU,QAAS,CAsB1B,MAAMC,YAAc,UACpB,MAAMC,cAAgB,aAEtB,MAAMC,aAAe,CAAEC,MAAO,EAAE,AAAC,EAEjC,MAAMC,eAAiB,CACrB,CAACJ,YAAY,CAAE,CACbK,MAEIH,YAAY,CAChBI,UAEA,OAAQA,OAAOC,IAAI,EACjB,IAAK,aAAc,CACjB,MAAMC,QAAUC,MAAMC,OAAO,CAACJ,OAAOK,OAAO,EACxCL,OAAOK,OAAO,CACd,CAACL,OAAOK,OAAO,CAAC,CACpB,MAAO,CAAER,MAAO,IAAIE,MAAMF,KAAK,IAAKK,QAAQ,AAAC,CAC/C,CACA,QACE,OAAOH,KACX,CACF,CACF,EAIA,MAAMO,cAAgB,AAACC,OACrBA,MAAMC,QAAQ,EAAE,CAACd,YAAY,CAE/B,MAAMe,eAAiB,CACrBC,MAAO,eACPC,QAAS,iBACTC,OAAQ,mBACRC,KAAM,mBACNC,MAAO,kBACT,EAEA,MAAMC,iBAAmB,CACvBL,MAAO,aACPC,QAAS,kBACTC,OAAQ,kBACRC,KAAM,kBACNC,MAAO,YACT,EAEA,MAAME,UAAY,CAAC,UAAW,OAAQ,SAAS,CAC/C,MAAMC,eAAiB,IAEvB,MAAMC,YAAc,CAACjB,KAAckB,cACjC,MAAMC,UAAY/B,OAA6C,MAE/DF,UAAU,KACR,GAAI6B,UAAUK,QAAQ,CAACpB,MAAO,CAC5BmB,UAAUE,OAAO,CAAGC,WAAW,KAC7BJ,YACF,EAAGF,eACL,CAEA,MAAO,KACL,GAAIG,UAAUE,OAAO,CAAE,CACrBE,aAAaJ,UAAUE,OAAO,CAChC,CACF,CACF,EAAG,CAACrB,KAAMkB,WAAW,CACvB,EAEA,MAAMM,MAAQ,CAAC,CAAEC,EAAE,CAAEzB,IAAI,CAAE0B,OAAO,CAAEC,WAAW,CAAc,IAC3D,MAAMC,IAAMxC,OAAuB,MACnC,KAAM,CAACyC,OAAQC,UAAU,CAAG3C,SAAS,OACrC,KAAM,CAAC4C,YAAaC,eAAe,CAAG7C,SAAS,GAE/C,MAAM+B,WAAa,KACjB,GAAIU,IAAIP,OAAO,CAAE,CACfW,eAAeJ,IAAIP,OAAO,CAACY,qBAAqB,GAAGC,MAAM,CAC3D,CAEAJ,UAAU,MAEVR,WAAW,KACT,GAAIG,GAAI,CACNE,YAAYF,GACd,CACF,EAAG,IACL,EAEAR,YAAYjB,KAAMkB,YAElB,MAAMiB,aAAe,CAACN,OAEtB,IAAIO,MAEJ,GAAIL,aAAe,CAACF,OAAQ,CAC1BO,MAAQ,CAAEF,OAAQ,CAAC,EAAEH,YAAY,EAAE,CAAC,AAAC,CACvC,MAAO,GAAIF,OAAQ,CACjBO,MAAQ,CAAEF,OAAQ,EAAGG,UAAW,EAAGC,OAAQ,CAAC,CAAE,CAChD,KAAO,CACLF,MAAQ,CAAC,CACX,CAEA,MAAMG,YAAclD,UAAUmD,QAAQ,CAACd,QAAS,CAC9Ce,aAAc,CAAC,IAAI,CACnBC,aAAc,CAAC,OAAQ,cAAc,CACrCC,mBAAoB,SACtB,GAEA,MAAMC,UAAmD,CACvDjC,OAAQ,sBACRD,QAAS,yBACTD,MAAO,wCACPI,MAAO,wCACPD,KAAM,EACR,EAEA,MAAMiC,UAAqD,CACzDlC,OAAQ,kBACRD,QAAS,kBACTD,MAAO,aACPI,MAAO,aACPD,KAAM,EACR,EAEA,OACE,oBAACkC,OACCC,UAAW,CAAC,4BAA4B,EACtCZ,aAAe,yBAA2B,GAC3C,CAAC,CACFC,MAAOA,MACPR,IAAKA,IACLoB,UAAQ,WACRC,cAAY,YAEZ,oBAACH,OACCC,UAAW,CAAC,EAAEvC,cAAc,CAACR,KAAK,CAAC,sDAAsD,CAAC,EAEzF4C,SAAS,CAAC5C,KAAK,EAAI6C,SAAS,CAAC7C,KAAK,EACjC,oBAACR,MACC0D,KAAMN,SAAS,CAAC5C,KAAK,CACrBmD,MAAON,SAAS,CAAC7C,KAAK,CACtBoD,KAAK,SACLC,cAAc,uBAGlB,oBAACC,KACCP,UAAW,CAAC,gBAAgB,EAAEjC,gBAAgB,CAACd,KAAK,CAAC,CAAC,CACtDuD,wBAAyB,CAAEC,OAAQjB,WAAY,IAEjD,oBAACkB,UACCzD,KAAK,SACL+C,UAAU,4CACVW,QAASxC,YAER2B,SAAS,CAAC7C,KAAK,EACd,oBAACR,MACC0D,KAAK,0BACLC,MAAON,SAAS,CAAC7C,KAAK,CACtBoD,KAAK,SACLC,cAAc,wBAO5B,EAEA,MAAMM,QAAU,CAAC,CAAE1D,OAAO,CAAgB,IACxC,KAAM,CAAC2D,eAAgBC,kBAAkB,CAAG1E,SAAuB,EAAE,EAErE,MAAMwC,YAAc,AAACmC,SACnBD,kBAAkB,AAACjE,OAAUA,MAAMmE,MAAM,CAAC,AAACC,MAASA,KAAKvC,EAAE,GAAKqC,UAElE5E,UAAU,KACR,GAAI,CAACe,SAASL,OAAOqE,OAAQ,OAE7BJ,kBAAkB,AAAC/D,QACjB,MAAMoE,WAAa,AAACjE,CAAAA,QAAQL,KAAK,EAAI,EAAE,AAAD,EACnCmE,MAAM,CACL,AAACI,OACC,CAACrE,MAAMsE,IAAI,CACT,AAACC,UACCA,SAAS3C,OAAO,GAAKyC,MAAMzC,OAAO,EAClC2C,SAASrE,IAAI,GAAKmE,MAAMnE,IAAI,GAGnCsE,GAAG,CAAC,AAACH,OAAW,CAAA,CACf,GAAGA,KAAK,CACR1C,GAAI8C,KAAKC,MAAM,GAAGC,QAAQ,CAAC,IAAIC,KAAK,CAAC,GACrCC,QAAS,MACThD,WACF,CAAA,GAEF,OAAOuC,WAAWD,MAAM,CAAG,EAAI,IAAInE,SAAUoE,WAAW,CAAGpE,KAC7D,EAEF,EAAG,CAACG,QAAQ,EAEZ,OACE,oBAAC6C,OAAIC,UAAU,WAAWC,UAAStD,eAChCkE,eACEG,MAAM,CAAC,AAACC,MAAS,CAACA,KAAKW,OAAO,EAC9BL,GAAG,CAAC,AAACH,OACJ,oBAAC3C,OAAMoD,IAAKT,MAAM1C,EAAE,CAAG,GAAG0C,KAAK,IAIzC,EAEA,MAAMU,eAAiB,CAAC,CAAE5E,OAAO,CAAuB,IACtDf,UAAU,KACR,MAAM4F,mBACJ7E,QAAQqE,GAAG,CAAC,AAACH,QACX,KAAM,CAACnE,KAAM0B,QAAQ,CAAGyC,MACxB,MAAO,CAAEnE,KAAM0B,OAAQ,CACzB,IAAM,EAAE,CAEV,GAAIoD,mBAAmBb,MAAM,CAAG,EAAG,CACjC,MAAM3D,MAAQhB,qBAEdgB,MAAMyE,QAAQ,CAAC,CACb/E,KAAM,aACNI,QAAS0E,kBACX,EACF,CACF,EAAG,CAAC7E,QAAQ,EAEZ,MAAM+E,eAAiBzF,oBAAoBoE,QAAS,CAClD1D,QAASI,aACX,GAEA,OAAO,oBAAC2E,oBACV,CAEA,QAASnF,cAAc,CAAEH,aAAa,CAAEiE,OAAO,CAAG,AAClD,gBAAekB,cAAe"}
+{"version":3,"sources":["../../src/core/Flash.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useState,\n  useRef,\n  createContext,\n  useContext,\n  useCallback,\n  useMemo,\n  PropsWithChildren,\n} from \"react\";\nimport DOMPurify from \"dompurify\";\nimport Icon from \"./Icon\";\nimport { ColorClass } from \"./styles/colors/types\";\nimport { IconName } from \"./Icon/types\";\nimport cn from \"./utils/cn\";\n\ntype FlashPropsType = \"error\" | \"success\" | \"notice\" | \"info\" | \"alert\";\n\ntype FlashProps = {\n  id: string;\n  removed: boolean;\n  type: FlashPropsType;\n  content: string;\n  removeFlash: (id: string) => void;\n};\n\ntype BackendFlashesProps = {\n  flashes: string[][];\n};\n\nconst FLASH_DATA_ID = \"ui-flashes\";\n\ntype FlashContextType = {\n  flashes: FlashProps[];\n  addFlashes: (flashes: Pick<FlashProps, \"type\" | \"content\">[]) => void;\n  removeFlash: (id: string) => void;\n};\n\nconst FlashContext = createContext<FlashContextType | undefined>(undefined);\n\ntype FlashProviderProps = PropsWithChildren;\n\nconst FlashProvider = ({ children }: FlashProviderProps) => {\n  const [flashes, setFlashes] = useState<FlashProps[]>([]);\n\n  const removeFlash = useCallback((flashId: string) => {\n    setFlashes((prev) => prev.filter((item) => item.id !== flashId));\n  }, []);\n\n  const addFlashes = useCallback(\n    (newFlashes: Pick<FlashProps, \"type\" | \"content\">[]) => {\n      setFlashes((prev) => {\n        const withIds = newFlashes\n          .filter(\n            (flash) =>\n              !prev.some(\n                (existing) =>\n                  existing.content === flash.content &&\n                  existing.type === flash.type,\n              ),\n          )\n          .map((flash) => ({\n            ...flash,\n            id: Math.random().toString(36).slice(2),\n            removed: false,\n            removeFlash,\n          }));\n\n        return [...prev, ...withIds];\n      });\n    },\n    [removeFlash],\n  );\n\n  const contextValue = useMemo(\n    () => ({ flashes, addFlashes, removeFlash }),\n    [flashes, addFlashes, removeFlash],\n  );\n\n  return (\n    <FlashContext.Provider value={contextValue}>\n      {children}\n    </FlashContext.Provider>\n  );\n};\n\nconst useFlashContext = () => {\n  const context = useContext(FlashContext);\n  if (context === undefined) {\n    throw new Error(\"useFlashContext must be used within FlashProvider\");\n  }\n  return context;\n};\n\nconst FLASH_BG_COLOR = {\n  error: \"bg-gui-error\",\n  success: \"bg-green-400\",\n  notice: \"bg-blue-400\",\n  info: \"bg-blue-400\",\n  alert: \"bg-orange-600\",\n};\n\nconst FLASH_TEXT_COLOR = {\n  error: \"text-neutral-000\",\n  success: \"text-neutral-1300\",\n  notice: \"text-neutral-1300\",\n  info: \"text-neutral-1300\",\n  alert: \"text-neutral-000\",\n};\n\nconst AUTO_HIDE = [\"success\", \"info\", \"notice\"];\nconst AUTO_HIDE_TIME = 8000;\n\nconst useAutoHide = (type: string, closeFlash: () => void) => {\n  const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (AUTO_HIDE.includes(type)) {\n      timeoutId.current = setTimeout(() => {\n        closeFlash();\n      }, AUTO_HIDE_TIME);\n    }\n\n    return () => {\n      if (timeoutId.current) {\n        clearTimeout(timeoutId.current);\n      }\n    };\n  }, [type, closeFlash]);\n};\n\nconst Flash = ({ id, type, content, removeFlash }: FlashProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [closed, setClosed] = useState(false);\n  const [flashHeight, setFlashHeight] = useState(0);\n\n  const closeFlash = () => {\n    if (ref.current) {\n      setFlashHeight(ref.current.getBoundingClientRect().height);\n    }\n\n    setClosed(true);\n\n    setTimeout(() => {\n      if (id) {\n        removeFlash(id);\n      }\n    }, 100);\n  };\n\n  useAutoHide(type, closeFlash);\n\n  const animateEntry = !closed;\n\n  let style;\n\n  if (flashHeight && !closed) {\n    style = { height: `${flashHeight}px` };\n  } else if (closed) {\n    style = { height: 0, marginTop: 0, zIndex: -1 };\n  } else {\n    style = {};\n  }\n\n  const safeContent = DOMPurify.sanitize(content, {\n    ALLOWED_TAGS: [\"a\"],\n    ALLOWED_ATTR: [\"href\", \"data-method\"],\n    ALLOWED_URI_REGEXP: /^\\/[^/]/,\n  });\n\n  const withIcons: Record<FlashPropsType, IconName | \"\"> = {\n    notice: \"icon-gui-ably-badge\",\n    success: \"icon-gui-check-outline\",\n    error: \"icon-gui-exclamation-triangle-outline\",\n    alert: \"icon-gui-exclamation-triangle-outline\",\n    info: \"\",\n  };\n\n  const iconColor: Record<FlashPropsType, ColorClass | \"\"> = {\n    notice: FLASH_TEXT_COLOR.notice as ColorClass,\n    success: FLASH_TEXT_COLOR.success as ColorClass,\n    error: FLASH_TEXT_COLOR.error as ColorClass,\n    alert: FLASH_TEXT_COLOR.alert as ColorClass,\n    info: \"\",\n  };\n\n  return (\n    <div\n      className={cn(\n        \"ui-flash-message ui-grid-px\",\n        animateEntry && \"ui-flash-message-enter\",\n      )}\n      style={style}\n      ref={ref}\n      data-id=\"ui-flash\"\n      data-testid=\"ui-flash\"\n    >\n      <div\n        className={cn(\n          FLASH_BG_COLOR[type],\n          \"p-8 flex align-center rounded shadow-container-subtle\",\n        )}\n      >\n        {withIcons[type] && iconColor[type] && (\n          <Icon\n            name={withIcons[type]}\n            color={iconColor[type]}\n            size=\"1.5rem\"\n            additionalCSS=\"mr-4 self-baseline\"\n          />\n        )}\n        <p\n          className={cn(\"ui-text-p1 mr-4\", FLASH_TEXT_COLOR[type])}\n          dangerouslySetInnerHTML={{ __html: safeContent }}\n        />\n        <button\n          type=\"button\"\n          className=\"p-0 ml-auto self-start focus:outline-none\"\n          onClick={closeFlash}\n        >\n          {iconColor[type] && (\n            <Icon\n              name=\"icon-gui-x-mark-outline\"\n              color={iconColor[type]}\n              size=\"1.5rem\"\n              additionalCSS=\"transition-colors\"\n            />\n          )}\n        </button>\n      </div>\n    </div>\n  );\n};\n\nconst Flashes = () => {\n  const { flashes, removeFlash } = useFlashContext();\n\n  return (\n    <div className=\"ui-flash\" data-id={FLASH_DATA_ID}>\n      {flashes\n        .filter((item) => !item.removed)\n        .map((flash) => (\n          <Flash key={flash.id} {...flash} removeFlash={removeFlash} />\n        ))}\n    </div>\n  );\n};\n\nconst BackendFlashes = ({ flashes }: BackendFlashesProps) => {\n  const context = useContext(FlashContext);\n\n  useEffect(() => {\n    if (!context) {\n      console.warn(\"BackendFlashes must be used within FlashProvider\");\n      return;\n    }\n\n    const transformedFlashes = flashes.map((flash) => {\n      const [type, content] = flash;\n      return { type: type as FlashPropsType, content };\n    });\n\n    if (transformedFlashes.length > 0) {\n      context.addFlashes(transformedFlashes);\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [flashes]);\n\n  if (!context) return null;\n\n  return <Flashes />;\n};\n\nexport { FLASH_DATA_ID, Flashes, FlashProvider, useFlashContext };\nexport default BackendFlashes;\n"],"names":["React","useEffect","useState","useRef","createContext","useContext","useCallback","useMemo","DOMPurify","Icon","cn","FLASH_DATA_ID","FlashContext","undefined","FlashProvider","children","flashes","setFlashes","removeFlash","flashId","prev","filter","item","id","addFlashes","newFlashes","withIds","flash","some","existing","content","type","map","Math","random","toString","slice","removed","contextValue","Provider","value","useFlashContext","context","Error","FLASH_BG_COLOR","error","success","notice","info","alert","FLASH_TEXT_COLOR","AUTO_HIDE","AUTO_HIDE_TIME","useAutoHide","closeFlash","timeoutId","includes","current","setTimeout","clearTimeout","Flash","ref","closed","setClosed","flashHeight","setFlashHeight","getBoundingClientRect","height","animateEntry","style","marginTop","zIndex","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","ALLOWED_URI_REGEXP","withIcons","iconColor","div","className","data-id","data-testid","name","color","size","additionalCSS","p","dangerouslySetInnerHTML","__html","button","onClick","Flashes","key","BackendFlashes","console","warn","transformedFlashes","length"],"mappings":"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"}

package/core/Icon/components/icon-display-ephemeral-messages-dark-col.js

@@ -0,0 +1,2 @@
+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;
+//# sourceMappingURL=icon-display-ephemeral-messages-dark-col.js.map

package/core/Icon/components/icon-display-ephemeral-messages-dark-col.js.map

@@ -0,0 +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"}

package/core/Icon/components/icon-display-message-annotations-dark-col.js

@@ -0,0 +1,2 @@
+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;
+//# sourceMappingURL=icon-display-message-annotations-dark-col.js.map

package/core/Icon/components/icon-display-message-annotations-dark-col.js.map

@@ -0,0 +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"}

package/core/Icon/components/icon-gui-square-3-stack-3d.js

@@ -0,0 +1,2 @@
+import*as React from"react";import{forwardRef}from"react";const IconGuiSquare3Stack3d=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{stroke:"#03020D",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3"}));const ForwardRef=forwardRef(IconGuiSquare3Stack3d);export default ForwardRef;
+//# sourceMappingURL=icon-gui-square-3-stack-3d.js.map

package/core/Icon/components/icon-gui-square-3-stack-3d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/core/Icon/components/icon-gui-square-3-stack-3d.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 IconGuiSquare3Stack3d = ({\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=\"currentColor\" viewBox=\"0 0 24 24\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke=\"#03020D\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3\" /></svg>;\nconst ForwardRef = forwardRef(IconGuiSquare3Stack3d);\nexport default ForwardRef;"],"names":["React","forwardRef","IconGuiSquare3Stack3d","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","path","stroke","strokeLinecap","strokeLinejoin","strokeWidth","d","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,sBAAwB,CAAC,CAC7BC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,GAAIC,OAAQ,GAAIC,KAAK,eAAeC,QAAQ,YAAYN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,QAAKC,OAAO,UAAUC,cAAc,QAAQC,eAAe,QAAQC,YAAa,IAAKC,EAAE,yMACtW,MAAMC,WAAapB,WAAWC,sBAC9B,gBAAemB,UAAW"}